feat(platform): surface vehicle quality issues

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, VehicleSourceStatus } from '../api/types';
+import type { QualityIssueRow, VehicleDetail as VehicleDetailData, VehicleSourceStatus } from '../api/types';
 import { PageHeader } from '../components/PageHeader';
 import { StatusTag } from '../components/StatusTag';
 
@@ -43,6 +43,7 @@ export function VehicleDetail({ vin }: { vin: string }) {
   const latest = detail?.realtime[0];
   const protocols = useMemo(() => detail?.sources ?? [], [detail?.sources]);
   const latestRaw = detail?.raw.items[0];
+  const qualityCount = detail?.quality.items.length ?? 0;
 
   return (
     <div className="vp-page">
@@ -78,7 +79,8 @@ export function VehicleDetail({ vin }: { vin: string }) {
               { key: '在线', value: <StatusTag status={identity?.online || latest ? 'ok' : 'offline'} /> },
               { key: '来源协议', value: protocols.length > 0 ? <Space>{protocols.map((item) => <Tag key={item} color="blue">{item}</Tag>)}</Space> : '-' },
               { key: '最后位置时间', value: latest?.lastSeen ?? '-' },
-              { key: '最新 RAW 时间', value: latestRaw?.serverTime ?? '-' }
+              { key: '最新 RAW 时间', value: latestRaw?.serverTime ?? '-' },
+              { key: '质量风险', value: <Tag color={qualityCount > 0 ? 'orange' : 'green'}>{qualityCount > 0 ? `${qualityCount} 项` : '无'}</Tag> }
             ]}
           />
         </div>
@@ -170,6 +172,21 @@ export function VehicleDetail({ vin }: { vin: string }) {
               ]}
             />
           </Tabs.TabPane>
+          <Tabs.TabPane tab="质量风险" itemKey="quality">
+            <Table
+              loading={loading}
+              pagination={false}
+              rowKey={(row?: QualityIssueRow) => `${row?.protocol ?? ''}-${row?.issueType ?? ''}-${row?.lastSeen ?? ''}`}
+              dataSource={detail?.quality.items ?? []}
+              columns={[
+                { title: '来源', dataIndex: 'protocol', width: 130 },
+                { title: '问题', dataIndex: 'issueType', width: 150 },
+                { title: '级别', width: 110, render: (_: unknown, row: QualityIssueRow) => <Tag color={row.severity === 'error' ? 'red' : 'orange'}>{row.severity}</Tag> },
+                { title: '最后时间', dataIndex: 'lastSeen', width: 190 },
+                { title: '说明', dataIndex: 'detail' }
+              ]}
+            />
+          </Tabs.TabPane>
         </Tabs>
       </Card>
     </div>