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

feat: unify operations health rail

Browse Source
This commit is contained in:
lingniu
2026-07-19 09:41:36 +08:00
parent 39c828ed32
commit a6f6ce260f
4 changed files with 100 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -937,52 +937,6 @@
font-size: 8px;
}
.v2-ops-workspace.is-health .v2-ops-metric-rail {
display: grid;
grid-template-columns: 1.12fr repeat(4, minmax(0, 1fr));
overflow: hidden;
}
.v2-ops-workspace.is-health .v2-ops-metric,
.v2-ops-workspace.is-health .v2-ops-metric:first-child {
min-width: 0;
min-height: 78px;
grid-column: auto;
border-top: 0;
border-right: 0;
border-left: 1px solid #e7edf4;
padding: 8px 9px 7px;
}
.v2-ops-workspace.is-health .v2-ops-metric:first-child {
border-left: 0;
}
.v2-ops-workspace.is-health .v2-ops-metric small {
font-size: 8px;
}
.v2-ops-workspace.is-health .v2-ops-metric strong,
.v2-ops-workspace.is-health .v2-ops-metric:first-child strong {
margin: 6px 0 5px;
font-size: 15px;
}
.v2-ops-workspace.is-health .v2-ops-metric:first-child strong {
font-size: 16px;
}
.v2-ops-workspace.is-health .v2-ops-metric span {
font-size: 8px;
line-height: 1.3;
}
.v2-ops-workspace.is-health .v2-ops-metric::after {
right: 9px;
left: 9px;
height: 2px;
}
.v2-ops-workspace.is-health .v2-ops-source-list.semi-card-group {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -5293,75 +5247,6 @@
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;
@@ -5430,26 +5315,6 @@
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;
@@ -5458,25 +5323,6 @@
.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;
@@ -14595,21 +14441,6 @@
height: auto;
}
.v2-ops-metric {
min-height: 100px;
padding: 14px 16px 13px;
}
.v2-ops-metric::after {
right: 16px;
left: 16px;
}
.v2-ops-metric strong {
margin: 8px 0 7px;
font-size: 22px;
}
.v2-ops-workspace.is-diagnostic {
display: flex;
min-height: 0;
@@ -14724,49 +14555,6 @@
min-height: 260px;
}
.v2-ops-workspace.is-health .v2-ops-metric-rail {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: visible;
scroll-snap-type: none;
}
.v2-ops-workspace.is-health .v2-ops-metric {
min-width: 0;
min-height: 78px;
flex: none;
border-top: 1px solid #e7edf4;
border-left: 0;
padding: 11px 12px 10px;
scroll-snap-align: none;
}
.v2-ops-workspace.is-health .v2-ops-metric:first-child {
min-width: 0;
min-height: 88px;
grid-column: 1 / -1;
border-top: 0;
padding-inline: 13px;
}
.v2-ops-workspace.is-health .v2-ops-metric:nth-child(even) {
border-right: 1px solid #e7edf4;
}
.v2-ops-workspace.is-health .v2-ops-metric strong {
margin: 6px 0 5px;
font-size: 19px;
}
.v2-ops-workspace.is-health .v2-ops-metric:first-child strong {
font-size: 22px;
}
.v2-ops-workspace.is-health .v2-ops-metric::after {
right: 12px;
left: 12px;
}
.v2-ops-links .v2-ops-link-card {
min-height: 58px;
grid-template-columns: minmax(0, 1fr) auto;
@@ -14809,9 +14597,6 @@
align-items: stretch;
}
.v2-ops-metric {
min-height: 94px;
}
}
/*
@@ -16443,6 +16228,35 @@
color: inherit;
}
.v2-ops-health-metric-rail.is-queue.semi-card {
border-bottom: 0;
}
.v2-ops-health-metric-rail.is-queue > .semi-card-body {
grid-template-columns: minmax(0, 1fr) 196px;
}
.v2-ops-health-metric-rail .v2-workspace-metric-list {
grid-template-columns: 1.25fr 1.05fr 1fr .9fr;
}
.v2-ops-health-metric-rail .v2-workspace-metric-list > span.is-primary.is-warning {
background: linear-gradient(145deg, #fff8ed 0%, #fffdf8 100%);
box-shadow: inset 0 -3px #e59a2f;
}
.v2-ops-health-metric-rail .v2-workspace-metric-list > span.is-primary.is-warning > :is(small, strong) {
color: #9d5d0b;
}
.v2-ops-health-kafka.is-ok strong {
color: #148459;
}
.v2-ops-health-kafka.is-warning strong {
color: #a76512;
}
.v2-reconcile-metric-rail {
flex: 0 0 auto;
}
@@ -16474,6 +16288,27 @@
}
}
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
.v2-ops-health-metric-rail.is-queue > .semi-card-body {
min-height: 48px;
grid-template-columns: minmax(0, 1fr) 142px;
}
.v2-ops-health-metric-rail .v2-workspace-metric-list > span {
min-height: 48px;
padding-block: 4px;
}
.v2-ops-health-metric-rail .v2-workspace-metric-list > span > strong {
font-size: 15px;
line-height: 18px;
}
.v2-ops-health-metric-rail .v2-workspace-metric-list > span > em {
display: none;
}
}
@media (max-width: 680px) {
.v2-workspace-metric-rail.is-queue > .semi-card-body {
min-height: 56px;
@@ -20418,52 +20253,6 @@
overflow: hidden;
}
.v2-ops-workspace.is-health .v2-ops-metric-rail {
display: grid;
grid-template-columns: 1.12fr repeat(4, minmax(0, 1fr));
overflow: hidden;
}
.v2-ops-workspace.is-health .v2-ops-metric,
.v2-ops-workspace.is-health .v2-ops-metric:first-child {
min-width: 0;
min-height: 78px;
grid-column: auto;
border-top: 0;
border-right: 0;
border-left: 1px solid #e7edf4;
padding: 8px 9px 7px;
}
.v2-ops-workspace.is-health .v2-ops-metric:first-child {
border-left: 0;
}
.v2-ops-workspace.is-health .v2-ops-metric small {
font-size: 8px;
}
.v2-ops-workspace.is-health .v2-ops-metric strong,
.v2-ops-workspace.is-health .v2-ops-metric:first-child strong {
margin: 6px 0 5px;
font-size: 15px;
}
.v2-ops-workspace.is-health .v2-ops-metric:first-child strong {
font-size: 16px;
}
.v2-ops-workspace.is-health .v2-ops-metric span {
font-size: 8px;
line-height: 1.3;
}
.v2-ops-workspace.is-health .v2-ops-metric::after {
right: 9px;
left: 9px;
height: 2px;
}
.v2-ops-workspace.is-diagnostic {
display: grid;
min-height: 0;