feat(platform): show source slots on vehicle detail

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>

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();