This commit is contained in:
Codex Local
+43
-52
@@ -1,69 +1,60 @@
|
||||
# 故事与记忆设计 QA
|
||||
# Design 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 条已确认记忆；状态流已连接。
|
||||
- source visual truth path: `E:\Codex\story\platform\.design-evidence\selected-conversation-journal.png`
|
||||
- implementation screenshot path: `E:\Codex\story\platform\.design-evidence\implementation-home-final.png`
|
||||
- comparison image path: `E:\Codex\story\platform\.design-evidence\design-comparison-final.png`
|
||||
- responsive evidence: `E:\Codex\story\platform\.design-evidence\implementation-home-mobile.png`
|
||||
- viewport: desktop 1280 × 720 CSS px; mobile 390 × 844 CSS px
|
||||
- source pixels: 1488 × 1058
|
||||
- implementation pixels: 1265 × 720 for the desktop browser content capture; device scale factor 1
|
||||
- normalization: source was downsampled to 1265 px wide and cropped to the top 720 px; implementation remained at its native capture size. The two normalized images were placed in one 2530 × 720 comparison image.
|
||||
- state: authenticated family owner, one real seeded elder selected, completed-conversation data loaded, no dialog open
|
||||
|
||||
**Findings**
|
||||
## Full-view comparison evidence
|
||||
|
||||
- 没有剩余 P0/P1/P2 视觉问题。
|
||||
- 参考图只绘制了 4 张示例候选卡，但标题计数为 5；真实实现按现有接口返回 5 条数据，因此第 5 张卡正常换到下一行。该差异是数据驱动的预期行为，不能通过隐藏真实候选来追求静态截图一致。
|
||||
- 门户保留现有“安心陪伴”顶栏、完整业务导航和登录账户入口；设计 QA 的精确匹配范围是本次修改的故事与记忆主体区。这样不会删除现有路由或改变业务边界。
|
||||
The final comparison shows the same information architecture and visual hierarchy as the selected direction: warm paper background, white header and navigation, family tabs, portrait-based elder selection, a seven-day conversation/mood journal, latest-chat summary, family-attention card, and recent activity. The implementation uses real seeded data, so the number of elders, dates, durations, summary availability, and account text intentionally differ from the concept image.
|
||||
|
||||
**Required Fidelity Surfaces**
|
||||
## Focused region evidence
|
||||
|
||||
- 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: 标题、说明、筛选标签、故事候选、已确认记忆、搜索占位和空状态文案与设计源一致；候选标题和数量来自真实接口数据。
|
||||
- Home journal: weekly duration columns, highlighted current day, mood markers, topic chips, summary card, and the non-diagnostic mood disclaimer were inspected in the desktop comparison.
|
||||
- Avatar flow: `.design-evidence/avatar-upload-preview.png` records the file-picker result and generated WebP preview; the browser assertion confirmed a `data:image/webp` preview with no error.
|
||||
- Permission matrix: `.design-evidence/permission-matrix.png` records all 14 capabilities across four family roles, including the two separately granted recording permissions.
|
||||
- Mobile: `.design-evidence/implementation-home-mobile.png` records the 390 px layout; browser measurement confirmed no document-level horizontal overflow.
|
||||
|
||||
**Comparison History**
|
||||
## Required fidelity surfaces
|
||||
|
||||
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 级别日志。
|
||||
- Fonts and typography: Chinese system sans-serif hierarchy matches the source's clear editorial treatment; headings, small metadata, labels, and long summary text remain readable and do not truncate important content.
|
||||
- Spacing and layout rhythm: sidebar/content proportions, family tabs, elder strip, two-column journal, lower cards, borders, and radii align with the source after two spacing corrections. Mobile cards stack without page overflow.
|
||||
- Colors and tokens: ivory paper, warm white cards, dusty blue interaction color, coral attention cue, muted green positive cue, and warm hairlines match the selected palette. No decorative gradient is used.
|
||||
- Image quality and asset fidelity: real supplied portrait assets are used with circular crops; uploaded avatars are center-cropped and resized to a 320 × 320 WebP. Ant Design icons supply all UI symbols.
|
||||
- Copy and content: customer-organization and platform-role jargon were removed from customer pages. “本次交流目标” became “长期陪伴方向”; pace help text states that the setting is sent to Doubao at the start of every new chat. Mood copy explicitly describes an inference from authorized summaries and not a health diagnosis.
|
||||
|
||||
**Primary Interactions Tested**
|
||||
## Comparison history
|
||||
|
||||
- 打开故事候选详情：通过。
|
||||
- 关闭故事详情弹窗：通过。
|
||||
- 详情中的“查看完整原始通话”入口存在：通过。
|
||||
- 长者下拉、当前家庭下拉和刷新按钮均可见且保持原有事件处理：通过。
|
||||
### Iteration 1 — blocked
|
||||
|
||||
**Open Questions**
|
||||
- P1: the authenticated home still had excessive top padding and a nested workspace card, pushing the journal well below the selected composition.
|
||||
- P2: the 390 px layout expanded to 570 px because the seven-day grid contributed a fixed min-content width.
|
||||
- Fixes: removed customer-page/workspace padding with specificity above the legacy theme, tightened the family/elder strip, contained journal cards and the weekly grid, and corrected the mobile recent-activity grid.
|
||||
- Post-fix evidence: `.design-evidence/implementation-home-v2.png` and `.design-evidence/implementation-home-mobile.png`.
|
||||
|
||||
- 无。
|
||||
### Iteration 2 — passed
|
||||
|
||||
**Implementation Checklist**
|
||||
- Earlier findings are resolved: family tabs now begin directly below the header, the journal occupies the intended above-the-fold area, and mobile has no document-level horizontal overflow.
|
||||
- Real-data differences (one elder rather than four, seeded durations, pending summary) are expected product constraints and do not change the design grammar.
|
||||
- No actionable P0, P1, or P2 visual issue remains.
|
||||
|
||||
- [x] 工具栏合并并横向占满。
|
||||
- [x] 候选卡恢复四列白卡样式。
|
||||
- [x] 已确认记忆移到候选区下方并整行占满。
|
||||
- [x] 修复所有客户页面顶部公共空白。
|
||||
- [x] 保留真实第 5 条故事和现有审核/记忆接口。
|
||||
- [x] 类型检查、生产构建、浏览器交互和控制台日志检查通过。
|
||||
## Browser and interaction verification
|
||||
|
||||
**Follow-up Polish**
|
||||
- Tested every customer section at 1280 px: home, conversations, stories, subjects, messages, members, devices, sharing, privacy, billing, and profile.
|
||||
- Confirmed every section has no horizontal overflow and no visible “客户组织” copy.
|
||||
- Confirmed all disabled buttons report `cursor: wait`.
|
||||
- Opened the new-elder dialog, uploaded a real PNG through the browser file chooser, and confirmed the WebP preview.
|
||||
- Confirmed the profile renders 14 permission rows.
|
||||
- Confirmed the final home state has no visible request error and browser logs contain no error-level entry (only Vite reconnect/debug messages from the intentional test-server restart).
|
||||
|
||||
- 无阻塞项。
|
||||
## Follow-up polish
|
||||
|
||||
- P3: when a family contains only one elder, the portrait row naturally has more empty horizontal space than the four-person concept. This is an accurate data state and can later be enriched with a compact “添加长者” affordance if desired.
|
||||
|
||||
final result: passed
|
||||
|
||||
Reference in New Issue
Block a user