feat: unify detail side sheets

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

@@ -14,6 +14,7 @@ import { ProtocolTag } from '../shared/ProtocolTag';
 import { SegmentedTabs } from '../shared/SegmentedTabs';
 import { TablePagination } from '../shared/TablePagination';
 import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
+import { WorkspaceDetailSideSheet } from '../shared/WorkspaceDetailSideSheet';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 import { detailTriggerRow } from '../shared/detailTriggerRow';
@@ -63,8 +64,11 @@ function SeverityTag({ severity }: Pick<AlertEvent, 'severity'>) {
   return <Tag className={`v2-alert-severity is-${severity}`} color={color} type="light" size="small"><i />{severityLabels[severity]}</Tag>;
 }
 function StatusTag({ status }: Pick<AlertEvent, 'status'>) {
-  const color = status === 'unprocessed' ? 'red' : status === 'processing' ? 'blue' : status === 'recovered' ? 'green' : 'grey';
-  return <Tag className={`v2-alert-status is-${status}`} color={color} type="light" size="small">{statusLabels[status]}</Tag>;
+  return <Tag className={`v2-alert-status is-${status}`} color={alertStatusColor(status)} type="light" size="small">{statusLabels[status]}</Tag>;
+}
+
+function alertStatusColor(status: AlertStatus) {
+  return status === 'unprocessed' ? 'red' as const : status === 'processing' ? 'blue' as const : status === 'recovered' ? 'green' as const : 'grey' as const;
 }
 
 function AlertTime({ value, className = '' }: { value?: string; className?: string }) {
@@ -193,7 +197,6 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
   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', '告警事件筛选', '关闭告警事件筛选');
-  useSideSheetA11y(mobileLayout && Boolean(selectedID), '.v2-alert-detail-sidesheet', 'v2-alert-detail', '告警事件详情', '关闭告警详情');
   const applyDraft = () => {
     setFilters(draft);
     setOffset(0);
@@ -337,17 +340,21 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
       <div className="v2-alert-advanced-filter">{advancedFilterFields}</div>
     </SideSheet>
     : null}
-    <SideSheet
+    <WorkspaceDetailSideSheet
       className="v2-alert-detail-sidesheet"
       visible={mobileLayout && Boolean(selectedID)}
-      aria-label="告警事件详情"
+      ariaLabel="告警事件详情"
+      closeLabel="关闭告警详情"
       placement="bottom"
       height="min(90dvh, 800px)"
-      title={<div className="v2-alert-sheet-title"><strong>告警详情</strong><span>{selectedEvent ? `${selectedEvent.plate || selectedEvent.vin} · ${selectedEvent.ruleName}` : '证据、状态与处置履历'}</span></div>}
+      title="告警详情"
+      description={selectedEvent ? `${selectedEvent.plate || selectedEvent.vin} · ${selectedEvent.ruleName}` : '证据、状态与处置履历'}
+      badge={selectedEvent ? statusLabels[selectedEvent.status] : undefined}
+      badgeColor={selectedEvent ? alertStatusColor(selectedEvent.status) : 'grey'}
       onCancel={closeDetail}
     >
       {mobileLayout && selectedID ? <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} sheet /> : null}
-    </SideSheet>
+    </WorkspaceDetailSideSheet>
   </>;
 }