2026-07-14-member-detail-dimension-sections.md 5.1 KB

家庭成员详情页 — 维度专属内容区设计

概述

当前 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.vueonLoad 仍加载共用数据(沙盘、成员信息)
  • 维度专属数据在 dimensionSection 子组件的 onShow/mounted 中各自加载
  • 子组件通过 props 接收:memberId, childId, memberType, sandboxData, energyMap
  • familyIduni.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 组件
  • 不改动共用部分(导航、成员卡、能量条、关系图谱)的现有逻辑

成功标准

  1. 页面点击成员 → 进入后看到健康相关数据(报告/雷达图/指标)
  2. 页面点击成员 → 进入后看到关系/联系人/告警数据
  3. 页面点击成员 → 进入后看到测评/认知数据
  4. 页面点击成员 → 进入后看到任务/打卡/活动数据
  5. 共用部分在所有维度下表现一致
  6. 各专属内容区独立加载,单个模块失败不影响其他区域