From 2465bd7f1608f559ae32e777a1b199b1d48f3150 Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sat, 4 Jul 2026 12:10:28 +0800
Subject: [PATCH] feat(platform): link quality issues to realtime status

---
 vehicle-data-platform/apps/web/src/App.tsx    |  2 +-
 .../apps/web/src/pages/Quality.tsx            | 14 ++-
 .../apps/web/src/test/App.test.tsx            | 87 +++++++++++++++++++
 3 files changed, 100 insertions(+), 3 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/App.tsx b/vehicle-data-platform/apps/web/src/App.tsx
index f05bdf0d..43d31192 100644
--- a/vehicle-data-platform/apps/web/src/App.tsx
+++ b/vehicle-data-platform/apps/web/src/App.tsx
@@ -379,7 +379,7 @@ export default function App() {
     detail: <VehicleDetail vin={activeVin} protocol={activeProtocol} onOpenRealtime={openRealtimeForVehicle} onOpenHistory={openHistoryForVehicle} onOpenRaw={openRawForVehicle} onOpenMileage={openMileageForVehicle} onOpenVehicles={openVehicles} onOpenQuality={openQuality} onQueryChange={updateVehicleDetailQuery} />,
     history: <History initialVin={analysisVin} initialProtocol={activeProtocol} initialTab={historyTab} initialFilters={historyFilters} onFiltersChange={updateHistoryFilters} onOpenVehicle={openVehicle} onOpenMileage={openMileageWithFilters} />,
     mileage: <Mileage initialVin={analysisVin} initialProtocol={activeProtocol} initialFilters={mileageFilters} onFiltersChange={updateMileageFilters} onOpenVehicle={openVehicle} onOpenHistory={openHistoryWithFilters} />,
-    quality: <Quality onOpenVehicle={openVehicle} onOpenHistory={openHistoryWithFilters} onOpenMileage={openMileageWithFilters} onHealthLoaded={(health) => setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length)} onFiltersChange={updateQualityFilters} initialFilters={qualityFilters} />
+    quality: <Quality onOpenVehicle={openVehicle} onOpenRealtime={openRealtime} onOpenHistory={openHistoryWithFilters} onOpenMileage={openMileageWithFilters} onHealthLoaded={(health) => setLinkIssueCount(health.linkHealth.filter((item) => item.status !== 'ok').length)} onFiltersChange={updateQualityFilters} initialFilters={qualityFilters} />
   };
 
   return (
diff --git a/vehicle-data-platform/apps/web/src/pages/Quality.tsx b/vehicle-data-platform/apps/web/src/pages/Quality.tsx
index 6fde9788..3afad5b1 100644
--- a/vehicle-data-platform/apps/web/src/pages/Quality.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Quality.tsx
@@ -263,6 +263,7 @@ async function copyQualityShareURL() {
 
 export function Quality({
   onOpenVehicle,
+  onOpenRealtime,
   onOpenHistory,
   onOpenMileage,
   onHealthLoaded,
@@ -270,6 +271,7 @@ export function Quality({
   initialFilters = {}
 }: {
   onOpenVehicle: (vin: string, protocol?: string) => void;
+  onOpenRealtime?: (filters: Record<string, string>) => void;
   onOpenHistory?: (filters: Record<string, string>) => void;
   onOpenMileage?: (filters: Record<string, string>) => void;
   onHealthLoaded?: (health: OpsHealth) => void;
@@ -365,6 +367,13 @@ export function Quality({
       ...(dateTo ? { dateTo } : {})
     });
   };
+  const openIssueRealtime = (row: QualityIssueRow) => {
+    const lookup = qualityIssueVehicleLookup(row);
+    onOpenRealtime?.({
+      keyword: lookup.key,
+      protocol: row.protocol
+    });
+  };
   const openIssueMileage = (row: QualityIssueRow) => {
     const lookup = qualityIssueVehicleLookup(row);
     const dateFrom = issueEvidenceDate(row.lastSeen);
@@ -611,13 +620,14 @@ export function Quality({
             },
             {
               title: '操作',
-              width: 330,
+              width: 410,
               render: (_: unknown, row: QualityIssueRow) => {
                 const lookup = qualityIssueVehicleLookup(row);
                 return (
-                  <Space spacing={4}>
+                  <Space spacing={4} wrap>
                     <Button size="small" icon={<IconCopy />} onClick={() => copyText(row.phone, '手机号')}>手机号</Button>
                     <Button size="small" icon={<IconCopy />} onClick={() => copyText(row.sourceEndpoint, '来源')}>来源</Button>
+                    <Button size="small" disabled={!lookup.key || !onOpenRealtime} onClick={() => openIssueRealtime(row)}>实时状态</Button>
                     <Button size="small" disabled={!lookup.key || !onOpenHistory} onClick={() => openIssueHistory(row)}>核对历史</Button>
                     <Button size="small" disabled={!lookup.key || !onOpenMileage} onClick={() => openIssueMileage(row)}>核对里程</Button>
                     <Button size="small" disabled={!lookup.key} onClick={() => onOpenVehicle(lookup.key, row.protocol)}>
diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx
index b9f39cef..feb4c454 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -5283,6 +5283,93 @@ test('loads realtime vehicles from shareable source filter hash', async () => {
   expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/realtime/vehicles?limit=50&offset=0&keyword=%E7%B2%A4ART002&protocol=JT808&online=online&serviceStatus=degraded'), undefined);
 });
 
+test('opens realtime status from quality issue row with source evidence', async () => {
+  window.history.replaceState(null, '', '/#/quality');
+  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+    const path = String(input);
+    if (path.includes('/api/ops/health')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: { linkHealth: [], kafkaLag: 0, redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/quality/summary')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            issueVehicleCount: 1,
+            issueRecordCount: 1,
+            errorCount: 1,
+            warningCount: 0,
+            protocols: [{ name: 'JT808', count: 1 }],
+            issueTypes: [{ name: 'VIN_MISSING', count: 1 }]
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/quality/issues')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            items: [{
+              vin: '',
+              plate: '粤AG18312',
+              phone: '13307795425',
+              sourceEndpoint: '115.231.168.135:43625',
+              protocol: 'JT808',
+              issueType: 'VIN_MISSING',
+              severity: 'error',
+              lastSeen: '2026-07-03 20:12:10',
+              detail: 'JT808 数据缺少 VIN 映射'
+            }],
+            total: 1,
+            limit: 20,
+            offset: 0
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/realtime/vehicles')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: { items: [], total: 0, limit: 50, offset: 0 },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: { items: [], total: 0, limit: 20, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  expect(await screen.findByText('13307795425')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: '实时状态' }));
+
+  await waitFor(() => {
+    expect(window.location.hash).toBe('#/realtime?keyword=%E7%B2%A4AG18312&protocol=JT808');
+  });
+  expect(await screen.findByRole('heading', { name: '实时监控' })).toBeInTheDocument();
+});
+
 test('shows and clears current realtime service filters', async () => {
   window.history.replaceState(null, '', '/#/realtime?keyword=%E7%B2%A4ART002&protocol=JT808&online=online&serviceStatus=degraded');
   const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {