feat(platform): add vehicle data management console

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

@@ -0,0 +1,61 @@
+import { Card, Table, Tabs, Toast } from '@douyinfe/semi-ui';
+import { useEffect, useState } from 'react';
+import { api } from '../api/client';
+import type { RealtimeLocationRow } from '../api/types';
+import { DataEmpty } from '../components/DataEmpty';
+import { PageHeader } from '../components/PageHeader';
+
+export function Realtime() {
+  const [rows, setRows] = useState<RealtimeLocationRow[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.realtimeLocations(new URLSearchParams({ limit: '50' }))
+      .then((page) => setRows(page.items))
+      .catch((error: Error) => Toast.error(error.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="vp-page">
+      <PageHeader title="实时状态" description="按协议和车辆查看最新实时位置、在线状态和核心数据" />
+      <Card bordered>
+        <Tabs type="line">
+          <Tabs.TabPane tab="表格视图" itemKey="table">
+            {rows.length === 0 && !loading ? (
+              <DataEmpty />
+            ) : (
+              <Table
+                loading={loading}
+                rowKey="vin"
+                dataSource={rows}
+                pagination={false}
+                columns={[
+                  { title: 'VIN', dataIndex: 'vin' },
+                  { title: '车牌', dataIndex: 'plate' },
+                  { title: '协议', dataIndex: 'protocol' },
+                  { title: '速度 km/h', dataIndex: 'speedKmh' },
+                  { title: 'SOC %', dataIndex: 'socPercent' },
+                  { title: '总里程 km', dataIndex: 'totalMileageKm' },
+                  { title: '最后时间', dataIndex: 'lastSeen' }
+                ]}
+              />
+            )}
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="地图视图" itemKey="map">
+            <div className="vp-map">
+              {rows.map((row, index) => (
+                <span
+                  key={row.vin}
+                  className="vp-map-dot"
+                  title={`${row.plate} ${row.protocol}`}
+                  style={{ left: `${18 + index * 24}%`, top: `${26 + (index % 3) * 18}%` }}
+                />
+              ))}
+            </div>
+          </Tabs.TabPane>
+        </Tabs>
+      </Card>
+    </div>
+  );
+}