feat(settings): replicate the WorkBuddy about and help panels without external jumps (TODO 19)

Recover the shared WorkBuddy 5.8.3 HelpFeedbackPanel stylesheet through REA (18 module rules plus scoped light/dark tokens) and rebuild the 关于 and 获取帮助 pages: 638x620 panels, 638x108 two-row cards, 82x32/102x32 actions, the 638x226 follow card with three 120x120 QR frames and the 638x44 footer.

Keep the user's no-jump requirement explicit: every external entry (检查更新, 前往官网, 填写反馈, 查看文档, 隐私政策, 服务协议) keeps the original wording and geometry but is aria-disabled with a 暂未接入/尚未配置 tooltip and performs no navigation; the WorkBuddy account QR codes become same-size 尚未配置 placeholders. The version line reads the real appInfo version.

Also fix a CSS bundling regression found while wiring this page: the shared general-settings stylesheet was inlined three times and overrode the personalization long-card padding, collapsing the 598x160 previews to 614 wide. Remove the duplicate import and raise the personalization padding specificity.

Verify with scripts/verify-about-help-settings.cjs (15 assertions: both pages, geometry, real version, disabled jumpless actions, no anchors, dark surfaces) and keep all existing settings regressions green.
This commit is contained in:
xiaohan.yuan committed 2026-10-17 11:20:01 +08:00
1 parent 0dc088f1f7
commit b3be45715e
20 files changed
+683 -7

No files matched your search

