feat(platform): add vehicle data management console

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

@@ -0,0 +1,44 @@
+import { Card, DatePicker, Form, Table, Tag, Toast } from '@douyinfe/semi-ui';
+import { useEffect, useState } from 'react';
+import { api } from '../api/client';
+import type { DailyMileageRow } from '../api/types';
+import { PageHeader } from '../components/PageHeader';
+
+export function Mileage() {
+  const [rows, setRows] = useState<DailyMileageRow[]>([]);
+
+  useEffect(() => {
+    api.dailyMileage(new URLSearchParams({ limit: '20' }))
+      .then((page) => setRows(page.items))
+      .catch((error: Error) => Toast.error(error.message));
+  }, []);
+
+  return (
+    <div className="vp-page">
+      <PageHeader title="里程分析" description="每日里程、区间里程和异常差值分析" />
+      <Card bordered>
+        <Form layout="horizontal">
+          <Form.Input field="vin" label="VIN" placeholder="输入 VIN" style={{ width: 260 }} />
+          <DatePicker type="dateRange" density="compact" />
+        </Form>
+      </Card>
+      <Card bordered style={{ marginTop: 16 }}>
+        <Table
+          rowKey="vin"
+          dataSource={rows}
+          pagination={false}
+          columns={[
+            { title: '日期', dataIndex: 'date' },
+            { title: 'VIN', dataIndex: 'vin' },
+            { title: '车牌', dataIndex: 'plate' },
+            { title: '起始里程', dataIndex: 'startMileageKm' },
+            { title: '结束里程', dataIndex: 'endMileageKm' },
+            { title: '日里程', dataIndex: 'dailyMileageKm' },
+            { title: '来源', dataIndex: 'source' },
+            { title: '异常', render: (_: unknown, row: DailyMileageRow) => row.anomalySeverity ? <Tag color="orange">{row.anomalySeverity}</Tag> : <Tag color="green">正常</Tag> }
+          ]}
+        />
+      </Card>
+    </div>
+  );
+}