feat: unify configuration side sheets

2026-07-19 05:16:55 +08:00
parent 2bae87f6a2
commit 7eca5ae352
8 changed files with 597 additions and 23 deletions
--- a/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx
+++ b/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 }) {
--- a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx
@@ -13,6 +13,7 @@ import { VehicleCandidateList } from '../shared/VehicleCandidateList';
 import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
 import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 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';
@@ -163,18 +164,30 @@ function SourcePolicySheet({ vin, source, diagnostic, editable, onClose, onSaved
  onClose: () => void;
  onSaved: (next: VehicleSourceDiagnostic) => void;
 }) {
-  useSideSheetA11y(Boolean(source), '.v2-source-policy-sidesheet', 'v2-source-policy-sheet', '车辆来源策略', '关闭车辆来源策略');
-  return <SideSheet
+  const mobileLayout = useMobileLayout();
+  return <WorkspaceSideSheet
    className="v2-source-policy-sidesheet"
    visible={Boolean(source)}
-    width={440}
-    aria-label="车辆来源策略"
-    title={source ? <div className="v2-source-policy-sheet-title"><strong>{source.sourceLabel}</strong><span>{source.terminalLabel || source.protocol} · {source.sourceKind === 'CANONICAL' ? '仅维护提供方' : '来源策略'}</span></div> : '来源策略'}
+    ariaLabel="车辆来源策略"
+    closeLabel="关闭车辆来源策略"
+    placement={mobileLayout ? 'bottom' : 'right'}
+    width={mobileLayout ? undefined : 460}
+    height={mobileLayout ? 'min(76dvh, 660px)' : undefined}
+    title={source?.sourceLabel ?? '来源策略'}
+    description={source ? `${source.terminalLabel || source.protocol} · ${source.sourceKind === 'CANONICAL' ? '仅维护提供方' : '来源策略'}` : '来源策略'}
+    badge={source ? source.enabled ? '策略已启用' : '策略已停用' : undefined}
+    badgeColor={source?.enabled ? 'green' : 'grey'}
+    summaryItems={source ? [
+      { label: '实时状态', value: source.online ? '在线' : '离线', detail: source.qualityReason || source.qualityStatus || '等待质量判定', tone: source.online ? 'success' : 'warning' },
+      { label: '当前优先级', value: source.priority, detail: source.enabled ? '参与来源选举' : '不参与来源选举', tone: source.enabled ? 'primary' : 'neutral' },
+      { label: '选举结论', value: source.recommended ? '当前推荐' : source.selectedWithinProtocol ? '协议首选' : '备用来源', detail: source.selectionReason || '等待选举说明' }
+    ] : []}
    onCancel={onClose}
-    footer={null}
+    footerNote="策略修改需点击表单内的保存按钮后才会生效。"
+    primaryAction={{ label: '完成', onClick: onClose }}
  >
-    {source ? <div className="v2-source-policy-sheet-content"><div className="v2-source-policy-sheet-summary"><SourceHealth source={source} /><SourceDecision source={source} /></div><SourcePolicyEditor vin={vin} source={source} diagnostic={diagnostic} editable={editable && Boolean(source.sourceRef)} onSaved={(next) => { onSaved(next); onClose(); }} /></div> : null}
-  </SideSheet>;
+    {source ? <div className="v2-source-policy-sheet-content"><SourcePolicyEditor vin={vin} source={source} diagnostic={diagnostic} editable={editable && Boolean(source.sourceRef)} onSaved={(next) => { onSaved(next); onClose(); }} /></div> : null}
+  </WorkspaceSideSheet>;
 }

 function SourceDiagnosticTable({ vin, sources, diagnostic, editable, onSaved }: {
--- a/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.test.tsx
@@ -265,7 +265,7 @@ test('lets users disable mileage sources and persists the source priority', asyn
  expect(screen.getByText('优先级 1').closest('.semi-tag')).toHaveClass('v2-mileage-source-priority');
  expect(screen.getByText('GPS 里程')).toBeInTheDocument();
  expect(screen.getByText('GPS 里程').closest('.semi-tag')).toBeInTheDocument();
-  expect(screen.getAllByText('仪表盘里程')).toHaveLength(2);
+  expect(screen.getAllByText('仪表盘里程')).toHaveLength(3);
  expect(screen.getByRole('button', { name: /数据源.*GB32960 优先.*3\/3/ })).toHaveAttribute('title', '当前优先：国标 GB32960');
  fireEvent.click(screen.getByRole('switch', { name: '禁用 国标 GB32960' }));
  fireEvent.click(screen.getByRole('button', { name: '上移 宇通 MQTT' }));
--- a/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.tsx
@@ -1,5 +1,5 @@
 import { IconArrowDown, IconArrowUp, IconClose, IconDownload, IconInfoCircle, IconRefresh, IconSearch, IconSetting } from '@douyinfe/semi-icons';
-import { Button, Card, Empty, Input, SideSheet, Spin, Switch, Table, Tag } from '@douyinfe/semi-ui';
+import { Button, Card, Empty, Input, Spin, Switch, Table, Tag } from '@douyinfe/semi-ui';
 import { useQuery } from '@tanstack/react-query';
 import { type CSSProperties, FormEvent, type KeyboardEvent, memo, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -18,6 +18,7 @@ import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
 import { WorkspaceMetricRail } from '../shared/WorkspaceMetricRail';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
+import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
 import { QUERY_MEMORY, retainPreviousPageWithinScope } from '../queryPolicy';
 import { monitorReturnFromParams, preserveMonitorReturn } from '../routing/monitorContext';
 import { useMobileLayout } from '../hooks/useMobileLayout';
@@ -120,7 +121,6 @@ function SourceStrategy({ value, onChange }: { value: MileageSourceOption[]; onC
  const mobileLayout = useMobileLayout();
  const enabled = value.filter((source) => source.enabled);
  const primarySource = enabled[0];
-  useSideSheetA11y(open, '.v2-mileage-source-sidesheet', 'v2-mileage-source-strategy', '数据源策略配置', '关闭数据源策略');
  const update = (sources: MileageSourceOption[]) => {
    onChange(sources);
    try { window.localStorage.setItem(SOURCE_STORAGE_KEY, JSON.stringify(sources)); } catch { /* preference persistence is optional */ }
@@ -142,16 +142,26 @@ function SourceStrategy({ value, onChange }: { value: MileageSourceOption[]; onC
    <Button className="v2-mileage-source-trigger" theme="light" icon={<IconSetting />} aria-haspopup="dialog" aria-expanded={open} aria-controls="v2-mileage-source-strategy" title={`当前优先：${primarySource?.label ?? '未配置'}`} onClick={() => setOpen((current) => !current)}>
      <span>数据源</span><em>{primarySource?.protocol ?? '未配置'} 优先</em><b>{enabled.length}/3</b>
    </Button>
-    <SideSheet
+    <WorkspaceSideSheet
      className="v2-mileage-source-sidesheet"
      visible={open}
-      aria-label="数据源策略"
+      ariaLabel="数据源策略配置"
+      closeLabel="关闭数据源策略"
      placement={mobileLayout ? 'bottom' : 'right'}
      width={mobileLayout ? undefined : 430}
      height={mobileLayout ? 'min(58dvh, 500px)' : undefined}
-      title={<div className="v2-mileage-source-title"><strong>数据源策略</strong><span>同车同日按优先级选择一个里程来源</span></div>}
+      title="数据源策略"
+      description="同车同日按优先级选择一个里程来源"
+      badge={`${enabled.length}/3 已启用`}
+      badgeColor={enabled.length === 3 ? 'green' : 'blue'}
+      summaryItems={[
+        { label: '当前首选', value: primarySource?.protocol ?? '未配置', detail: primarySource?.mileageType ?? '至少保留一个来源', tone: 'primary' },
+        { label: '启用来源', value: `${enabled.length} / 3`, detail: enabled.map((source) => source.protocol).join(' · '), tone: enabled.length === 3 ? 'success' : 'neutral' },
+        { label: '统计口径', value: '单车单日', detail: '仅采用一个优先来源' }
+      ]}
      onCancel={() => setOpen(false)}
-      footer={<div className="v2-mileage-source-footer"><span>同车同日只使用一个来源，避免重复累计；至少保留一个来源。</span><Button theme="solid" onClick={() => setOpen(false)}>完成</Button></div>}
+      footerNote="避免多协议重复累计；至少保留一个来源。"
+      primaryAction={{ label: '完成', onClick: () => setOpen(false) }}
    >
      <div className="v2-mileage-source-list">{value.map((source, index) => <Card key={source.protocol} className={`v2-mileage-source-card${source.enabled ? '' : ' is-disabled'}`} bodyStyle={{ padding: 0 }}>
        <Switch className="v2-mileage-source-switch" checked={source.enabled} aria-label={`${source.enabled ? '禁用' : '启用'} ${source.label}`} onChange={() => toggle(source.protocol)} />
@@ -159,7 +169,7 @@ function SourceStrategy({ value, onChange }: { value: MileageSourceOption[]; onC
        <Tag className="v2-mileage-source-priority" color={source.enabled ? 'blue' : 'grey'} type="light" size="small">{source.enabled ? `优先级 ${enabled.findIndex((item) => item.protocol === source.protocol) + 1}` : '已禁用'}</Tag>
        <div className="v2-mileage-source-order"><Button theme="borderless" aria-label={`上移 ${source.label}`} icon={<IconArrowUp />} disabled={index === 0} onClick={() => move(index, -1)} /><Button theme="borderless" aria-label={`下移 ${source.label}`} icon={<IconArrowDown />} disabled={index === value.length - 1} onClick={() => move(index, 1)} /></div>
      </Card>)}</div>
-    </SideSheet>
+    </WorkspaceSideSheet>
  </div>;
 }