feat: unify configuration side sheets

This commit is contained in:
lingniu
2026-07-19 05:16:55 +08:00
parent 2bae87f6a2
commit 7eca5ae352
8 changed files with 597 additions and 23 deletions

View File

@@ -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 }: {