Home Esplora Aiuto
Accedi
samien
/
yaoyao
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Albero (Tree): b6dd8a5f3a
Rami (Branch) Tag
yaoyao
/
design-qa.md

design-qa.md 11 KB
Cronologia Originale

Bot 设置与我的设置 · 第 3 组设计对照

Findings

  • 当前无未解决的 P0、P1 或 P2 问题。
  • P3：项目成员使用产品现有的真实头像组件，示例图中的纯色圆点与 +1 占位没有照搬。所有成员姓名可以查看。
  • P3：普通聊天保留管理与基础机器人功能；Bot 模式的基础机器人配置已按后续批注移入“编辑资料”。

Source visual truth

  • 用户选择：本次 ideation 第 3 张实际输出。
  • 文件：docs/design/settings-reference.png（1983 × 793）。
  • 原图：/Users/samien/.codex/generated_images/01a0a29b-2f08-7f51-8a4e-81b93631bf5b/exec-4ae99c1e-db43-4f23-9b67-7f9df8424943.png。
  • 图中每个弹窗约 900 × 648；两张图分别呈现 Bot 项目页和个人外观页。

Implementation evidence

  • Bot 桌面：docs/design/settings-bot-desktop.jpg，1280 × 720。
  • 我的设置桌面：docs/design/settings-personal-desktop.jpg，1280 × 720。
  • Bot 手机：docs/design/settings-bot-mobile.jpg，390 × 844。
  • 我的设置手机：docs/design/settings-personal-mobile.jpg，390 × 844。
  • 深色：docs/design/settings-personal-dark.jpg，1280 × 720。
  • 截图来自本次 CUA 浏览器捕获，原始捕获字节从当前任务记录保存，未重绘或改写图片。
  • 验证入口：http://127.0.0.1:5173/tests/fixtures/settings-design/，个人外观状态使用 ?view=appearance。
  • 这是测试夹具，使用正式 Vue 组件。API 在夹具内存中处理，不修改生产项目或账号。

Viewport / normalization / state

  • 桌面 CSS viewport：1280 × 720；截图同尺寸，按 1:1 CSS 像素检查。
  • 实现弹窗实测：900 × 650，位置 x=190、y=35；标题栏 60px、左栏 208px。
  • 源图是两个弹窗并排的设计画板。对比弹窗内容区域，排除画板边距、页面背景及 2px 高度差异；未将整张画板拉伸来比较。
  • 手机 CSS viewport：390 × 844，截图同尺寸；个人设置改为分类页与详情页，Bot 三个分类横向排列。
  • 主题：浅色、深色均验证。项目页为两个示例项目；源图示例数据没有写入生产。

Comparison history

  1. 初查发现 [P2] Bot 项目详情行高偏大，900 × 650 弹窗出现额外纵向滚动。
    • 调整详情行高 56px → 48px，标题下间距 16px → 12px，底部按钮间距 14px → 8px。
  2. 修正后在同一个 CUA 对照输入中同时展示源图、Bot 桌面截图和个人设置桌面截图。
    • Bot 内容区 clientHeight=588、scrollHeight=588，完整显示列表和详情。
    • 整体分栏、标题位置、灰色分组、选中行、紧凑操作按钮与主题预览卡符合所选方向。
    • 正文及控件在 900px 弹窗截图中可直接阅读，重点检查了项目成员行、编辑按钮、主题卡及左侧分类，无需另做放大图。

Required fidelity surfaces

  • 字体：使用现有 Inter / SF Pro / PingFang SC 字体栈；弹窗标题和内容标题 18px，导航与详情正文 14px，辅助文本 12–13px。
  • 间距与布局：两个弹窗统一 900 × 650、14px 圆角、208px 左栏；内容区 24px 内边距。项目列表与详情在桌面完整显示。
  • 颜色：增加设置专用的 panel/sidebar/selected 语义色，浅色使用中性灰；深色保持可读对比，选中主题同时有边框、标记与 aria-checked。
  • 图片：三张主题缩略图由 ImageGen 生成，480 × 300，使用真实 PNG 资产；图标与头像复用现有组件/图标库。
  • 文案：界面使用“Bot 设置”“我的设置”；项目名称、成员和群聊均绑定实际数据，账号、权限与管理入口的作用范围保留。

