unify Semi UI filter workspaces and pagination

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

@@ -7,10 +7,10 @@ import { api } from '../../api/client';
 import type { AccessProtocolStatus, AccessQuery, AccessSummary, AccessThresholdConfig, AccessThresholdUpdate, AccessUnresolvedIdentity, AccessVehicleRow, Page } from '../../api/types';
 import { accessRowsToCSV, formatAccessTime, formatSeconds, updateProtocolThreshold } from '../domain/access';
 import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
-import { MobileFilterToggle } from '../shared/MobileFilterToggle';
 import { MetricActionButton } from '../shared/MetricActionButton';
 import { PageHeader } from '../shared/PageHeader';
 import { TablePagination } from '../shared/TablePagination';
+import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { detailTriggerRow } from '../shared/detailTriggerRow';
 import { usePlatformSession } from '../auth/AuthGate';
@@ -208,14 +208,23 @@ export default function AccessPage() {
       meta={<Typography.Text type="tertiary">数据时间 {summary?.asOf ? formatAccessTime(summary.asOf) : '—'}</Typography.Text>}
       actions={<>{editable ? <Button theme="light" icon={<IconSetting />} aria-haspopup="dialog" aria-controls="v2-access-governance" aria-expanded={governanceOpen} onClick={() => setGovernanceOpen(true)}>接入治理{unresolvedQuery.data?.total ? ` · ${unresolvedQuery.data.total}` : ''}</Button> : null}<Button theme="light" icon={<IconRefresh />} onClick={() => void refresh()}>刷新</Button></>}
     />
-    <MobileFilterToggle summary={Object.values(criteria).filter(Boolean).length ? `已启用 ${Object.values(criteria).filter(Boolean).length} 项` : '全部主车辆'} expanded={!filtersCollapsed} onToggle={() => setFiltersCollapsed((value) => !value)} />
-    <Card className={`v2-access-filter-card-v3${filtersCollapsed ? ' is-mobile-collapsed' : ''}`} bodyStyle={{ padding: 0 }}><form className="v2-access-filter-v3" onSubmit={submit}>
+    <WorkspaceFilterPanel
+      className="v2-access-filter-card-v3"
+      title="接入筛选"
+      description="车辆、接入状态、真实协议与品牌"
+      mobileSummary={Object.values(criteria).filter(Boolean).length ? `已启用 ${Object.values(criteria).filter(Boolean).length} 项` : '全部主车辆'}
+      expanded={!filtersCollapsed}
+      status={Object.values(criteria).filter(Boolean).length ? `${Object.values(criteria).filter(Boolean).length} 项已启用` : '全部主车辆'}
+      statusColor={Object.values(criteria).filter(Boolean).length ? 'blue' : 'grey'}
+      onToggle={() => setFiltersCollapsed((value) => !value)}
+    >
+    <form className="v2-access-filter-v3" onSubmit={submit}>
       <label className="is-search"><span>车辆</span><Input aria-label="车辆" prefix={<IconSearch />} value={draft.keyword} onChange={(value) => setDraft({ ...draft, keyword: value })} placeholder="车牌 / VIN" /></label>
       <label><span id="access-connection-label">接入状态</span><Select aria-labelledby="access-connection-label" value={draft.connectionState} onChange={(value) => setDraft({ ...draft, connectionState: String(value) })} optionList={[{ value: '', label: '全部状态' }, { value: 'attention', label: '需关注' }, { value: 'healthy', label: '已接来源正常' }, { value: 'master_data', label: '资料待维护' }, { value: 'degraded', label: '部分来源异常' }, { value: 'offline', label: '已接来源离线' }, { value: 'not_connected', label: '尚无来源' }]} /></label>
       <label><span id="access-protocol-label">真实协议</span><Select aria-labelledby="access-protocol-label" value={draft.protocol} onChange={(value) => setDraft({ ...draft, protocol: String(value) })} optionList={[{ value: '', label: '全部协议' }, ...PROTOCOLS.map((item) => ({ value: item, label: item }))]} /></label>
       <label><span id="access-oem-label">车辆品牌</span><Select aria-labelledby="access-oem-label" value={draft.oem} onChange={(value) => setDraft({ ...draft, oem: String(value) })} optionList={[{ value: '', label: '全部品牌' }, ...(summary?.oems.map((item) => ({ value: item.name, label: item.name })) ?? [])]} /></label>
       <Button className="v2-primary-button" theme="solid" htmlType="submit">查询</Button><Button className="v2-secondary-button" theme="light" htmlType="button" onClick={() => apply(EMPTY_FILTERS)}>重置</Button>
-    </form></Card>
+    </form></WorkspaceFilterPanel>
     {summaryQuery.isError ? <InlineError message={summaryQuery.error instanceof Error ? summaryQuery.error.message : '接入汇总读取失败'} onRetry={() => summaryQuery.refetch()} /> : null}
     <Card className="v2-access-kpis-card-v3" bodyStyle={{ padding: 0 }}><section className="v2-access-kpis-v3">{[
       { label: '主车辆', value: summary?.totalVehicles ?? 0, tone: 'all', connectionState: '', hint: '车辆主档' },

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

@@ -7,12 +7,12 @@ import { api } from '../../api/client';
 import type { AlertEvent, AlertNotification, AlertQuery, AlertRule, AlertRuleInput, AlertStatus, MetricDefinition, Page } from '../../api/types';
 import { actionLabels, alertValue, canAct, formatAlertTime, operatorLabels, ruleCondition, severityLabels, statusLabels, thresholdText } from '../domain/alert';
 import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
-import { MobileFilterToggle } from '../shared/MobileFilterToggle';
 import { MetricActionButton } from '../shared/MetricActionButton';
 import { PageHeader } from '../shared/PageHeader';
 import { SegmentedTabs } from '../shared/SegmentedTabs';
 import { TablePagination } from '../shared/TablePagination';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
+import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 import { detailTriggerRow } from '../shared/detailTriggerRow';
 import { usePlatformSession } from '../auth/AuthGate';
 import { canAdminister, canOperate } from '../auth/session';
@@ -177,8 +177,16 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
   const advancedFilterCount = [filters.ruleId, filters.protocol, filters.dateFrom, filters.dateTo].filter(Boolean).length;
   const inspector = <EventInspector event={selectedEvent} note={note} acting={action.isPending} actionError={action.error instanceof Error ? action.error.message : undefined} editable={editable} onNote={setNote} onAction={(name) => { const event = detail.data; if (event) action.mutate({ name, event }); }} onClose={closeDetail} />;
   return <>
-    <MobileFilterToggle summary={activeFilterCount ? `已启用 ${activeFilterCount} 项` : '全部告警'} expanded={!filtersCollapsed} onToggle={() => setFiltersCollapsed((value) => !value)} />
-    <Card className={`v2-alert-filter-card${filtersCollapsed ? ' is-mobile-collapsed' : ''}`} bodyStyle={{ padding: 0 }}>
+    <WorkspaceFilterPanel
+      className="v2-alert-filter-card"
+      title="事件筛选"
+      description="关键词、严重程度、处理状态与高级范围"
+      mobileSummary={activeFilterCount ? `已启用 ${activeFilterCount} 项` : '全部告警'}
+      expanded={!filtersCollapsed}
+      status={activeFilterCount ? `${activeFilterCount} 项已启用` : '全部告警'}
+      statusColor={activeFilterCount ? 'blue' : 'grey'}
+      onToggle={() => setFiltersCollapsed((value) => !value)}
+    >
       <form className="v2-alert-filter v2-alert-filter-primary" onSubmit={submit}>
         <label><span>关键词</span><Input prefix={<IconSearch />} value={draft.keyword} onChange={(value) => setDraft({ ...draft, keyword: value })} placeholder="车牌 / VIN / 规则名称" /></label>
         <label><span id="alert-severity-label">严重程度</span><Select aria-labelledby="alert-severity-label" value={draft.severity} onChange={(value) => setDraft({ ...draft, severity: String(value) })} optionList={[{ value: '', label: '全部' }, { value: 'critical', label: '紧急' }, { value: 'major', label: '重要' }, { value: 'minor', label: '一般' }]} /></label>
@@ -187,7 +195,7 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
         <Button className="v2-primary-button" theme="solid" htmlType="submit">查询</Button>
         <Button className="v2-secondary-button" theme="light" htmlType="button" onClick={resetFilters}>重置</Button>
       </form>
-    </Card>
+    </WorkspaceFilterPanel>
     {summary.isError ? <InlineError message={summary.error instanceof Error ? summary.error.message : '告警汇总读取失败'} onRetry={() => summary.refetch()} /> : null}
     <Card className="v2-alert-kpis-card" bodyStyle={{ padding: 0 }}>
       <section className="v2-alert-kpis">{[

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

@@ -9,9 +9,9 @@ import { buildHistorySeriesPanels, formatExportFileSize, formatHistoryValue, for
 import { downloadBlob } from '../domain/download';
 import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
 import { MonitorReturnBar } from '../shared/MonitorReturnBar';
-import { MobileFilterToggle } from '../shared/MobileFilterToggle';
 import { PageHeader } from '../shared/PageHeader';
 import { TablePagination } from '../shared/TablePagination';
+import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { detailTriggerRow } from '../shared/detailTriggerRow';
 import { LIVE_QUERY_POLICY, QUERY_MEMORY, retainPreviousPageWithinScope } from '../queryPolicy';
@@ -337,8 +337,16 @@ export default function HistoryPage() {
       status="证据可追溯"
       meta={<Typography.Text type="tertiary">{keywords.length ? `${keywords.length} 辆车辆` : '等待选择车辆'}</Typography.Text>}
     />
-    <MobileFilterToggle title="查询条件" summary={keywords.length ? `${keywords.length} 辆 · ${criteria.category === 'location' ? '位置数据' : criteria.category === 'raw' ? '原始报文' : '日里程'}` : '请选择车辆'} expanded={!filtersCollapsed} collapsedLabel="修改" onToggle={() => setFiltersCollapsed((value) => !value)} />
-    <Card className={`v2-history-filter-card${filtersCollapsed ? ' is-mobile-collapsed' : ''}`} bodyStyle={{ padding: 0 }}>
+    <WorkspaceFilterPanel
+      className="v2-history-filter-card"
+      title="查询范围"
+      description="车辆、时间、数据类型与协议来源"
+      mobileSummary={keywords.length ? `${keywords.length} 辆 · ${criteria.category === 'location' ? '位置数据' : criteria.category === 'raw' ? '原始报文' : '日里程'}` : '请选择车辆'}
+      expanded={!filtersCollapsed}
+      status={keywords.length ? `${keywords.length} 辆已选` : '待选择车辆'}
+      statusColor={keywords.length ? 'blue' : 'grey'}
+      onToggle={() => setFiltersCollapsed((value) => !value)}
+    >
       <form className={`v2-history-toolbar${filtersCollapsed ? ' is-mobile-collapsed' : ''}`} onSubmit={submit}>
         <label className="v2-history-vehicles"><span>车辆（最多 5 台）</span><Input prefix={<IconSearch />} value={draft.keywords} onChange={(value) => setDraft((current) => ({ ...current, keywords: value }))} placeholder="车牌 / VIN，多台用逗号分隔" /></label>
         <fieldset className="v2-history-range"><legend>时间范围</legend><div><Input aria-label="开始时间" type="datetime-local" value={draft.dateFrom} onChange={(value) => setDraft((current) => ({ ...current, dateFrom: value }))} /><span>至</span><Input aria-label="结束时间" type="datetime-local" value={draft.dateTo} onChange={(value) => setDraft((current) => ({ ...current, dateTo: value }))} /></div></fieldset>
@@ -346,7 +354,7 @@ export default function HistoryPage() {
         <label><span id="history-protocol-label">数据来源</span><Select aria-labelledby="history-protocol-label" value={draft.protocol} onChange={(value) => setDraft((current) => ({ ...current, protocol: String(value) }))} optionList={[{ value: '', label: '全部来源' }, { value: 'GB32960', label: 'GB32960' }, { value: 'JT808', label: 'JT808' }, { value: 'YUTONG_MQTT', label: 'YUTONG_MQTT' }]} /></label>
         <div className="v2-history-toolbar-actions"><Button className="v2-primary-button" theme="solid" htmlType="submit" disabled={!parseHistoryKeywords(draft.keywords).length}>查询</Button><Button className="v2-secondary-button" theme="light" onClick={reset}>重置</Button>{exportAllowed ? <CreateExportButton disabled={!resultRows.length} request={{ keywords, category: criteria.category, protocol: criteria.protocol || undefined, dateFrom: criteria.dateFrom, dateTo: criteria.dateTo, metrics: visibleKeys, format: 'csv' }} /> : <Tag className="v2-history-permission-tag" color="grey" type="light" size="large">只读</Tag>}</div>
       </form>
-    </Card>
+    </WorkspaceFilterPanel>
     <Card className="v2-history-metrics-card" bodyStyle={{ padding: 0 }}>
       <div className="v2-history-metrics">
         <strong>已选字段</strong>

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

@@ -265,15 +265,15 @@ test('paginates all unique vehicles when no license plate is selected', async ()
 
   expect((await screen.findAllByText('粤A00001')).length).toBeGreaterThan(0);
   expect(screen.getByText('共 32 辆 · 每页 20 辆')).toBeInTheDocument();
-  expect(document.querySelector('.v2-table-pagination-current')).toHaveTextContent('1/2');
+  expect(document.querySelector('.v2-table-pagination .semi-page-item-small')).toHaveTextContent('1/2');
   expect(screen.getByText('档案口径 · 1 辆有里程')).toBeInTheDocument();
   expect(mocks.vehicleCoverage.mock.calls[0][0].get('bindingStatus')).toBe('bound');
   await waitFor(() => expect(mocks.dailyMileage.mock.calls[mocks.dailyMileage.mock.calls.length - 1]?.[0].get('vins')).toContain('VIN00000000000001'));
 
-  fireEvent.click(screen.getByRole('button', { name: '下一页' }));
+  fireEvent.click(screen.getByRole('button', { name: 'Next' }));
   expect((await screen.findAllByText('粤A00021')).length).toBeGreaterThan(0);
   expect(screen.getByText('共 32 辆 · 每页 20 辆')).toBeInTheDocument();
-  expect(document.querySelector('.v2-table-pagination-current')).toHaveTextContent('2/2');
+  expect(document.querySelector('.v2-table-pagination .semi-page-item-small')).toHaveTextContent('2/2');
   await waitFor(() => expect(mocks.vehicleCoverage.mock.calls[mocks.vehicleCoverage.mock.calls.length - 1]?.[0].get('offset')).toBe('20'));
 });
 

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

@@ -120,7 +120,7 @@ test('pages and filters large vehicle grants without nesting a vehicle-list scro
   expect(screen.getAllByRole('button', { name: /^移除 / })).toHaveLength(10);
   expect(screen.getByText('第 1–10 条，共 12 辆')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-assigned-pagination')).toBeInTheDocument();
-  fireEvent.click(screen.getByRole('button', { name: '下一页' }));
+  fireEvent.click(screen.getByRole('button', { name: 'Next' }));
   expect(await screen.findByRole('button', { name: '移除 粤A00012' })).toBeInTheDocument();
   expect(screen.getAllByRole('button', { name: /^移除 / })).toHaveLength(2);