perf(monitor): defer QR generator

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

@@ -20,6 +20,7 @@ const monitorMap = { clusters: [], points: [], total: 2 };
 const fleetMapRenderSpy = vi.hoisted(() => vi.fn());
 const vehicleCardArgsSpy = vi.hoisted(() => vi.fn());
 const monitorDataArgsSpy = vi.hoisted(() => vi.fn());
+const qrToDataURLSpy = vi.hoisted(() => vi.fn());
 const monitorQueryFlags = vi.hoisted(() => ({ isLoading: false, isFetching: false, isPlaceholderData: false }));
 
 vi.mock('../map/FleetMap', () => ({
@@ -31,6 +32,8 @@ vi.mock('../map/FleetMap', () => ({
   }
 }));
 
+vi.mock('qrcode', () => ({ default: { toDataURL: qrToDataURLSpy } }));
+
 vi.mock('../hooks/useMonitorData', () => ({
   MAX_MONITOR_SEARCH_TERMS: 100,
   MONITOR_REFRESH: { selected: 10_000, fleet: 15_000, summary: 30_000 },
@@ -73,6 +76,7 @@ afterEach(() => {
   monitorQueryFlags.isPlaceholderData = false;
   vehicleCardArgsSpy.mockClear();
   monitorDataArgsSpy.mockClear();
+  qrToDataURLSpy.mockReset();
   vi.restoreAllMocks();
 });
 
@@ -166,6 +170,33 @@ test('pauses selected-vehicle polling in list mode and resumes it when returning
   expect(monitorDataArgsSpy).toHaveBeenLastCalledWith(expect.any(Object), expect.any(Object), 'LTEST000000000001', true, true);
 });
 
+test('loads the QR generator only after opening the mobile entry', async () => {
+  qrToDataURLSpy.mockResolvedValue('data:image/png;base64,vehicle-monitor');
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
+
+  expect(qrToDataURLSpy).not.toHaveBeenCalled();
+  fireEvent.click(screen.getByRole('button', { name: /手机端/ }));
+
+  expect(await screen.findByRole('img', { name: '全局监控手机端二维码' })).toHaveAttribute('src', 'data:image/png;base64,vehicle-monitor');
+  expect(qrToDataURLSpy).toHaveBeenCalledTimes(1);
+  expect(qrToDataURLSpy.mock.calls[0][0]).toMatch(/\/monitor$/);
+  expect(qrToDataURLSpy.mock.calls[0][0]).not.toContain('token');
+});
+
+test('shows a retry action when on-demand QR generation fails', async () => {
+  qrToDataURLSpy.mockRejectedValueOnce(new Error('canvas unavailable')).mockResolvedValue('data:image/png;base64,recovered');
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
+
+  fireEvent.click(screen.getByRole('button', { name: /手机端/ }));
+  expect(await screen.findByRole('alert')).toHaveTextContent('二维码生成失败');
+  fireEvent.click(screen.getByRole('button', { name: '重新生成' }));
+
+  expect(await screen.findByRole('img', { name: '全局监控手机端二维码' })).toHaveAttribute('src', 'data:image/png;base64,recovered');
+  expect(qrToDataURLSpy).toHaveBeenCalledTimes(2);
+});
+
 test('mounts only the mobile list representation and removes its viewport listener', async () => {
   const addEventListener = vi.fn();
   const removeEventListener = vi.fn();