story/docs/customer-portal-v074-page-spec.md

安心陪伴客户门户 v0.74 页面功能与设计基准

日期：2026-08-30
设计方向：沿用已确认的“回忆时间轴”方案，以长者、聊天、心情与家庭协作为核心；暖白纸张底色、雾蓝主操作、陶土色提醒、低阴影和清晰留白。

全局信息架构

客户门户只保留家庭用户真正需要的 12 个一级任务。当前家庭用页首标签直接切换；家庭成员、角色和邀请恢复为独立的“家庭管理”页面。客户门户不再出现“客户组织”概念。

全局页面结构固定为：

1. 68px 顶部栏：品牌、全局搜索、提醒、账号。
2. 228px 左侧导航：围绕长者陪伴任务排列。
3. 统一页面首部：标题、用途说明、家庭权限状态。
4. 统一家庭上下文栏：家庭 Tab、添加家庭、实时状态、刷新和页面主操作。
5. 页面内容：不再使用包住整页的大卡片；只在独立对象或需要分组时使用边框容器。

逐页功能总结

页面	用户要解决的问题	主要功能	首屏重点	关键状态
首页	最近有没有陪伴、长者心情如何、哪里需要家人关注	长者切换、7 天聊天时长、最近聊天摘要、心情线索、关注提醒、最近动态	每位长者最近一次聊天和心情变化	无聊天、设备离线、待关注
聊天记录	找到某次聊天并理解聊天内容	按长者/日期/状态筛选、AI 摘要、关键词、故事候选、下次话题、录音授权	时间轴和当前聊天 AI 总结	总结中、总结失败、无授权
故事与记忆	审核模型整理的故事，形成可信长期记忆	故事候选审核、修订、确认/拒绝、记忆检索和停用	待审核故事与来源聊天	空状态、审核中、已确认
长者资料	让豆包知道如何更适合地与这位长者聊天	头像、背景、兴趣、优先/回避话题、交流节奏、长期陪伴方向、授权	长者卡片和资料完整度	头像上传、只读、资料不完整
日程与提醒	知道什么时候聊、哪些事情需要家人处理	陪伴计划、提醒时间、设备/故事/隐私待办、事件状态	今日安排和待办	已完成、即将开始、已错过
家庭管理	管理家庭空间和可以协作的家人	家庭 Tab、成员、邀请、角色、所有权、家庭名称	家庭成员与角色	待接受邀请、只读、危险操作确认
陪伴设备	确认设备能否正常陪伴	绑定、在线状态、固件、电量/音量、诊断、解除绑定	设备健康和所属长者	离线、待同步、诊断中
内容分享	把指定故事/文字/录音安全分享给指定家人	资源选择、对象、权限、有效期、撤销	当前有效分享	无分享、即将过期、已撤销
数据与授权	查看和控制长者数据如何被使用	五类分项授权、数据访问/更正/撤回/删除、私有导出	授权清单，不以按钮堆叠呈现	生效、处理中、已撤回
服务用量	理解聊天使用情况，而不是看无意义设备统计	时长指标、活跃日、长者/设备筛选、热力图、最近通话	最近一年聊天活动	无数据、费用未核价
大模型管理	选择哪个模型用于聊天总结	新增配置、连通性测试、激活、停用、参数和生成历史	当前激活模型及健康状态	未配置、测试失败、已激活
设置与权限	理解当前账号能做什么	账号资料、家庭角色、15 项权限矩阵、敏感录音独立授权说明	当前身份和权限全表	无家庭、权限不足

统一视觉规格

• 桌面基准：1440 × 1024；内容最大宽度 1360px。
• 页面左右 padding：桌面 28px；平板 20px；手机 14px。
• 页面首部上下 padding：24px / 18px；与家庭上下文栏间距 16px。
• 家庭上下文栏高度不固定，最小 54px；禁止通过空白占位制造层级。
• 页面 section 间距 16px；对象卡片 padding 20–24px；列表行 14–16px。
• 字号：页面标题 28px；区块标题 20px；正文 14px；辅助信息 12px。
• 圆角：页面对象 14px、按钮/输入框 9px、状态胶囊 999px。
• 主色 #315D9B；强调 #C45F3B；成功 #5F8F69；底色 #FBFAF7；边线 #E6E0D8。
• 禁用按钮必须不可点击且鼠标为等待光标；加载按钮显示明确进行中动词。
• 所有日期基于 Asia/Shanghai，设计数据锚点为 2026-08-30。

设计验收规则

每个页面必须在 1440 × 1024 同一视口完成“设计基准截图 / 实际页面截图”对照。P0–P2 的布局、padding、信息层级、文字、色彩、状态与响应式差异必须修复；最终记录写入项目根目录 design-qa.md。