feat(settings): replicate the WorkBuddy keyboard shortcuts panel and wire global bindings (TODO 12)

Recover the WorkBuddy 5.8.3 快捷键 page from REA evidence (keyboard-shortcuts-DOrivHwf.css + tokens): 49 recovered module rules, scoped light/dark tokens, the 24-row 命令/按键绑定/操作 sheet (panel 638x620, header 39, scroll 638x533, rows 41/45/44, keycaps 22) and the recording/ESC-cancel interaction.

Wire the panel into SettingsDialog and keep only real bindings honest: 14 of 24 rows are marked supported, the remaining rows stay visually 1:1 but are labelled 尚未接入 and cannot pretend to save custom keys. Add Ctrl+K search focus, Ctrl+B / Ctrl+Shift+B left/right sidebar toggles, Ctrl+N new conversation (App -> Sidebar path) and Esc-to-stop while generating; fix the sidebar search focus race introduced by conditional mounting.

Verify with scripts/verify-shortcuts-settings.cjs: 32 assertions covering geometry, row/key order, search filtering, recording/cancel, supported ids, dark theme surfaces and the four new global shortcuts in a real main window. All existing regressions stay green.
This commit is contained in:
xiaohan.yuan committed 2026-10-17 09:57:30 +08:00
1 parent b36b52831b
commit 19460f0b13
19 files changed
+1008 -12

No files matched your search

