feat: unify filter workbenches

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

@@ -1,5 +1,5 @@
 import { IconAlarm, IconBell, IconChevronRight, IconClose, IconFilter, IconPlus, IconRefresh, IconSearch, IconSetting } from '@douyinfe/semi-icons';
-import { Button, Card, CardGroup, Collapse, Descriptions, Empty, Input, Radio, Select, SideSheet, Spin, Table, Tag, TextArea, Timeline, Typography } from '@douyinfe/semi-ui';
+import { Button, Card, CardGroup, Collapse, Descriptions, Empty, Input, Radio, Select, Spin, Table, Tag, TextArea, Timeline, Typography } from '@douyinfe/semi-ui';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FormEvent, memo, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
@@ -23,7 +23,6 @@ import { usePlatformSession } from '../auth/AuthGate';
 import { canAdminister, canOperate } from '../auth/session';
 import { QUERY_MEMORY, queryScopeKey, retainPreviousPageWithinScope } from '../queryPolicy';
 import { useMobileLayout } from '../hooks/useMobileLayout';
-import { useSideSheetA11y } from '../hooks/useSideSheetA11y';
 
 type Tab = 'events' | 'rules' | 'notifications';
 type Filters = { keyword: string; severity: string; status: string; ruleId: string; protocol: string; dateFrom: string; dateTo: string };
@@ -196,8 +195,6 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
   const selectEvent = useCallback((id: string) => setSelection({ scope: eventScope, id }), [eventScope]);
   const selectedEvent = detail.data ?? rows.find((row) => row.id === selectedID);
   const mobileFiltersOpen = mobileLayout && !filtersCollapsed;
-  useSideSheetA11y(!mobileLayout && advancedOpen, '.v2-alert-filter-sidesheet', 'v2-alert-advanced-filters', '告警高级筛选', '关闭告警高级筛选');
-  useSideSheetA11y(mobileFiltersOpen, '.v2-alert-mobile-filter-sidesheet', 'v2-alert-mobile-filters', '告警事件筛选', '关闭告警事件筛选');
   const applyDraft = () => {
     setFilters(draft);
     setOffset(0);
@@ -218,6 +215,7 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
   const sums = summary.data;
   const activeFilterCount = Object.values(filters).filter(Boolean).length;
   const advancedFilterCount = [filters.ruleId, filters.protocol, filters.dateFrom, filters.dateTo].filter(Boolean).length;
+  const draftAdvancedFilterCount = [draft.ruleId, draft.protocol, draft.dateFrom, draft.dateTo].filter(Boolean).length;
   const allEventCount = Number(sums?.active ?? 0) + Number(sums?.recovered ?? 0) + Number(sums?.closed ?? 0) + Number(sums?.ignored ?? 0);
   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} />;
   const coreFilterFields = <>
@@ -249,6 +247,7 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
         title="事件筛选"
         summary={activeFilterCount ? `已启用 ${activeFilterCount} 项` : '全部告警'}
         expanded={mobileFiltersOpen}
+        controls="v2-alert-mobile-filters"
         expandedLabel="关闭"
         collapsedLabel="修改"
         onToggle={() => setFiltersCollapsed((value) => !value)}
@@ -258,6 +257,8 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
         visible={mobileFiltersOpen}
         height="min(82dvh, 690px)"
         ariaLabel="告警事件筛选"
+        dialogId="v2-alert-mobile-filters"
+        closeLabel="关闭告警事件筛选"
         title="筛选告警事件"
         description="车辆、状态、规则与时间范围"
         onCancel={() => setFiltersCollapsed(true)}
@@ -328,18 +329,31 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
       </Card>
       {!mobileLayout && selectedID ? inspector : null}
     </div>
-    {!mobileLayout ? <SideSheet
+    {!mobileLayout ? <WorkspaceSideSheet
       className="v2-alert-filter-sidesheet"
+      variant="filter"
       visible={advancedOpen}
-      aria-label="告警高级筛选"
-      placement="right"
+      ariaLabel="告警高级筛选"
+      dialogId="v2-alert-advanced-filters"
+      closeLabel="关闭告警高级筛选"
       width={430}
-      title={<div className="v2-alert-sheet-title"><strong>更多筛选</strong><span>按规则、协议和触发时间收窄告警范围</span></div>}
+      title="更多筛选"
+      description="按规则、协议和触发时间收窄告警范围"
+      icon={<IconFilter />}
+      badge={draftAdvancedFilterCount ? `${draftAdvancedFilterCount} 项待应用` : '全部范围'}
+      badgeColor={draftAdvancedFilterCount ? 'blue' : 'grey'}
+      summaryItems={[
+        { label: '规则', value: rules.find((rule) => rule.id === draft.ruleId)?.name || '全部规则', tone: draft.ruleId ? 'primary' : 'neutral' },
+        { label: '协议', value: draft.protocol || '全部协议', tone: draft.protocol ? 'primary' : 'neutral' },
+        { label: '触发时间', value: draft.dateFrom || draft.dateTo ? '已限定' : '不限时间', detail: draft.dateFrom || draft.dateTo ? '按本地时间查询' : undefined, tone: draft.dateFrom || draft.dateTo ? 'primary' : 'neutral' }
+      ]}
+      footerNote="高级条件仅在应用后更新事件列表"
+      secondaryActions={[{ label: '清空高级条件', onClick: () => setDraft({ ...draft, ruleId: '', protocol: '', dateFrom: '', dateTo: '' }) }]}
+      primaryAction={{ label: '应用筛选', onClick: () => { applyDraft(); setAdvancedOpen(false); } }}
       onCancel={() => setAdvancedOpen(false)}
-      footer={<div className="v2-alert-sheet-footer"><Button theme="light" onClick={() => setDraft({ ...draft, ruleId: '', protocol: '', dateFrom: '', dateTo: '' })}>清空高级条件</Button><Button theme="solid" onClick={() => { applyDraft(); setAdvancedOpen(false); }}>应用筛选</Button></div>}
     >
       <div className="v2-alert-advanced-filter">{advancedFilterFields}</div>
-    </SideSheet>
+    </WorkspaceSideSheet>
     : null}
     <WorkspaceDetailSideSheet
       className="v2-alert-detail-sidesheet"