feat: unify detail side sheets

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

@@ -12,6 +12,7 @@ import { MobileFilterToggle } from '../shared/MobileFilterToggle';
 import { MobileFilterSheet, MobileFilterSheetSection } from '../shared/MobileFilterSheet';
 import { TablePagination } from '../shared/TablePagination';
 import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
+import { WorkspaceDetailSideSheet } from '../shared/WorkspaceDetailSideSheet';
 import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { detailTriggerRow } from '../shared/detailTriggerRow';
@@ -149,8 +150,11 @@ const ProtocolState = memo(function ProtocolState({
 });
 
 function ConnectionTag({ row }: { row: AccessVehicleRow }) {
-  const color = row.connectionState === 'healthy' ? 'green' : row.connectionState === 'not_connected' || row.connectionState === 'offline' ? 'red' : 'orange';
-  return <Tag className="v2-access-connection-tag" color={color} type="light" size="small">{connectionLabels[row.connectionState]}</Tag>;
+  return <Tag className="v2-access-connection-tag" color={connectionTagColor(row.connectionState)} type="light" size="small">{connectionLabels[row.connectionState]}</Tag>;
+}
+
+function connectionTagColor(state: AccessVehicleRow['connectionState']) {
+  return state === 'healthy' ? 'green' as const : state === 'not_connected' || state === 'offline' ? 'red' as const : 'orange' as const;
 }
 
 const ConnectionState = memo(function ConnectionState({ row }: { row: AccessVehicleRow }) {
@@ -352,7 +356,6 @@ export default function AccessPage() {
   }, [mobileLayout]);
   const rows = vehiclesQuery.data?.items ?? []; const selected = rows.find((row) => row.vin === selectedVIN);
   const mobileFiltersOpen = mobileLayout && !filtersCollapsed;
-  useSideSheetA11y(Boolean(selected), '.v2-access-detail-sidesheet', 'v2-access-detail', '车辆接入详情', '关闭车辆接入详情');
   useSideSheetA11y(editable && governanceOpen, '.v2-access-governance-sidesheet', 'v2-access-governance', '接入治理配置', '关闭接入治理配置');
   useSideSheetA11y(mobileFiltersOpen, '.v2-access-mobile-filter-sidesheet', 'v2-access-mobile-filters', '接入车辆筛选', '关闭接入车辆筛选');
   const syncURL = (filters: Filters) => { const next = new URLSearchParams(); Object.entries(filters).forEach(([key, value]) => { if (value) next.set(key, value); }); setSearchParams(next, { replace: true }); };
@@ -487,18 +490,21 @@ export default function AccessPage() {
         <footer><TablePagination page={page} totalPages={totalPages} info={`共 ${(vehiclesQuery.data?.total ?? 0).toLocaleString('zh-CN')} 辆主车辆`} onPageChange={(next) => setOffset((next - 1) * limit)} pageSize={mobileLayout ? undefined : limit} pageSizeLabel="每页车辆数" onPageSizeChange={(next) => { setLimit(next); setOffset(0); }} pageSizeOptions={mobileLayout ? undefined : [{ value: 20, label: '20 辆/页' }, { value: 50, label: '50 辆/页' }, { value: 100, label: '100 辆/页' }]} /></footer>
       </Card>
     </div>
-    <SideSheet
+    <WorkspaceDetailSideSheet
       className="v2-access-detail-sidesheet"
       visible={Boolean(selected)}
-      aria-label="车辆接入详情"
+      ariaLabel="车辆接入详情"
       placement={mobileLayout ? 'bottom' : 'right'}
       width={mobileLayout ? undefined : 520}
       height={mobileLayout ? 'min(84dvh, 740px)' : undefined}
-      title={<div className="v2-access-sheet-title"><strong>车辆接入详情</strong><span>{selected ? `${selected.plate || '未绑定车牌'} · ${selected.vin}` : '来源、在线状态与接入证据'}</span></div>}
+      title="车辆接入详情"
+      description={selected ? `${selected.plate || '未绑定车牌'} · ${selected.vin}` : '来源、在线状态与接入证据'}
+      badge={selected ? connectionLabels[selected.connectionState] : undefined}
+      badgeColor={selected ? connectionTagColor(selected.connectionState) : 'grey'}
       onCancel={() => setSelectedVIN('')}
     >
       {selected ? <VehicleInspector key={selected.vin} row={selected} onClose={() => setSelectedVIN('')} sheet mobile={mobileLayout} /> : null}
-    </SideSheet>
+    </WorkspaceDetailSideSheet>
     {editable ? <SideSheet
       className="v2-access-governance-sidesheet"
       visible={governanceOpen}