lhly/cloud-drive-renamer
1
0
派生 0
镜像自地址 https://github.com/lhly/cloud-drive-renamer.git 已同步 2026-10-20 21:57:47 +08:00
代码 工单 Actions 项目 版本发布 百科 动态 提交记录
4df5375b92
cloud-drive-renamer/docs/superpowers/plans/2026-03-25-episode-extract-and-rule-presets.md

12 KiB
原始文件 Blame 文件历史

剧集提取交互增强与规则预设 Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 为 episodeExtract 增加样本/整段回填/片段回填/失败快捷修正交互，并新增“最近使用 + 命名模板”规则预设系统。

Architecture: 保持现有三栏结构不变，由 file-selector-panel 作为统一状态源，协调 config-panel、preview-panel 与新增加的预设存储工具层。规则预设通过 storage 持久化，剧集提取辅助通过新增状态对象和组件事件流串联。

Tech Stack: TypeScript、Lit Web Components、Vitest、chrome.storage/localStorage fallback

文件结构与职责

新增文件

  • src/types/rule-preset.ts — 规则预设与剧集提取辅助状态类型定义
  • src/utils/rule-presets.ts — 最近使用/模板的读写、去重、摘要、覆盖策略
  • tests/unit/rule-presets.test.ts — 预设工具层单测

修改文件

  • src/content/components/config-panel.ts — 增加剧集提取辅助区、最近使用区、模板区与事件派发
  • src/content/components/preview-panel.ts — 增加 episodeExtract 下的整段回填、片段回填、失败快捷修正事件
  • src/content/components/file-selector-panel.ts — 统一管理辅助状态、预设状态、预设加载/应用/记录逻辑
  • src/types/file-selector.ts — 如有必要，扩展 PreviewItem 或新增事件类型定义
  • src/locales/zh_CN.json / src/locales/zh_TW.json / src/locales/en.json — 新增文案
  • tests/unit/config-panel-*.test.ts / tests/unit/file-selector-panel-*.test.ts / 可能新增 tests/unit/preview-panel-*.test.ts — 组件与集成测试

Task 1: 定义预设与辅助状态类型

Files:

  • Create: src/types/rule-preset.ts

  • Modify: src/types/file-selector.ts

  • Test: tests/unit/rule-presets.test.ts

  • Step 1: 写失败测试，约束数据结构与默认值预期

在 tests/unit/rule-presets.test.ts 添加最小测试，覆盖：

  • 可以接受 RuleConfig

  • EpisodeExtractAssistState 默认目标为 prefix

  • fillMode 默认值为 full-name

  • Step 2: 运行测试确认失败

Run: npx vitest run tests/unit/rule-presets.test.ts Expected: FAIL，提示模块不存在或导出缺失。

  • Step 3: 新增类型文件并补充必要导出

实现：

  • RulePresetRecord

  • RulePresetSource

  • EpisodeExtractFillTarget

  • EpisodeExtractFillMode

  • EpisodeExtractAssistState

  • 如需要，在 src/types/file-selector.ts 增加预览辅助相关事件 detail 类型

  • Step 4: 重新运行测试确认通过

Run: npx vitest run tests/unit/rule-presets.test.ts Expected: PASS

  • Step 5: 提交
git add src/types/rule-preset.ts src/types/file-selector.ts tests/unit/rule-presets.test.ts
git commit -m "feat: add rule preset and extract assist types"

Task 2: 实现规则预设工具层

Files:

  • Create: src/utils/rule-presets.ts

  • Test: tests/unit/rule-presets.test.ts

  • Reference: src/utils/storage.ts, src/types/rule.ts

  • Step 1: 扩展失败测试，覆盖预设工具行为

在 tests/unit/rule-presets.test.ts 增加测试：

  • 保存 recent 时自动去重并置顶

  • recent 超过 8 条会截断

  • 保存 template 需要名称

  • 同名 template 可被覆盖

  • 失效配置不会通过应用前校验

  • 生成摘要字符串可用

  • Step 2: 运行测试确认失败

Run: npx vitest run tests/unit/rule-presets.test.ts Expected: FAIL，提示函数未实现。

  • Step 3: 实现 src/utils/rule-presets.ts

至少提供这些函数：

  • getRecentRulePresets()
  • recordRecentRulePreset(config)
  • getTemplateRulePresets()
  • saveTemplateRulePreset(name, config, options?)
  • deleteTemplateRulePreset(id)
  • buildRulePresetSummary(config)
  • isRulePresetConfigValid(config)

实现要求：

  • 通过 storage 持久化

  • recent 去重 + 截断

  • template 支持同名查重/覆盖

  • 所有读取失败回退为空数组

  • Step 4: 运行工具层测试确认通过

Run: npx vitest run tests/unit/rule-presets.test.ts Expected: PASS

  • Step 5: 提交
git add src/utils/rule-presets.ts tests/unit/rule-presets.test.ts
git commit -m "feat: add rule preset storage utilities"

Task 3: 为 config-panel 增加规则预设 UI

Files:

  • Modify: src/content/components/config-panel.ts

  • Test: tests/unit/config-panel-rule-presets.test.ts

  • Reference: tests/unit/config-panel-undo.test.ts

  • Step 1: 写失败测试，覆盖模板区与最近使用区渲染/事件

新增 tests/unit/config-panel-rule-presets.test.ts，覆盖：

  • 面板接收到 recent/templates 属性时正确渲染列表

  • 点击“应用”会派发 apply-rule-preset 事件

  • 点击“保存当前规则为模板”会派发 save-rule-template 事件

  • 点击“删除模板”会派发 delete-rule-template 事件

  • Step 2: 运行测试确认失败

Run: npx vitest run tests/unit/config-panel-rule-presets.test.ts Expected: FAIL，找不到新增 DOM 或事件。

  • Step 3: 在 config-panel.ts 接入预设 UI 和属性

增加属性：

  • recentRulePresets
  • templateRulePresets

增加 UI：

  • 最近使用区
  • 我的模板区
  • 轻量保存模板入口（内嵌输入或 prompt 风格）

新增事件：

  • apply-rule-preset

  • save-rule-template

  • delete-rule-template

  • Step 4: 运行测试确认通过

Run: npx vitest run tests/unit/config-panel-rule-presets.test.ts Expected: PASS

  • Step 5: 提交
git add src/content/components/config-panel.ts tests/unit/config-panel-rule-presets.test.ts
git commit -m "feat: add config panel rule preset UI"

Task 4: 为 config-panel 增加剧集提取辅助区

Files:

  • Modify: src/content/components/config-panel.ts

  • Test: tests/unit/config-panel-episode-assist.test.ts

  • Step 1: 写失败测试，覆盖 episodeExtract 下辅助区行为

新增 tests/unit/config-panel-episode-assist.test.ts，覆盖：

  • 仅在 episodeExtract 规则下显示辅助区

  • 显示样本文件名和失败数量

  • 切换 fillTarget 派发事件

  • 切换 fillMode 派发事件

  • 点击“随机样本 / 首个失败项 / 清空样本”派发事件

  • Step 2: 运行测试确认失败

Run: npx vitest run tests/unit/config-panel-episode-assist.test.ts Expected: FAIL

  • Step 3: 在 config-panel.ts 实现辅助区

增加属性：

  • episodeExtractAssistState
  • episodeExtractFailureCount

增加事件：

  • episode-assist-change-target

  • episode-assist-change-mode

  • episode-assist-use-random-sample

  • episode-assist-use-first-failure

  • episode-assist-clear-sample

  • Step 4: 运行测试确认通过

Run: npx vitest run tests/unit/config-panel-episode-assist.test.ts Expected: PASS

  • Step 5: 提交
git add src/content/components/config-panel.ts tests/unit/config-panel-episode-assist.test.ts
git commit -m "feat: add episode extract assist controls"

Task 5: 为 preview-panel 增加辅助交互入口

Files:

  • Modify: src/content/components/preview-panel.ts

  • Test: tests/unit/preview-panel-episode-assist.test.ts

  • Reference: src/types/file-selector.ts

  • Step 1: 写失败测试，覆盖整段回填、片段回填和失败快捷动作

新增 tests/unit/preview-panel-episode-assist.test.ts，覆盖：

  • 仅在 episodeExtract + assist enabled 下显示辅助交互

  • 点击整段回填按钮派发事件

  • 片段点击派发事件

  • 失败项显示“设为样本 / 取前半段为 prefix / 进入片段选择”动作

  • Step 2: 运行测试确认失败

Run: npx vitest run tests/unit/preview-panel-episode-assist.test.ts Expected: FAIL

  • Step 3: 修改 preview-panel.ts 实现辅助 UI

新增属性建议：

  • episodeExtractAssistEnabled
  • episodeExtractAssistState

新增事件建议：

  • episode-assist-apply-full-name
  • episode-assist-apply-segment
  • episode-assist-use-item-as-sample
  • episode-assist-use-prefix-from-item
  • episode-assist-focus-segment-mode

实现要求：

  • 片段级点击，不做字符级选择

  • 不影响非 episodeExtract 模式

  • Step 4: 运行测试确认通过

Run: npx vitest run tests/unit/preview-panel-episode-assist.test.ts Expected: PASS

  • Step 5: 提交
git add src/content/components/preview-panel.ts tests/unit/preview-panel-episode-assist.test.ts
git commit -m "feat: add preview panel episode assist actions"

Task 6: 在 file-selector-panel 中接线预设与辅助状态

Files:

  • Modify: src/content/components/file-selector-panel.ts

  • Test: tests/unit/file-selector-panel-rule-presets.test.ts

  • Test: tests/unit/file-selector-panel-episode-assist.test.ts

  • Reference: tests/unit/file-selector-panel-conflict.test.ts, tests/unit/file-selector-panel-undo.test.ts

  • Step 1: 写失败测试，覆盖接线与状态更新

新增测试覆盖：

  • 打开面板时加载 recent/templates

  • 应用模板会更新 ruleConfig 并刷新预览

  • 保存模板/删除模板会同步更新列表

  • episodeExtract 辅助事件会更新 ruleConfig.params

  • 使用随机样本/首个失败项会更新辅助状态

  • 执行成功后 recent 自动记录

  • Step 2: 运行测试确认失败

Run: npx vitest run tests/unit/file-selector-panel-rule-presets.test.ts tests/unit/file-selector-panel-episode-assist.test.ts Expected: FAIL

  • Step 3: 在 file-selector-panel.ts 增加统一状态与事件处理

实现内容：

  • 管理 EpisodeExtractAssistState

  • 加载 / 应用 / 保存 / 删除规则预设

  • 根据辅助事件更新 ruleConfig.params

  • 将 recent/templates 和 assist state 传给 config-panel / preview-panel

  • 在执行成功后调用 recordRecentRulePreset

  • Step 4: 运行测试确认通过

Run: npx vitest run tests/unit/file-selector-panel-rule-presets.test.ts tests/unit/file-selector-panel-episode-assist.test.ts Expected: PASS

  • Step 5: 提交
git add src/content/components/file-selector-panel.ts tests/unit/file-selector-panel-rule-presets.test.ts tests/unit/file-selector-panel-episode-assist.test.ts
git commit -m "feat: connect episode assist and rule presets"

Task 7: 补齐 i18n 文案与回归验证

Files:

  • Modify: src/locales/zh_CN.json

  • Modify: src/locales/zh_TW.json

  • Modify: src/locales/en.json

  • Test: 复用上述组件测试

  • Step 1: 增加失败测试或更新现有测试的文案断言

若已有测试依赖 I18nService.t(...) 输出，补充必要断言；否则至少确保新增 key 被组件引用后测试不抛错。

  • Step 2: 更新三份 locale 文案

新增：

  • 辅助区标题与按钮

  • 最近使用 / 我的模板 / 保存模板 / 删除模板 / 覆盖提示

  • 失败项快捷修正文案

  • Step 3: 运行定向测试

Run: npx vitest run tests/unit/rule-presets.test.ts tests/unit/config-panel-rule-presets.test.ts tests/unit/config-panel-episode-assist.test.ts tests/unit/preview-panel-episode-assist.test.ts tests/unit/file-selector-panel-rule-presets.test.ts tests/unit/file-selector-panel-episode-assist.test.ts Expected: PASS

  • Step 4: 运行全量验证

Run:

npx vitest run
npm run lint
npm run typecheck

Expected:

  • Vitest 全绿

  • lint 无新增 error（warning 可单独评估）

  • typecheck 通过

  • Step 5: 提交

git add src/locales/zh_CN.json src/locales/zh_TW.json src/locales/en.json
git add .
git commit -m "feat: add episode extract assist and rule presets"

风险提示

  • config-panel.ts 和 file-selector-panel.ts 已较大，若新增逻辑明显膨胀，优先提取纯函数/工具模块，避免继续把状态判断堆进组件。
  • 片段选择请保持“片段级点击”，不要演变成复杂的字符级框选。
  • recent 自动记录必须放在“成功执行后”，不要在输入阶段记录。
  • 模板应用前必须经过规则有效性校验，避免旧模板拖垮当前面板。