unify Semi UI filter workspaces and pagination

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">{[