feat(platform): unify vehicle source matrix

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

@@ -46,6 +46,12 @@ function formatSeconds(value?: number) {
   return `${Math.round(value)} 秒`;
 }
 
+function sourceServiceRole(source: VehicleSourceStatus, primaryProtocol?: string) {
+  if (source.protocol === primaryProtocol) return { label: '主来源', color: 'blue' as const };
+  if (source.online) return { label: '在线证据', color: 'green' as const };
+  return { label: '离线证据', color: 'grey' as const };
+}
+
 async function copyVehicleServiceURL() {
   try {
     await navigator.clipboard.writeText(`${window.location.origin}${window.location.pathname}${window.location.hash}`);
@@ -305,57 +311,72 @@ export function VehicleDetail({
                     <Button size="small" disabled={!activeProtocol} onClick={() => switchSource('')}>全部来源</Button>
                   </Space>
                 </div>
-                <div className="vp-source-grid">
-                  {detail.sourceStatus.map((source) => (
-                    <div key={source.protocol} className={`vp-source-card${activeProtocol === source.protocol ? ' vp-source-card-active' : ''}`}>
-                      <div className="vp-source-card-head">
-                        <Space>
-                          <Tag color={source.protocol === summary?.primaryProtocol ? 'blue' : 'grey'}>{source.protocol}</Tag>
-                          <StatusTag status={source.online ? 'ok' : 'offline'} />
-                        </Space>
-                        <Typography.Text type="tertiary">{source.lastSeen || '无上报'}</Typography.Text>
-                      </div>
-                      <Space spacing={4} wrap>
-                        {sourceCapabilities.map((item) => (
-                          <Tag key={item.key} color={source[item.key] ? 'green' : 'grey'}>
-                            {item.label}{source[item.key] ? '有' : '无'}
-                          </Tag>
-                        ))}
-                      </Space>
-                      <div className="vp-source-card-actions">
+                <Table
+                  loading={loading}
+                  pagination={false}
+                  rowKey="protocol"
+                  dataSource={detail.sourceStatus}
+                  columns={[
+                    {
+                      title: '来源',
+                      dataIndex: 'protocol',
+                      width: 140,
+                      render: (_: unknown, row: VehicleSourceStatus) => (
+                        <Tag color={row.protocol === summary?.primaryProtocol ? 'blue' : 'grey'}>{row.protocol}</Tag>
+                      )
+                    },
+                    {
+                      title: '车辆服务角色',
+                      width: 130,
+                      render: (_: unknown, row: VehicleSourceStatus) => {
+                        const role = sourceServiceRole(row, summary?.primaryProtocol);
+                        return <Tag color={role.color}>{role.label}</Tag>;
+                      }
+                    },
+                    { title: '在线', width: 100, render: (_: unknown, row: VehicleSourceStatus) => <StatusTag status={row.online ? 'ok' : 'offline'} /> },
+                    { title: '最后时间', dataIndex: 'lastSeen', width: 190, render: (value?: string) => value || '无上报' },
+                    ...sourceCapabilities.map((item) => ({
+                      title: item.label,
+                      width: 90,
+                      render: (_: unknown, row: VehicleSourceStatus) => <Tag color={row[item.key] ? 'green' : 'grey'}>{row[item.key] ? '有' : '无'}</Tag>
+                    })),
+                    {
+                      title: '操作',
+                      width: 330,
+                      render: (_: unknown, row: VehicleSourceStatus) => (
                         <Space spacing={6} wrap>
                           <Button
                             size="small"
-                            theme={activeProtocol === source.protocol ? 'solid' : 'light'}
-                            type={activeProtocol === source.protocol ? 'primary' : 'tertiary'}
-                            disabled={activeProtocol === source.protocol}
-                            onClick={() => switchSource(source.protocol)}
+                            theme={activeProtocol === row.protocol ? 'solid' : 'light'}
+                            type={activeProtocol === row.protocol ? 'primary' : 'tertiary'}
+                            disabled={activeProtocol === row.protocol}
+                            onClick={() => switchSource(row.protocol)}
                           >
-                            仅看 {source.protocol}
+                            仅看 {row.protocol}
                           </Button>
                           <Button
                             size="small"
                             theme="light"
                             type="tertiary"
-                            disabled={!source.hasHistory}
-                            onClick={() => onOpenHistory(resolvedVIN, source.protocol)}
+                            disabled={!row.hasHistory}
+                            onClick={() => onOpenHistory(resolvedVIN, row.protocol)}
                           >
-                            查看 {source.protocol} 历史
+                            查看 {row.protocol} 历史
                           </Button>
                           <Button
                             size="small"
                             theme="light"
                             type="tertiary"
-                            disabled={!source.hasMileage}
-                            onClick={() => onOpenMileage(resolvedVIN, source.protocol)}
+                            disabled={!row.hasMileage}
+                            onClick={() => onOpenMileage(resolvedVIN, row.protocol)}
                           >
-                            查看 {source.protocol} 里程
+                            查看 {row.protocol} 里程
                           </Button>
                         </Space>
-                      </div>
-                    </div>
-                  ))}
-                </div>
+                      )
+                    }
+                  ]}
+                />
               </>
             ) : (
               <Typography.Text type="secondary">暂未查询到该车辆的数据来源覆盖。</Typography.Text>
@@ -377,24 +398,6 @@ export function VehicleDetail({
               ]}
             />
           </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>
         </>
       ) : null}
 

vehicle-data-platform/apps/web/src/styles/global.css

@@ -318,41 +318,10 @@ body {
   word-break: break-all;
 }
 
-.vp-source-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
 .vp-source-toolbar {
   margin-bottom: 12px;
 }
 
-.vp-source-card {
-  min-height: 86px;
-  padding: 12px;
-  border: 1px solid var(--vp-border);
-  border-radius: var(--vp-radius);
-  background: #fbfcff;
-}
-
-.vp-source-card-active {
-  border-color: rgba(22, 100, 255, 0.5);
-  background: rgba(22, 100, 255, 0.06);
-}
-
-.vp-source-card-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.vp-source-card-actions {
-  margin-top: 12px;
-}
-
 .vp-realtime-strip {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));

vehicle-data-platform/apps/web/src/test/App.test.tsx

@@ -1865,6 +1865,10 @@ test('switches vehicle detail to a source from the coverage cards', async () =>
   render(<App />);
 
   expect(await screen.findByText('VIN001')).toBeInTheDocument();
+  expect(screen.getByText('车辆服务角色')).toBeInTheDocument();
+  expect(screen.getByText('主来源')).toBeInTheDocument();
+  expect(screen.getByText('在线证据')).toBeInTheDocument();
+  expect(screen.getByText('离线证据')).toBeInTheDocument();
   fireEvent.click(screen.getByRole('button', { name: '仅看 JT808' }));
 
   await waitFor(() => {