Label compare result columns with Key / Compare / Display roles.

Make field purpose visible in the sticky table header so reviewers can tell identity vs check vs context at a glance.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-09-18 09:31:43 +08:00
parent 97796478b0
commit bf35c0594e
2 changed files with 84 additions and 17 deletions

View file

@ -2254,25 +2254,41 @@ export function BizComparePage() {
<th className="bs-cmp-col-kind">{t("bizCompare.colKind")}</th>
<th className="bs-cmp-col-fail">{t("bizCompare.colFailFields")}</th>
{resultColumns.keys.map((k) => (
<th key={k}>{k}</th>
))}
{resultColumns.extras.map((f) => (
<th
key={f}
className={
resultColumns.compareSet.has(f)
? "bs-cmp-col-compare"
: "bs-cmp-col-display"
}
title={
resultColumns.compareSet.has(f)
? t("bizCompare.compareFields")
: t("bizCompare.displayField")
}
>
{f}
<th key={k} className="bs-cmp-col-key">
<span className="bs-cmp-th">
<span className="bs-cmp-th__role bs-cmp-th__role--key">
{t("bizCompare.keyFields")}
</span>
<span className="bs-cmp-th__name">{k}</span>
</span>
</th>
))}
{resultColumns.extras.map((f) => {
const isCmp = resultColumns.compareSet.has(f);
return (
<th
key={f}
className={
isCmp ? "bs-cmp-col-compare" : "bs-cmp-col-display"
}
>
<span className="bs-cmp-th">
<span
className={`bs-cmp-th__role ${
isCmp
? "bs-cmp-th__role--compare"
: "bs-cmp-th__role--display"
}`}
>
{isCmp
? t("bizCompare.compareFields")
: t("bizCompare.displayField")}
</span>
<span className="bs-cmp-th__name">{f}</span>
</span>
</th>
);
})}
</tr>
</thead>
<tbody>