story/design-qa.md

故事与记忆设计 QA

• source visual truth: C:\Users\19926\AppData\Local\Temp\codex-clipboard-1f63ed7f-0c86-4167-9ac0-3b8755196941.png
• source implementation code: C:\Users\19926\.codex\attachments\8ae4c28d-4e71-4dfa-aaac-c01ce9b49597\pasted-text.txt（第 410 行起“故事与记忆-重置版”）
• earlier failing implementation: C:\Users\19926\AppData\Local\Temp\codex-clipboard-c4313a8a-bc8f-49d6-9a82-69137a0984d9.png
• implementation screenshot: E:\Codex\story\platform\design-qa-story-implementation.png
• combined comparison: E:\Codex\story\platform\design-qa-story-comparison.png
• browser route: http://127.0.0.1:5173/?section=stories
• browser CSS viewport: 1348 x 936 CSS px, device scale factor 1
• source pixels: 923 x 655
• implementation pixels: 1333 x 926
• normalization: source 保持 923 x 655；实现截图按宽度缩放至 923 px 并在 923 x 655 面板中居中；两个面板并排写入同一张比较图。由于参考图是设计导出图而不是可控浏览器视口，本次同时以内容区域宽度、相同登录态和相同空记忆状态校验，不对门户外壳的像素比例做伪精确判断。
• state: 已登录的家庭所有者；当前家庭“合成数据一号家庭”；当前长者“测试长者”；5 个真实候选故事；0 条已确认记忆；状态流已连接。

Findings

• 没有剩余 P0/P1/P2 视觉问题。
• 参考图只绘制了 4 张示例候选卡，但标题计数为 5；真实实现按现有接口返回 5 条数据，因此第 5 张卡正常换到下一行。该差异是数据驱动的预期行为，不能通过隐藏真实候选来追求静态截图一致。
• 门户保留现有“安心陪伴”顶栏、完整业务导航和登录账户入口；设计 QA 的精确匹配范围是本次修改的故事与记忆主体区。这样不会删除现有路由或改变业务边界。

Required Fidelity Surfaces

• Fonts and typography: 标题、区块标题、候选正文、状态与版本号的层级、字重、换行和行高与参考一致；中文继续使用项目既有 PingFang SC / Microsoft YaHei 回退，不额外引入网络字体。
• Spacing and layout rhythm: 长者筛选与家庭状态合并为一条全宽工具栏；候选区为桌面四列；记忆标题、搜索框和虚线空状态按垂直顺序整行排列；旧的 17rem 左栏已移除。
• Colors and visual tokens: 候选卡恢复暖白底、浅灰边框、琥珀审核状态和轻阴影；不再被全局主按钮规则染成整块砖红色。连接状态仍使用真实语义绿色，而不是照抄参考图的静态红点。
• Image quality and asset fidelity: 主体区没有照片或插画资产；审核、标签、搜索、刷新和空状态使用项目已有 Ant Design 图标库，没有占位符、手绘 SVG 或文本图标替代。
• Copy and content: 标题、说明、筛选标签、故事候选、已确认记忆、搜索占位和空状态文案与设计源一致；候选标题和数量来自真实接口数据。

Comparison History

1. Earlier comparison — blocked
   • P1: 旧 .story-layout 的 17rem 1fr 网格仍生效，长者筛选、候选区和记忆区被拆成错误的左右栏。
   • P1: 全局客户按钮样式覆盖候选卡，所有故事卡显示为整块砖红色。
   • P2: Layout.Content 作为 main 继承了全局 80px 上下内边距，所有客户页面顶部出现大块空白。
2. Fixes applied
   • 将长者筛选放入同一条工作台工具栏；故事主体显式重置为单列文档流。
   • 候选卡从全局主按钮规则中排除并固定为桌面四列白卡。
   • 客户内容容器显式清除全局 main 的宽度、外边距和 80px 内边距，所有客户页主体上移。
   • 补齐沙漏、标签和刷新图标，正文恢复常规字重；保留既有审核详情弹窗和数据接口。
3. Post-fix evidence — passed
   • 并排比较图中，页面标题、工具栏、四列首行候选、记忆搜索和空状态的结构与视觉层级一致。
   • 浏览器实测首张候选可打开“故事详情”弹窗，来源操作存在，关闭按钮可恢复列表状态。
   • 浏览器开发日志仅包含 Vite 连接、热更新和 React DevTools 提示，没有 error 级别日志。

Primary Interactions Tested

• 打开故事候选详情：通过。
• 关闭故事详情弹窗：通过。
• 详情中的“查看完整原始通话”入口存在：通过。
• 长者下拉、当前家庭下拉和刷新按钮均可见且保持原有事件处理：通过。

Open Questions

• 无。

Implementation Checklist

• 工具栏合并并横向占满。
• 候选卡恢复四列白卡样式。
• 已确认记忆移到候选区下方并整行占满。
• 修复所有客户页面顶部公共空白。
• 保留真实第 5 条故事和现有审核/记忆接口。
• 类型检查、生产构建、浏览器交互和控制台日志检查通过。

Follow-up Polish

• 无阻塞项。

final result: passed