心智页面（心·智合一）小程序端设计方案

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task.

Goal: 将「心」和「智」合并到 TabBar 心智页面 pages/mind/index 中，整合现有的测评、小游戏、阅读、成长档案等心智相关功能，形成统一的心智成长体验。保留 pages/wisdom/ 子页面作为可跳转的深度页面。

Architecture: 改造 pages/mind/index.vue 为双 Tab 结构（心理/认知），保留现有子页面结构不变，打通 EMI 心理评估和 DAN 认知测评的数据展示，补齐缺失的后端接口。

Tech Stack: uni-app Vue 2, 微信小程序, Spring Boot REST API

现状分析

页面分布

定位	页面路径	当前内容	问题
🧠 TabBar 心智	`pages/mind/index.vue`	六维认知雷达图 + 功能入口 + 每日心理 + 推荐阅读 + 心智任务	雷达图接口不存在；功能入口空洞；心·智内容混在一起
(子页面)	`pages/mind/articles.vue`	文章列表（分类筛选 + 文章卡片）	✅ 可用
(子页面)	`pages/mind/article-detail.vue`	文章详情（富文本 + 阅读完成）	✅ 可用
(子页面)	`pages/mind/training.vue`	能力训练（模拟随机分数）	❌ 未对接真实后端
(子包页面)	`pages/wisdom/index.vue`	今日任务 + 功能入口 + 活动 + 商品	❌ 数据硬编码；无认知数据
(子包页面)	`pages/wisdom/cognitive-report.vue`	认知测评报告	❌ 错用 getEnergyOverview

TabBar 现状

TabBar 中没有 wisdom/index — pages/wisdom/ 是一个子包（subPackage），通过 uni.navigateTo 进入，非 TabBar 页。pages/mind/index 已经是心智 TabBar 页。

核心问题：

mind/index 展示的是认知六维雷达图（注意力/记忆/逻辑 → 属于"智"），但 EMI 心理数据（情绪/韧性/压力应对 → 属于"心"）无处展示
wisdom/ 子包中的数据也未经过打通和展示

后端数据结构

DanAssessmentResult（表 dan_assessment_results）
├── 认知六维: attentionScore, focusScore, memoryScore, logicScore, perceptionScore, spatialScore, processingSpeedScore
├── EMI 心理四维: emotionScore, resilienceScore, stressCopingScore, selfAwarenessScore
├── 综合: overallScore, danLevel(A/B/C/D)
├── 分析: analysisReport, growthSuggestions

GameRecord          → gameCode(schulte/1a2b/sudoku), score, completionTime, pointsEarned
ArticleReadingRecord → userId, childId, content, durationSeconds
EnergyBalance       → mind/wisdom 维度 balance

设计方案

页面结构（合并后）

TabBar 🧠 心智 → pages/mind/index.vue       ← 唯一入口，心+智合在此页
  │
  ├── [心理] Tab ──────────── [认知] Tab     ← 双 Tab 切换
  │      │                        │
  │      ├─ EMI 心理雷达图         ├─ 认知六维雷达图
  │      ├─ 心理能量概况           ├─ 综合评分 + DAN等级
  │      ├─ 每日心理小贴士         ├─ 今日心智任务
  │      ├─ 推荐心理文章           ├─ 认知训练入口(小游戏)
  │      └─ [查看EMI报告 →]       ├─ 本月阅读统计
  │                               └─ [查看测评报告 →]
  │
  ├── pages/mind/articles.vue（文章列表，已有）
  ├── pages/mind/article-detail.vue（文章详情，已有）
  ├── pages/mind/emotion-report.vue（新增：EMI心理报告详情）
  │
  └── pages/wisdom/（子包，保留为深度页面）
       ├── cognitive-report.vue（改造：真实认知报告）
       └── training-list.vue（新增：认知训练中心）

心智首页布局

