yaoyao/design-qa.md

设置中心 Design QA

Findings

• 当前没有可执行的 P0、P1 或 P2 差异。
• P3：补充稿的“模型与 Provider”页包含统一保存栏，而实际 Provider 的新增、编辑、测试、设为默认和删除均是独立即时操作。实现有意不显示一个无真实提交语义的全局“保存更改”，避免误导。
• P3：账号安全补充稿本身为 1505 × 1045，与主设计的桌面比例不一致。实现遵循主设计的固定壳体，并让账号内容仅在右侧区域滚动；固定保存栏始终可见。

Source visual truth

• 主视觉：/Users/samien/.codex/generated_images/01a04b82-a660-7c43-a4d1-5c0a84482b5c/exec-9f6f7523-6cfa-418f-9103-d748e5958d68.png
• 模型目录：/Users/samien/.codex/generated_images/01a04b82-a660-7c43-a4d1-5c0a84482b5c/exec-b44ab548-2154-4432-944f-70b012ca9567.png
• 账号安全：/Users/samien/.codex/generated_images/01a04b82-a660-7c43-a4d1-5c0a84482b5c/exec-73b26de9-b178-48dd-a616-3933f87990f3.png
• 系统概览：/Users/samien/.codex/generated_images/01a04b82-a660-7c43-a4d1-5c0a84482b5c/exec-d8382bf2-4998-4ff8-bfd3-35d297071297.png

源图像素尺寸依次为 1717 × 916、1683 × 934、1505 × 1045、1717 × 916。主视觉、模型和系统概览按相同比例归一到 1637 × 874；账号安全只作为内容层级参考，未拉伸为桌面比例。

Implementation evidence

• 身份与头像：/Users/samien/.codex/visualizations/2026/08/29/01a04b82-a660-7c43-a4d1-5c0a84482b5c/settings-center-implementation/08-identity-desktop-fixed-footer.png
• 模型与 Provider：/Users/samien/.codex/visualizations/2026/08/29/01a04b82-a660-7c43-a4d1-5c0a84482b5c/settings-center-implementation/11-models-desktop-final.png
• 登录与安全：/Users/samien/.codex/visualizations/2026/08/29/01a04b82-a660-7c43-a4d1-5c0a84482b5c/settings-center-implementation/09-security-desktop-fixed-footer.png
• 系统概览：/Users/samien/.codex/visualizations/2026/08/29/01a04b82-a660-7c43-a4d1-5c0a84482b5c/settings-center-implementation/10-overview-desktop-final.png
• 移动端分类：/Users/samien/.codex/visualizations/2026/08/29/01a04b82-a660-7c43-a4d1-5c0a84482b5c/settings-center-implementation/12-mobile-menu-final.png
• 移动端账号页：/Users/samien/.codex/visualizations/2026/08/29/01a04b82-a660-7c43-a4d1-5c0a84482b5c/settings-center-implementation/07-mobile-security-fixed-footer.png

桌面实现截图与 CSS 视口均为 1637 × 874，devicePixelRatio = 1。移动端实现截图与 CSS 视口均为 390 × 844，devicePixelRatio = 1。

Comparison evidence

• 身份全景并排：/Users/samien/.codex/visualizations/2026/08/29/01a04b82-a660-7c43-a4d1-5c0a84482b5c/settings-center-implementation/compare-identity.png
• 模型密集内容并排：/Users/samien/.codex/visualizations/2026/08/29/01a04b82-a660-7c43-a4d1-5c0a84482b5c/settings-center-implementation/compare-models.png
• 账号表单并排：/Users/samien/.codex/visualizations/2026/08/29/01a04b82-a660-7c43-a4d1-5c0a84482b5c/settings-center-implementation/compare-security.png
• 系统概览并排：/Users/samien/.codex/visualizations/2026/08/29/01a04b82-a660-7c43-a4d1-5c0a84482b5c/settings-center-implementation/compare-overview.png

全景比较用于壳体、分栏、层级和整体密度；模型目录与账号表单比较作为聚焦区域，用于检查 ID、标签、字段、按钮、滚动和固定操作栏。

Required fidelity surfaces

