shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine Semi UI operations health workspace

Browse Source
This commit is contained in:
lingniu
2026-07-18 02:02:40 +08:00
parent f3c1391322
commit da9619617d
4 changed files with 289 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
vehicle-data-platform/apps/web/src/v2/styles/workspace.css
View File

@@ -2479,6 +2479,237 @@
}
}
/* Semi UI operations health: one overview rail, evidence-first rows and compact protocol coverage. */
.v2-ops-overview.semi-card {
min-width: 0;
overflow: hidden;
border: 1px solid #dce5ef;
border-radius: 12px;
background: #fff;
box-shadow: 0 8px 28px rgba(31, 53, 80, .055);
}
.v2-ops-overview > .semi-card-body > .v2-workspace-panel-header {
min-height: 64px;
border-bottom: 1px solid #e7edf4;
padding: 11px 16px;
}
.v2-ops-overview-meta {
display: flex;
align-items: center;
gap: 10px;
}
.v2-ops-overview-meta > .semi-typography {
font-size: 11px;
white-space: nowrap;
}
.v2-ops-metric-rail {
display: grid;
grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
background: #fff;
}
.v2-ops-metric {
position: relative;
min-width: 0;
min-height: 112px;
padding: 17px 18px 15px;
}
.v2-ops-metric + .v2-ops-metric {
border-left: 1px solid #e7edf4;
}
.v2-ops-metric::after {
position: absolute;
right: 18px;
bottom: 0;
left: 18px;
height: 3px;
border-radius: 999px 999px 0 0;
background: #dce5ef;
content: "";
}
.v2-ops-metric.is-success::after { background: var(--v2-green); }
.v2-ops-metric.is-warning::after { background: var(--v2-orange); }
.v2-ops-metric.is-danger::after { background: var(--v2-red); }
.v2-ops-metric small {
display: block;
overflow: hidden;
color: #6b7c92;
font-size: 11px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-ops-metric strong {
display: block;
margin: 10px 0 8px;
overflow: hidden;
color: #20364f;
font-size: 24px;
font-variant-numeric: tabular-nums;
letter-spacing: -.025em;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-ops-metric.is-success strong { color: #16835d; }
.v2-ops-metric.is-warning strong { color: #a66500; }
.v2-ops-metric.is-danger strong { color: #cf3f3b; }
.v2-ops-metric span {
display: block;
overflow: hidden;
color: #8390a2;
font-size: 10px;
line-height: 1.45;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-ops-panel > .semi-card-body > .v2-workspace-panel-header {
min-height: 64px;
border-bottom: 1px solid #e7edf4;
padding: 11px 15px;
}
.v2-ops-link-card {
display: grid;
min-height: 62px;
grid-template-columns: minmax(140px, .7fr) minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
border-bottom: 1px solid #e8edf3;
background: #fff;
padding: 10px 15px;
}
.v2-ops-link-card:last-child { border-bottom: 0; }
.v2-ops-source-list.semi-card-group {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.v2-ops-source-card.semi-card {
box-shadow: inset 0 3px #d6e0ec, 0 5px 16px rgba(31, 53, 80, .045);
}
.v2-ops-source-card.is-ok { box-shadow: inset 0 3px var(--v2-green), 0 5px 16px rgba(31, 53, 80, .045); }
.v2-ops-source-card.is-warning { box-shadow: inset 0 3px var(--v2-orange), 0 5px 16px rgba(31, 53, 80, .045); }
.v2-ops-source-card.is-error { box-shadow: inset 0 3px var(--v2-red), 0 5px 16px rgba(31, 53, 80, .045); }
.v2-ops-source-coverage {
display: grid;
gap: 7px;
border-bottom: 1px solid #e9eef4;
padding: 13px;
background: #fff;
}
.v2-ops-source-coverage > span {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.v2-ops-source-coverage strong {
color: #41556d;
font-size: 11px;
}
.v2-ops-source-coverage b {
color: #263d57;
font-size: 17px;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
.v2-ops-source-coverage .semi-progress {
width: 100%;
margin: 0;
}
.v2-ops-source-coverage small {
color: #748398;
font-size: 10px;
}
@media (max-width: 900px) {
.v2-ops-metric-rail {
display: flex;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.v2-ops-metric {
min-width: 190px;
flex: 0 0 190px;
scroll-snap-align: start;
}
.v2-ops-metric:first-child {
min-width: 218px;
flex-basis: 218px;
}
}
@media (max-width: 680px) {
.v2-ops-overview > .semi-card-body > .v2-workspace-panel-header {
min-height: 58px;
padding: 9px 12px;
}
.v2-ops-overview-meta > .semi-typography { display: none; }
.v2-ops-metric {
min-width: 156px;
min-height: 96px;
flex-basis: 156px;
padding: 14px 13px 12px;
}
.v2-ops-metric:first-child {
min-width: 184px;
flex-basis: 184px;
}
.v2-ops-metric strong {
margin: 8px 0 7px;
font-size: 21px;
}
.v2-ops-metric span { font-size: 10px; }
.v2-ops-link-card {
min-height: 72px;
grid-template-columns: minmax(0, 1fr) auto;
gap: 5px 10px;
padding: 10px 12px;
}
.v2-ops-link-card p {
grid-column: 1 / -1;
white-space: normal;
}
.v2-ops-source-list.semi-card-group {
display: flex;
grid-template-columns: none;
}
.v2-ops-source-coverage b { font-size: 16px; }
}
/* Unified Semi UI state language: page, panel and inline recovery surfaces. */
.v2-state-surface {
box-sizing: border-box;