perf(statistics): mount one responsive mileage matrix

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

@@ -10,7 +10,7 @@ const exportMocks = vi.hoisted(() => ({ downloadMileageWorkbook: vi.fn() }));
 vi.mock('../../api/client', () => ({ api: mocks }));
 vi.mock('../domain/mileageExport', () => exportMocks);
 
-afterEach(() => { cleanup(); window.localStorage.clear(); Object.values(mocks).forEach((mock) => mock.mockReset()); exportMocks.downloadMileageWorkbook.mockReset(); });
+afterEach(() => { cleanup(); vi.restoreAllMocks(); window.localStorage.clear(); Object.values(mocks).forEach((mock) => mock.mockReset()); exportMocks.downloadMileageWorkbook.mockReset(); });
 
 function renderPage(initialEntry = '/statistics') {
   const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
@@ -32,9 +32,9 @@ function prepareData() {
   mocks.vehicleCoverage.mockResolvedValue({ items: [{ vin: 'LTEST000000000001', plate: '粤A12345' }], total: 1, limit: 20, offset: 0 });
 }
 
-test('renders one vehicle per row with dates as columns and a period total', async () => {
+test('renders only the desktop matrix with dates as columns and a period total', async () => {
   prepareData();
-  renderPage('/statistics?vins=LTEST000000000001&dateFrom=2026-07-13&dateTo=2026-07-14');
+  const view = renderPage('/statistics?vins=LTEST000000000001&dateFrom=2026-07-13&dateTo=2026-07-14');
   expect(await screen.findByText('车辆每日里程')).toBeInTheDocument();
   expect(screen.getAllByText('区间总里程').length).toBeGreaterThan(1);
   expect((await screen.findAllByText('193.3 km')).length).toBeGreaterThan(0);
@@ -49,11 +49,39 @@ test('renders one vehicle per row with dates as columns and a period total', asy
   expect(screen.queryByText('车辆里程排名')).not.toBeInTheDocument();
   expect(screen.getByText('已绑定主车辆')).toBeInTheDocument();
   expect(screen.getByText('已选择 1 辆')).toBeInTheDocument();
+  expect(view.container.querySelector('.v2-mileage-table-wrap')).toBeInTheDocument();
+  expect(view.container.querySelector('.v2-mileage-mobile-list')).not.toBeInTheDocument();
   await waitFor(() => expect(mocks.dailyMileage).toHaveBeenCalledTimes(1));
   expect(mocks.dailyMileage.mock.calls[0][0].get('limit')).toBe('10000');
   expect(mocks.dailyMileage.mock.calls[0][0].get('protocols')).toBe('GB32960,JT808,YUTONG_MQTT');
 });
 
+test('mounts only the mobile mileage cards and removes the viewport listener', async () => {
+  prepareData();
+  const addEventListener = vi.fn();
+  const removeEventListener = vi.fn();
+  vi.spyOn(window, 'matchMedia').mockReturnValue({
+    matches: true,
+    media: '(max-width: 680px)',
+    onchange: null,
+    addEventListener,
+    removeEventListener,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(() => false)
+  } as unknown as MediaQueryList);
+  const view = renderPage('/statistics?vins=LTEST000000000001&dateFrom=2026-07-13&dateTo=2026-07-14');
+
+  expect(await screen.findByText('车辆每日里程')).toBeInTheDocument();
+  await waitFor(() => expect(view.container.querySelectorAll('.v2-mileage-mobile-list article')).toHaveLength(1));
+  expect(view.container.querySelector('.v2-mileage-table-wrap')).not.toBeInTheDocument();
+  expect(view.container.querySelectorAll('.v2-mileage-mobile-days > div')).toHaveLength(2);
+  expect(addEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+
+  view.unmount();
+  expect(removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+});
+
 test('supports searching and selecting license plates before querying exact VINs', async () => {
   prepareData();
   renderPage();