dsh-config-manager 0.1.12 → 0.1.13

package/src/client/common/progress-view.test.ts

@@ -0,0 +1,79 @@
+/**
+ * m3 progress-view 单测：computeProgressView 渲染模型（纯函数，node 可测）。
+ *
+ * 覆盖（验收 m3-render）：
+ *  - 兼容路径：普通 ProgressEvent（无 section/item）→ 阶段文案 + step/total 百分比；
+ *  - 分区徽章（导出：settings · 3/12，current=item 序号、total=sectionTotal）；
+ *  - 内部计数徽章（导入：plugins · 6/18）；
+ *  - 导出冗余：itemTotal === sectionTotal 时内部计数徽章去重；
+ *  - detail 与分区 id 相同时去冗余（当前项名）；
+ *  - null / 不定态（无 step/total → percent null）。
+ */
+import test from 'node:test'
+import assert from 'node:assert/strict'
+
+import { computeProgressView } from './progress-view.ts'
+import type { RunProgress } from './progress-view.ts'
+
+test('m3-render: null 事件 → 空渲染模型', () => {
+  const view = computeProgressView(null)
+  assert.equal(view.label, '')
+  assert.equal(view.percent, null)
+  assert.equal(view.sectionBadge, null)
+  assert.equal(view.countBadge, null)
+  assert.equal(view.detail, null)
+})
+
+test('m3-render: 兼容路径 —— 普通 ProgressEvent 走原逻辑（阶段 + 百分比）', () => {
+  const event: RunProgress = { stage: 'validating', step: 2, total: 4 }
+  const view = computeProgressView(event)
+  assert.equal(view.label, 'Validating backup...')
+  assert.equal(view.percent, 50)
+  assert.equal(view.sectionBadge, null)
+  assert.equal(view.countBadge, null)
+  assert.equal(view.detail, null)
+})
+
+test('m3-render: 无 step/total → 不定态（percent null）', () => {
+  const view = computeProgressView({ stage: 'executing', detail: 'running' })
+  assert.equal(view.percent, null)
+})
+
+test('m3-render: 导出进度 → 分区徽章 settings · 3/12（内部计数去冗余）', () => {
+  // m1 导出埋点：section=分区 id、sectionTotal=分区总数、item=1-based 分区序号、itemTotal=总数
+  const event: RunProgress = {
+    stage: 'exporting',
+    section: 'settings',
+    sectionTotal: 12,
+    item: 3,
+    itemTotal: 12,
+    detail: 'settings',
+  }
+  const view = computeProgressView(event)
+  assert.equal(view.percent, 25, '百分比 = item/itemTotal = 3/12')
+  assert.deepEqual(view.sectionBadge, { label: 'settings', current: 3, total: 12 })
+  assert.equal(view.countBadge, null, '导出内部计数与分区计数同源 → 去冗余')
+  assert.equal(view.detail, null, 'detail 与分区 id 相同 → 去冗余')
+})
+
+test('m3-render: 导入进度 → 内部计数徽章 plugins · 6/18 + 当前项名', () => {
+  // m1 导入埋点：section=当前 adapter、item/itemTotal=计划项进度、detail=计划项 id
+  const event: RunProgress = {
+    stage: 'executing',
+    section: 'plugins',
+    sectionTotal: null,
+    item: 6,
+    itemTotal: 18,
+    detail: 'plugin:pkg-a',
+  }
+  const view = computeProgressView(event)
+  assert.equal(view.percent, 33)
+  assert.equal(view.sectionBadge, null, '导入无分区总数语义')
+  assert.deepEqual(view.countBadge, { label: 'plugins', current: 6, total: 18 })
+  assert.equal(view.detail, 'plugin:pkg-a', '当前项名保留')
+})
+
+test('m3-render: 未知阶段回退显示 stage id', () => {
+  const view = computeProgressView({ stage: 'weird-stage' })
+  assert.equal(view.label, 'weird-stage')
+})

package/src/client/common/progress-view.ts

