refactor(ui): converge semi operations workspace

2026-07-19 18:56:35 +08:00
parent 0f51e3d375
commit 2c93999417
5 changed files with 198 additions and 17 deletions
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -25149,3 +25149,100 @@
    padding: 8px;
  }
 }
+
+/*
+ * Semi UI operations health summary.
+ * Health facts must remain legible on a phone: the shared compact rail hides
+ * secondary metrics and its context by default, which removed vehicle coverage
+ * and compressed the two primary metrics into narrow slivers.
+ */
+.v2-ops-overview.semi-card,
+.v2-ops-panel.semi-card {
+  border-color: #dce5ef;
+  border-radius: 12px;
+  box-shadow: 0 5px 18px rgba(31, 53, 80, .04);
+}
+
+.v2-ops-health-metric-rail .v2-workspace-metric-list > span {
+  min-width: 0;
+}
+
+@media (max-width: 680px) {
+  .v2-ops-health-metric-rail.is-queue.has-context > .semi-card-body {
+    min-height: 0;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-list {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-list > span,
+  .v2-ops-health-metric-rail .v2-workspace-metric-list > span.is-secondary {
+    display: grid;
+    min-width: 0;
+    min-height: 68px;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: 14px 24px 14px;
+    align-content: center;
+    gap: 0;
+    padding: 8px 11px;
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-list > span:nth-child(odd) {
+    border-left: 0;
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-list > span:nth-child(n + 3) {
+    border-top: 1px solid #e5ebf2;
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-list > span > :is(small, strong, em) {
+    min-width: 0;
+    grid-column: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-list > span > small {
+    grid-row: 1;
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-list > span > strong,
+  .v2-ops-health-metric-rail .v2-workspace-metric-list > span.is-secondary > strong {
+    grid-row: 2;
+    font-size: 18px;
+    line-height: 24px;
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-list > span > em {
+    display: block;
+    grid-row: 3;
+    font-size: 8px;
+    line-height: 14px;
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-context {
+    display: flex;
+    min-height: 46px;
+    border-top: 1px solid #e5ebf2;
+    border-left: 0;
+    padding: 7px 11px;
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-context > span {
+    width: 100%;
+    grid-template-columns: auto auto minmax(0, 1fr);
+    align-items: center;
+    gap: 6px;
+  }
+
+  .v2-ops-health-metric-rail .v2-workspace-metric-context em {
+    min-width: 0;
+    grid-column: 3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}