perf(web): release monitor resources on unmount

vehicle-data-platform/apps/web/src/v2/hooks/useMonitorData.cache.test.tsx

@@ -1,9 +1,9 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { cleanup, renderHook, waitFor } from '@testing-library/react';
+import { cleanup, render, renderHook, waitFor } from '@testing-library/react';
 import { afterEach, expect, test, vi } from 'vitest';
 import type { ReactNode } from 'react';
 import { api } from '../../api/client';
-import { useMonitorData } from './useMonitorData';
+import { useMonitorData, useMonitorVehicleCard } from './useMonitorData';
 
 afterEach(() => {
   cleanup();
@@ -33,3 +33,50 @@ test('rapid viewport changes retain at most one monitor map payload', async () =
   view.unmount();
   client.clear();
 });
+
+test('repeated vehicle selections retain only the active realtime payload and release it on unmount', async () => {
+  vi.spyOn(api, 'monitorSummary').mockResolvedValue({ totalVehicles: 0, onlineVehicles: 0, offlineVehicles: 0, drivingVehicles: 0, idleVehicles: 0, unknownVehicles: 0, alertVehicles: 0, activeToday: 0, frameToday: 0, alertDataAvailable: false, truncated: false, asOf: '' });
+  const vehicleRealtime = vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: [], total: 0, limit: 1, offset: 0 });
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const wrapper = ({ children }: { children: ReactNode }) => <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+  const filters = { keyword: '', protocol: '', status: '' };
+  const view = renderHook(({ vin }) => useMonitorData(filters, { zoom: 5, bounds: '' }, vin, false, false), {
+    wrapper,
+    initialProps: { vin: 'VIN-001' }
+  });
+
+  await waitFor(() => expect(vehicleRealtime).toHaveBeenCalledTimes(1));
+  for (const vin of ['VIN-002', 'VIN-003', 'VIN-004']) {
+    view.rerender({ vin });
+    await waitFor(() => expect(vehicleRealtime.mock.calls.length).toBeGreaterThanOrEqual(Number(vin.slice(-1))));
+  }
+  await waitFor(() => expect(client.getQueryCache().findAll({ queryKey: ['monitor', 'selected-vehicle'] })).toHaveLength(1));
+  view.unmount();
+  await waitFor(() => expect(client.getQueryCache().findAll({ queryKey: ['monitor', 'selected-vehicle'] })).toHaveLength(0));
+  client.clear();
+});
+
+test('collapsed vehicle card does not issue or retain detail-only queries', async () => {
+  const detail = vi.spyOn(api, 'vehicleDetail').mockResolvedValue({} as never);
+  const alerts = vi.spyOn(api, 'alertEventsV2').mockResolvedValue({ items: [], total: 0, limit: 20, offset: 0 });
+  const address = vi.spyOn(api, 'reverseGeocode').mockResolvedValue({ provider: 'AMap', longitude: 113.26, latitude: 23.13, formattedAddress: '测试地址' });
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const vehicle = { vin: 'VIN-001', longitude: 113.26, latitude: 23.13 } as never;
+  function ActiveCard() {
+    useMonitorVehicleCard('VIN-001', vehicle, true);
+    return null;
+  }
+  const view = render(<QueryClientProvider client={client}>{null}</QueryClientProvider>);
+
+  expect(detail).not.toHaveBeenCalled();
+  expect(alerts).not.toHaveBeenCalled();
+  expect(address).not.toHaveBeenCalled();
+  view.rerender(<QueryClientProvider client={client}><ActiveCard /></QueryClientProvider>);
+  await waitFor(() => expect(detail).toHaveBeenCalledTimes(1));
+  await waitFor(() => expect(alerts).toHaveBeenCalledTimes(1));
+  await waitFor(() => expect(address).toHaveBeenCalledTimes(1));
+  view.rerender(<QueryClientProvider client={client}>{null}</QueryClientProvider>);
+  await waitFor(() => expect(client.getQueryCache().findAll({ queryKey: ['monitor', 'vehicle-card'] })).toHaveLength(0));
+  view.unmount();
+  client.clear();
+});