cfc/docs/superpowers/plans/2026-07-12-dimension-pages-gap-fix.md

五维页面缺失功能补全实施计划

状态: 待实施 日期: 2026-07-12 分支: cfclub 优先级顺序: Phase 1 小缺口 → Phase 2 珍珠图/圈子 → Phase 3 富重建

---

Phase 1：小缺口修补（身·智·心）

P1-1 身页：健康打卡入口

文件:

• cfc-frontend/pages/body/index.vue
• cfc-frontend/components/HealthCheckinCard.vue（新建）

需求: 在身页 DimensionTasks 上方加一个"健康打卡"卡片，调用已有 health_checkin API（awardEnergy→身）。

改动: | 文件 | 改动 | |:-----|:------| | 新建 components/HealthCheckinCard.vue | 打卡卡片组件：今日状态展示 + 打卡按钮 + 连续天数 | | pages/body/index.vue | 在 FamilyEnergyBar 下方、HealthDimensionsSection 上方插入 <HealthCheckinCard> |

API 依赖:

• POST /api/health/checkin — 已有，返回今日是否已打卡
• POST /api/energy/overview — 已有，获取身维度能量

验收:

• 未登录不显示
• 已打卡显示"今日已打卡 ✓" + 连续天数
• 未打卡显示打卡按钮，点击后调用 API

---

P1-2 智页：阅读时长展示

文件:

• cfc-frontend/pages/wisdom/index.vue

需求: 在认知雷达图下方增加"本月阅读"概览卡片，展示近30天总阅读时长。

改动: | 文件 | 改动 | |:-----|:------| | pages/wisdom/index.vue | 在认知雷达下方增加阅读统计卡片区块 |

API 依赖:

• POST /api/article/reading-stats — 需要确认是否存在，若不存在需后端新增
• 或复用已有 DanAssessmentResult 的阅读时长字段

验收:

• 显示"本月阅读 X 小时"，换算关系 3600秒=1小时
• 无阅读数据显示"暂无阅读记录"
• 点击跳转阅读详情页

---

P1-3 心页：天盘相性入门版

文件:

• cfc-frontend/pages/mind/index.vue
• cfc-backend/.../controller/TianpanController.java（确认已有）

需求: 在心页 EMI 雷达下方增加"家庭天盘"概览卡片，展示天盘相性分析结果。

改动: | 文件 | 改动 | |:-----|:------| | pages/mind/index.vue | 在 EMI 雷达和 DimensionArticles 之间插入天盘相性卡片 | | 后端 TianpanService | 确认已提供相性分析 API |

API 依赖:

• POST /api/tianpan/compatibility — 确认已有

验收:

• 展示家庭各成员之间的相性评分（简化版）
• 相性低时显示预警提示
• 点击跳转天盘详情页

---

Phase 2：珍珠图/圈子系统（行）

范围

全新功能，影响行页面和富页面（圈子入口）。

数据模型

