feat: unify mobile filter sheets

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

@@ -9,6 +9,7 @@ import { actionLabels, alertDeltaText, alertValue, canAct, formatAlertTime, oper
 import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
 import { MetricActionButton } from '../shared/MetricActionButton';
 import { MobileFilterToggle } from '../shared/MobileFilterToggle';
+import { MobileFilterSheet, MobileFilterSheetSection } from '../shared/MobileFilterSheet';
 import { ProtocolTag } from '../shared/ProtocolTag';
 import { SegmentedTabs } from '../shared/SegmentedTabs';
 import { TablePagination } from '../shared/TablePagination';
@@ -247,27 +248,26 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
         collapsedLabel="修改"
         onToggle={() => setFiltersCollapsed((value) => !value)}
       />
-      <SideSheet
+      <MobileFilterSheet
         className="v2-alert-filter-sidesheet v2-alert-mobile-filter-sidesheet"
         visible={mobileFiltersOpen}
-        placement="bottom"
         height="min(82dvh, 690px)"
-        aria-label="告警事件筛选"
-        title={<div className="v2-alert-sheet-title"><strong>筛选告警事件</strong><span>车辆、状态、规则与时间范围</span></div>}
+        ariaLabel="告警事件筛选"
+        title="筛选告警事件"
+        description="车辆、状态、规则与时间范围"
         onCancel={() => setFiltersCollapsed(true)}
-        footer={<div className="v2-alert-mobile-filter-footer"><Button theme="light" onClick={resetFilters}>重置条件</Button><Button theme="solid" onClick={applyDraft}>应用并查询</Button></div>}
+        secondaryAction={{ label: '重置条件', onClick: resetFilters }}
+        primaryAction={{ label: '应用并查询', onClick: applyDraft }}
       >
         <form className="v2-alert-mobile-filter-form" onSubmit={submit}>
-          <section className="v2-alert-mobile-filter-section" aria-label="常用筛选">
-            <header><strong>常用条件</strong><span>快速定位车辆与待处置事件</span></header>
+          <MobileFilterSheetSection className="v2-alert-mobile-filter-section" ariaLabel="常用筛选" title="常用条件" description="快速定位车辆与待处置事件">
             <div className="v2-alert-mobile-filter-grid is-primary">{coreFilterFields}</div>
-          </section>
-          <section className="v2-alert-mobile-filter-section" aria-label="精确筛选">
-            <header><strong>精确范围</strong><span>按规则、协议和触发时间进一步收窄</span></header>
+          </MobileFilterSheetSection>
+          <MobileFilterSheetSection className="v2-alert-mobile-filter-section" ariaLabel="精确筛选" title="精确范围" description="按规则、协议和触发时间进一步收窄">
             <div className="v2-alert-mobile-filter-grid">{advancedFilterFields}</div>
-          </section>
+          </MobileFilterSheetSection>
         </form>
-      </SideSheet>
+      </MobileFilterSheet>
     </div> : <WorkspaceFilterPanel
       className="v2-alert-filter-card"
       title="事件筛选"