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

---

自有动态 Agent 角色 Design QA（2026-09-02）

Evidence

• Source visual language: /Users/samien/git/OpenMausBot/docs/screenshots/agent-profile-desktop.png.
• Implementation screenshot: /Users/samien/.codex/visualizations/2026/09/02/01a05f7c-9ccc-76f2-99f3-116cd8ca64cb/agent-identity/web-desktop.jpg.
• Browser viewport: 1440 × 1024; fixture: /?fixture=agent-identity.

Review

• OpenMausBot 的渐变、白色眼睛、极简嘴型与状态动效语言得到保留；原细长指针轮廓未复制。
• 圆形、圆角方形和短三角使用统一视觉面积；短三角接近 1:1 包围盒，尖端未超出同组卡片的光学边界。
• working 的实时 transform 在采样间变化；notifying 首屏截图可见提醒光环；页面控制台无 warning/error。
• 角色名称、三种形状、工作、新消息和等待操作均有可访问名称；减少动态效果由 CSS media query 覆盖。
• 无剩余 P0、P1 或 P2 视觉问题。

final result: passed

群聊组合头像补充验收

• 浏览器证据：/Users/samien/.codex/visualizations/2026/09/02/01a05f7c-9ccc-76f2-99f3-116cd8ca64cb/group-mascot/web.jpg。
• 群聊默认头像由前三位成员角色组成；不足三位时使用圆、方、短三角补足，旧动物值按新组合头像显示。
• 上传图片仍优先；创建与管理界面改为“成员组合 / 上传图片”，不再出现动物选择器。
• 1440 × 1024 浏览器检查确认三个成员均可辨识，短三角未被完全遮挡，控制台无 warning/error。

final result: passed

Bot 通信提示验收 · 2026-09-14

范围与视觉依据

• 本次只调整 Bot 模式的通信展示，并移除 iOS 输入区左下角的“记忆与协作”；现有标题栏、普通消息、输入框和其他入口保持原样。
• 用户确认的视觉：docs/verification/2026-09-14-bot-communication/reference.png，即第二稿去除横线、进一步缩小提示文字与头像后的版本。
• 原图为 853 × 1844，逻辑参考约 390 × 844；iPhone 17 Pro 实测截图为 1206 × 2622，对应 402 × 874 @3x。比较提示组件时按逻辑尺寸归一，系统状态栏与既有标题栏不作为本次重绘目标。
• iOS 浅色实现：docs/verification/2026-09-14-bot-communication/ios-light.png。
• iOS 深色实现：docs/verification/2026-09-14-bot-communication/ios-dark.png。
• 完整参考和两张原生截图已在同一比较输入中查看；重点核对两处提示行和输入区。没有把不同密度或既有标题栏差异误判为本次改动。

五项视觉核对

• 字体：提示为系统 caption（基准 12pt），小于消息正文；方向文字与名字同级，不额外加粗。Web 实测 12px，Android 12sp。
• 间距：文字和头像间距 6，头像基准 16；整行居中，提示在通信正文上方。Web 390px 视口中两行中心均为 x=195；伪元素 before/after 均为 none。
• 颜色：沿用各端语义次级文字色和主题气泡色；浅色、深色均能区分提示与正文，没有新增横线或卡片边框。
• 资产：使用对方实际 Bot 头像，复用既有头像组件；不使用字母占位或额外装饰图标。截图中的研究员使用同一深色角色头像。
• 文案：独立显示“发送给 / 消息来自 + 头像 + 名字”，正文显示实际通信内容。原始记录及旧客户端的兼容正文保留，新客户端通过 communication 展示信息渲染；普通消息不解析文案猜测方向。

比较与修正记录

1. Web 首次查看发现普通系统消息的样式仍给通信正文添加边框并居中（P2）。已增加仅针对通信消息的样式覆盖。
2. 修正后在 Codex 内置浏览器的 390 × 844 视口重新查看：正文边框 0px、左对齐；只有提示行居中，头像 16px，控制台 error 为 0。
3. iOS 使用原生界面测试分别启动浅色和深色，等待提示及原始用户问题可见后截图；两处提示均有独立可访问性标签，提示行高度不超过 24pt，输入区不存在“记忆与协作”按钮。
4. iOS 深色自动截图出现普通用户气泡文字未绘制的现象，辅助功能就绪检查仍可通过；浅色截图完整。普通用户文本与颜色的渲染分支未改动，原因尚未确认。深色截图保留该现象，未标记为已修复，也不作为全页面视觉通过的证据。

结果

• 本次作用范围内没有剩余 P0、P1、P2 视觉差异。
• 原生 iOS 的大标题、时间分隔与气泡宽度是产品原有布局，依本次修改范围保留。
• Web 手动检查覆盖登录、历史消息、提示方向、实际正文、字号、头像尺寸、居中位置与控制台。
• 自动回归覆盖实时事件与历史投影、原始数据不被重写、普通消息不误识别、三端类型兼容，以及 iOS 入口移除。

final result: passed