┌────────────────────────────────────────────────────────────┐
│  PageBanner "心智成长 · 智慧人生"                            │
├────────────────────────────────────────────────────────────┤
│  [心理]  [认知]     ← 双 Tab 切换                           │
├─────────── 心理 Tab ───────────────────────────────────────┤
│  ┌─ 心理能量概况 ─────────────────────────────────────┐    │
│  │  ❤️ 心能量 128  |  💪 韧性评分 76  |  🧘 情绪 82 │    │
│  └────────────────────────────────────────────────────┘    │
│  ┌─ EMI 心理雷达图 ────────────────────────────────────┐    │
│  │       情绪商数                                       │    │
│  │   压力应对 ◄───► 心理韧性                              │    │
│  │       自我认知                                       │    │
│  │    综合EQ分: 78   [查看完整报告 →]                    │    │
│  └────────────────────────────────────────────────────┘    │
│  ┌─ 每日心理 ──────────────────────────────────────────┐    │
│  │  ❝ 成长型思维——相信努力而非天赋 ❞                    │    │
│  └────────────────────────────────────────────────────┘    │
│  ┌─ 推荐阅读 ──────────────────────────────────────────┐    │
│  │  [文章卡片 1]  [文章卡片 2]  [文章卡片 3]              │    │
│  └────────────────────────────────────────────────────┘    │
├─────────── 认知 Tab ───────────────────────────────────────┤
│  ┌─ 综合认知评分 ─────────────────────────────────────┐    │
│  │  DAN等级: B  |  综合得分: 82  |  上次测评: 05-20    │    │
│  │  [查看完整报告 →]  [预约测评]                        │    │
│  └────────────────────────────────────────────────────┘    │
│  ┌─ 认知六维雷达图 ────────────────────────────────────┐    │
│  │   感知 ◄───► 专注                                     │    │
│  │   记忆 ◄───► 逻辑                                     │    │
│  │   空间 ◄───► 加工速度                                  │    │
│  └────────────────────────────────────────────────────┘    │
│  ┌─ 今日心智任务 ──────────────────────────────────────┐    │
│  │  📋 完成阅读任务  +10分                               │    │
│  │  🎮 玩一局数独    +5分                                │    │
│  └────────────────────────────────────────────────────┘    │
│  ┌─ 认知训练入口 ──────────────────────────────────────┐    │
│  │  🎯 舒尔特方格  |  🔢 猜数字  |  🧩 数独            │    │
│  └────────────────────────────────────────────────────┘    │
│  ┌─ 本月阅读统计 ──────────────────────────────────────┐    │
│  │  5篇 / 45分钟  ████████░░░░░░░░ 45%   [去阅读 →]    │    │
│  └────────────────────────────────────────────────────┘    │
├────────────────────────────────────────────────────────────┤
│  功能入口 Grid（心理/认知通用）                             │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐          │
│  │ 📖   │ │ 🎮   │ │ 📊   │ │ 🧪   │ │ 📝   │          │
│  │ 阅读  │ │小游戏 │ │测评   │ │训练   │ │成长   │          │
│  │      │ │      │ │报告   │ │中心   │ │档案   │          │
│  └──────┘ └──────┘ └──────┘ └──────┘ └──────┘          │
└────────────────────────────────────────────────────────────┘

双 Tab 数据源

Tab	区块	接口	说明
心理	EMI 心理雷达图	`POST /api/emireport/latest`	DanAssessmentResult 的 EMI 字段
心理	心理能量概况	`POST /api/energy/overview`	现有，取 mind 维度
心理	每日心理	`POST /api/articles/daily-tip`	新增
心理	推荐阅读	`POST /api/article/list?category=emotion`	现有 + 筛选
认知	认知六维雷达图	`POST /api/assessment/latest-result`	新增
认知	综合评分	同上	—
认知	今日任务	`POST /api/tasks/today`	现有
认知	阅读统计	`POST /api/reading/stats`	新增
认知	训练入口	—	直接导航
通用	功能入口 Grid	—	固定网格

文件变更清单

前端

操作	文件	说明
🔄 改造	`pages/mind/index.vue`	核心：双 Tab 结构（心理/认知），合并心智展示
✨ 新增	`pages/mind/emotion-report.vue`	EMI 心理评估报告详情
🔄 改造	`pages/wisdom/cognitive-report.vue`	数据源改为真实测评接口
✨ 新增	`pages/wisdom/training-list.vue`	认知训练中心
🔄 修改	`pages.json`	注册新页面

后端

操作	文件
✨ 新增	`controller/EmiReportController.java`, `service/EmiReportService.java`, `dto/EmiReportDTO.java`
✨ 新增	`controller/assessment/AssessmentResultController.java`, `dto/AssessmentResultDTO.java`, `dto/AssessmentHistoryItemDTO.java`
✨ 新增	`dto/ReadingStatsDTO.java`
🔄 改造	`controller/content/ArticleController.java`, `service/ArticleService.java`

后端接口需求

新增接口

POST /api/emireport/latest
  请求: { childId }
  响应: { emotionScore, resilienceScore, stressCopingScore, selfAwarenessScore,
          overallScore, analysisReport, growthSuggestions, assessmentDate }

POST /api/assessment/latest-result
  请求: { childId }
  响应: { danLevel, overallScore, attentionScore, focusScore, memoryScore,
          logicScore, perceptionScore, spatialScore, processingSpeedScore,
          analysisReport, growthSuggestions, assessmentDate }

