refine Semi UI monitor workspace

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

@@ -135,7 +135,8 @@ test('starts without a selection and supports expand, collapse, reselection, and
   expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-selected-vin', '');
   expect(screen.getByText('车辆总数')).toBeInTheDocument();
   expect(screen.getByText('无实时位置')).toBeInTheDocument();
-  expect(screen.getByRole('status', { name: '搜索和筛选条件修改后自动生效' })).toHaveTextContent('实时筛选');
+  expect(screen.getByRole('status', { name: '搜索和筛选条件修改后自动生效，已启用 0 个条件' })).toHaveTextContent('自动生效');
+  expect(screen.getByRole('button', { name: /清空/ })).toBeDisabled();
   expect(screen.queryByRole('button', { name: '筛选' })).not.toBeInTheDocument();
   expect(screen.queryByText('接入车辆')).not.toBeInTheDocument();
 
@@ -210,21 +211,38 @@ test('restores URL-backed monitor context and carries it into every vehicle work
   }
 });
 
+test('shows active filter count and clears all filter fields in one action', () => {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE} initialEntries={['/monitor?keyword=%E7%B2%A4A12345&protocol=JT808&status=online']}><MonitorPage /></MemoryRouter></QueryClientProvider>);
+
+  expect(screen.getByRole('status', { name: '搜索和筛选条件修改后自动生效，已启用 3 个条件' })).toHaveTextContent('自动生效3');
+  const clear = screen.getByRole('button', { name: /清空/ });
+  expect(clear).toBeEnabled();
+
+  fireEvent.click(clear);
+
+  expect(screen.getByRole('textbox', { name: '搜索车辆' })).toHaveValue('');
+  expect(screen.getByRole('combobox', { name: '协议' })).toHaveTextContent('全部协议');
+  expect(screen.getByRole('combobox', { name: '在线状态' })).toHaveTextContent('全部状态');
+  expect(screen.getByRole('status', { name: '搜索和筛选条件修改后自动生效，已启用 0 个条件' })).toHaveTextContent('自动生效');
+  expect(clear).toBeDisabled();
+});
+
 test('switches to a lightweight realtime list and resolves addresses only on demand', async () => {
   const row = vehicles[0];
   vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: [row], total: 1, limit: 50, offset: 0 });
   const reverseGeocode = vi.spyOn(api, 'reverseGeocode').mockResolvedValue({ provider: 'AMap', longitude: 113.26, latitude: 23.13, formattedAddress: '广东省广州市天河区测试路' });
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   const view = render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
-  const modeGroup = screen.getByRole('group', { name: '监控视图' });
-  const mapMode = within(modeGroup).getByRole('button', { name: /地图/ });
-  const listMode = within(modeGroup).getByRole('button', { name: /列表/ });
-  expect(mapMode).toHaveAttribute('aria-pressed', 'true');
+  const modeGroup = screen.getByRole('tablist', { name: '监控视图' });
+  const mapMode = within(modeGroup).getByRole('tab', { name: /地图/ });
+  const listMode = within(modeGroup).getByRole('tab', { name: /列表/ });
+  expect(mapMode).toHaveAttribute('aria-selected', 'true');
   expect(mapMode).toHaveClass('is-active');
-  expect(listMode).toHaveAttribute('aria-pressed', 'false');
+  expect(listMode).toHaveAttribute('aria-selected', 'false');
   fireEvent.click(listMode);
-  expect(mapMode).toHaveAttribute('aria-pressed', 'false');
-  expect(listMode).toHaveAttribute('aria-pressed', 'true');
+  expect(mapMode).toHaveAttribute('aria-selected', 'false');
+  expect(listMode).toHaveAttribute('aria-selected', 'true');
   expect(listMode).toHaveClass('is-active');
   expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
   expect(screen.getByRole('heading', { name: '车辆实时列表', level: 5 })).toBeInTheDocument();
@@ -254,7 +272,7 @@ test('switches to a lightweight realtime list and resolves addresses only on dem
   expect(screen.queryByText('三路正常')).not.toBeInTheDocument();
   expect(screen.queryByTestId('fleet-map')).not.toBeInTheDocument();
 
-  fireEvent.click(screen.getByRole('button', { name: /地图/ }));
+  fireEvent.click(screen.getByRole('tab', { name: /地图/ }));
   await waitFor(() => expect(queryClient.getQueryCache().findAll({ queryKey: ['monitor', 'list-address'] })).toHaveLength(0));
   view.unmount();
 });
@@ -285,7 +303,7 @@ test('keeps authorized vehicles without realtime coordinates in the list without
   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: /列表/ }));
+  fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
 
   expect(await screen.findByText('粤A无定位')).toBeInTheDocument();
   expect(screen.getByText('暂无实时位置')).toBeInTheDocument();
@@ -301,10 +319,10 @@ test('pauses selected-vehicle polling in list mode and resumes it when returning
   fireEvent.click(screen.getByRole('button', { name: /粤A12345 LTEST000000000001/ }));
   expect(monitorDataArgsSpy).toHaveBeenLastCalledWith(expect.any(Object), expect.any(Object), 'LTEST000000000001', true, true);
 
-  fireEvent.click(screen.getByRole('button', { name: /列表/ }));
+  fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
   expect(monitorDataArgsSpy).toHaveBeenLastCalledWith(expect.any(Object), expect.any(Object), '', false, false);
 
-  fireEvent.click(screen.getByRole('button', { name: /地图/ }));
+  fireEvent.click(screen.getByRole('tab', { name: /地图/ }));
   expect(monitorDataArgsSpy).toHaveBeenLastCalledWith(expect.any(Object), expect.any(Object), 'LTEST000000000001', true, true);
 });
 
@@ -371,7 +389,7 @@ test('mounts only the mobile list representation and removes its viewport listen
   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: /列表/ }));
+  fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
   expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
   await waitFor(() => expect(view.container.querySelectorAll('.v2-monitor-mobile-cards .v2-monitor-mobile-card.semi-card')).toHaveLength(1));
   expect(view.container.querySelector('.v2-monitor-table-scroll')).not.toBeInTheDocument();
@@ -391,7 +409,7 @@ test('pastes, deduplicates, and submits multiple plates as one batch search', as
   expect(input).toHaveValue('粤A12345，粤B67890');
   expect(screen.getAllByText('已找到 2/2')).toHaveLength(3);
 
-  fireEvent.click(screen.getByRole('button', { name: /列表/ }));
+  fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
   await waitFor(() => {
     const params = vehicleRealtime.mock.calls[vehicleRealtime.mock.calls.length - 1]?.[0];
     expect(params?.get('keywords')).toBe('粤A12345,粤B67890');
@@ -412,7 +430,7 @@ test('opens an explicit batch editor and applies copied plate rows', async () =>
 
   expect(screen.queryByRole('dialog', { name: '批量搜索车辆' })).not.toBeInTheDocument();
   expect(screen.getByRole('textbox', { name: '搜索车辆' })).toHaveValue('粤A12345，粤B67890');
-  fireEvent.click(screen.getByRole('button', { name: /列表/ }));
+  fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
   await waitFor(() => {
     const params = vehicleRealtime.mock.calls[vehicleRealtime.mock.calls.length - 1]?.[0];
     expect(params?.get('keywords')).toBe('粤A12345,粤B67890');