feat(platform): paginate vehicle coverage

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

@@ -9,17 +9,22 @@ import { StatusTag } from '../components/StatusTag';
 export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => void }) {
   const [rows, setRows] = useState<VehicleCoverageRow[]>([]);
   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>) => {
+  const load = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
     setLoading(true);
-    const params = new URLSearchParams({ limit: '20' });
+    const params = new URLSearchParams({ limit: String(pageSize), offset: String((page - 1) * pageSize) });
     if (values?.keyword) params.set('keyword', values.keyword);
     if (values?.protocol) params.set('protocol', values.protocol);
     if (values?.coverage) params.set('coverage', values.coverage);
     if (values?.online) params.set('online', values.online);
     if (values?.bindingStatus) params.set('bindingStatus', values.bindingStatus);
     api.vehicleCoverage(params)
-      .then((page) => setRows(page.items))
+      .then((nextPage) => {
+        setRows(nextPage.items);
+        setPagination({ currentPage: page, pageSize, total: nextPage.total });
+      })
       .catch((error: Error) => Toast.error(error.message))
       .finally(() => setLoading(false));
   };
@@ -54,7 +59,11 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
     <div className="vp-page">
       <PageHeader title="车辆台账" description="以 VIN 为主对象维护车辆身份、多源覆盖、在线状态和绑定状态" />
       <Card bordered>
-        <Form layout="horizontal" onSubmit={(values) => load(values as Record<string, string>)}>
+        <Form layout="horizontal" onSubmit={(values) => {
+          const nextFilters = values as Record<string, string>;
+          setFilters(nextFilters);
+          load(nextFilters, 1, pagination.pageSize);
+        }}>
           <Form.Input field="keyword" label="关键词" placeholder="VIN / 车牌 / 手机号 / OEM" style={{ width: 260 }} />
           <Form.Select field="protocol" label="协议" placeholder="全部协议" style={{ width: 180 }}>
             <Select.Option value="GB32960">GB32960</Select.Option>
@@ -75,7 +84,10 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
           </Form.Select>
           <Space>
             <Button htmlType="submit" theme="solid" type="primary">查询</Button>
-            <Button onClick={() => load()}>重置</Button>
+            <Button onClick={() => {
+              setFilters({});
+              load({}, 1, pagination.pageSize);
+            }}>重置</Button>
           </Space>
         </Form>
       </Card>
@@ -83,7 +95,20 @@ export function Vehicles({ onOpenVehicle }: { onOpenVehicle: (vin: string) => vo
         {rows.length === 0 && !loading ? (
           <DataEmpty />
         ) : (
-          <Table loading={loading} rowKey="vin" dataSource={rows} columns={columns} pagination={false} />
+          <Table
+            loading={loading}
+            rowKey="vin"
+            dataSource={rows}
+            columns={columns}
+            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)
+            }}
+          />
         )}
       </Card>
     </div>