@@ -0,0 +1,94 @@
+/**
+ * m3: 进度展示的纯逻辑层（框架无关，node 可测）。
+ *
+ * 背景：m1 的 RunState 携带真实进度（section/sectionTotal = 当前分区 3/12、
+ * item/itemTotal = 内部计数如插件 6/18、detail = 当前项名）；m2 的 store 把
+ * RunState 映射为 ProgressEvent 并存入 progress 字段。本模块定义客户端的
+ * RunProgress（ProgressEvent 超集，额外携带分区/内部计数，JSON 可序列化），
+ * 并提供 computeProgressView() 把进度事件转成渲染模型 —— ProgressBar 只做
+ * 纯渲染，所有判定逻辑集中在此、可单测。
+ *
+ * 兼容路径：无 section/item 的普通 ProgressEvent（控制器 onProgress 发出）
+ * 走原逻辑 —— 阶段文案 + step/total 百分比，无徽章。
+ */
+import { stageText } from '../../ui/progress.ts'
+import type { ProgressEvent } from '../../ui/types.ts'
+
+/** m3: 客户端进度事件 = ProgressEvent 超集（RunState 轮询映射产物；可 JSON 序列化）。 */
+export interface RunProgress extends ProgressEvent {
+  /** 当前分区（adapter id / 阶段名）与分区总数（如 settings · 3/12）；导入无此语义为 null */
+  section?: string | null
+  sectionTotal?: number | null
+  /** 内部计数（如插件 6/18；导出 = 分区序号，导入 = 已处理计划项数） */
+  item?: number | null
+  itemTotal?: number | null
+}
+
+/** 徽章渲染数据（label · current/total）。 */
+export interface ProgressBadge {
+  label: string
+  current: number
+  total: number
+}
+
+/** ProgressBar 的渲染模型（纯数据，测试断言用）。 */
+export interface ProgressView {
+  /** 阶段文案（stageText） */
+  label: string
+  /** 百分比（step/total；无则 null = 不定态动画） */
+  percent: number | null
+  /** 当前分区徽章（settings · 3/12） */
+  sectionBadge: ProgressBadge | null
+  /** 内部计数徽章（plugins · 6/18；导出时与分区计数同源则去冗余） */
+  countBadge: ProgressBadge | null
+  /** 当前项名（detail；与分区名相同时去冗余） */
+  detail: string | null
+}
+
+/**
+ * 把进度事件换算成渲染模型。
+ * - percent：优先 ProgressEvent.step/total（控制器阶段进度 / 轮询的内部计数）；
+ * - sectionBadge（当前分区，如 settings · 3/12）：label=分区 id、current=item
+ *   （1-based 分区序号，见 core exporter onSection）、total=sectionTotal；
+ * - countBadge（内部计数，如 plugins · 6/18）：label=分区 id、current=item、
+ *   total=itemTotal；导出时 itemTotal 与 sectionTotal 同值（分区序号即内部计数）
+ *   → 置 null，避免「3/12 3/12」重复；
+ * - detail（当前项名）：非空且不等于分区 id（导出时 detail 恒为分区 id，去冗余）。
+ */
+export function computeProgressView(event: RunProgress | null): ProgressView {
+  if (event === null) {
+    return { label: '', percent: null, sectionBadge: null, countBadge: null, detail: null }
+  }
+  const section = event.section ?? null
+  const sectionTotal = event.sectionTotal ?? null
+  const item = event.item ?? null
+  const itemTotal = event.itemTotal ?? null
+
+  const percent =
+    event.step !== undefined && event.total !== undefined && event.total > 0
+      ? Math.round((event.step / event.total) * 100)
+      : item !== null && itemTotal !== null && itemTotal > 0
+        ? Math.round((item / itemTotal) * 100)
+        : null
+
+  const sectionBadge: ProgressBadge | null =
+    section !== null && item !== null && sectionTotal !== null && sectionTotal > 0
+      ? { label: section, current: item, total: sectionTotal }
+      : null
+
+  let countBadge: ProgressBadge | null =
+    section !== null && item !== null && itemTotal !== null && itemTotal > 0
+      ? { label: section, current: item, total: itemTotal }
+      : null
+  if (countBadge !== null && sectionBadge !== null && itemTotal === sectionTotal) {
+    // 导出：item/itemTotal 与 section/sectionTotal 同源（当前分区序号），去冗余
+    countBadge = null
+  }
+
+  const detail =
+    typeof event.detail === 'string' && event.detail !== '' && event.detail !== section
+      ? event.detail
+      : null
+
+  return { label: stageText(event.stage), percent, sectionBadge, countBadge, detail }
+}

package/src/client/config-manager.module.css

@@ -69,26 +69,6 @@
   padding: 4px 2px 16px;
 }
 
