feat: redesign family companion customer portal

design-qa.md

@@ -1,46 +1,59 @@
-# 回忆时间轴设计 QA
+# 家庭陪伴门户 v0.74 设计 QA
 
-- source visual truth: `E:\Codex\story\platform\.design-evidence\selected-conversation-timeline.png`
-- implementation screenshot: `E:\Codex\story\platform\.design-evidence\implementation-conversation-timeline-final.png`
-- normalized comparison: `selected-conversation-timeline-normalized.png` and `implementation-conversation-timeline-normalized.png`
-- browser viewport: 1265 × 712 CSS px, device scale factor 1
-- source pixels: 1487 × 1058; implementation full-page pixels: 1265 × 2150
-- density normalization: source was resized and implementation was top-cropped to 1265 × 900 for an equal-size comparison
-- state: authenticated owner, conversations route, one completed conversation selected, no custom model active
+- 功能与页面规格：`docs/customer-portal-v074-page-spec.md`
+- 设计稿源：`.design-evidence/v074/design/*.png`
+- 实际页面截图：`.design-evidence/v074/implementation/*.png`
+- 同屏对比证据：`.design-evidence/v074/comparison/*.png`
+- 统一视口：1440 × 1024 CSS px，device scale factor 1
+- 验收状态：本地所有者账号、合成数据一号家庭、2026-08-30、每页默认业务状态
 
-## Full-view comparison evidence
+## 页面验收矩阵
 
-The equal-size comparison preserves the source's main information architecture: fixed family navigation, family tab, timeline title, left conversation stream, central AI memory note, and right model status. The implementation intentionally uses live test data and a compact filter header instead of the mock's date navigator and grouped demo dates. This does not remove any core task.
+| 页面 | 核心功能 | 设计/实现对比 | 结果 |
+| --- | --- | --- | --- |
+| 首页 | 长者周记、心情线索、关怀提醒、最近动态 | `comparison/home.png` | 通过 |
+| 聊天记录 | 时间轴、AI 摘要、关键词、故事候选、下次话题、模型来源 | `comparison/conversations.png` | 通过 |
+| 故事与记忆 | 待审故事、审核入口、已确认记忆和搜索 | `comparison/stories.png` | 通过 |
+| 长者资料 | 头像、长期资料、交流节奏、兴趣和授权入口 | `comparison/subjects.png` | 通过 |
+| 日程与提醒 | 今日陪伴动态、待处理事项、近期状态汇总 | `comparison/messages.png` | 通过 |
+| 家庭管理 | 家庭切换、成员、角色、邀请、家庭资料和动态 | `comparison/members.png` | 通过 |
+| 陪伴设备 | 绑定、在线状态、固件、诊断和配置 | `comparison/devices.png` | 通过 |
+| 内容分享 | 资源级分享、接收人、权限、期限和撤销 | `comparison/sharing.png` | 通过 |
+| 数据与授权 | 数据盘点、更正、撤回、私有导出和主体删除 | `comparison/privacy.png` | 通过 |
+| 服务用量 | 聊天时长、活跃日、热力图、设备与最近通话 | `comparison/billing.png` | 通过 |
+| 大模型管理 | 模型配置、连接测试、激活、移除和密钥说明 | `comparison/models.png` | 通过 |
+| 设置与权限 | 身份、家庭角色和 15 项完整权限矩阵 | `comparison/profile.png` | 通过 |
 
-## Required fidelity surfaces
+## 必检视觉项
 