Interaction verification

  • 示例项目选择后，详情正确切换。
  • 编辑示例项目名称并保存，列表与详情同步更新。
  • 原有用户记忆与项目记忆入口保持可用；相关组件测试通过。
  • 深色/浅色切换更新选择状态与实际主题，夹具内不保存用户浏览器偏好。
  • 手机个人设置 Escape 返回分类，并将焦点还给当前分类。
  • 手机个人设置实测 clientWidth=scrollWidth=390，内容区域无水平溢出；Bot 手机截图无裁切或水平滚动。
  • 普通账号实际预览只显示个人分类；管理员页面和虚拟机设置权限由组件测试覆盖。
  • 设置内补充 Tab 首尾循环，隐藏头像文件输入不进入键盘顺序。
  • 本次浏览器预览控制台未发现应用错误；预览最初缺少 CSRF 夹具响应，已补齐后完成保存验证。

Implementation checklist

  • Bot 左侧分类与项目列表/详情。
  • 个人设置搜索、分类与主题预览。
  • 账号资料与安全内容分开，保留原有保存接口。
  • 现有权限、未保存提醒及更新锁保留。
  • 桌面、手机与深色视觉检查。
  • 34 项相关组件测试通过，类型检查通过。

final result: passed

2026-09-15 后续批注：Bot 编辑资料与权限审批

  • Bot 列表右键菜单使用带图标的“编辑资料”，打开独立双栏弹窗。资料始终绑定菜单选中的 Bot，保存不切换当前单聊。
  • Bot 模式“我的设置”移除基础机器人选择器、身份与头像、模型与 Provider；普通聊天保留原入口。
  • 编辑资料包含概览、身份与头像、角色与规则、模型与 Provider、记忆和权限。模型管理复用管理员界面，绑定 Bot 已保存的本地 Profile；更换来源需要先保存。远端模型仍由远端管理。
  • 权限审批按 Bot 保存：询问我（默认）、自动允许、自动拒绝。只答复新出现的工具审批请求；不自动回答澄清，不追溯处理已等待的请求，不建立永久或整个会话的自动授权。
  • 同一 Profile 的 Bot 策略互不影响，旧记录按询问处理，自动创建的成员不能自行获得自动允许。远端引用可以设置本地审批策略，远端资料继续只读。
  • 自动审批复用现有账号、任务、会话身份校验和重复答复保护；失败保留待处理请求，重复事件不触发自动重试。
  • 桌面审批页：docs/design/bot-approval-desktop.jpg，1280 × 720。手机概览：docs/design/bot-profile-mobile.jpg，390 × 844。截图是实际组件的 CUA 原始捕获。
  • 手机初查发现导航最小宽度撑开内容区，已改为可收缩网格；修正后内容区 clientWidth=scrollWidth=380，侧栏宽 390，无内容横向裁切。
  • 资料、模型、记忆的未保存更改均受到关闭与切换保护；手机导航支持横向滚动，内容和底部保存操作分别定位。
  • 测试覆盖目标 Bot 保存、普通聊天设置保留、模型 Profile 隔离、远端审批、旧记录默认值、并发独立策略、重复请求、澄清和自动审批失败。
  • 最终验证：11 个测试文件共 167 项通过；补充的基础机器人显示名回归测试通过。类型检查与桌面服务构建通过。

2026-09-15：聊天审批卡片 · 已选第 1 版

Findings

  • 无未解决的 P0/P1/P2 问题。审批按「允许」「拒绝」「自动允许」横排，明确区分单次答复与 Bot 长期设置。
  • P3：按钮最小高度采用 44px/pt；Android 使用 Material 触控尺寸。图标采用 Tabler / SF Symbols / Material 原生库，细节存在平台差异。