+28 -4
View File
@@ -494,11 +494,35 @@
### 19. 关于与获取帮助
- [ ] 通过 REA 复刻“关于”“获取帮助”的布局、字体、图标、间距和交互外观。
- [ ] 不复制原版跳转链接;逐项标注 YCode 自有入口或尚未配置的跳转。
- [ ] 验收:本应用版本等信息真实;没有误跳 WorkBuddy 官方账户、帮助或其他服务地址。
- [x] 通过 REA 复刻“关于”“获取帮助”的布局、字体、图标、间距和交互外观。
- [x] 不复制原版跳转链接;逐项标注 YCode 自有入口或尚未配置的跳转。
- [x] 验收:本应用版本等信息真实;没有误跳 WorkBuddy 官方账户、帮助或其他服务地址。
状态:待 REA 对照;布局纳入范围,原版链接排除。
状态:已实现并通过真实窗口回归(15 项断言);布局 1:1,所有外跳类入口明确标注且不跳转。
原版证据:
- REA `ev_7e063ae669e788666080ec25be3247d2c75504d89d076f9963a737cf69ccf25c`(关于·浅色 DOM/layout/computed style + 模块 CSS)、`ev_4d3e8c9e277578ef06a16aa4aad5b4766c6a55744c65beb3e8a14033648476c9`(获取帮助·浅色)。
- REA `ev_ed6dce11ff79cf06e3e01c6c1b5ae3e3cc11eac10b37327ce12c06d5c3447053`(关于·深色)、`ev_ea353952860b6b59699c26fc72d40740b9a3770fe9a3a6e76515686f4363abe6`(获取帮助·深色)。
- REA `ev_17cc173b4e9da27258d5378924a16fb0a5e0c7b5fd845bec319361fbdff56e30`:最终浅色关于页顶部稳定态。
- 原版模块 `HelpFeedbackPanel-CQNpj-cs.css`(浅色 sha256 `fc5a287a…`、2,164 字节;深色 sha256 `19ec85a3…`、2,398 字节;两页共用)。观察范围:桌面端 900×680、两页浅色 + 深色抽查;未覆盖:官网/反馈/文档/隐私/协议按钮的跳转目标(全部未点击)、二维码实际内容(未解码)、更新检查的独立软件更新窗口流程(只观察到 WorkBuddy 5.8.3 已是最新版提示)。
- 几何:两页 right panel 均为 `[232,40,638,620]`;顶部卡片 638×108、两行 606×32(padding 12×16、行距 20);关于 = 检查更新 82×32 + 前往官网 102×32(外跳箭头)+ 关注卡 638×226(标题居中、三列 120×120 二维码框、内图 102×102)+ 页脚 638×44(隐私政策/服务协议 12px 禁用文字);获取帮助 = 意见反馈/填写反馈 82×32 + 帮助文档/查看文档 102×32(外跳箭头),其余留白。
- 深色:卡片 `#fff → rgb(31,31,31)`、正文 `rgb(0,0,0) → rgb(242,243,245)`、按钮 `rgb(38,38,38)` 底 + `rgb(61,61,61)` 边、二维码框 `rgb(41,41,41)` 底 + `rgb(58,58,58)` 边、页脚文字白 35%。
实现:
- `scripts/rea/recover-about-help-panels.mjs` → `source-about-help-panels-recovered.css`:18 条 `HelpFeedbackPanel` 模块规则 + 16 浅色/16 深色作用域 token(3,926 字节、sha256 `DB3E656A…`),连续重跑一致。
- `AboutHelpSettingsPanel.tsx` + `source-about-help-panels.css`:按原版类名与几何复刻两页;版本号来自 `window.ycode.app.info()` 的真实 `version`;`检查更新`、`前往官网`、`填写反馈`、`查看文档`、`隐私政策`、`服务协议` 保留原版文案与几何,以 `aria-disabled` + title(`暂未接入`/`尚未配置`)拦截点击,不打开任何地址。
- 原版三张二维码指向 WorkBuddy 官方账号:按用户「不复刻跳转链接」要求替换为同尺寸 120×120 框内的「尚未配置」占位,不生成、不臆造二维码内容;两页均无 `<a href>` 与 WorkBuddy 域名。
- `SettingsDialog.tsx`:`helpFeedback`(关于)与 `getHelp`(获取帮助)加入 supportedTabs 并渲染。
- 顺带修正样式复用:通用页样式表被多模块 `@import` 导致打包出 3 份并把个性化长卡内边距覆盖为 0;关于页移除重复 import(回到 2 份),并给个性化长卡加更高特异性的 8px 左右内边距规则,长预览恢复 598×160。
验证:`scripts/verify-about-help-settings.cjs`(真实隔离 Electron + 原生设置窗口,900×680)15 项断言全部通过:两页导航启用/选中;关于 panel/顶部卡片/两行/两个动作按钮(82×32、102×32)几何;版本号与 `appInfo.version` 一致;关注卡 638×226 + 标题 + 三列 120×120 占位二维码;页脚 638×44 + 两个 12px 禁用链接与禁用色;无 `<a href>`;获取帮助卡片/两行/两按钮几何与标注;深色卡片 `rgb(31,31,31)`、正文 `rgb(242,243,245)`、按钮 `rgb(38,38,38)`/边 `rgb(61,61,61)`、二维码框 `rgb(41,41,41)`;恢复浅色;无渲染器报错。报告 `.tmp/about-help-settings-zXlgtu/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-general-settings.cjs`、`node scripts/verify-appearance-settings.cjs`、`node scripts/verify-shortcuts-settings.cjs`、`node scripts/verify-personalization-settings.cjs`、`node scripts/verify-desktop-appearance.cjs`、`node scripts/verify-account-menu.cjs` 全部通过。
遗留:
1. 所有外跳类入口按用户要求不复制链接:`检查更新`(YCode 无更新通道)、`前往官网`、`填写反馈`、`查看文档`、`隐私政策`、`服务协议` 均禁用外观 + `aria-disabled` + title,点击无效果。
2. 三张二维码为「尚未配置」占位,不指向 WorkBuddy 或任何第三方账号;后续若为 YCode 配置官方渠道,再替换真实二维码资源。
3. 原版关于页点击检查更新会打开独立「软件更新」窗口(观察到 WorkBuddy 5.8.3 已是最新版);YCode 的更新链路未接入,未复刻该窗口。
4. 原版两页可见范围内没有版权/许可证文案,YCode 也未添加;如需展示以 YCode 实际发布信息为准另行补充。
## 后续模块