feat(platform): export mileage statistics page

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { DailyMileageRow, MileageSummary } from '../api/types';
 import { PageHeader } from '../components/PageHeader';
+import { buildCsv, downloadCsv, type CsvColumn } from '../domain/csvExport';
 
 const emptySummary: MileageSummary = {
   vehicleCount: 0,
@@ -93,6 +94,23 @@ function maxMileageRow(rows: DailyMileageRow[]) {
   }, undefined);
 }
 
+const mileageExportColumns: CsvColumn<DailyMileageRow>[] = [
+  { title: '日期', value: (row) => row.date },
+  { title: 'VIN', value: (row) => row.vin },
+  { title: '车牌', value: (row) => row.plate },
+  { title: '来源', value: (row) => row.source },
+  { title: '起始里程km', value: (row) => row.startMileageKm },
+  { title: '结束里程km', value: (row) => row.endMileageKm },
+  { title: '日里程km', value: (row) => row.dailyMileageKm },
+  { title: '异常', value: (row) => row.anomalySeverity || '正常' }
+];
+
+function exportFileName(filters: Record<string, string>) {
+  const keyword = filters.keyword?.trim() || 'all';
+  const protocol = filters.protocol?.trim() || 'all-source';
+  return `daily-mileage-${keyword}-${protocol}.csv`;
+}
+
 export function Mileage({
   initialVin,
   initialProtocol,
@@ -182,6 +200,14 @@ export function Mileage({
       ...(dateTo ? { dateTo } : {})
     });
   };
+  const exportMileage = () => {
+    if (rows.length === 0) {
+      Toast.warning('当前没有可导出的里程明细');
+      return;
+    }
+    downloadCsv(exportFileName(filters), buildCsv(mileageExportColumns, rows));
+    Toast.success(`已导出 ${rows.length} 条里程明细`);
+  };
 
   useEffect(() => {
     const nextFilters = mergeInitialFilters(initialVin, initialProtocol, initialFilters);
@@ -314,6 +340,12 @@ export function Mileage({
         </div>
       </Card>
       <Card bordered style={{ marginTop: 16 }}>
+        <div className="vp-table-toolbar">
+          <Space wrap>
+            <Tag color="blue">当前页 {rows.length.toLocaleString()} 条</Tag>
+            <Button size="small" onClick={exportMileage}>导出里程当前页 CSV</Button>
+          </Space>
+        </div>
         <Table
           loading={loading}
           rowKey={(row?: DailyMileageRow) => `${row?.date ?? ''}-${row?.vin ?? ''}-${row?.source ?? ''}`}