mirror of
https://github.com/hansjone/netx.git
synced 2026-10-09 02:00:46 +08:00
Unify compare header dividers and nest Result/Detail under Verdict like other groups.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
dfcdeccaa6
commit
bf6e870b72
4 changed files with 97 additions and 160 deletions
|
|
@ -506,6 +506,8 @@ const en = {
|
|||
colMode: "Mode",
|
||||
colStatus: "Status",
|
||||
colKind: "Verdict",
|
||||
colResult: "Result",
|
||||
colDetail: "Detail",
|
||||
colFailFields: "Failed fields",
|
||||
colActions: "Actions",
|
||||
colKey: "Identity",
|
||||
|
|
|
|||
|
|
@ -503,6 +503,8 @@ const zh = {
|
|||
colMode: "模式",
|
||||
colStatus: "状态",
|
||||
colKind: "结论",
|
||||
colResult: "结果",
|
||||
colDetail: "明细",
|
||||
colFailFields: "失败项",
|
||||
colActions: "操作",
|
||||
colKey: "身份",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="bs-cmp-pair">
|
||||
|
|
@ -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 ? (
|
||||
<tr className="bs-cmp-group-row">
|
||||
<tr className="bs-cmp-group-row">
|
||||
<th
|
||||
colSpan={verdictColSpan}
|
||||
className="bs-cmp-group bs-cmp-group--verdict"
|
||||
>
|
||||
{t("bizCompare.colKind")}
|
||||
</th>
|
||||
{keyCols.length ? (
|
||||
<th
|
||||
rowSpan={2}
|
||||
className="bs-cmp-col-kind bs-cmp-sticky-kind"
|
||||
colSpan={keyCols.length}
|
||||
className="bs-cmp-group bs-cmp-group--key"
|
||||
>
|
||||
{t("bizCompare.colKind")}
|
||||
{t("bizCompare.keyFields")}
|
||||
</th>
|
||||
{showFailCol ? (
|
||||
<th rowSpan={2} className="bs-cmp-col-fail">
|
||||
{t("bizCompare.colFailFields")}
|
||||
</th>
|
||||
) : null}
|
||||
{keyCols.length ? (
|
||||
<th
|
||||
colSpan={keyCols.length}
|
||||
className="bs-cmp-group bs-cmp-group--key"
|
||||
>
|
||||
{t("bizCompare.keyFields")}
|
||||
</th>
|
||||
) : null}
|
||||
{compareCols.length ? (
|
||||
<th
|
||||
colSpan={compareCols.length}
|
||||
className="bs-cmp-group bs-cmp-group--compare"
|
||||
>
|
||||
{t("bizCompare.compareFields")}
|
||||
</th>
|
||||
) : null}
|
||||
{displayCols.length ? (
|
||||
<th
|
||||
colSpan={displayCols.length}
|
||||
className="bs-cmp-group bs-cmp-group--display"
|
||||
>
|
||||
{t("bizCompare.displayField")}
|
||||
</th>
|
||||
) : null}
|
||||
</tr>
|
||||
) : (
|
||||
<tr>
|
||||
<th className="bs-cmp-col-kind bs-cmp-sticky-kind">
|
||||
{t("bizCompare.colKind")}
|
||||
) : null}
|
||||
{compareCols.length ? (
|
||||
<th
|
||||
colSpan={compareCols.length}
|
||||
className="bs-cmp-group bs-cmp-group--compare"
|
||||
>
|
||||
{t("bizCompare.compareFields")}
|
||||
</th>
|
||||
{showFailCol ? (
|
||||
<th className="bs-cmp-col-fail">
|
||||
{t("bizCompare.colFailFields")}
|
||||
</th>
|
||||
) : null}
|
||||
</tr>
|
||||
)}
|
||||
{hasGroups ? (
|
||||
<tr className="bs-cmp-field-row">
|
||||
{keyCols.map((k, ki) => (
|
||||
<th
|
||||
key={k}
|
||||
className={`bs-cmp-col-key${
|
||||
ki === 0 ? " bs-cmp-zone-start" : ""
|
||||
}${ki === keyCols.length - 1 ? " bs-cmp-zone-end" : ""}`}
|
||||
>
|
||||
<span className="bs-cmp-th__name">{k}</span>
|
||||
</th>
|
||||
))}
|
||||
{compareCols.map((f, fi) => (
|
||||
<th
|
||||
key={f}
|
||||
className={`bs-cmp-col-compare${
|
||||
fi === 0 ? " bs-cmp-zone-start" : ""
|
||||
}${
|
||||
fi === compareCols.length - 1 ? " bs-cmp-zone-end" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="bs-cmp-th__name">{f}</span>
|
||||
</th>
|
||||
))}
|
||||
{displayCols.map((f, fi) => (
|
||||
<th
|
||||
key={f}
|
||||
className={`bs-cmp-col-display${
|
||||
fi === 0 ? " bs-cmp-zone-start" : ""
|
||||
}${
|
||||
fi === displayCols.length - 1 ? " bs-cmp-zone-end" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="bs-cmp-th__name">{f}</span>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
) : null}
|
||||
) : null}
|
||||
{displayCols.length ? (
|
||||
<th
|
||||
colSpan={displayCols.length}
|
||||
className="bs-cmp-group bs-cmp-group--display"
|
||||
>
|
||||
{t("bizCompare.displayField")}
|
||||
</th>
|
||||
) : null}
|
||||
</tr>
|
||||
<tr className="bs-cmp-field-row">
|
||||
<th className="bs-cmp-col-kind bs-cmp-sticky-kind bs-cmp-zone-start">
|
||||
<span className="bs-cmp-th__name">
|
||||
{t("bizCompare.colResult")}
|
||||
</span>
|
||||
</th>
|
||||
{showFailCol ? (
|
||||
<th className="bs-cmp-col-fail">
|
||||
<span className="bs-cmp-th__name">
|
||||
{t("bizCompare.colDetail")}
|
||||
</span>
|
||||
</th>
|
||||
) : null}
|
||||
{hasGroups
|
||||
? keyCols.map((k, ki) => (
|
||||
<th
|
||||
key={k}
|
||||
className={`bs-cmp-col-key${
|
||||
ki === 0 ? " bs-cmp-zone-start" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="bs-cmp-th__name">{k}</span>
|
||||
</th>
|
||||
))
|
||||
: null}
|
||||
{hasGroups
|
||||
? compareCols.map((f, fi) => (
|
||||
<th
|
||||
key={f}
|
||||
className={`bs-cmp-col-compare${
|
||||
fi === 0 ? " bs-cmp-zone-start" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="bs-cmp-th__name">{f}</span>
|
||||
</th>
|
||||
))
|
||||
: null}
|
||||
{hasGroups
|
||||
? displayCols.map((f, fi) => (
|
||||
<th
|
||||
key={f}
|
||||
className={`bs-cmp-col-display${
|
||||
fi === 0 ? " bs-cmp-zone-start" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="bs-cmp-th__name">{f}</span>
|
||||
</th>
|
||||
))
|
||||
: null}
|
||||
</tr>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
|
|
@ -3214,7 +3207,7 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
<td
|
||||
key={k}
|
||||
className={`bs-cmp-key-cell${
|
||||
ki === 0 ? " bs-cmp-zone-start bs-cmp-zone-start--key" : ""
|
||||
ki === 0 ? " bs-cmp-zone-start" : ""
|
||||
}`}
|
||||
>
|
||||
{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"}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue