perf(web): release monitor resources on unmount

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

@@ -18,6 +18,7 @@ const vehicles = [{
 }] as VehicleRealtimeRow[];
 const monitorMap = { clusters: [], points: [], total: 2 };
 const fleetMapRenderSpy = vi.hoisted(() => vi.fn());
+const vehicleCardArgsSpy = vi.hoisted(() => vi.fn());
 const monitorQueryFlags = vi.hoisted(() => ({ isLoading: false, isFetching: false, isPlaceholderData: false }));
 
 vi.mock('../map/FleetMap', () => ({
@@ -48,7 +49,10 @@ vi.mock('../hooks/useMonitorData', () => ({
     map: { data: monitorMap, isPlaceholderData: monitorQueryFlags.isPlaceholderData },
     selectedVehicle: { data: { items: [] } }
   }),
-  useMonitorVehicleCard: () => ({ detail: {}, activeAlerts: {}, address: {} })
+  useMonitorVehicleCard: (...args: unknown[]) => {
+    vehicleCardArgsSpy(...args);
+    return { detail: {}, activeAlerts: {}, address: {} };
+  }
 }));
 
 afterEach(() => {
@@ -56,6 +60,8 @@ afterEach(() => {
   monitorQueryFlags.isLoading = false;
   monitorQueryFlags.isFetching = false;
   monitorQueryFlags.isPlaceholderData = false;
+  vehicleCardArgsSpy.mockClear();
+  vi.restoreAllMocks();
 });
 
 test('starts without a selection and supports expand, collapse, reselection, and clear', () => {
@@ -78,13 +84,16 @@ test('starts without a selection and supports expand, collapse, reselection, and
   expect(firstVehicle).toHaveClass('is-selected');
   expect(screen.getByRole('button', { name: '取消选择车辆' })).toBeInTheDocument();
   expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-selected-vin', 'LTEST000000000001');
+  expect(vehicleCardArgsSpy).toHaveBeenLastCalledWith('LTEST000000000001', vehicles[0], true);
   const mapRendersAfterSelection = fleetMapRenderSpy.mock.calls.length;
+  const cardCallsAfterSelection = vehicleCardArgsSpy.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);
+  expect(vehicleCardArgsSpy).toHaveBeenCalledTimes(cardCallsAfterSelection);
 
   fireEvent.click(secondVehicle);
   expect(workspace).toHaveClass('is-detail-open');
@@ -111,13 +120,13 @@ test('switches to a lightweight realtime list and resolves addresses only on dem
   fireEvent.click(screen.getByRole('button', { name: /列表/ }));
   expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
   expect(screen.getByText('速度、里程和坐标实时刷新，文字地址按需解析')).toBeInTheDocument();
-  expect(await screen.findAllByText('粤A12345')).toHaveLength(2);
-  expect(screen.getAllByText('42')).toHaveLength(2);
-  expect(screen.getAllByText(/1,234/)).toHaveLength(2);
-  expect(screen.getAllByText(/113\.260000/)).toHaveLength(2);
+  expect(await screen.findAllByText('粤A12345')).toHaveLength(1);
+  expect(screen.getAllByText('42')).toHaveLength(1);
+  expect(screen.getAllByText(/1,234/)).toHaveLength(1);
+  expect(screen.getAllByText(/113\.260000/)).toHaveLength(1);
   expect(reverseGeocode).not.toHaveBeenCalled();
 
-  fireEvent.click(screen.getAllByRole('button', { name: '解析粤A12345位置' })[0]);
+  fireEvent.click(screen.getByRole('button', { name: '解析粤A12345位置' }));
   expect(await screen.findByText('广东省广州市天河区测试路')).toBeInTheDocument();
   expect(reverseGeocode).toHaveBeenCalledTimes(1);
   expect(screen.queryByText('综合状态')).not.toBeInTheDocument();
@@ -125,6 +134,33 @@ test('switches to a lightweight realtime list and resolves addresses only on dem
   expect(screen.queryByTestId('fleet-map')).not.toBeInTheDocument();
 });
 
+test('mounts only the mobile list representation and removes its viewport listener', async () => {
+  const addEventListener = vi.fn();
+  const removeEventListener = vi.fn();
+  vi.spyOn(window, 'matchMedia').mockReturnValue({
+    matches: true,
+    media: '(max-width: 760px)',
+    onchange: null,
+    addEventListener,
+    removeEventListener,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(() => false)
+  } as unknown as MediaQueryList);
+  vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: [vehicles[0]], total: 1, limit: 50, offset: 0 });
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const view = render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
+
+  fireEvent.click(screen.getByRole('button', { name: /列表/ }));
+  expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
+  await waitFor(() => expect(view.container.querySelectorAll('.v2-monitor-mobile-cards article')).toHaveLength(1));
+  expect(view.container.querySelector('.v2-monitor-table-scroll')).not.toBeInTheDocument();
+  expect(addEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+
+  view.unmount();
+  expect(removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+});
+
 test('pastes, deduplicates, and submits multiple plates as one batch search', async () => {
   const vehicleRealtime = vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: vehicles, total: 2, limit: 50, offset: 0 });
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });