feat: unify filter workbenches

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

@@ -1,5 +1,5 @@
 import { IconRefresh, IconSearch, IconTickCircle } from '@douyinfe/semi-icons';
-import { Button, Card, CardGroup, Checkbox, Descriptions, Empty, Input, Progress, SideSheet, Spin, Table, Tag, Typography } from '@douyinfe/semi-ui';
+import { Button, Card, CardGroup, Checkbox, Descriptions, Empty, Input, Progress, Spin, Table, Tag, Typography } from '@douyinfe/semi-ui';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FormEvent, useDeferredValue, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -7,6 +7,7 @@ import { api } from '../../api/client';
 import type { VehicleCoverageRow, VehicleLocationSourceEvidence, VehicleSourceDiagnostic } from '../../api/types';
 import { InlineError } from '../shared/AsyncState';
 import { MobileFilterToggle } from '../shared/MobileFilterToggle';
+import { MobileFilterSheet, MobileFilterSheetSection } from '../shared/MobileFilterSheet';
 import { PlatformTime } from '../shared/PlatformTime';
 import { SegmentedTabs } from '../shared/SegmentedTabs';
 import { VehicleCandidateList } from '../shared/VehicleCandidateList';
@@ -16,7 +17,6 @@ import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
 import { LIVE_QUERY_POLICY, QUERY_MEMORY } from '../queryPolicy';
 import { useMobileLayout } from '../hooks/useMobileLayout';
-import { useSideSheetA11y } from '../hooks/useSideSheetA11y';
 import ReconciliationCenter from './ReconciliationCenter';
 
 type OperationsWorkspace = 'reconciliation' | 'diagnostic' | 'health';
@@ -296,7 +296,6 @@ function SourceDiagnosticWorkspace() {
     if (selectedLabel) setKeyword(selectedLabel);
     setFiltersCollapsed(true);
   };
-  useSideSheetA11y(mobileFiltersOpen, '.v2-source-mobile-filter-sidesheet', 'v2-source-mobile-filter-sheet', '诊断车辆筛选', '关闭诊断车辆筛选');
   const filterStatus = selectedLabel
     ? `已选 ${selectedLabel}`
     : deferredKeyword
@@ -334,28 +333,35 @@ function SourceDiagnosticWorkspace() {
         title="诊断车辆"
         summary={selectedLabel ? `已选 ${selectedLabel}` : '尚未选择车辆'}
         expanded={mobileFiltersOpen}
+        controls="v2-source-mobile-filter-sheet"
         expandedLabel="关闭"
         collapsedLabel="修改"
         onToggle={() => mobileFiltersOpen ? closeMobileFilters() : setFiltersCollapsed(false)}
       />
-      <SideSheet
+      <MobileFilterSheet
         className="v2-source-mobile-filter-sidesheet"
         visible={mobileFiltersOpen}
-        placement="bottom"
         height="min(78dvh, 660px)"
-        aria-label="诊断车辆筛选"
-        title={<div className="v2-source-mobile-filter-title"><strong>选择诊断车辆</strong><span>按车牌或 VIN 搜索已绑定车辆</span></div>}
+        ariaLabel="诊断车辆筛选"
+        dialogId="v2-source-mobile-filter-sheet"
+        closeLabel="关闭诊断车辆筛选"
+        title="选择诊断车辆"
+        description="按车牌或 VIN 搜索已绑定车辆"
         onCancel={closeMobileFilters}
-        footer={<div className="v2-source-mobile-filter-footer"><Button theme="light" disabled={!selected && !keyword} onClick={clearSelection}>清除选择</Button><Button theme="solid" disabled={!browsingCandidates || !candidates.data?.items.length} onClick={chooseFirst}>诊断首个结果</Button></div>}
+        secondaryAction={{ label: '清除选择', disabled: !selected && !keyword, onClick: clearSelection }}
+        primaryAction={{ label: '诊断首个结果', disabled: !browsingCandidates || !candidates.data?.items.length, onClick: chooseFirst }}
       >
         <form className="v2-source-mobile-filter-form" onSubmit={submit}>
-          <section className="v2-source-mobile-filter-section" aria-label="诊断车辆搜索">
-            <header><strong>车辆范围</strong><span>{selectedLabel ? `当前诊断 ${selectedLabel}，选择其他车辆后再切换` : '每次只读取一辆车的来源证据，不扫描整车队'}</span></header>
+          <MobileFilterSheetSection className="v2-source-mobile-filter-section" ariaLabel="诊断车辆搜索" title="车辆范围" description={selectedLabel ? `当前诊断 ${selectedLabel}，选择其他车辆后再切换` : '每次只读取一辆车的来源证据，不扫描整车队'}>
             {sourceSearchInput}
-          </section>
-          {sourceCandidateList}
+          </MobileFilterSheetSection>
+          {sourceCandidateList ?? <div className="v2-source-mobile-filter-empty" role="status">
+            <i aria-hidden="true"><IconSearch /></i>
+            <strong>{selectedLabel ? '输入新关键词切换车辆' : '输入车牌或 VIN 开始查找'}</strong>
+            <small>{selectedLabel ? `当前保留 ${selectedLabel}，关闭筛选不会改变诊断结果` : '候选结果会同时展示车牌、VIN 与已接协议'}</small>
+          </div>}
         </form>
-      </SideSheet>
+      </MobileFilterSheet>
     </div> : <WorkspaceFilterPanel
       className="v2-source-filter-panel"
       title="诊断车辆"