feat: build vehicle data platform and production pipeline

vehicle-data-platform/apps/web/src/v2/pages/MonitorPage.test.tsx

@@ -0,0 +1,80 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, expect, test, vi } from 'vitest';
+import { MemoryRouter } from 'react-router-dom';
+import type { VehicleRealtimeRow } from '../../api/types';
+import MonitorPage from './MonitorPage';
+
+const vehicles = [{
+  vin: 'LTEST000000000001', plate: '粤A12345', protocols: ['JT808'], primaryProtocol: 'JT808',
+  longitude: 113.26, latitude: 23.13, speedKmh: 42, socPercent: 80, totalMileageKm: 1234,
+  lastSeen: '2026-07-14T01:00:00Z', online: true, sourceCount: 1, onlineSourceCount: 1
+}, {
+  vin: 'LTEST000000000002', plate: '粤B67890', protocols: ['JT808'], primaryProtocol: 'JT808',
+  longitude: 113.28, latitude: 23.15, speedKmh: 0, socPercent: 72, totalMileageKm: 2234,
+  lastSeen: '2026-07-14T01:00:00Z', online: true, sourceCount: 1, onlineSourceCount: 1
+}] as VehicleRealtimeRow[];
+const monitorMap = { clusters: [], points: [], total: 2 };
+const fleetMapRenderSpy = vi.hoisted(() => vi.fn());
+
+vi.mock('../map/FleetMap', () => ({
+  FleetMap: ({ selectedVin, onSelectVin }: { selectedVin?: string; onSelectVin?: (vin: string) => void }) => {
+    fleetMapRenderSpy(selectedVin);
+    return <div data-testid="fleet-map" data-selected-vin={selectedVin ?? ''}>
+      <button type="button" onClick={() => onSelectVin?.('LTEST000000000002')}>选择地图车辆</button>
+    </div>;
+  }
+}));
+
+vi.mock('../hooks/useMonitorData', () => ({
+  MONITOR_REFRESH: { selected: 10_000, fleet: 15_000, summary: 30_000 },
+  useMonitorData: () => ({
+    summary: { data: { totalVehicles: 2, onlineVehicles: 2, offlineVehicles: 0, drivingVehicles: 1, idleVehicles: 1, frameToday: 10 } },
+    vehicles: { data: { items: vehicles, total: 2 }, isError: false, isLoading: false, isFetching: false },
+    map: { data: monitorMap },
+    selectedVehicle: { data: { items: [] } }
+  }),
+  useMonitorVehicleCard: () => ({ detail: {}, activeAlerts: {}, address: {} })
+}));
+
+afterEach(cleanup);
+
+test('starts without a selection and supports expand, collapse, reselection, and clear', () => {
+  const view = render(<MemoryRouter><MonitorPage /></MemoryRouter>);
+  const workspace = view.container.querySelector('.v2-monitor-workspace')!;
+  const firstVehicle = screen.getByRole('button', { name: /粤A12345 LTEST000000000001/ });
+  const secondVehicle = screen.getByRole('button', { name: /粤B67890 LTEST000000000002/ });
+
+  expect(workspace).not.toHaveClass('is-detail-open');
+  expect(workspace).not.toHaveClass('is-detail-collapsed');
+  expect(firstVehicle).not.toHaveClass('is-selected');
+  expect(screen.queryByRole('button', { name: '取消选择车辆' })).not.toBeInTheDocument();
+  expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-selected-vin', '');
+
+  fireEvent.click(firstVehicle);
+  expect(workspace).toHaveClass('is-detail-open');
+  expect(firstVehicle).toHaveClass('is-selected');
+  expect(screen.getByRole('button', { name: '取消选择车辆' })).toBeInTheDocument();
+  expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-selected-vin', 'LTEST000000000001');
+  const mapRendersAfterSelection = fleetMapRenderSpy.mock.calls.length;
+
+  fireEvent.click(screen.getByRole('button', { name: '收起车辆详情' }));
+  expect(workspace).toHaveClass('is-detail-collapsed');
+  expect(firstVehicle).toHaveClass('is-selected');
+  expect(screen.getByRole('button', { name: '展开车辆详情' })).toBeInTheDocument();
+  expect(fleetMapRenderSpy).toHaveBeenCalledTimes(mapRendersAfterSelection);
+
+  fireEvent.click(secondVehicle);
+  expect(workspace).toHaveClass('is-detail-open');
+  expect(secondVehicle).toHaveClass('is-selected');
+  expect(screen.queryByRole('button', { name: '展开车辆详情' })).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByRole('button', { name: '取消选择车辆' }));
+  expect(workspace).not.toHaveClass('is-detail-open');
+  expect(workspace).not.toHaveClass('is-detail-collapsed');
+  expect(secondVehicle).not.toHaveClass('is-selected');
+  expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-selected-vin', '');
+
+  fireEvent.click(screen.getByRole('button', { name: '选择地图车辆' }));
+  expect(workspace).toHaveClass('is-detail-open');
+  expect(secondVehicle).toHaveClass('is-selected');
+});