-.iconButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  font-size: 15px;
-}
-
-.iconButton:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
 /* ---------------- 区块标题 ---------------- */
 
 .sectionTitleBlock {
@@ -464,6 +444,33 @@
 
 .progressDetail {
   color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 320px;
+}
+
+/* m3：分区徽章 / 内部计数徽章 */
+.progressBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.progressBadgeSection {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 14%, transparent);
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.progressBadgeCount {
+  background: color-mix(in srgb, var(--dsw-alias-state-info-primary) 14%, transparent);
+  color: var(--dsw-alias-state-info-primary);
 }
 
 .progressPercent {
@@ -757,3 +764,75 @@
 @keyframes dshCmSpin {
   to { transform: rotate(360deg); }
 }
+
+/* ---------------- 快照恢复面板（M4） ---------------- */
+
+.snapshotList {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.snapshotRowHeader,
+.snapshotRow {
+  display: grid;
+  grid-template-columns: minmax(120px, 1.2fr) minmax(140px, 1.6fr) 90px 56px 56px;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 10px;
+  font-size: 12px;
+}
+
+.snapshotRowHeader {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+}
+
+.snapshotRow {
+  width: 100%;
+  text-align: left;
+  color: var(--dsw-alias-label-primary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.snapshotRow:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.snapshotRow[data-active] {
+  border-color: var(--dsw-alias-state-business-primary);
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent);
+}
+
+.warnText {
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+.reportList {
+  margin: 8px 0 4px;
+  padding-left: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: 12px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.kindTag {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 10.5px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.rowActions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}

package/src/client/export/ExportView.tsx

@@ -5,19 +5,21 @@
  * - Custom：按 §1 分组目录（EXPORT_GROUPS × DEFAULT_CATEGORIES）逐项勾选，
  *   ExportFlow.validateSelection() 给出设备相关分区警告；
  * - Include secrets：可选加密备份（需设置加密密码，密码仅本次内存使用，
- *   经 api.exportPassword 随请求体传给 Host 半，绝不落盘/入 manifest）；
+ *   经 api.exportPassword 随请求体传给 Host 半，绝不落盘/入 manifest，
+ *   **也绝不进入 sessionStorage** —— m2 白名单剔除，刷新后要求重输）；
  * - 进度：ExportFlow.run 发出 ProgressEvent → ProgressBar；
  * - 结果：ReportView(export) + 下载按钮（File System Access API 流式落盘）。
+ *
+ * m2：全部 UI 状态由模块级 runStore 持有（切 tab/关面板不重建、刷新恢复），
+ * 控制器实例（ExportFlow）由 store 缓存复用。
  */
-import { useCallback, useState } from 'react'
+import { useCallback, useSyncExternalStore } from 'react'
 import type { ChangeEvent } from 'react'
-import { ExportFlow, DEFAULT_CATEGORIES } from '../../ui/export-flow.ts'
 import { EXPORT_GROUPS } from '../../ui/types.ts'
-import type { ExportRunResult } from '../../ui/export-flow.ts'
-import type { ProgressEvent } from '../../ui/types.ts'
 import type { SectionId } from '../../schema/types.ts'
 import type { TranslateNS } from '../client-types.ts'
 import type { ConfigManagerApi } from '../api.ts'
+import { runStore, type ExportMode } from '../run-store.ts'
 import { Badge, Banner, Button, Card, Checkbox, SectionTitle, Spinner } from '../common/ui.tsx'
 import { ErrorBanner } from '../common/ErrorBanner.tsx'
 import { ProgressBar } from '../common/ProgressBar.tsx'
@@ -29,42 +31,46 @@ export interface ExportViewProps {
   t: TranslateNS<'config-manager'>
 }
 
-type ExportMode = 'quick' | 'custom'
-
-/** Custom 模式的初始勾选 = 推荐分区（可再调整） */
-function defaultCustomSelection(): SectionId[] {
-  return DEFAULT_CATEGORIES.filter((c) => c.defaultIncluded).map((c) => c.id)
-}
-
 /**
  * 导出主视图：Quick/Custom 切换 → 勾选/密码 → 执行 → 进度 → 报告 → 下载。
  */
 export function ExportView({ api, t }: ExportViewProps) {
-  const [mode, setMode] = useState<ExportMode>('quick')
-  const [selection, setSelection] = useState<SectionId[]>(defaultCustomSelection)
-  const [includeSecrets, setIncludeSecrets] = useState(false)
-  const [password, setPassword] = useState('')
-  const [passwordConfirm, setPasswordConfirm] = useState('')
-  const [running, setRunning] = useState(false)
-  const [progress, setProgress] = useState<ProgressEvent | null>(null)
-  const [result, setResult] = useState<ExportRunResult | null>(null)
-  const [error, setError] = useState<unknown>(null)
-  const [downloaded, setDownloaded] = useState(false)
-
-  // ExportFlow 控制器实例（port=api，onProgress 桥到 React state）
-  const [flow] = useState(() => new ExportFlow({
-    port: api,
-    onProgress: (event) => { setProgress(event) },
-  }))
-
-  const toggleSection = useCallback((id: SectionId, checked: boolean) => {
-    setSelection((prev) => {
-      const has = prev.includes(id)
-      if (checked && !has) return [...prev, id]
-      if (!checked && has) return prev.filter((s) => s !== id)
-      return prev
-    })
-  }, [])
+  // m2：状态统一来自模块级 store（sessionStorage 持久化；切 tab 不重建）
+  const state = useSyncExternalStore(runStore.subscribe, runStore.getSnapshot)
+  const exp = state.export
+  // 控制器实例由 store 缓存复用（切 tab / 关面板不重建）
+  const flow = runStore.exportFlow(api)
+
+  const mode = exp.mode
+  const selection = exp.selection
+  const includeSecrets = exp.includeSecrets
+  // 密码字段仅内存（store 的敏感字段，绝不序列化进 sessionStorage）
+  const password = exp.password
+  const passwordConfirm = exp.passwordConfirm
+  const running = exp.running
+  const progress = exp.progress
+  const result = exp.result
+  const error = exp.error
+  const downloaded = exp.downloaded
+
+  const setMode = (next: ExportMode): void => {
+    runStore.patch({ export: { mode: next } })
+  }
+  const setIncludeSecrets = (next: boolean): void => {
+    runStore.patch({ export: { includeSecrets: next } })
+  }
+  const setPassword = (value: string): void => {
+    runStore.patch({ export: { password: value } })
+  }
+  const setPasswordConfirm = (value: string): void => {
+    runStore.patch({ export: { passwordConfirm: value } })
+  }
+
+  const toggleSection = useCallback((id: SectionId, checked: boolean): void => {
+    const has = selection.includes(id)
+    if (checked && !has) runStore.patch({ export: { selection: [...selection, id] } })
+    if (!checked && has) runStore.patch({ export: { selection: selection.filter((s) => s !== id) } })
+  }, [selection])
 
   const passwordInvalid =
     includeSecrets && (password === '' || password !== passwordConfirm)
@@ -72,21 +78,29 @@ export function ExportView({ api, t }: ExportViewProps) {
   /** 执行导出（Quick 或 Custom） */
   const runExport = async (): Promise<void> => {
     if (passwordInvalid) return
-    setRunning(true)
-    setError(null)
-    setResult(null)
-    setDownloaded(false)
-    setProgress(null)
+    runStore.patch({
+      export: { running: true, error: null, result: null, downloaded: false, progress: null, runId: null },
+    })
+    // m3：请求进行期间经 /runs 发现 runId 并轮询 /progress（500ms）显示真实进度
+    runStore.watchRunning('export', 500)
     try {
       // 加密密码随本次导出请求体传给 Host 半（仅内存）
       api.exportPassword = includeSecrets ? password : null
       const run = await flow.run(mode, selection, { includeSecrets })
-      setResult(run)
+      // ExportResponse 携带 runId（/progress 查询与刷新恢复用）；控制器类型不含，运行时对象有
+      const runId = (run as { runId?: unknown }).runId
+      runStore.patch({
+        export: {
+          result: run,
+          runId: typeof runId === 'string' ? runId : null,
+          progress: { stage: 'done', step: 1, total: 1 },
+        },
+      })
     } catch (err) {
-      setError(err)
+      runStore.patch({ export: { error: err instanceof Error ? err.message : String(err) } })
     } finally {
-      setRunning(false)
-      setProgress(null)
+      runStore.stopRunWatch('export')
+      runStore.patch({ export: { running: false } })
     }
   }
 
@@ -94,12 +108,12 @@ export function ExportView({ api, t }: ExportViewProps) {
   const download = async (): Promise<void> => {
     if (result === null) return
     try {
-      setError(null)
+      runStore.patch({ export: { error: null } })
       const outcome = await api.download(result.zipPath)
-      setDownloaded(true)
+      runStore.patch({ export: { downloaded: true } })
       void outcome // blob/streamed 由 api 处理；此处仅确认成功
     } catch (err) {
-      setError(err)
+      runStore.patch({ export: { error: err instanceof Error ? err.message : String(err) } })
     }
   }