Source visual truth and evidence

  • 用户选中本轮第一张实际展示的生成图：docs/design/approval-card-reference.png，853 × 1844，原生成文件 exec-bf524680-3635-401c-8ab8-74eda9fd1ca4.png。
  • Web 初查：docs/design/approval-card-web-before.jpg；最终：docs/design/approval-card-web.jpg，390 × 844。
  • Web 深色长说明：docs/design/approval-card-web-dark.jpg，320 × 844。
  • iOS 初查：docs/design/approval-card-ios-before.jpg；最终：docs/design/approval-card-ios.jpg，440 × 942，来自 iPhone 17 模拟器窗口的 CUA 截图。
  • 预览：http://127.0.0.1:5173/tests/fixtures/approval-card/；iOS Debug 场景 workspace-approval 使用正式 SwiftUI 组件。预览操作不写入用户数据。

Viewport, normalization, and comparison

  • 对比范围是审批卡片。源图按 390/853 比例对应手机逻辑宽度；Web 为 390px、1x 捕获，卡片外宽 358px。iOS 预览内容最大宽 390pt，卡片宽 358pt；比较时排除模拟器工具栏、设备边框及系统状态栏，并以卡片宽度归一。
  • 白色空白处是隔离验收场景，不作为聊天页面改版内容；真实聊天继续使用已有消息、头像、媒体和输入框。
  • 最终一次比较在同一个工具结果内同时打开源图、Web 最终截图和 iOS 最终截图，直接检查卡片标题、说明、三按钮、两行辅助文字。这个区域内文字与边界清晰，不需要额外放大截图。
  • 320px 深色检查：文档 scrollWidth=320，三按钮各 82px，无文字溢出；长工具说明可滚动，三个操作始终可见。浏览器控制台没有错误。

Comparison history

  1. [P2] 初版 Web 纵向间距偏大，卡片约 204px 高。收紧标题、说明和辅助文字间距，最终约 189px；维持 44px 按钮和 14px 正文。
  2. [P2] 初版 iOS 标题图标偏小、拒绝按钮边界与辅助文字偏淡。改为 24pt 盾形图标，加深边框和文字；重新构建后捕获最终模拟器画面并与源图复核。

Required fidelity surfaces

  • 字体：使用原有 PingFang/SF/系统字体，标题 18、按钮与说明 14、辅助文字 13/12；按钮保持单行，长说明完整滚动显示（Web）。
  • 布局：18px 圆角、14px 内边距、三列等宽按钮、6px 间隔，允许为实色主按钮，拒绝为描边按钮，自动允许为浅灰按钮。
  • 颜色：Web 复用已选设置弹窗语义色，iOS 使用动态系统颜色，Android 使用 Material 前景/背景色；支持深色反转及清楚的禁用状态。
  • 图片：本次卡片没有新栅格资产；盾形及圆形勾选图标来自现有图标库。设计图保留为审核依据。
  • 文案：准确使用「允许」「拒绝」「自动允许」，说明「允许仅本次；自动允许后不再询问」「自动允许会同步此 Bot 的权限设置」。

Interaction and regression checks

  • 浏览器验证单次允许后仍会出现下一次审批；自动允许后，模拟下一次操作直接通过；处理中三按钮禁用。iOS 原生自动允许按钮显示相应完成反馈。
  • 服务端只依据审批记录里的 agentId 更新所属 Bot；发送给 Hermes 的本次答复仍为 once。紧接着出现的请求使用新策略，同 Profile 的其他 Bot 不受影响。
  • 自动允许意图和发送状态在同一事务中保存；上游答复未确认时保留该显式设置并清楚报错，不重复发送不确定请求。已完成请求的重放不会重新覆盖用户后来修改的设置。
  • 审批设置单独变更保留当前有效组队授权，不恢复失效授权。普通聊天审批组件与澄清输入流程保持原有范围。
  • Web 相关测试、类型检查通过；iOS 70 项 WorkspaceChat 测试通过。第一次无签名运行触发了登录测试的 Keychain entitlement 错误，使用项目正常签名后全部通过。
  • Android Compose 编译、模型/网络测试和 Debug APK 构建通过；新增请求测试确认自动允许仅提交审批 ID 和 answer。Android 尚未做设备截图，手机端尚未安装新版。

final result: passed