From bf6e870b72b744ba56d06ef7e0fc0c61e15a2545 Mon Sep 17 00:00:00 2001 From: oliver Date: Mon, 21 Sep 2026 16:22:50 +0800 Subject: [PATCH] Unify compare header dividers and nest Result/Detail under Verdict like other groups. Co-authored-by: Cursor --- web/src/i18n/en.ts | 2 + web/src/i18n/zh.ts | 2 + web/src/index.css | 83 ++--------- web/src/pages/network/BizComparePage.tsx | 170 +++++++++++------------ 4 files changed, 97 insertions(+), 160 deletions(-) diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts index 0878bc5..a39520a 100644 --- a/web/src/i18n/en.ts +++ b/web/src/i18n/en.ts @@ -506,6 +506,8 @@ const en = { colMode: "Mode", colStatus: "Status", colKind: "Verdict", + colResult: "Result", + colDetail: "Detail", colFailFields: "Failed fields", colActions: "Actions", colKey: "Identity", diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts index 2d5e1d4..b467bc4 100644 --- a/web/src/i18n/zh.ts +++ b/web/src/i18n/zh.ts @@ -503,6 +503,8 @@ const zh = { colMode: "模式", colStatus: "状态", colKind: "结论", + colResult: "结果", + colDetail: "明细", colFailFields: "失败项", colActions: "操作", colKey: "身份", diff --git a/web/src/index.css b/web/src/index.css index c8f244a..8efa9e7 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -12214,10 +12214,7 @@ body:has(.bs-cmp-board:fullscreen) { border-collapse: separate; border-spacing: 0; --bs-cmp-group-h: 30px; - --bs-cmp-zone-line: rgba(148, 163, 184, 0.42); - --bs-cmp-zone-key: #3b82f6; - --bs-cmp-zone-compare: #f59e0b; - --bs-cmp-zone-display: #94a3b8; + --bs-cmp-line: rgba(148, 163, 184, 0.22); } .bs-cmp-diff-table thead th { @@ -12229,6 +12226,8 @@ body:has(.bs-cmp-board:fullscreen) { white-space: nowrap; vertical-align: middle; padding: 7px 10px; + border-bottom: 1px solid var(--bs-cmp-line); + border-right: 1px solid var(--bs-cmp-line); } .bs-cmp-diff-table thead tr.bs-cmp-group-row th { @@ -12237,34 +12236,12 @@ body:has(.bs-cmp-board:fullscreen) { text-align: center; font-size: 11px; font-weight: 700; - letter-spacing: 0.06em; + letter-spacing: 0.04em; padding: 6px 12px; height: var(--bs-cmp-group-h); -} - -/* Merged-cell style group headers */ -.bs-cmp-group { - border-top: 1px solid var(--bs-cmp-zone-line) !important; - border-bottom: 1px solid var(--bs-cmp-zone-line) !important; - border-right: 1px solid var(--bs-cmp-zone-line) !important; -} - -.bs-cmp-group--key { - background: rgba(37, 99, 235, 0.16) !important; - color: #93c5fd !important; - border-left: 2px solid var(--bs-cmp-zone-key) !important; -} - -.bs-cmp-group--compare { - background: rgba(245, 158, 11, 0.12) !important; - color: #fbbf24 !important; - border-left: 2px solid var(--bs-cmp-zone-compare) !important; -} - -.bs-cmp-group--display { - background: rgba(148, 163, 184, 0.1) !important; - color: #e2e8f0 !important; - border-left: 2px solid var(--bs-cmp-zone-display) !important; + color: #cbd5e1; + background: rgba(15, 23, 42, 0.98); + border-top: 1px solid var(--bs-cmp-line); } .bs-cmp-diff-table thead tr.bs-cmp-field-row th { @@ -12273,40 +12250,13 @@ body:has(.bs-cmp-board:fullscreen) { vertical-align: middle; padding-top: 6px; padding-bottom: 7px; - border-bottom: 1px solid var(--bs-cmp-zone-line); background: rgba(15, 23, 42, 0.98); color: #e2e8f0; } -.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-key { - background: rgba(30, 41, 70, 0.92); -} - -.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-compare { - background: rgba(42, 34, 18, 0.92); -} - -.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-display { - background: rgba(30, 36, 48, 0.95); -} - -.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-key, -.bs-cmp-diff-table tbody td.bs-cmp-zone-start--key { - border-left: 2px solid var(--bs-cmp-zone-key); -} - -.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-compare, -.bs-cmp-diff-table tbody td.bs-cmp-zone-start--compare { - border-left: 2px solid var(--bs-cmp-zone-compare); -} - -.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-display, -.bs-cmp-diff-table tbody td.bs-cmp-zone-start--display { - border-left: 2px solid var(--bs-cmp-zone-display); -} - -.bs-cmp-diff-table thead th.bs-cmp-zone-end { - border-right: 1px solid var(--bs-cmp-zone-line); +.bs-cmp-diff-table thead th.bs-cmp-zone-start, +.bs-cmp-diff-table tbody td.bs-cmp-zone-start { + border-left: 1px solid var(--bs-cmp-line); } .bs-cmp-diff-table tbody td { @@ -12322,33 +12272,24 @@ body:has(.bs-cmp-board:fullscreen) { background: rgba(37, 99, 235, 0.1); } -/* 结论 column */ +/* 结果 column sticky */ .bs-cmp-sticky-kind { position: sticky; left: 0; z-index: 1; background: rgba(15, 23, 42, 0.96); - border-right: 1px solid var(--bs-cmp-zone-line, rgba(148, 163, 184, 0.42)); } .bs-cmp-diff-table thead th.bs-cmp-sticky-kind { z-index: 4; background: rgba(15, 23, 42, 0.98); - vertical-align: middle; text-align: center; - font-weight: 700; - color: #cbd5e1; - letter-spacing: 0.04em; - border-bottom: 1px solid var(--bs-cmp-zone-line); - box-shadow: 1px 0 0 rgba(148, 163, 184, 0.16); + box-shadow: 1px 0 0 var(--bs-cmp-line); } .bs-cmp-diff-table thead th.bs-cmp-col-fail { z-index: 3; text-align: center; - vertical-align: middle; - border-right: 1px solid var(--bs-cmp-zone-line); - border-bottom: 1px solid var(--bs-cmp-zone-line); } .bs-cmp-diff-table tbody tr:nth-child(even) td.bs-cmp-sticky-kind { diff --git a/web/src/pages/network/BizComparePage.tsx b/web/src/pages/network/BizComparePage.tsx index 4efc038..4ed6043 100644 --- a/web/src/pages/network/BizComparePage.tsx +++ b/web/src/pages/network/BizComparePage.tsx @@ -167,7 +167,6 @@ function PairCell(props: { beforeLabel: string; afterLabel: string; zoneStart?: boolean; - zoneKind?: "compare" | "display"; }) { const { beforeText, @@ -178,7 +177,6 @@ function PairCell(props: { beforeLabel, afterLabel, zoneStart = false, - zoneKind = "compare", } = props; const pre = beforeText || "—"; const post = afterText || "—"; @@ -206,7 +204,7 @@ function PairCell(props: { className={`bs-cmp-val-cell bs-cmp-val-cell--pair${ mismatch || isAdded || isRemoved ? " bs-cmp-val-cell--diff" : "" }${isAdded ? " is-added" : ""}${isRemoved ? " is-removed" : ""}${ - zoneStart ? ` bs-cmp-zone-start bs-cmp-zone-start--${zoneKind}` : "" + zoneStart ? " bs-cmp-zone-start" : "" }`} >
@@ -3084,98 +3082,93 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage const displayCols = resultColumns.extras.filter( (f) => !resultColumns.compareSet.has(f), ); + const verdictColSpan = showFailCol ? 2 : 1; const hasGroups = keyCols.length + compareCols.length + displayCols.length > 0; return ( <> - {hasGroups ? ( - + + + {t("bizCompare.colKind")} + + {keyCols.length ? ( - {t("bizCompare.colKind")} + {t("bizCompare.keyFields")} - {showFailCol ? ( - - {t("bizCompare.colFailFields")} - - ) : null} - {keyCols.length ? ( - - {t("bizCompare.keyFields")} - - ) : null} - {compareCols.length ? ( - - {t("bizCompare.compareFields")} - - ) : null} - {displayCols.length ? ( - - {t("bizCompare.displayField")} - - ) : null} - - ) : ( - - - {t("bizCompare.colKind")} + ) : null} + {compareCols.length ? ( + + {t("bizCompare.compareFields")} - {showFailCol ? ( - - {t("bizCompare.colFailFields")} - - ) : null} - - )} - {hasGroups ? ( - - {keyCols.map((k, ki) => ( - - {k} - - ))} - {compareCols.map((f, fi) => ( - - {f} - - ))} - {displayCols.map((f, fi) => ( - - {f} - - ))} - - ) : null} + ) : null} + {displayCols.length ? ( + + {t("bizCompare.displayField")} + + ) : null} + + + + + {t("bizCompare.colResult")} + + + {showFailCol ? ( + + + {t("bizCompare.colDetail")} + + + ) : null} + {hasGroups + ? keyCols.map((k, ki) => ( + + {k} + + )) + : null} + {hasGroups + ? compareCols.map((f, fi) => ( + + {f} + + )) + : null} + {hasGroups + ? displayCols.map((f, fi) => ( + + {f} + + )) + : null} + ); })()} @@ -3214,7 +3207,7 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage {cellText(d.key?.[k] ?? pre[k] ?? post[k]) || "—"} @@ -3247,7 +3240,6 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage beforeLabel={t("bizCompare.pairBefore")} afterLabel={t("bizCompare.pairAfter")} zoneStart={zoneStart} - zoneKind={isCmp ? "compare" : "display"} /> ); })}