feat: unify configuration side sheets

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

@@ -19,6 +19,7 @@ import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
 import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 import { WorkspaceMetricRail } from '../shared/WorkspaceMetricRail';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
+import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
 import { detailTriggerRow } from '../shared/detailTriggerRow';
 import { LIVE_QUERY_POLICY, QUERY_MEMORY, retainPreviousPageWithinScope } from '../queryPolicy';
 import { usePlatformSession } from '../auth/AuthGate';
@@ -195,23 +196,36 @@ function ColumnVisibilityPanel({ metrics, visible, visibleKeys, onToggle, onShow
     return metrics.filter((metric) => `${metric.label} ${metric.key} ${metric.unit} ${metric.description ?? ''} ${metric.valueMappings?.map((item) => `${item.value} ${item.label}`).join(' ') ?? ''}`.toLowerCase().includes(keyword));
   }, [metrics, search]);
   const displayedMetrics = filteredMetrics.slice(0, 200);
-  useSideSheetA11y(visible, '.v2-history-column-sidesheet', 'v2-history-column-settings', '列显示设置', '关闭列显示设置');
-  return <SideSheet
+  const defaultMetricCount = useMemo(() => metrics.filter((metric) => metric.defaultVisible).length, [metrics]);
+  return <WorkspaceSideSheet
     className="v2-history-column-sidesheet"
     visible={visible}
-    aria-label="列显示设置"
+    ariaLabel="列显示设置"
     placement={mobileLayout ? 'bottom' : 'right'}
     width={mobileLayout ? undefined : 460}
     height={mobileLayout ? 'min(68dvh, 580px)' : undefined}
-    title={<div className="v2-history-column-title"><strong>列显示设置</strong><span>基础身份与时间列保持显示</span></div>}
+    title="列显示设置"
+    description="基础身份与时间列保持显示"
+    badge={`${visibleKeys.length} / ${metrics.length} 已选`}
+    badgeColor={visibleKeys.length ? 'blue' : 'grey'}
+    summaryItems={[
+      { label: '当前显示', value: `${visibleKeys.length} 列`, detail: '业务字段', tone: 'primary' },
+      { label: '可选字段', value: `${metrics.length} 项`, detail: '随数据类型变化' },
+      { label: '默认字段', value: `${defaultMetricCount} 项`, detail: '可随时恢复', tone: 'success' }
+    ]}
     onCancel={onClose}
-    footer={<div className="v2-history-column-footer"><span>已选 {visibleKeys.length} / {metrics.length}</span><Button theme="light" onClick={onShowAll} disabled={!metrics.length}>显示全部</Button><Button theme="light" onClick={onReset} disabled={!metrics.length}>恢复默认</Button></div>}
+    footerNote={`已选 ${visibleKeys.length} / ${metrics.length} 个业务字段`}
+    secondaryActions={[
+      { label: '显示全部', onClick: onShowAll, disabled: !metrics.length },
+      { label: '恢复默认', onClick: onReset, disabled: !metrics.length }
+    ]}
+    primaryAction={{ label: '完成', onClick: onClose }}
   >
     <div className="v2-history-column-content">
       <label className="v2-history-column-search"><Input prefix={<IconSearch />} value={search} onChange={setSearch} placeholder="搜索中文、状态含义或字段 key" /></label>
       <div className="v2-history-column-list">{displayedMetrics.map((metric) => <label key={metric.key} title={metric.description}><Checkbox aria-label={`${metric.label}${metric.unit ? ` (${metric.unit})` : ''}`} checked={visibleKeys.includes(metric.key)} onChange={() => onToggle(metric.key)} /><span>{metric.label}{metric.unit ? ` (${metric.unit})` : ''}{metric.valueMappings?.length ? <em>{metric.valueMappings.slice(0, 4).map((item) => `${item.value}=${item.label}`).join(' · ')}</em> : null}</span><small>{metric.key}</small></label>)}{!metrics.length ? <p>当前数据类型没有可配置指标</p> : search && !filteredMetrics.length ? <p>没有匹配字段</p> : filteredMetrics.length > displayedMetrics.length ? <p>当前仅展示前 200 项，请输入字段名或 key 缩小范围。</p> : null}</div>
     </div>
-  </SideSheet>;
+  </WorkspaceSideSheet>;
 }
 
 function HistoryDataTable({ rows, metrics, selectedRowID, onSelect }: { rows: HistoryDataRow[]; metrics: HistoryMetricDefinition[]; selectedRowID?: string; onSelect: (row: HistoryDataRow) => void }) {