• 字体与排版：沿用现有 --font-ui 系统字体；页面标题 23px，导航 14px，正文与表单主要为 13–16px。标题、分组、标签和帮助文本层级与设计一致，没有截断关键 Provider ID。
• 间距与布局：桌面壳体实测 1080 × 780，标题栏 64px、左栏 292px、编辑页底栏 76px。系统概览右侧 clientHeight = scrollHeight = 604px；设置左栏 clientHeight = scrollHeight = 714px，全部导航在首屏完整可见。长表单仅滚动右内容区。
• 颜色与视觉 token：复用现有白色/暖灰表面、--line、--surface-soft、--accent、--success 和 --danger。选中态用浅灰，键盘焦点用紫色描边；成功与危险状态同时有文字，不只依赖颜色。
• 图像与资产：继续使用真实 AgentAvatar 数据和现有品牌/AppIcon 体系；设计没有要求新增位图资产，未使用占位图、CSS 绘图或临时 SVG 替代。
• 文案与内容：保留完整 Provider/model 目录与完整 custom:tingly ID；双流语音明确标记“全局”；账号、Agent 和系统作用域均在页面标题下持续显示。
• 响应式与可访问性：390 × 844 下设置中心为全屏导航栈，页面无横向溢出（scrollWidth = innerWidth = 390），分类页 clientHeight = scrollHeight = 788px，固定底栏为 390 × 68。当前分类使用 aria-current="page"；控制行、返回/关闭和底栏按钮命中区域达到约 40–44px，表单使用永久标签并保留明显焦点态。关闭后焦点实测返回 aria-label="打开设置中心" 的原按钮。

Primary interactions tested

• Agent 切换弹层只显示 Agent 列表，独立设置按钮打开统一中心。
• 桌面设置导航可进入身份、模型、账号安全、系统概览、用户、Hermes 连接、双流语音和更新页面。
• 管理员系统组与非管理员隐藏逻辑由组件测试覆盖。
• 未保存内容切页确认、系统升级锁定切页/关闭由组件测试覆盖。
• 账号登录与节点配对按作用域拆分，定时器与扫码资源清理由组件测试覆盖。
• 移动抽屉打开后背景 header/main 均不可聚焦，焦点进入“关闭导航”；进入设置详情后焦点移到页面标题，返回后移到当前分类，关闭中心后回到“打开导航”。
• 两处 Agent 选择器均使用 listbox / option 状态，并支持方向键、Home、End 与 Escape；用户行操作的 accessible name 包含目标用户名。
• 9119 用户名、密码及双流语音 API Key 在浏览器中保持空白；Provider 完整目录与只读/可编辑状态来自真实本地服务。
• 浏览器控制台最终无 warning/error。

Comparison history

1. 初次比较发现 P2：身份和账号安全的保存操作位于滚动内容中，未匹配固定底栏。
2. 修复：为两页增加外部表单 ID 和统一固定 取消 / 保存更改 底栏；桌面底栏实测 786 × 76，移动端底栏实测 390 × 68。
3. 复核：08-identity-desktop-fixed-footer.png、09-security-desktop-fixed-footer.png 与 07-mobile-security-fixed-footer.png 证明操作栏固定，右内容区仍可独立滚动，无横向溢出。
4. 独立代码审查发现更新任务恢复/启动锁、Agent 草稿刷新、扫码资源竞态、APNs/FCM 草稿互相覆盖等 P1/P2 风险；实现加入生命周期 token、真实 dirty baseline、分离配置快照、并发锁与业务 401 隔离。
5. 第二次复核确认 Agent 弹层仅剩 Agent 列表，桌面与移动设置导航首屏完整可见，关闭焦点正确恢复；新增组件测试覆盖 Provider/语音丢稿、更新恢复、摄像头停止、账号 401 和推送并发草稿。
6. 无障碍浏览器复核补齐移动详情/返回焦点、抽屉背景隔离、Agent 复合控件键盘操作及用户行按钮上下文；390 × 844 与 1637 × 874 实测焦点位置正确，控制台仍无 warning/error。

Verification

• npm run typecheck：通过。
• npm test：61 个测试文件、317 项测试全部通过。
• npm run build：品牌校验、发布版本校验、客户端与服务端生产构建全部通过。
• git diff --check：通过。
• 两轮独立最终审查：无剩余 P0、P1 或 P2。

Final result

final result: passed