mirror of
https://github.com/hansjone/netx.git
synced 2026-10-09 03:10:46 +08:00
Keep compare pair cells unchanged; mark Key/Compare/Display only with header dividers.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
474fd8b889
commit
7f453ac2b9
2 changed files with 49 additions and 152 deletions
|
|
@ -12251,21 +12251,23 @@ body:has(.bs-cmp-board:fullscreen) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-group--key {
|
.bs-cmp-group--key {
|
||||||
background: rgba(37, 99, 235, 0.28) !important;
|
background: rgba(15, 23, 42, 0.98) !important;
|
||||||
color: #bfdbfe !important;
|
color: #93c5fd !important;
|
||||||
border-bottom: 2px solid #3b82f6;
|
border-bottom: 1px solid rgba(59, 130, 246, 0.45);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-group--compare {
|
.bs-cmp-group--compare {
|
||||||
background: rgba(245, 158, 11, 0.26) !important;
|
background: rgba(15, 23, 42, 0.98) !important;
|
||||||
color: #fde68a !important;
|
color: #fbbf24 !important;
|
||||||
border-bottom: 2px solid #f59e0b;
|
border-bottom: 1px solid rgba(245, 158, 11, 0.45);
|
||||||
|
box-shadow: inset 1px 0 0 rgba(148, 163, 184, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-group--display {
|
.bs-cmp-group--display {
|
||||||
background: rgba(100, 116, 139, 0.28) !important;
|
background: rgba(15, 23, 42, 0.98) !important;
|
||||||
color: #e2e8f0 !important;
|
color: #cbd5e1 !important;
|
||||||
border-bottom: 2px solid #94a3b8;
|
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
|
||||||
|
box-shadow: inset 1px 0 0 rgba(148, 163, 184, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-diff-table tbody td {
|
.bs-cmp-diff-table tbody td {
|
||||||
|
|
@ -12315,76 +12317,30 @@ body:has(.bs-cmp-board:fullscreen) {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-key {
|
/* Header-only zone dividers (body cells stay neutral) */
|
||||||
background: rgba(30, 58, 110, 0.95);
|
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-key,
|
||||||
color: #bfdbfe;
|
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-compare,
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-compare {
|
|
||||||
background: rgba(78, 52, 12, 0.95);
|
|
||||||
color: #fde68a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-display {
|
.bs-cmp-diff-table thead tr.bs-cmp-field-row th.bs-cmp-col-display {
|
||||||
background: rgba(40, 48, 64, 0.98);
|
background: rgba(15, 23, 42, 0.98);
|
||||||
color: #cbd5e1;
|
color: #e2e8f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Zone banding: tint body cells so Key / Compare / Display stay distinct while scrolling */
|
.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-key {
|
||||||
.bs-cmp-col-key {
|
box-shadow: inset 2px 0 0 #3b82f6;
|
||||||
--bs-cmp-zone: #3b82f6;
|
|
||||||
background: rgba(59, 130, 246, 0.08);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-col-compare {
|
.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-compare {
|
||||||
--bs-cmp-zone: #f59e0b;
|
box-shadow: inset 2px 0 0 #f59e0b;
|
||||||
background: rgba(245, 158, 11, 0.07);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bs-cmp-diff-table thead th.bs-cmp-zone-start.bs-cmp-col-display {
|
||||||
|
box-shadow: inset 2px 0 0 #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bs-cmp-col-key,
|
||||||
|
.bs-cmp-col-compare,
|
||||||
.bs-cmp-col-display {
|
.bs-cmp-col-display {
|
||||||
--bs-cmp-zone: #94a3b8;
|
background: transparent;
|
||||||
background: rgba(148, 163, 184, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-zone-start {
|
|
||||||
box-shadow: inset 3px 0 0 var(--bs-cmp-zone, #64748b);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-diff-table tbody tr:nth-child(even) td.bs-cmp-col-key {
|
|
||||||
background: rgba(59, 130, 246, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-diff-table tbody tr:nth-child(even) td.bs-cmp-col-compare {
|
|
||||||
background: rgba(245, 158, 11, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-diff-table tbody tr:nth-child(even) td.bs-cmp-col-display {
|
|
||||||
background: rgba(148, 163, 184, 0.07);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-diff-table tbody tr:hover td.bs-cmp-col-key {
|
|
||||||
background: rgba(59, 130, 246, 0.16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-diff-table tbody tr:hover td.bs-cmp-col-compare {
|
|
||||||
background: rgba(245, 158, 11, 0.14);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-diff-table tbody tr:hover td.bs-cmp-col-display {
|
|
||||||
background: rgba(148, 163, 184, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Diff highlight still wins inside compare/display cells */
|
|
||||||
.bs-cmp-diff-table tbody td.bs-cmp-val-cell--diff {
|
|
||||||
background: rgba(245, 158, 11, 0.14) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-diff-table tbody td.bs-cmp-val-cell--pair.is-removed {
|
|
||||||
background: rgba(239, 68, 68, 0.12) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-diff-table tbody td.bs-cmp-val-cell--pair.is-added {
|
|
||||||
background: rgba(34, 197, 94, 0.12) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-overview__verdict {
|
.bs-cmp-overview__verdict {
|
||||||
|
|
@ -12476,30 +12432,20 @@ body:has(.bs-cmp-board:fullscreen) {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-val-cell--same {
|
|
||||||
color: #cbd5e1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-val-cell--same .bs-cmp-val {
|
|
||||||
color: #cbd5e1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-cmp-val-cell--diff {
|
.bs-cmp-val-cell--diff {
|
||||||
background: rgba(245, 158, 11, 0.1) !important;
|
background: rgba(245, 158, 11, 0.08);
|
||||||
box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-pair {
|
.bs-cmp-pair {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2px;
|
gap: 3px;
|
||||||
min-width: 4.5rem;
|
min-width: 4.5rem;
|
||||||
padding: 1px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-pair__row {
|
.bs-cmp-pair__row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1.4em minmax(0, 1fr);
|
grid-template-columns: 1.6em minmax(0, 1fr);
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
|
|
@ -12510,20 +12456,15 @@ body:has(.bs-cmp-board:fullscreen) {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
line-height: 1.35;
|
line-height: 1.3;
|
||||||
text-align: center;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: rgba(148, 163, 184, 0.12);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-val-cell--diff .bs-cmp-pair__row:first-child .bs-cmp-pair__tag {
|
.bs-cmp-val-cell--diff .bs-cmp-pair__row:first-child .bs-cmp-pair__tag {
|
||||||
color: #fecaca;
|
color: #fca5a5;
|
||||||
background: rgba(239, 68, 68, 0.18);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-val-cell--diff .bs-cmp-pair__row:last-child .bs-cmp-pair__tag {
|
.bs-cmp-val-cell--diff .bs-cmp-pair__row:last-child .bs-cmp-pair__tag {
|
||||||
color: #bbf7d0;
|
color: #86efac;
|
||||||
background: rgba(34, 197, 94, 0.18);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-val {
|
.bs-cmp-val {
|
||||||
|
|
@ -12562,13 +12503,11 @@ body:has(.bs-cmp-board:fullscreen) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-val-cell--pair.is-removed {
|
.bs-cmp-val-cell--pair.is-removed {
|
||||||
background: rgba(239, 68, 68, 0.1) !important;
|
background: rgba(239, 68, 68, 0.08);
|
||||||
box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-val-cell--pair.is-added {
|
.bs-cmp-val-cell--pair.is-added {
|
||||||
background: rgba(34, 197, 94, 0.1) !important;
|
background: rgba(34, 197, 94, 0.08);
|
||||||
box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-val-arrow {
|
.bs-cmp-val-arrow {
|
||||||
|
|
@ -12578,12 +12517,12 @@ body:has(.bs-cmp-board:fullscreen) {
|
||||||
color: #94a3b8;
|
color: #94a3b8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-row--added td {
|
.bs-cmp-row--added {
|
||||||
background: rgba(34, 197, 94, 0.05);
|
background: rgba(34, 197, 94, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-row--removed td {
|
.bs-cmp-row--removed {
|
||||||
background: rgba(239, 68, 68, 0.05);
|
background: rgba(239, 68, 68, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-row--changed {
|
.bs-cmp-row--changed {
|
||||||
|
|
@ -12591,7 +12530,7 @@ body:has(.bs-cmp-board:fullscreen) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-row--unchanged {
|
.bs-cmp-row--unchanged {
|
||||||
opacity: 1;
|
opacity: 0.78;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bs-cmp-cell--pre {
|
.bs-cmp-cell--pre {
|
||||||
|
|
|
||||||
|
|
@ -166,36 +166,12 @@ function PairCell(props: {
|
||||||
reason?: string;
|
reason?: string;
|
||||||
beforeLabel: string;
|
beforeLabel: string;
|
||||||
afterLabel: string;
|
afterLabel: string;
|
||||||
zoneClass?: string;
|
|
||||||
zoneStart?: boolean;
|
|
||||||
}) {
|
}) {
|
||||||
const {
|
const { beforeText, afterText, kind, mismatch, reason, beforeLabel, afterLabel } = props;
|
||||||
beforeText,
|
|
||||||
afterText,
|
|
||||||
kind,
|
|
||||||
mismatch,
|
|
||||||
reason,
|
|
||||||
beforeLabel,
|
|
||||||
afterLabel,
|
|
||||||
zoneClass = "",
|
|
||||||
zoneStart = false,
|
|
||||||
} = props;
|
|
||||||
const pre = beforeText || "—";
|
const pre = beforeText || "—";
|
||||||
const post = afterText || "—";
|
const post = afterText || "—";
|
||||||
const isAdded = kind === "added";
|
const isAdded = kind === "added";
|
||||||
const isRemoved = kind === "removed";
|
const isRemoved = kind === "removed";
|
||||||
const isDiff = mismatch || isAdded || isRemoved;
|
|
||||||
const zone = `${zoneClass}${zoneStart ? " bs-cmp-zone-start" : ""}`.trim();
|
|
||||||
|
|
||||||
// Matched values: single line (no 前/后 stack) — cuts density on pass-heavy sheets.
|
|
||||||
if (!isDiff) {
|
|
||||||
return (
|
|
||||||
<td className={`bs-cmp-val-cell bs-cmp-val-cell--same ${zone}`.trim()}>
|
|
||||||
<span className={`bs-cmp-val${beforeText ? "" : " is-empty"}`}>{pre}</span>
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Whole-row missing/extra: emphasize the present side; do not strike it out.
|
// Whole-row missing/extra: emphasize the present side; do not strike it out.
|
||||||
const preClass = [
|
const preClass = [
|
||||||
"bs-cmp-val",
|
"bs-cmp-val",
|
||||||
|
|
@ -215,21 +191,17 @@ function PairCell(props: {
|
||||||
.join(" ");
|
.join(" ");
|
||||||
return (
|
return (
|
||||||
<td
|
<td
|
||||||
className={`bs-cmp-val-cell bs-cmp-val-cell--pair bs-cmp-val-cell--diff${
|
className={`bs-cmp-val-cell bs-cmp-val-cell--pair${
|
||||||
isAdded ? " is-added" : ""
|
mismatch || isAdded || isRemoved ? " bs-cmp-val-cell--diff" : ""
|
||||||
}${isRemoved ? " is-removed" : ""}${zone ? ` ${zone}` : ""}`}
|
}${isAdded ? " is-added" : ""}${isRemoved ? " is-removed" : ""}`}
|
||||||
>
|
>
|
||||||
<div className="bs-cmp-pair">
|
<div className="bs-cmp-pair">
|
||||||
<div className="bs-cmp-pair__row">
|
<div className="bs-cmp-pair__row">
|
||||||
<span className="bs-cmp-pair__tag" aria-label={beforeLabel}>
|
<span className="bs-cmp-pair__tag">{beforeLabel}</span>
|
||||||
{beforeLabel}
|
|
||||||
</span>
|
|
||||||
<span className={preClass}>{isAdded ? "—" : pre}</span>
|
<span className={preClass}>{isAdded ? "—" : pre}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="bs-cmp-pair__row">
|
<div className="bs-cmp-pair__row">
|
||||||
<span className="bs-cmp-pair__tag" aria-label={afterLabel}>
|
<span className="bs-cmp-pair__tag">{afterLabel}</span>
|
||||||
{afterLabel}
|
|
||||||
</span>
|
|
||||||
<span className={postClass}>{isRemoved ? "—" : post}</span>
|
<span className={postClass}>{isRemoved ? "—" : post}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -3214,26 +3186,16 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
||||||
: failFieldsLabel(d)}
|
: failFieldsLabel(d)}
|
||||||
</td>
|
</td>
|
||||||
) : null}
|
) : null}
|
||||||
{resultColumns.keys.map((k, ki) => (
|
{resultColumns.keys.map((k) => (
|
||||||
<td
|
<td key={k} className="bs-cmp-key-cell">
|
||||||
key={k}
|
|
||||||
className={`bs-cmp-key-cell bs-cmp-col-key${
|
|
||||||
ki === 0 ? " bs-cmp-zone-start" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{cellText(d.key?.[k] ?? pre[k] ?? post[k]) || "—"}
|
{cellText(d.key?.[k] ?? pre[k] ?? post[k]) || "—"}
|
||||||
</td>
|
</td>
|
||||||
))}
|
))}
|
||||||
{resultColumns.extras.map((f, fi) => {
|
{resultColumns.extras.map((f) => {
|
||||||
const pv = cellText(pre[f]);
|
const pv = cellText(pre[f]);
|
||||||
const av = cellText(post[f]);
|
const av = cellText(post[f]);
|
||||||
const ch = d.changes?.[f];
|
const ch = d.changes?.[f];
|
||||||
const isCmp = resultColumns.compareSet.has(f);
|
const isCmp = resultColumns.compareSet.has(f);
|
||||||
const prev = resultColumns.extras[fi - 1];
|
|
||||||
const prevCmp = prev
|
|
||||||
? resultColumns.compareSet.has(prev)
|
|
||||||
: null;
|
|
||||||
const zoneStart = fi === 0 || prevCmp !== isCmp;
|
|
||||||
const mismatch =
|
const mismatch =
|
||||||
d.kind === "added" || d.kind === "removed"
|
d.kind === "added" || d.kind === "removed"
|
||||||
? Boolean(pv || av)
|
? Boolean(pv || av)
|
||||||
|
|
@ -3250,10 +3212,6 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
||||||
reason={ch?.reason}
|
reason={ch?.reason}
|
||||||
beforeLabel={t("bizCompare.pairBefore")}
|
beforeLabel={t("bizCompare.pairBefore")}
|
||||||
afterLabel={t("bizCompare.pairAfter")}
|
afterLabel={t("bizCompare.pairAfter")}
|
||||||
zoneClass={
|
|
||||||
isCmp ? "bs-cmp-col-compare" : "bs-cmp-col-display"
|
|
||||||
}
|
|
||||||
zoneStart={zoneStart}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue