# 交互组件设计 QA

## 对照基准

- 视觉真源：`/Users/samien/.codex/generated_images/01a0bea3-706a-7812-b693-85595b23cbe3/exec-d9fe933f-bbe4-4105-9457-1eebb7c4c03d.png`
- 真源像素：1536 × 1024；画面同时给出桌面端与手机端目标状态。
- 实现地址：`http://127.0.0.1:15301/conversations/11111111-1111-4111-8111-111111111111?taskId=22222222-2222-4222-8222-222222222222`
- 实现截图：Codex 内置浏览器 tab 4 的本轮桌面与手机截图（浏览器后端未提供可持久化的本地截图路径）。
- 检查视口：桌面 1280 × 720；手机 CSS 视口 390 × 844。
- 像素密度：浏览器默认 DPR；比较以 CSS 像素布局、层级、颜色、文字密度和交互状态为准。

## 设计意图

- 任务结果通知从居中的系统文字改为可点击的短行动卡，保留任务上下文、复核状态和唯一主行动。
- 交付进展改为分段进度、四阶段状态和可折叠详情，首屏只保留决策所需信息。
- 询问问题在桌面端使用紧凑选择卡，在手机端使用底部操作面板；预设答案、自由输入与提交反馈保持一致。
- 采用克制的蓝色工作流强调色；常规文本和容器继续沿用现有中性色设计系统。

## 对照记录

### 第 1 轮

- P1：桌面端提问卡过高，滚动到底部时标题区域被顶部裁切。
- P2：进度与选择状态仍使用全局黑色强调色，与视觉真源的蓝色行动层级不一致。
- P2：390px 手机视口中第 4 个进度步骤被横向裁切。

修正：将自由输入和提交按钮在桌面端合并为一行；新增语义化工作流强调色；手机步骤宽度收紧为 78px，并保留超出 4 项时的横向滚动能力。

### 第 2 轮

- 桌面 1280 × 720：提问标题、两个选项、自由输入与提交按钮在同一可视区完整呈现。
- 手机 390 × 844：底部操作面板、52px 选项触控区、自由输入与全宽提交按钮完整呈现。
- 手机进度卡：4 个阶段标记均在首屏卡片内可见，长标题按现有密度截断。
- 选择状态：原生单选值、蓝色边框、勾选图标和提交按钮同步更新。
- 任务通知：语义结构、任务链接与复核辅助文字均由可访问性树验证。

## 最终检查

- 布局：通过；桌面与手机断点无横向溢出。
- 层级与间距：通过；行动卡、进度卡和问答卡均与现有聊天宽度对齐。
- 颜色与状态：通过；完成、进行中、待复核、禁用和选中状态可区分。
- 字体与可读性：通过；沿用现有字体与字号体系，长任务名和结果文本有受控换行或截断。
- 交互：通过；原生 radio、textarea、按钮与 details 均可键盘聚焦，主要触控目标不小于 44px。
- 基础状态：通过；未选择时提交按钮禁用，选择后启用；详情折叠态和结果态已验证。该组组件没有独立的加载或空数据界面。
- 结果：通过，无未解决的 P0/P1/P2 视觉问题。