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

**状态:** 待实施
**日期:** 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：珍珠图/圈子系统（行）

### 范围

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

### 数据模型

```sql
-- 圈子表
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
  ├── 前端页面重写
  └── 组件开发
```

---

*关联文档: [五维功能-能量映射](../specs/2026-07-12-dimension-features-energy-map.md), [五维首页与转化算法](../specs/2026-07-12-wuxing-homepage-and-conversion-algorithm.md)*