From 36b75b4c0e1e8d608ad26ce5037fc79145298486 Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sat, 4 Jul 2026 07:44:23 +0800
Subject: [PATCH] feat(platform): show source slots on vehicle detail

---
 vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx | 6 +++++-
 vehicle-data-platform/apps/web/src/test/App.test.tsx       | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx
index bdb03810..01088d4c 100644
--- a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { api } from '../api/client';
 import type { QualityIssueRow, VehicleDetail as VehicleDetailData, VehicleSourceStatus } from '../api/types';
 import { PageHeader } from '../components/PageHeader';
+import { SourceStatusTags } from '../components/SourceStatusTags';
 import { StatusTag } from '../components/StatusTag';
 import { isLikelyVIN } from '../domain/vehicleLookup';
 
@@ -307,7 +308,9 @@ export function VehicleDetail({
               { key: '在线', value: <StatusTag status={online ? 'ok' : 'offline'} /> },
               {
                 key: '数据来源',
-                value: protocols.length > 0 ? <Space>{protocols.map((item) => <Tag key={item} color={item === summary?.primaryProtocol ? 'blue' : 'grey'}>{item}</Tag>)}</Space> : '-'
+                value: protocols.length > 0 ? (
+                  <SourceStatusTags sourceStatus={detail?.sourceStatus} protocols={protocols} lastSeen={lastSeen === '-' ? '' : lastSeen} />
+                ) : '-'
               },
               { key: '在线来源', value: summary ? `${summary.onlineSourceCount}/${summary.sourceCount}` : '-' },
               { key: '最后位置时间', value: lastSeen },
@@ -335,6 +338,7 @@ export function VehicleDetail({
                 <div className="vp-source-toolbar">
                   <Space>
                     <Tag color={activeProtocol ? 'grey' : 'blue'}>{activeProtocol ? `当前 ${activeProtocol}` : '当前 全部来源'}</Tag>
+                    <SourceStatusTags sourceStatus={detail.sourceStatus} protocols={protocols} lastSeen={lastSeen === '-' ? '' : lastSeen} />
                     <Button size="small" disabled={!activeProtocol} onClick={() => switchSource('')}>全部来源</Button>
                   </Space>
                 </div>
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 6e1136ff..ea864386 100644
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -3450,6 +3450,9 @@ test('switches vehicle detail to a source from the source matrix', async () => {
   render(<App />);
 
   expect(await screen.findByText('VIN001')).toBeInTheDocument();
+  expect(screen.getAllByText('GB32960 在线').length).toBeGreaterThanOrEqual(1);
+  expect(screen.getAllByText('JT808 在线').length).toBeGreaterThanOrEqual(1);
+  expect(screen.getAllByText('YUTONG_MQTT 未接入').length).toBeGreaterThanOrEqual(1);
   expect(screen.getByText('车辆服务角色')).toBeInTheDocument();
   expect(screen.getByText('主来源')).toBeInTheDocument();
   expect(screen.getByText('在线证据')).toBeInTheDocument();