feat(platform-web): show vehicle list service status

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

@@ -6,6 +6,22 @@ import { DataEmpty } from '../components/DataEmpty';
 import { PageHeader } from '../components/PageHeader';
 import { StatusTag } from '../components/StatusTag';
 
+function vehicleServiceStatus(row: VehicleCoverageRow) {
+  if (row.bindingStatus !== 'bound') {
+    return { label: '身份未绑定', color: 'orange' as const };
+  }
+  if (row.sourceCount <= 0) {
+    return { label: '暂无数据来源', color: 'orange' as const };
+  }
+  if (row.onlineSourceCount <= 0) {
+    return { label: '车辆离线', color: 'red' as const };
+  }
+  if (row.onlineSourceCount < row.sourceCount) {
+    return { label: '部分来源离线', color: 'orange' as const };
+  }
+  return { label: '服务正常', color: 'green' as const };
+}
+
 export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => void }) {
   const [rows, setRows] = useState<VehicleCoverageRow[]>([]);
   const [loading, setLoading] = useState(true);
@@ -37,9 +53,17 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
       { title: '车牌', dataIndex: 'plate', width: 120 },
       { title: '手机号', dataIndex: 'phone', width: 130 },
       { title: 'OEM', dataIndex: 'oem', width: 120 },
+      {
+        title: '车辆服务状态',
+        width: 130,
+        render: (_: unknown, row: VehicleCoverageRow) => {
+          const status = vehicleServiceStatus(row);
+          return <Tag color={status.color}>{status.label}</Tag>;
+        }
+      },
       {
         title: '来源',
-        width: 260,
+        width: 240,
         render: (_: unknown, row: VehicleCoverageRow) => (
           <Space spacing={4} wrap>
             {row.protocols.map((protocol) => <Tag key={protocol} color="blue">{protocol}</Tag>)}