feat(web): unify data panel hierarchy

This commit is contained in:
lingniu
2026-07-20 03:22:30 +08:00
parent dfa2782db6
commit df03aaac6a
11 changed files with 209 additions and 4 deletions

View File

@@ -7,6 +7,10 @@
*/
.v2-workspace-panel-header {
--v2-panel-accent: #708198;
--v2-panel-accent-soft: rgba(112, 129, 152, .08);
--v2-panel-chip-border: rgba(112, 129, 152, .16);
--v2-panel-chip-background: #f5f7fa;
display: flex;
min-height: 52px;
flex: 0 0 auto;
@@ -18,6 +22,47 @@
padding: 8px 14px;
}
.v2-workspace-panel-header.tone-primary {
--v2-panel-accent: #1268df;
--v2-panel-accent-soft: rgba(18, 104, 223, .08);
--v2-panel-chip-border: rgba(18, 104, 223, .16);
--v2-panel-chip-background: #edf5ff;
}
.v2-workspace-panel-header.tone-warning {
--v2-panel-accent: #d97706;
--v2-panel-accent-soft: rgba(217, 119, 6, .09);
--v2-panel-chip-border: rgba(217, 119, 6, .17);
--v2-panel-chip-background: #fff6e8;
}
.v2-workspace-panel-header.tone-authority {
--v2-panel-accent: #6656c8;
--v2-panel-accent-soft: rgba(102, 86, 200, .08);
--v2-panel-chip-border: rgba(102, 86, 200, .16);
--v2-panel-chip-background: #f4f1ff;
}
.v2-workspace-panel-header.tone-health {
--v2-panel-accent: #0f8f68;
--v2-panel-accent-soft: rgba(15, 143, 104, .08);
--v2-panel-chip-border: rgba(15, 143, 104, .16);
--v2-panel-chip-background: #eaf8f3;
}
.v2-workspace-panel-header.tone-danger {
--v2-panel-accent: #d9473f;
--v2-panel-accent-soft: rgba(217, 71, 63, .08);
--v2-panel-chip-border: rgba(217, 71, 63, .16);
--v2-panel-chip-background: #fff2f1;
}
.v2-workspace-panel-header.has-eyebrow {
background:
linear-gradient(90deg, var(--v2-panel-accent-soft) 0%, rgba(255, 255, 255, .94) 28%, #fff 100%);
box-shadow: inset 3px 0 var(--v2-panel-accent);
}
/*
* Shared Semi UI mobile filter sheet.
* Keep the same title hierarchy, scroll surface, condition card and action
@@ -2534,6 +2579,43 @@
gap: 3px;
}
.v2-workspace-panel-header.has-eyebrow > .v2-workspace-panel-copy {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: center;
column-gap: 7px;
row-gap: 1px;
}
.v2-workspace-panel-eyebrow.semi-typography {
display: inline-flex;
min-height: 18px;
align-items: center;
grid-column: 1;
grid-row: 1;
border: 1px solid var(--v2-panel-chip-border);
border-radius: 999px;
background: var(--v2-panel-chip-background);
padding-inline: 6px;
color: var(--v2-panel-accent);
font-size: 8px;
font-weight: 750;
letter-spacing: .04em;
line-height: 16px;
white-space: nowrap;
}
.v2-workspace-panel-header.has-eyebrow > .v2-workspace-panel-copy > h5.semi-typography {
grid-column: 2;
grid-row: 1;
}
.v2-workspace-panel-header.has-eyebrow > .v2-workspace-panel-copy > .semi-typography:last-child:not(.v2-workspace-panel-eyebrow) {
grid-column: 1 / -1;
grid-row: 2;
}
.v2-workspace-panel-header > .v2-workspace-panel-copy {
align-items: flex-start;
justify-content: center;
@@ -15550,12 +15632,34 @@
}
.v2-mileage-results .v2-workspace-panel-copy {
width: 82px;
min-width: 82px;
max-width: 82px;
width: 108px;
min-width: 108px;
max-width: 108px;
flex: none;
}
.v2-mileage-results .v2-workspace-panel-header.has-eyebrow > .v2-workspace-panel-copy {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
align-content: center;
justify-items: start;
row-gap: 2px;
}
.v2-mileage-results .v2-workspace-panel-header.has-eyebrow .v2-workspace-panel-eyebrow.semi-typography {
grid-column: 1;
grid-row: 1;
min-height: 16px;
padding-inline: 5px;
font-size: 7px;
line-height: 14px;
}
.v2-mileage-results .v2-workspace-panel-header.has-eyebrow > .v2-workspace-panel-copy > h5.semi-typography {
grid-column: 1;
grid-row: 2;
}
.v2-mileage-results .v2-workspace-panel-copy > h5.semi-typography {
width: auto;
overflow: visible;