From 10a072280b8224f313c00cb23ff4b1765f4a7293 Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sat, 18 Jul 2026 13:38:25 +0800
Subject: [PATCH] refine Semi UI operations health

---
 .../web/src/v2/pages/OperationsPage.test.tsx  |  4 +-
 .../apps/web/src/v2/pages/OperationsPage.tsx  |  2 +-
 .../apps/web/src/v2/styles/workspace.css      | 81 +++++++++++++++++++
 3 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.test.tsx
index 347e9f5a..b19290f6 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.test.tsx
@@ -197,10 +197,10 @@ test('reconciles service identities with bound and identity-required vehicles',
     expect(liveOptions.refetchIntervalInBackground).toBe(false);
     expect(liveOptions.refetchOnWindowFocus).toBe(true);
   }
-  expect(screen.getByText('服务身份 / 在线')).toBeInTheDocument();
+  expect(screen.getByText('车辆总数 / 在线')).toBeInTheDocument();
   expect(screen.getByText('已绑定 1024 · 待绑定 11')).toBeInTheDocument();
   expect(screen.getByRole('heading', { name: '运行概览', level: 5 })).toBeInTheDocument();
-  expect(screen.getByText('服务身份 / 在线').closest('.v2-ops-metric')).toBeInTheDocument();
+  expect(screen.getByText('车辆总数 / 在线').closest('.v2-ops-metric')).toBeInTheDocument();
   expect(screen.getByRole('list', { name: '运行健康指标' })).toHaveClass('v2-ops-metric-rail');
   expect(screen.getByText('全部正常')).toBeInTheDocument();
   expect(screen.getByText('运行时安全').closest('.semi-card')).toHaveClass('v2-ops-runtime');
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx
index b240c0a7..389a7d3a 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx
@@ -409,10 +409,10 @@ export default function OperationsPage() {
           />
           <section className="v2-ops-metric-rail" role="list" aria-label="运行健康指标">
             <OpsMetric label="整体状态" value={!data ? '读取中' : healthIssueCount > 0 ? '需要处理' : '运行正常'} detail={!data ? '等待服务端健康证据' : healthIssueCount > 0 ? `${healthIssueCount} 项证据需要关注` : '链路与写入探针均正常'} tone={!data ? 'neutral' : healthIssueCount > 0 ? 'warning' : 'success'} />
+            <OpsMetric label="车辆总数 / 在线" value={sources ? `${sources.totalVehicles} / ${sources.onlineVehicles}` : '—'} detail={sources ? `已绑定 ${sources.boundVehicles} · 待绑定 ${sources.identityRequiredVehicles}` : '档案与快照并集'} />
             <OpsMetric label="活跃连接" value={data?.activeConnections?.toLocaleString('zh-CN') ?? '—'} detail="网关实时连接" />
             <OpsMetric label="Kafka Lag" value={data?.kafkaLag?.toLocaleString('zh-CN') ?? '—'} detail={data?.kafkaLag === 0 ? '消费积压已回零' : data ? '存在待消费消息' : '等待消费证据'} tone={data?.kafkaLag === 0 ? 'success' : data ? 'warning' : 'neutral'} />
             <OpsMetric label="Redis 在线 Key" value={data?.redisOnlineKeys?.toLocaleString('zh-CN') ?? '—'} detail="在线状态快照" />
-            <OpsMetric label="服务身份 / 在线" value={sources ? `${sources.totalVehicles} / ${sources.onlineVehicles}` : '—'} detail={sources ? `已绑定 ${sources.boundVehicles} · 待绑定 ${sources.identityRequiredVehicles}` : '档案与快照并集'} />
           </section>
         </Card>
         <div className="v2-ops-grid"><Card className="v2-ops-panel v2-ops-links" bodyStyle={{ padding: 0 }}><WorkspacePanelHeader title="数据链路" description="按链路查看当前状态与服务端诊断证据" meta={<HealthTag status={!data ? 'unknown' : linkIssueCount > 0 ? 'warning' : 'ok'}>{!data ? '读取中' : linkIssueCount > 0 ? `${linkIssueCount} 条异常` : '链路正常'}</HealthTag>} /><div className="v2-ops-link-list" role="list">{sortedLinks.length ? sortedLinks.map((item) => <article className={`v2-ops-link-card is-${item.status}`} key={item.name} role="listitem"><span className="v2-ops-link-status"><i /><strong>{item.name}</strong></span><p>{item.detail || '无补充信息'}</p><HealthTag status={item.status} /></article>) : <Empty className="v2-ops-link-empty" title={data ? '暂无链路探针' : '正在读取链路状态'} description={data ? '当前响应没有可展示的数据链路证据。' : '全局健康数据返回后将在这里更新。'} />}</div></Card>
diff --git a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
index a97a73f1..8bc643ad 100644
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -11645,6 +11645,87 @@
     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;
+    grid-template-rows: auto auto;
+    gap: 3px 10px;
+    padding: 8px 12px;
+  }
+
+  .v2-ops-links .v2-ops-link-card > .v2-ops-link-status {
+    min-width: 0;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .v2-ops-links .v2-ops-link-card > .v2-ops-link-status strong {
+    overflow: hidden;
+    font-size: 11px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .v2-ops-links .v2-ops-link-card > p {
+    min-width: 0;
+    grid-column: 1;
+    grid-row: 2;
+    margin: 0 0 0 16px;
+    overflow: hidden;
+    font-size: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .v2-ops-links .v2-ops-link-card > .v2-ops-health-tag {
+    align-self: center;
+    grid-column: 2;
+    grid-row: 1 / 3;
+  }
+
   .v2-source-filter-panel .v2-source-search {
     align-items: stretch;
   }