feat(platform): export realtime vehicle page

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

@@ -8,6 +8,7 @@ import { SourceStatusTags } from '../components/SourceStatusTags';
 import { StatusTag } from '../components/StatusTag';
 import { VehicleMap, type VehicleMapPoint } from '../components/VehicleMap';
 import { isAMapConfigured } from '../config/appConfig';
+import { buildCsv, downloadCsv, type CsvColumn } from '../domain/csvExport';
 
 function canOpenVehicle(vin?: string) {
   const value = vin?.trim();
@@ -78,6 +79,32 @@ const serviceStatusLabel: Record<string, string> = {
   identity_required: '身份未绑定'
 };
 
+const realtimeExportColumns: CsvColumn<VehicleRealtimeRow>[] = [
+  { title: 'VIN', value: (row) => row.vin },
+  { title: '车牌', value: (row) => row.plate },
+  { title: '手机号', value: (row) => row.phone },
+  { title: 'OEM', value: (row) => row.oem },
+  { title: '主来源', value: (row) => row.primaryProtocol },
+  { title: '来源列表', value: (row) => row.protocols?.join('|') },
+  { title: '在线', value: (row) => row.online ? '在线' : '离线' },
+  { title: '车辆服务状态', value: (row) => vehicleServiceStatus(row).label },
+  { title: '来源在线', value: (row) => sourceEvidenceText(row) },
+  { title: '经度', value: (row) => row.longitude },
+  { title: '纬度', value: (row) => row.latitude },
+  { title: '速度km/h', value: (row) => row.speedKmh },
+  { title: 'SOC%', value: (row) => row.socPercent },
+  { title: '总里程km', value: (row) => row.totalMileageKm },
+  { title: '最后时间', value: (row) => row.lastSeen },
+  { title: '绑定状态', value: (row) => row.bindingStatus }
+];
+
+function realtimeExportFileName(filters: Record<string, string>) {
+  const keyword = filters.keyword?.trim() || 'all';
+  const protocol = filters.protocol?.trim() || 'all-source';
+  const online = filters.online?.trim() || 'all-online';
+  return `realtime-vehicles-${keyword}-${protocol}-${online}.csv`;
+}
+
 export function Realtime({
   onOpenVehicle,
   onOpenHistory,
@@ -130,6 +157,14 @@ export function Realtime({
       protocol: filters.protocol || row.primaryProtocol || ''
     });
   };
+  const exportRealtime = () => {
+    if (rows.length === 0) {
+      Toast.warning('当前没有可导出的实时车辆');
+      return;
+    }
+    downloadCsv(realtimeExportFileName(filters), buildCsv(realtimeExportColumns, rows));
+    Toast.success(`已导出 ${rows.length} 条实时车辆`);
+  };
   const filterSummary = [
     filters.keyword ? `关键词：${filters.keyword}` : '',
     filters.protocol ? `数据来源：${filters.protocol}` : '',
@@ -313,6 +348,12 @@ export function Realtime({
         </div>
         <Tabs type="line">
           <Tabs.TabPane tab="表格视图" itemKey="table">
+            <div className="vp-table-toolbar">
+              <Space wrap>
+                <Tag color="blue">当前页 {rows.length.toLocaleString()} 条</Tag>
+                <Button size="small" onClick={exportRealtime}>导出实时当前页 CSV</Button>
+              </Space>
+            </div>
             {rows.length === 0 && !loading ? (
               <DataEmpty />
             ) : (

vehicle-data-platform/apps/web/src/test/App.test.tsx

@@ -5801,6 +5801,82 @@ test('frames realtime page as one vehicle service with source evidence', async (
   expect(screen.getAllByText('2/2 来源在线').length).toBeGreaterThan(0);
 });
 
+test('exports current realtime vehicles as CSV', async () => {
+  window.history.replaceState(null, '', '/#/realtime?protocol=JT808');
+  const createObjectURL = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:realtime-export');
+  const revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined);
+  vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+    const path = String(input);
+    if (path.includes('/api/ops/health')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: { linkHealth: [], kafkaLag: 0, redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/realtime/vehicles')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            items: [{
+              vin: 'VIN-RT-EXPORT',
+              plate: '粤A实时导',
+              phone: '13300000001',
+              oem: 'G7s',
+              protocols: ['JT808'],
+              sourceStatus: [{ protocol: 'JT808', online: true, lastSeen: '2026-07-03 20:12:10', hasRealtime: true, hasHistory: true, hasRaw: true, hasMileage: true }],
+              sourceCount: 1,
+              onlineSourceCount: 1,
+              online: true,
+              bindingStatus: 'bound',
+              primaryProtocol: 'JT808',
+              longitude: 113.2,
+              latitude: 23.1,
+              speedKmh: 32,
+              socPercent: 76,
+              totalMileageKm: 1200.5,
+              lastSeen: '2026-07-03 20:12:10',
+              serviceStatus: {
+                status: 'healthy',
+                severity: 'ok',
+                title: '服务正常',
+                detail: '1/1 来源在线',
+                sourceCount: 1,
+                onlineSourceCount: 1
+              }
+            }],
+            total: 1,
+            limit: 50,
+            offset: 0
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: { items: [], total: 0, limit: 50, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  expect(await screen.findByRole('button', { name: '导出实时当前页 CSV' })).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: '导出实时当前页 CSV' }));
+
+  expect(createObjectURL).toHaveBeenCalled();
+  expect(revokeObjectURL).toHaveBeenCalledWith('blob:realtime-export');
+});
+
 test('opens vehicle service from realtime map service queue', async () => {
   window.history.replaceState(null, '', '/#/realtime');
   vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {