From b3168dda2aecfffb539e9f8884326ee827d14350 Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Fri, 3 Jul 2026 22:54:44 +0800
Subject: [PATCH] feat(platform): show link issue count in topbar

---
 vehicle-data-platform/apps/web/src/App.tsx        | 15 +++++++++++++--
 .../apps/web/src/layout/AppShell.tsx              |  6 +++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/App.tsx b/vehicle-data-platform/apps/web/src/App.tsx
index 2026208f..1df675d6 100644
--- a/vehicle-data-platform/apps/web/src/App.tsx
+++ b/vehicle-data-platform/apps/web/src/App.tsx
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { Toast } from '@douyinfe/semi-ui';
+import { api } from './api/client';
 import { AppShell, type PageKey } from './layout/AppShell';
 import { Dashboard } from './pages/Dashboard';
 import { History } from './pages/History';
@@ -11,6 +13,15 @@ import { Vehicles } from './pages/Vehicles';
 export default function App() {
   const [activePage, setActivePage] = useState<PageKey>('dashboard');
   const [activeVin, setActiveVin] = useState('LB9A32A24R0LS1426');
+  const [linkIssueCount, setLinkIssueCount] = useState<number | null>(null);
+
+  useEffect(() => {
+    api.opsHealth()
+      .then((health) => {
+        setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length);
+      })
+      .catch((error: Error) => Toast.error(error.message));
+  }, []);
 
   const openVehicle = (vin: string) => {
     const nextVin = vin.trim();
@@ -32,7 +43,7 @@ export default function App() {
   };
 
   return (
-    <AppShell activePage={activePage} onChange={setActivePage} onVehicleSearch={openVehicle}>
+    <AppShell activePage={activePage} linkIssueCount={linkIssueCount} onChange={setActivePage} onVehicleSearch={openVehicle}>
       {pages[activePage]}
     </AppShell>
   );
diff --git a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
index 9ed12728..e5b63b1d 100644
--- a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
+++ b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx
@@ -26,11 +26,13 @@ const navItems = [
 
 export function AppShell({
   activePage,
+  linkIssueCount,
   onChange,
   onVehicleSearch,
   children
 }: {
   activePage: PageKey;
+  linkIssueCount: number | null;
   onChange: (page: PageKey) => void;
   onVehicleSearch: (keyword: string) => void;
   children: ReactNode;
@@ -76,7 +78,9 @@ export function AppShell({
             </Space>
             <Space spacing={12}>
               <Tag color="blue">生产环境</Tag>
-              <Button size="small" onClick={() => onChange('quality')}>链路监控</Button>
+              <Button size="small" onClick={() => onChange('quality')}>
+                {linkIssueCount == null ? '链路监控' : linkIssueCount > 0 ? `链路 ${linkIssueCount} 项关注` : '链路正常'}
+              </Button>
             </Space>
           </header>
           {children}