feat(platform): paginate daily mileage

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

@@ -1,4 +1,4 @@
-import { Card, DatePicker, Form, Table, Tag, Toast } from '@douyinfe/semi-ui';
+import { Button, Card, Form, Select, Space, Table, Tag, Toast } from '@douyinfe/semi-ui';
 import { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { DailyMileageRow } from '../api/types';
@@ -6,27 +6,69 @@ import { PageHeader } from '../components/PageHeader';
 
 export function Mileage() {
   const [rows, setRows] = useState<DailyMileageRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filters, setFilters] = useState<Record<string, string>>({});
+  const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
+
+  const load = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
+    setLoading(true);
+    const params = new URLSearchParams({ limit: String(pageSize), offset: String((page - 1) * pageSize) });
+    if (values?.vin) params.set('vin', values.vin);
+    if (values?.protocol) params.set('protocol', values.protocol);
+    if (values?.dateFrom) params.set('dateFrom', values.dateFrom);
+    if (values?.dateTo) params.set('dateTo', values.dateTo);
+    api.dailyMileage(params)
+      .then((nextPage) => {
+        setRows(nextPage.items);
+        setPagination({ currentPage: page, pageSize, total: nextPage.total });
+      })
+      .catch((error: Error) => Toast.error(error.message))
+      .finally(() => setLoading(false));
+  };
 
   useEffect(() => {
-    api.dailyMileage(new URLSearchParams({ limit: '20' }))
-      .then((page) => setRows(page.items))
-      .catch((error: Error) => Toast.error(error.message));
+    load({}, 1, pagination.pageSize);
   }, []);
 
   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 layout="horizontal" onSubmit={(values) => {
+          const nextFilters = values as Record<string, string>;
+          setFilters(nextFilters);
+          load(nextFilters, 1, pagination.pageSize);
+        }}>
+          <Form.Input field="vin" label="关键词" placeholder="VIN / 车牌" style={{ width: 260 }} />
+          <Form.Select field="protocol" label="协议" placeholder="全部协议" style={{ width: 180 }}>
+            <Select.Option value="GB32960">GB32960</Select.Option>
+            <Select.Option value="JT808">JT808</Select.Option>
+            <Select.Option value="YUTONG_MQTT">YUTONG_MQTT</Select.Option>
+          </Form.Select>
+          <Form.Input field="dateFrom" label="开始日期" placeholder="2026-07-01" style={{ width: 160 }} />
+          <Form.Input field="dateTo" label="结束日期" placeholder="2026-07-03" style={{ width: 160 }} />
+          <Space>
+            <Button htmlType="submit" theme="solid" type="primary">查询</Button>
+            <Button onClick={() => {
+              setFilters({});
+              load({}, 1, pagination.pageSize);
+            }}>重置</Button>
+          </Space>
         </Form>
       </Card>
       <Card bordered style={{ marginTop: 16 }}>
         <Table
-          rowKey="vin"
+          loading={loading}
+          rowKey={(row?: DailyMileageRow) => `${row?.date ?? ''}-${row?.vin ?? ''}-${row?.source ?? ''}`}
           dataSource={rows}
-          pagination={false}
+          pagination={{
+            currentPage: pagination.currentPage,
+            pageSize: pagination.pageSize,
+            total: pagination.total,
+            showSizeChanger: true,
+            onPageChange: (page) => load(filters, page, pagination.pageSize),
+            onPageSizeChange: (pageSize) => load(filters, 1, pageSize)
+          }}
           columns={[
             { title: '日期', dataIndex: 'date' },
             { title: 'VIN', dataIndex: 'vin' },