-- 圈子表
CREATE TABLE social_circle (
  id BIGINT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL COMMENT '圈子名称',
  type VARCHAR(50) NOT NULL COMMENT '类型: topic/activity/hobby/ability/product/health/provider',
  match_source VARCHAR(50) NOT NULL COMMENT '匹配源: article/activity/game/assessment/product/health_report/teacher',
  source_id BIGINT COMMENT '匹配源ID',
  member_count INT DEFAULT 0 COMMENT '成员数',
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='社交圈/珍珠';

-- 圈子成员表
CREATE TABLE social_circle_member (
  id BIGINT AUTO_INCREMENT PRIMARY KEY,
  circle_id BIGINT NOT NULL,
  member_id BIGINT NOT NULL COMMENT '用户ID',
  member_type VARCHAR(20) NOT NULL COMMENT 'parent/child',
  joined_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  UNIQUE KEY uk_circle_member (circle_id, member_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='圈子成员';

后端改动

文件	改动
新建 entity/SocialCircle.java	圈子实体
新建 entity/SocialCircleMember.java	圈子成员实体
新建 mapper/SocialCircleMapper.java	圈子 Mapper
新建 mapper/SocialCircleMemberMapper.java	圈子成员 Mapper
新建 service/CircleMatchService.java	圈子匹配引擎——基于身·心·智·富共同点发现圈子
新建 service/CircleService.java	圈子 CRUD + 成员管理
新建 controller/CircleController.java	POST /api/circle/list, /join, /leave, /discover
config/DatabaseInitializer.java	添加建表迁移

匹配引擎逻辑

CircleMatchService.discover(childId):
  1. 共同活动 (行): 查 Activity 中参与同一活动的其他用户 → type=activity
  2. 共同认知能力 (智): 查 DAN COG 子分差值 < 10 的其他用户 → type=ability
  3. 共同情绪特征 (心): 查 DAN EMI 子分相近 → type=topic
  4. 共同身体状况 (身): 查 HealthReport 指标相近 → type=health
  5. 共同产品 (富): 查 ProductOrder 购买了同商品 → type=product
  6. 共同服务商 (富·行): 查绑定了同一位 teacher → type=provider
  7. 合并去重，排除已加入的圈子和自己

前端改动

文件	改动
新建 components/PearlDiagram.vue	珍珠图可视化——以珍珠串形式展示圈子列表
新建 components/CircleCard.vue	单个圈子卡片——显示头像聚合 + 圈子名 + 匹配源图标
新建 components/CircleDetail.vue	圈子详情页——成员列表 + 互动入口
pages/action/index.vue	在 FamilyRelationshipSection 上方插入 PearlDiagram
utils/api.js	新增圈子相关 API 方法

验收

• 发现页面展示推荐圈子，按匹配度排序
• 每个圈显示来源类型（活动/能力/健康/产品等）
• 用户可加入/退出圈子
• 圈子成员数实时更新
• 行页面显示已加入的圈子（珍珠图）

---

Phase 3：富页面重建

范围

将 pages/wealth/index.vue 从"个人设置页"完全重建为"富维度展示页"。

页面布局（从上到下）

PageBanner (保持不变)
FamilyEnergyBar (新增——当前缺失)
  ↓
用户卡片 (精简版，仅保留头像+昵称+角色切换)
  ↓
富维度评分 (新增)
  ├─ 家长: 金钱收入 | 社会成就 | 资源网络（章鱼图入口）
  └─ 孩子: 学业成绩 | 积分效率
  ↓
身克富预警 (新增——当身<40 且 富>60 时显示)
  ↓
章鱼图 (新增——嵌入 FamilyRelationGraph)
  ↓
圈子入口 (新增——显示参与中的圈子)
  ↓
推广收益 (从当前页面保留)
  ↓
菜单列表 (精简版——移除行动数据，保留积分/邀请/会员/退出)

后端改动

文件	改动
dto/MemberEnergyDTO.java	增加富子维度字段(wealthEducation/wealthPoints/wealthIncome/wealthAchievement/wealthNetwork) + 身克富字段(bodyWealthStatus/bodyWealthMessage)
service/EnergyService.java	重构 calcParentWealth/calcChildWealth 拆子维度，新增身克富检测
新建 controller/WealthDetailController.java	POST /api/energy/wealth-detail 返回子维度+身克富状态
controller/EnergyController.java	现有 getEnergyOverview 需要返回富子维度

前端改动

文件	改动
pages/wealth/index.vue	完全重写——新布局替换现有页面
新建 components/WealthSubScores.vue	富子维度评分展示卡片（角色感知）
新建 components/BodyWealthAlert.vue	身克富预警条
utils/api.js	新增 wealthDetail API

行动数据迁移

当前富页面的"行动数据"（任务数/购买数/活动数/课程数）应移除。这些数据属于行维度，可选择在行页面增加一个统计摘要。

验收

• 富维度子维度评分正常展示（家长/孩子差异）
• 身克富预警在条件触发时显示
• 章鱼图（FamilyRelationGraph）嵌入显示
• 圈子入口展示已加入圈子
• 推广收益数据保留正常
• 菜单列表不再包含"行动数据"
• 五维能量条正常展示

---

执行顺序

Phase 1 (并行3项，预计 1-2 天)
  ├── P1-1 身：健康打卡入口
  ├── P1-2 智：阅读时长展示
  └── P1-3 心：天盘相性

Phase 2 (珍珠图/圈子，预计 3-5 天)
  ├── 数据模型 + 迁移
  ├── 匹配引擎
  ├── API CRUD
  └── 前端组件

Phase 3 (富重建，预计 3-5 天)
  ├── 后端 DTO + Service + API
  ├── 前端页面重写
  └── 组件开发

---

关联文档: 五维功能-能量映射, 五维首页与转化算法