POST /api/assessment/history
  请求: { childId, size: 5 }
  响应: [{ assessmentDate, overallScore }, ...]

POST /api/reading/stats
  请求: { childId, period: "month" }
  响应: { totalArticles, totalDurationSeconds, targetDurationSeconds, progress }

POST /api/articles/daily-tip
  请求: { type: "psychology" }
  响应: { title, content, source }

已有接口（保留）

接口	用途
`POST /api/article/list`	文章列表
`POST /api/article/categories`	文章分类
`POST /api/article/detail`	文章详情
`POST /api/article/read`	记录阅读
`POST /api/games/list`	游戏列表
`POST /api/games/submit`	提交游戏结果
`POST /api/games/history`	游戏记录
`POST /api/games/stats`	游戏统计
`POST /api/tasks/today`	今日任务
`POST /api/energy/overview`	五维能量概览

实现任务

Task 1: 心智首页双 Tab 改造（核心）

Files:

Modify: cfc-frontend/pages/mind/index.vue

改造点：

页面顶部增加双 Tab 切换：[心理] [认知]
心理 Tab 展示：
- 心理能量概况卡片（energy_balance mind 维度 + EMI 综合分）
- EMI 四维雷达图（数据源：/api/emireport/latest）
- 每日心理小贴士（/api/articles/daily-tip）
- 推荐心理文章（/api/article/list?category=emotion）
- [查看完整EMI报告 →] 跳转 emotion-report
认知 Tab 展示：
- 综合认知评分 + DAN 等级（/api/assessment/latest-result）
- 认知六维雷达图（同上）
- 今日心智任务列表（/api/tasks/today）
- 认知训练入口 → games 页面
- 本月阅读统计（/api/reading/stats）
- [查看完整测评报告 →] 跳转 cognitive-report
底部统一功能入口 Grid：阅读 / 小游戏 / 测评报告 / 训练中心 / 成长档案
无测评/心理数据时显示引导占位 + [预约测评] 按钮

Task 2: 新增 EMI 心理报告页面

Files:

Create: cfc-frontend/pages/mind/emotion-report.vue
Modify: cfc-frontend/pages.json

功能：

综合EQ评分 + 等级评价
EMI 四维条形图
分析报告 + 成长建议
从心理 Tab "查看完整报告" 跳转

Task 3: 认知报告对接真实数据

Files:

Modify: cfc-frontend/pages/wisdom/cognitive-report.vue

改造点：

数据源从 getEnergyOverview → /api/assessment/latest-result
六维认知评分 + DAN 等级 + 分析报告 + 成长建议
无数据时引导预约测评

Task 4: 新增训练列表页面

Files:

Create: cfc-frontend/pages/wisdom/training-list.vue
Modify: cfc-frontend/pages.json

功能：

训练概览（总次数 / 本月次数 / 最高分 / 累计积分）
按维度分组训练项目（舒尔特/猜数字/数独）
跳转到 games 页面

Task 5: 后端 EMI 心理报告 API

Files:

Create: cfc-backend/.../controller/EmiReportController.java
Create: cfc-backend/.../service/EmiReportService.java
Create: cfc-backend/.../dto/EmiReportDTO.java

Task 6: 后端测评结果 API

Files:

Create: cfc-backend/.../controller/assessment/AssessmentResultController.java
Create: cfc-backend/.../dto/AssessmentResultDTO.java
Create: cfc-backend/.../dto/AssessmentHistoryItemDTO.java

Task 7: 后端阅读统计 + 每日心理 API

Files:

Modify: cfc-backend/.../controller/content/ArticleController.java
Modify: cfc-backend/.../service/ArticleService.java
Create: cfc-backend/.../dto/ReadingStatsDTO.java

2026-06-12-mind-wisdom-pages-design.md 16 KB Bezpośredni odnośnik Historia Czysty

心智页面（心·智合一）小程序端设计方案

现状分析

页面分布

TabBar 现状

后端数据结构

设计方案

页面结构（合并后）

心智首页布局

双 Tab 数据源

文件变更清单

前端

后端

后端接口需求

新增接口

已有接口（保留）

实现任务

Task 1: 心智首页双 Tab 改造（核心）

Task 2: 新增 EMI 心理报告页面

Task 3: 认知报告对接真实数据

Task 4: 新增训练列表页面

Task 5: 后端 EMI 心理报告 API

Task 6: 后端测评结果 API

Task 7: 后端阅读统计 + 每日心理 API

2026-06-12-mind-wisdom-pages-design.md 16 KB

Bezpośredni odnośnik Historia Czysty