refine Semi UI mileage matrix workspace

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

@@ -8,10 +8,12 @@ import { ROUTER_FUTURE } from '../routing/routerConfig';
 
 const mocks = vi.hoisted(() => ({ mileageStatistics: vi.fn(), dailyMileage: vi.fn(), vehicles: vi.fn(), vehicleCoverage: vi.fn() }));
 const exportMocks = vi.hoisted(() => ({ createMileageExportStream: vi.fn(), appendRows: vi.fn(), finish: vi.fn(), dispose: vi.fn() }));
+const layout = vi.hoisted(() => ({ mobile: false }));
 vi.mock('../../api/client', () => ({ api: mocks }));
 vi.mock('../domain/mileageExport', () => ({ createMileageExportStream: exportMocks.createMileageExportStream }));
+vi.mock('../hooks/useMobileLayout', () => ({ useMobileLayout: () => layout.mobile }));
 
-afterEach(() => { cleanup(); vi.restoreAllMocks(); window.localStorage.clear(); Object.values(mocks).forEach((mock) => mock.mockReset()); Object.values(exportMocks).forEach((mock) => mock.mockReset()); });
+afterEach(() => { cleanup(); vi.restoreAllMocks(); layout.mobile = false; window.localStorage.clear(); Object.values(mocks).forEach((mock) => mock.mockReset()); Object.values(exportMocks).forEach((mock) => mock.mockReset()); });
 
 function renderPage(initialEntry = '/statistics') {
   const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
@@ -64,6 +66,21 @@ test('renders only the desktop matrix with dates as columns and a period total',
   expect(view.container.querySelectorAll('.v2-mileage-summary-card.semi-card')).toHaveLength(4);
   expect(view.container.querySelector('.v2-mileage-summary-card.is-primary .v2-mileage-summary-value')).toHaveTextContent('193.3 km');
   expect(view.container.querySelector('.v2-mileage-table-wrap')).toBeInTheDocument();
+  expect(screen.getByRole('note', { name: '里程矩阵读表说明' })).toHaveTextContent('0 km已上报、无里程增量');
+  expect(screen.getByRole('note', { name: '里程矩阵读表说明' })).toHaveTextContent('—无可用里程');
+  expect(screen.getByRole('note', { name: '里程矩阵读表说明' })).toHaveTextContent('颜色越深、里程越高');
+  const matrixRegion = screen.getByRole('region', { name: '车辆每日里程矩阵，可横向滚动查看日期' });
+  expect(matrixRegion).toHaveAttribute('tabindex', '0');
+  const matrixScroller = matrixRegion.querySelector<HTMLElement>('.semi-table-body');
+  expect(matrixScroller).toBeInTheDocument();
+  Object.defineProperties(matrixScroller!, {
+    clientWidth: { configurable: true, value: 320 },
+    scrollWidth: { configurable: true, value: 720 },
+    scrollLeft: { configurable: true, value: 0, writable: true }
+  });
+  fireEvent.keyDown(matrixRegion, { key: 'ArrowRight' });
+  expect(matrixScroller!.scrollLeft).toBe(96);
+  expect(view.container.querySelector('[aria-label="2026-07-13，88.7 公里，来源 GB32960"]')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-mileage-table.semi-table-wrapper')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-mileage-table-wrap > table')).not.toBeInTheDocument();
   expect(view.container.querySelector('.v2-mileage-mobile-list')).not.toBeInTheDocument();
@@ -253,6 +270,18 @@ test('lets users disable mileage sources and persists the source priority', asyn
   expect(screen.getByText('来源优先级：YUTONG_MQTT ＞ JT808')).toBeInTheDocument();
 });
 
+test('uses a compact bottom sheet for mileage source strategy on mobile', async () => {
+  layout.mobile = true;
+  prepareData();
+  renderPage('/statistics?vins=LTEST000000000001&dateFrom=2026-07-13&dateTo=2026-07-14');
+
+  fireEvent.click(screen.getByRole('button', { name: /数据源/ }));
+
+  expect(screen.getByRole('dialog', { name: '数据源策略配置' })).toBeInTheDocument();
+  expect(document.querySelector('.v2-mileage-source-sidesheet')).toHaveClass('semi-sidesheet-bottom');
+  expect(document.querySelector('.v2-mileage-source-sidesheet .semi-sidesheet-inner')).toHaveStyle({ height: 'min(58dvh, 500px)' });
+});
+
 test('paginates all unique vehicles when no license plate is selected', async () => {
   prepareData();
   const firstPage = Array.from({ length: 20 }, (_, index) => ({ vin: `VIN${String(index + 1).padStart(14, '0')}`, plate: `粤A${String(index + 1).padStart(5, '0')}` }));