From 5000d5cd1c6a0fed4cb8f28a5cdac2816187b604 Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sat, 4 Jul 2026 01:39:18 +0800
Subject: [PATCH] feat(platform-web): show vehicle detail source scope

---
 .../apps/web/src/pages/VehicleDetail.tsx      |  9 +++
 .../apps/web/src/styles/global.css            | 17 +++++
 .../apps/web/src/test/App.test.tsx            | 74 +++++++++++++++++++
 3 files changed, 100 insertions(+)

diff --git a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx
index 89d44444..a5897a4e 100644
--- a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx
@@ -88,6 +88,7 @@ export function VehicleDetail({
   const online = resolution?.online || summary?.online || identity?.online || false;
   const lastSeen = resolution?.lastSeen || summary?.lastSeen || latest?.lastSeen || '-';
   const activeProtocol = query.protocol?.trim() ?? '';
+  const scopeText = activeProtocol ? `单一来源：${activeProtocol}` : '全部来源聚合';
   const formKey = `${query.keyword}-${query.protocol ?? ''}`;
   const switchSource = (nextProtocol = '') => {
     const nextQuery = { keyword: resolvedVIN || query.keyword, protocol: nextProtocol };
@@ -136,6 +137,14 @@ export function VehicleDetail({
         </Form>
       </Card>
 
+      <div className="vp-scope-bar">
+        <span className="vp-scope-label">当前查看范围</span>
+        <Tag color={activeProtocol ? 'blue' : 'green'}>{scopeText}</Tag>
+        <Typography.Text type="tertiary">
+          {activeProtocol ? '下方实时、历史、RAW 和里程仅展示该来源返回的数据。' : '下方数据按车辆聚合展示全部可用来源。'}
+        </Typography.Text>
+      </div>
+
       <Card bordered style={{ marginTop: 16 }}>
         <div className="vp-vehicle-summary">
           <Descriptions
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css
index 8ec40d5a..e0fc5b2a 100644
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -98,6 +98,23 @@ body {
   padding-top: 2px;
 }
 
+.vp-scope-bar {
+  min-height: 40px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  background: #fbfcff;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.vp-scope-label {
+  color: var(--vp-text-muted);
+  font-size: 13px;
+}
+
 .vp-section {
   background: var(--vp-surface);
   border: 1px solid var(--vp-border);
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 c108a7bc..27fcf576 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -443,3 +443,77 @@ test('opens vehicle service from an empty history query with the current filters
     expect(window.location.hash).toBe('#/detail?keyword=VIN404&protocol=JT808');
   });
 });
+
+test('shows selected source scope on vehicle detail', async () => {
+  window.history.replaceState(null, '', '/#/detail?keyword=VIN001&protocol=JT808');
+  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+    const path = String(input);
+    if (path.includes('/api/vehicles/detail')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            vin: 'VIN001',
+            lookupKey: 'VIN001',
+            lookupResolved: true,
+            resolution: {
+              lookupKey: 'VIN001',
+              resolved: true,
+              vin: 'VIN001',
+              plate: '粤AG18312',
+              phone: '13307795425',
+              oem: 'G7s',
+              protocols: ['GB32960', 'JT808'],
+              online: true,
+              lastSeen: '2026-07-03 20:12:10'
+            },
+            realtimeSummary: {
+              vin: 'VIN001',
+              plate: '粤AG18312',
+              phone: '13307795425',
+              oem: 'G7s',
+              protocols: ['GB32960', 'JT808'],
+              sourceCount: 2,
+              onlineSourceCount: 1,
+              online: true,
+              primaryProtocol: 'JT808',
+              longitude: 113.2,
+              latitude: 23.1,
+              speedKmh: 30,
+              socPercent: 78,
+              totalMileageKm: 100,
+              lastSeen: '2026-07-03 20:12:10'
+            },
+            sources: ['GB32960', 'JT808'],
+            sourceStatus: [
+              { protocol: 'GB32960', online: false, lastSeen: '2026-07-03 20:11:10', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true },
+              { protocol: 'JT808', online: true, lastSeen: '2026-07-03 20:12:10', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true }
+            ],
+            realtime: [],
+            history: { items: [], total: 0, limit: 20, offset: 0 },
+            raw: { items: [], total: 0, limit: 10, offset: 0 },
+            mileage: { items: [], total: 0, limit: 20, offset: 0 },
+            quality: { items: [], total: 0, limit: 20, offset: 0 }
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: path.includes('/api/ops/health')
+          ? { linkHealth: [], kafkaLag: 0, redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } }
+          : { items: [], total: 0, limit: 10, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  expect(await screen.findByText('当前查看范围')).toBeInTheDocument();
+  expect(screen.getByText('单一来源：JT808')).toBeInTheDocument();
+});