-- Fonts and typography: Chinese system sans-serif fallbacks, headline/body weights, line heights, hierarchy, wrapping, and muted metadata are consistent and readable. No clipping or truncation affects core content.
-- Spacing and layout rhythm: the three-column frame, card padding, border radii, section gaps, selected state, and vertical rhythm follow the source. The narrower implementation viewport appropriately compresses the timeline and model columns.
-- Colors and tokens: warm neutral page background, white/cream cards, restrained green status color, peach story surface, borders, and shadows map to the selected direction with accessible contrast.
-- Image quality and assets: the selected live test record has no uploaded portrait, so the implementation uses the product's Ant Design icon system rather than inventing a decorative asset. No target logo or product image was replaced by CSS art or custom SVG.
-- Copy and content: all labels stand alone in the product context. The implementation adds clear privacy wording for story candidates and identifies the exact model/result version when available.
-- Interaction and accessibility: timeline items, full-chat action, story-review action, filters, family tabs, model management entry, and refresh controls are semantic buttons/controls. Disabled buttons use the required wait cursor. Form controls are labelled, and the selected/active/status states are not communicated by color alone.
+- 页面标题与家庭标签紧邻，标题底部到家庭上下文栏的间距为 0；内容区统一 16px 节奏。
+- 侧栏、页头、家庭 tab、卡片边框、圆角、按钮高度和表单控件使用同一套 v0.74 token。
+- 1440px 视口下 12 个页面均无页面级横向溢出，无裁切的主要按钮或正文。
+- 家庭管理重新出现在一级导航，使用可直接点击的家庭 tab，不再显示“客户组织”。
+- 日程与提醒不再使用大段空白消息头；隐私空状态压缩到 150px；故事页长者筛选保持单行。
+- 禁用按钮统一 `cursor: wait`；长者头像上传可显示本地预览。
 
-Focused region comparison was not required: at 1265 × 900 both the source and implementation expose readable labels, typography, icon alignment, card spacing, selected states, and status treatments without zoom ambiguity.
+## 功能检查
 
-## Comparison history
+- 12 个一级/二级导航均能进入对应页面。
+- 新增长者头像上传与预览通过。
+- 接受家庭邀请、邀请新成员、绑定设备、新建分享、资料更正、添加大模型、故事详情 7 个非破坏性弹窗打开/关闭通过。
+- 聊天记录选中一条记录后，AI 总结区能进入真实加载/结果状态。
+- 所有采样到的禁用按钮均显示等待光标。
+- 浏览器控制台错误、非预期 HTTP 4xx/5xx、失败请求均为 0。
 
-1. Earlier P2 — the implementation capture started below the family tab and page title because a legacy workspace rule hid the heading and the page retained scroll position. Fixed by adding section-specific workspace header overrides and recapturing a full-page state. Post-fix evidence shows the family tab, `回忆时间轴` title, status and refresh action above the three-column layout.
-2. Earlier P1 — continuous SSE backlog events triggered all workspace REST effects every two seconds, eventually showing a rate-limit alert and preventing a selected conversation from rendering. Fixed by debouncing authoritative event refreshes to a 15-second minimum and loading recent summaries sequentially. Post-fix browser evidence shows 19 records loaded, a selected completed conversation, generated summary content, and no rate-limit alert.
-3. Final comparison — no actionable P0, P1, or P2 mismatch remains. Live-data differences from the mock (no portrait, fewer generated-version comparisons, compact date filtering) are expected product-state differences and do not block the core journey.
+## 对比迭代
 
-## Findings
+1. 修复家庭管理入口缺失，统一页面名称与客户视角的信息架构。
+2. 移除工作区旧的大空白标题层，合并家庭 tab、实时状态、刷新和页面动作。
+3. 故事页长者筛选从第二行收回同一上下文栏，并为故事卡补充“开始审核”。
+4. 日程与提醒重构为今日动态、家人待办和近期汇总，不再堆叠无意义消息。
+5. 设置页补齐家庭上下文，并集中列出 15 项角色权限。
+6. 隐私页压缩空状态；用量页日期范围校准为 2025-09 至 2026-08。
+7. 设计稿与实际页以相同 1440 × 1024 视口逐页同屏复核。
 
-No actionable P0/P1/P2 findings.
+## 最终结论
 
-P3 follow-up polish: add a dedicated generation-version comparison drawer once multiple production model outputs are available for the same conversation.
-
-## Implementation checklist
-
-- [x] Three-column memory timeline implemented.
-- [x] Summary, keywords, story candidate and next-topic states implemented.
-- [x] Current model and generation provenance shown.
-- [x] Core interactions and empty/disabled states verified in the in-app browser.
-- [x] Rate-limit regression removed and browser console-visible page errors checked.
+没有遗留的 P0、P1 或 P2 视觉/交互问题。设计稿中的演示故事、已配置模型和已有分享，与本地数据库的空状态属于业务数据差异；页面结构、视觉系统和核心操作保持一致。
 
 final result: passed