+32 -4
View File
@@ -372,11 +372,39 @@
### 12. 快捷键页面与真实功能
- [ ] 拆解页面布局、分组、按键显示、编辑/恢复默认等实际存在的交互。
- [ ] 建立快捷键 → 命令 → 实际动作映射,按 REA 证据确认支持范围。
- [ ] 验收:展示按键与实际绑定一致;输入框、编辑器、弹层、独立窗口中的作用域和冲突处理正确;可修改项持久化。
- [x] 拆解页面布局、分组、按键显示、编辑/恢复默认等实际存在的交互。
- [x] 建立快捷键 → 命令 → 实际动作映射:24 行中 14 行已真实绑定,其余在 tooltip 明确标注未接入。
- [x] 验收:展示按键与实际绑定一致;搜索、录制态/取消、深色主题与 5 个新全局键位通过真实窗口回归。可修改项持久化未接入(见遗留)。
状态:待 REA 拆解与命令绑定盘点。
状态:已实现并通过真实窗口回归(32 项断言)。原版 24 行全部按 1:1 呈现,其中 14 行在 YCode 真实生效。
原版证据:
- REA `ev_5f3148eb51ea4a6e5b6f2ffea5f6e3dfb94e4009ecf2d16173fa676ce7c51b4b`(WorkBuddy 5.8.3,设置窗口 `6D5A7FEE…`,900×680):快捷键页浅色顶部布局、578 个 DOM 节点、计算样式与模块样式表 `keyboard-shortcuts-DOrivHwf.css`(sha256 `d2c570c8d65db87c1cb9df06b59e6aa191b772330857376b85fd923aed580ae8`,8,430 字节)。
- REA `ev_7266946b025216056fc67f7c6d3c991894e985b6a8486a3153c3508e21771f73`:四段滚动采样(顶/中/底/回顶),覆盖全部 24 行。
- REA `ev_b3e014e5cff4971d7c5e75fefbbfefb0088db9ce655ef7ff33114cd3c4caead9`:搜索「语音」→ 单行、禁用「全部恢复默认」、点击绑定进入「按下快捷键 / ESC 取消」、Esc 取消后保留 `Ctrl+K`。
- REA `ev_f4fd417445481ef93c34a7e85be45e63327daa2acbccaf169706d7e19bacc531`(深色同页布局)与 `ev_528724699462fa08e2e4119bb8504c0180483c86cd844461cc969422b915650b`(最终浅色顶部稳定态)。
- 页面结构:无分组标题的平面表格,列名 命令 / 按键绑定 / 操作。面板 `[232,40,638,620]`;toolbar `[232,40,638,32]`、搜索 `[232,40,516,32]`、恢复默认 `[760,40,110,32]`;列表 `[232,88,638,572]`、表头 39px、滚动区 `[232,127,638,533]`;行宽 623,前 16 行 41px、17–23 行 45px、末行 44px;键帽高 22px。
- 24 行命令与键位:打开全局搜索 `Ctrl+K`、打开设置 `Ctrl+,`、语音录制开关 `长按 Alt`、对话内搜索 `Ctrl+F`、全局搜索 `Ctrl+K`、发送消息 `Enter`、输入时换行 `Shift+Enter`、新建对话 `Ctrl+N`、停止生成 `Esc`、上一个任务 `Ctrl+[`、下一个任务 `Ctrl+]`、定位当前任务 `Ctrl+Shift+E`、切换左侧栏 `Ctrl+B`、切换右侧栏 `Ctrl+Shift+B`、进入/退出全屏 `F11`、唤起/隐藏主窗口 `Shift+Alt+W`、放大内容字号 `Ctrl+"+"`、缩小内容字号 `Ctrl+"-"`、重置内容字号 `Ctrl+0`、唤起选择器 `@`、唤起斜杠命令 `/`、按住后点击始终外部打开 `Ctrl`、新建标签页 `Ctrl+T`、关闭标签页 `Ctrl+W`。
- 深浅差异:几何不变;列表/行背景 `#fff → rgb(31,31,31)`,正文 `rgb(0,0,0) → rgb(242,243,245)`,键帽由 `#f2f2f2` 变为 8% 白色填充;只读行键帽不透明度 0.5。
- 观察范围:桌面端 900×680 设置窗口浅色 + 深色抽查;未覆盖:单条删除按钮的实际点击结果、空搜索结果的原文案、复合主题切换的单次连续采集(深色/浅色点击各遇到一次 `target_changed`,已用独立稳定采样确认)。
实现:
- `scripts/rea/recover-shortcuts-panel.mjs`:从 `ev_5f3148…` 投影 49 条 `.keyboard-shortcuts-panel*` / `.shortcut-item*` 模块规则(含 `recording-cursor-blink` 关键帧),深色选择器改写为 `[data-theme=dark]`,按引用闭包复制 53 个浅色/53 个深色作用域 token,生成 `source-shortcuts-panel-recovered.css`(12,540 字节,sha256 `414aa003…`,两次运行一致)。
- `src/renderer/src/components/shortcuts-catalog.ts`:24 行命令/键位/可编辑性,以及 `supported` 真实绑定标记(14 行为 true)。
- `src/renderer/src/components/ShortcutsSettingsPanel.tsx`:工具栏(搜索 + 禁用「全部恢复默认」)、三列表头、24 行表格、前 16 行删除按钮(禁用)、后 8 行 `shortcut-item--not-editable` + 「—」、点击绑定进入「按下快捷键 / ESC 取消」、捕获按键时提示「自定义键位尚未接入,已保留默认绑定」、真实搜索过滤与空结果态。
- `src/renderer/src/components/source-shortcuts-panel.css`:import 回收样式 + 本地适配原版 UI kit 的输入/按钮基件(浅色取值来自 REA computed style:搜索框 32 高/radius 8/`#e6e6e6` 边、恢复默认按钮 110×32、删除按钮 24×24),深色下文色按 REA 实测 `rgb(242,243,245)`。
- `SettingsDialog.tsx`:`keyboardShortcuts` 加入 supportedTabs 并渲染面板。
- `App.tsx`:新增全局键位——`Ctrl+K` 展开侧栏并聚焦搜索、`Ctrl+B` / `Ctrl+Shift+B` 切换左/右侧栏、`Ctrl+N` 新建对话、生成中 `Esc` 停止;`Sidebar.tsx` 监听 `ycode:new-task` 复用「新建任务」路径,并补上搜索框挂载后的聚焦(修复 rAF 早于条件渲染导致焦点丢失)。
验证:`scripts/verify-shortcuts-settings.cjs`(真实隔离 Electron + 原生设置窗口,900×680)32 项断言全部通过:导航启用/选中;面板、工具栏、搜索、恢复默认、列表、表头、滚动区几何;三列表头文案;24 行文案/键位顺序;41/45/44 行高与 22px 键帽;前 16 行删除按钮与可编辑、后 8 行不可编辑且「—」;`长按 Alt` 拆分;14 个 supported id 精确匹配;未接入行 tooltip 含「尚未接入」;搜索「语音」筛为 1 行、无匹配显示空态、清空恢复 24 行;录音态文案与光标、Esc 取消保留 `Ctrl+K`、按键捕获提示未接入;深色几何不变且行底 `rgb(31,31,31)`、正文 `rgb(242,243,245)`、键帽 8% 白;恢复浅色正确。主窗口真实按键:`Ctrl+B` 折叠/展开并写入 `localStorage`、`Ctrl+K` 聚焦 `.sidebar__search-input`、`Ctrl+Shift+B` 开/关右栏、`Ctrl+N` 触发新建任务通路。报告 `.tmp/shortcuts-settings-neCeel/report.json`。
回归:`npm run typecheck`、`npm run build`、`npm run test:chat`、`npm run test:conversation`、`npm run test:conversation-ipc`、`node scripts/verify-settings-nav.cjs`、`node scripts/verify-appearance-settings.cjs`、`node scripts/verify-general-settings.cjs`、`node scripts/verify-desktop-appearance.cjs`、`node scripts/verify-account-menu.cjs` 全部通过。
遗留:
1. 自定义键位编辑/单条删除/整表恢复默认未接入:YCode 尚无键位配置存储与命令注册表,页面保持原版控件形态但按钮禁用,捕获按键后明确提示「自定义键位尚未接入」,不伪造成功,也未宣称可持久化。
2. 未真实接入的 10 行(语音录制、对话内搜索、上一个/下一个任务、定位当前任务、全屏、唤起/隐藏主窗口、`@` 选择器、`/` 斜杠命令、`Ctrl` 外部打开)只还原原版展示,tooltip 标注「YCode 尚未接入」。
3. `Ctrl+T` / `Ctrl+W` 为工作台焦点内作用域绑定,`Ctrl+K` 落到侧栏任务搜索,与原版「全局搜索」的服务端检索范围不同(云端服务本轮不处理)。
4. 深色下 toolbar 输入框/按钮来自本地适配(原版把 UI kit 放在独立样式表,未随该页模块导出),已按 tokens 深色取值还原。
5. 空搜索结果文案「未找到匹配的快捷键」是 YCode 本地文案,原版空态未采集。
### 13. 个性化页面与真实功能