feat(platform): summarize vehicle source status

vehicle-data-platform/apps/web/src/api/types.ts

@@ -42,12 +42,23 @@ export interface VehicleDetail {
   vin: string;
   identity?: VehicleRow;
   sources: string[];
+  sourceStatus: VehicleSourceStatus[];
   realtime: RealtimeLocationRow[];
   history: Page<HistoryLocationRow>;
   raw: Page<RawFrameRow>;
   mileage: Page<DailyMileageRow>;
 }
 
+export interface VehicleSourceStatus {
+  protocol: string;
+  online: boolean;
+  lastSeen: string;
+  hasRealtime: boolean;
+  hasHistory: boolean;
+  hasRaw: boolean;
+  hasMileage: boolean;
+}
+
 export interface RealtimeLocationRow {
   vin: string;
   plate: string;

vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx

@@ -2,7 +2,7 @@ import { Button, Card, Descriptions, Form, Select, Space, Table, Tabs, Tag, Toas
 import { IconRefresh, IconSearch } from '@douyinfe/semi-icons';
 import { useEffect, useMemo, useState } from 'react';
 import { api } from '../api/client';
-import type { VehicleDetail as VehicleDetailData } from '../api/types';
+import type { VehicleDetail as VehicleDetailData, VehicleSourceStatus } from '../api/types';
 import { PageHeader } from '../components/PageHeader';
 import { StatusTag } from '../components/StatusTag';
 
@@ -84,6 +84,24 @@ export function VehicleDetail({ vin }: { vin: string }) {
         </div>
       </Card>
 
+      <Card bordered title="来源状态" style={{ marginTop: 16 }}>
+        <Table
+          loading={loading}
+          pagination={false}
+          rowKey="protocol"
+          dataSource={detail?.sourceStatus ?? []}
+          columns={[
+            { title: '来源', dataIndex: 'protocol', width: 130 },
+            { title: '在线', width: 100, render: (_: unknown, row: VehicleSourceStatus) => <StatusTag status={row.online ? 'ok' : 'offline'} /> },
+            { title: '最后时间', dataIndex: 'lastSeen', width: 190 },
+            { title: '实时', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasRealtime ? 'green' : 'grey'}>{row.hasRealtime ? '有' : '无'}</Tag> },
+            { title: '历史', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasHistory ? 'green' : 'grey'}>{row.hasHistory ? '有' : '无'}</Tag> },
+            { title: 'RAW', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasRaw ? 'green' : 'grey'}>{row.hasRaw ? '有' : '无'}</Tag> },
+            { title: '里程', width: 90, render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row.hasMileage ? 'green' : 'grey'}>{row.hasMileage ? '有' : '无'}</Tag> }
+          ]}
+        />
+      </Card>
+
       <Card bordered style={{ marginTop: 16 }}>
         <Tabs>
           <Tabs.TabPane tab="实时状态" itemKey="realtime">