家庭成员详情页 — 维度专属内容区设计
概述
当前 pages/member-detail/member-detail.vue 从身/心/智/行四个维度页面的 FamilyRelationGraph 点击成员进入,但展示内容不区分入口维度。本设计让该页面根据 dimensionCode 参数展示与维度相关的专属内容,实现"从哪个页面进,显示该页面相关的内容"。
现状
member-detail.vue 已接收 dimensionCode 参数(body/mind/wisdom/action)
- 页面现有结构:导航栏 + 成员信息卡 + 五维能量条 + 关系图谱 + 通用任务/活动/商品
- 通用内容(活动/商品推荐)不区分维度,始终展示 body 域内容
设计
页面结构(所有维度共用)
┌─ 顶部导航栏(返回按钮 + "成员名 · 维度名")
├─ 成员信息卡(头像 + 昵称/角色 + 综合能量分)
├─ 五维能量条 (FamilyEnergyBar)
├─ 家庭成员关系图谱 (FamilyRelationGraph)
├─ ══ 维度专属内容区(根据 dimensionCode 切换)══
│ └─ (详见各维度内容定义)
└─ 底部占位
架构
member-detail.vue 作为容器页面,负责所有共用部分的渲染
- 在关系图谱下方使用
<component :is="dimensionSection" /> 动态组件
- 4 个独立子组件放在
components/member-detail-sections/ 目录下
各维度专属内容
身 (body-section)
| 内容块 |
数据来源 |
说明 |
| 最新健康报告卡片 |
getHealthAnalysis(childId) |
总分 + 关键指标 + 报告日期,无报告时显示"暂无健康报告" |
| 七维健康雷达图 |
getDimensionOverview({ childId }) |
与 body/index.vue 相同的 RadarChart 组件 |
| 健康指标列表 |
getHealthIndicatorList(childId) |
关键指标展示 |
| 最近打卡记录 |
getCheckinList({ childId, page:1, size:3 }) |
最近3条健康打卡 |
心 (mind-section)
| 内容块 |
数据来源 |
说明 |
| 亲密关系评分 |
intimacyMap + energyMap |
用进度条或评分卡展示该成员与各家庭成员的关系质量 |
| 联系人列表 |
getContactList({ memberId }) |
该成员的联系人列表 |
| 健康告警 |
getHealthAlerts(familyId) |
家庭健康提醒 |
| 里程碑 |
getMilestones(familyId) |
近期待办里程碑 |
智 (wisdom-section)
| 内容块 |
数据来源 |
说明 |
| 最新测评结果 |
getAssessmentLatestResult(childId) |
总分 + 各维度分数,与 wisdom/index.vue 风格一致 |
| 认知能力维度图 |
从测评结果提取 |
用雷达图或柱状图展示各认知维度得分 |
| 近期测评历史 |
getAssessmentHistory(childId, 3) |
最近3次测评简表 |
| 认知趋势 |
getCognitiveTrend(childId, 5) |
趋势图(如有需要) |
行 (action-section)
| 内容块 |
数据来源 |
说明 |
| 今日任务 |
getTodayTasksByCategory(childId, 'all') |
已存在的 DimensionTasks 组件,仅孩子类型显示 |
| 打卡统计 |
getCheckinStats({ childId }) |
行为打卡汇总统计 |
| 最近活动 |
getActivityList({ page:1, size:3 }) |
推荐活动 |
数据加载策略
member-detail.vue 的 onLoad 仍加载共用数据(沙盘、成员信息)
- 维度专属数据在
dimensionSection 子组件的 onShow/mounted 中各自加载
- 子组件通过 props 接收:
memberId, childId, memberType, sandboxData, energyMap
familyId 从 uni.getStorageSync('familyId') 获取(项目内统一模式)
- childId 可用性:
childId 仅在 memberType === 'child' 时有值。身/智维度依赖健康数据和测评数据,这些数据仅对孩子成员有意义——非孩子成员时显示"该成员暂无维度数据"的提示。心/行维度的部分内容(联系人、告警、里程碑)对全年龄段成员可用。
错误处理
- 各子组件独立处理自己的加载失败,不阻塞共用部分的渲染
- 加载中显示骨架屏或 loading 文本
- 无数据时显示空状态提示
文件清单(新增)
cfc-frontend/components/member-detail-sections/
├── body-section.vue # 身维度专属内容
├── mind-section.vue # 心维度专属内容
├── wisdom-section.vue # 智维度专属内容
└── action-section.vue # 行维度专属内容
修改文件
cfc-frontend/pages/member-detail/member-detail.vue # 引入动态组件区
排除范围
- 不修改各维度页面(parent-index、body、mind、wisdom、action)的
goMemberDetail——它们已经传了 dimensionCode
- 不修改 FamilyRelationGraph 组件
- 不改动共用部分(导航、成员卡、能量条、关系图谱)的现有逻辑
成功标准
- 从身页面点击成员 → 进入后看到健康相关数据(报告/雷达图/指标)
- 从心页面点击成员 → 进入后看到关系/联系人/告警数据
- 从智页面点击成员 → 进入后看到测评/认知数据
- 从行页面点击成员 → 进入后看到任务/打卡/活动数据
- 共用部分在所有维度下表现一致
- 各专属内容区独立加载,单个模块失败不影响其他区域