Pārlūkot izejas kodu

docs: add 智维度页面重设计方案 - wisdom dimension page redesign

- 页面结构设计(index.vue 主页面 14 个区块)
- 自己出题自己答四步交互流程
- 训练中心 2 游戏入口(舒尔特+猜数字)
- 认知报告 7→6 维修正(DAN六维标准)
- FamilyRelationGraph wisdom 支持
- Phase 2 待办清单
Xiaogang Liao 4 mēneši atpakaļ
vecāks
revīzija
e2db37ede4

+ 145 - 0
docs/设计/wisdom-dimension-plan.md

@@ -0,0 +1,145 @@
+# wisdom-dimension-redesign - Work Plan
+
+> ⚠️ 此文件为 `.omo/plans/wisdom-dimension-redesign.md` 的副本(.omo/ 目录被 .gitignore 隔离)
+> 源文件路径:`/app/cfc/.omo/plans/wisdom-dimension-redesign.md`
+
+## TL;DR (For humans)
+
+**What you'll get:** 智维度TabBar页面全面升级,与其他四个维度页面保持一致的视觉和交互体验——包含家庭成员关系图、五维能量条、认知报告摘要、自己出题自己答核心功能、训练中心游戏入口。
+
+**Why this approach:** 遵循身维度页面的成熟模式作为蓝本,确保五端体验一致;核心新功能"自己出题自己答"采用前端优先MVP实现,避免后端阻塞前端交付。
+
+**What it will NOT do:**
+- 不会新建后端 SelfQuiz API 或数据库表
+- 不会实现新游戏,只链接已有游戏
+- 不会迁移心维度"智·认知"tab内容,不改Web管理端
+
+**Effort:** Medium
+**Risk:** Low - 全部是前端页面重写/新建,没有后端改动,参考模式成熟
+**Decisions to sanity-check:** 自测题MVP用localStorage而非后端;训练中心纯链接不内嵌;认知报告从7维修正为6维
+
+---
+
+> TL;DR (machine): Medium, Low, 8 todos — wisdom TabBar page full redesign + FamilyRelationGraph wisdom support + 3 new sub-pages + cognitive report fix
+
+## Scope
+### Must have
+- FamilyRelationGraph 组件支持 `wisdom` dimensionCode(验证器 + 主题色)
+- wisdom/index.vue 按身维度页面模式完整重写(能量条、关系图、用户入口、功能入口、维度内容、任务/活动/商品)
+- wisdom/member-wisdom-detail.vue 新建(成员详情,含只读关系图)
+- wisdom/self-quiz.vue 新建(自己出题自己答核心功能)
+- wisdom/training-hub.vue 新建(训练中心,链接已有游戏)
+- cognitive-report.vue 修正为6维DAN标准
+- pages.json 注册3个新子页面
+
+### Must NOT have
+- ❌ 新建后端 SelfQuiz API 或数据库表(Phase 2)
+- ❌ 实现新游戏(只用已有 /pages/games/ 下的游戏)
+- ❌ 迁移心维度页面 `pages/mind/index.vue` 的"智·认知"tab内容
+- ❌ 接入 Dify AI 生成出题提示(Phase 2)
+- ❌ 修改 Web 管理端
+- ❌ 修改其他维度页面(body/mind/action)的逻辑或外观
+- ❌ 使用可选链 `?.`(微信小程序不支持,必须用 `&&`)
+- ❌ 使用 CSS Grid(微信小程序不支持,必须用 flexbox)
+
+## Execution waves
+
+**Wave 1(基础层,5个 todo,全部可并行):**
+- T1: FamilyRelationGraph wisdom 支持
+- T2: cognitive-report.vue 7→6 维修正
+- T3: pages.json 注册3个新子页面
+- T4: training-hub.vue 新建
+- T5: member-wisdom-detail.vue 新建
+
+**Wave 2(核心层,2个 todo,依赖 Wave 1):**
+- T6: self-quiz.vue 新建(依赖 T3 页面注册)
+- T7: wisdom/index.vue 完整重写(依赖 T1 关系图 + T4/T5/T6 页面目标存在)
+
+**Wave 3(验证层,1个 todo,依赖 Wave 2):**
+- T8: 全链路集成验证
+
+## Dependency matrix
+| Todo | Depends on | Blocks | Can parallelize with |
+| --- | --- | --- | --- |
+| T1 | — | T7 | T2, T3, T4, T5 |
+| T2 | — | — | T1, T3, T4, T5 |
+| T3 | — | T4, T5, T6 | T1, T2 |
+| T4 | T3 | T7 | T5, T6 |
+| T5 | T3 | T7 | T4, T6 |
+| T6 | T3 | T7 | T4, T5 |
+| T7 | T1, T4, T5, T6 | T8 | — |
+| T8 | T7 | — | — |
+
+## Todos
+
+- [ ] 1. FamilyRelationGraph 组件添加 wisdom 维度支持
+  - validator 添加 `'wisdom'`,themeColors 添加 `wisdom: '#FFD700'`
+  - Blocks: T7 | Can parallelize with: T2, T3, T4, T5
+  - References: `cfc-frontend/components/FamilyRelationGraph.vue:107-108,138-143`
+  - Commit: Y | fix(component): add wisdom dimension support to FamilyRelationGraph
+
+- [ ] 2. cognitive-report.vue 修正7维→6维DAN标准
+  - 删除 attentionScore,保留DAN六维
+  - Blocks: — | Can parallelize with: T1, T3, T4, T5
+  - References: `cfc-frontend/pages/wisdom/cognitive-report.vue:96-103`
+  - Commit: Y | fix(wisdom): correct cognitive report to 6 DAN dimensions
+
+- [ ] 3. pages.json 注册3个新智慧子页面
+  - member-wisdom-detail + self-quiz + training-hub
+  - Blocks: T4, T5, T6 | Can parallelize with: T1, T2
+  - References: `cfc-frontend/pages.json:148-160`
+  - Commit: Y | chore(pages): register wisdom sub-pages in pages.json
+
+- [ ] 4. wisdom/training-hub.vue 新建训练中心页面
+  - 2张游戏卡片:舒尔特方格(schulte) + 猜数字(1a2b)
+  - Blocks: T7 | Blocked by: T3
+  - References: `cfc-frontend/pages/games/schulte.vue`, `cfc-frontend/pages/games/1a2b.vue`
+  - Commit: Y | feat(wisdom): create training-hub page with game links
+
+- [ ] 5. wisdom/member-wisdom-detail.vue 新建成员详情页
+  - 参考 member-mind-detail.vue,FamilyRelationGraph interactive=false
+  - Blocks: T7 | Blocked by: T3
+  - References: `cfc-frontend/pages/mind/member-mind-detail.vue:1-309`
+  - Commit: Y | feat(wisdom): create member-wisdom-detail page
+
+- [ ] 6. wisdom/self-quiz.vue 新建"自己出题自己答"核心功能页
+  - 4步流程:设定目标→题型选择→出题答题→通过判定;uni.getStorageSync 存储 session
+  - Blocks: T7 | Blocked by: T3
+  - References: `cfc-frontend/pages/wisdom/cognitive-report.vue:96-103`
+  - Commit: Y | feat(wisdom): create self-quiz page (自己出题自己答)
+
+- [ ] 7. wisdom/index.vue 按身维度页面模式完整重写
+  - 14区块:Banner→LoginGuide→能量条→关系图→用户入口→funcList→认知摘要→出题卡片→训练中心→任务→活动→商品→贴士→快捷操作
+  - Blocks: T8 | Blocked by: T1, T4, T5, T6
+  - References: `cfc-frontend/pages/body/index.vue:1-898`
+  - Commit: Y | feat(wisdom): full redesign of wisdom index page
+
+- [ ] 8. 全链路集成验证
+  - 编译+导航测试,lint检查
+  - Blocks: — | Blocked by: T7
+  - Commit: N | verification only
+
+## Final verification wave
+- [ ] F1. Plan compliance audit
+- [ ] F2. Code quality review — no `?.`, no CSS Grid
+- [ ] F3. Real manual QA
+- [ ] F4. Scope fidelity
+
+## Commit strategy
+每个实现 todo 独立提交(除 T8 纯验证不提交):
+- T1: fix(component): add wisdom dimension support to FamilyRelationGraph
+- T2: fix(wisdom): correct cognitive report to 6 DAN dimensions
+- T3: chore(pages): register wisdom sub-pages in pages.json
+- T4: feat(wisdom): create training-hub page with game links
+- T5: feat(wisdom): create member-wisdom-detail page
+- T6: feat(wisdom): create self-quiz page (自己出题自己答)
+- T7: feat(wisdom): full redesign of wisdom index page
+
+## Success criteria
+1. TabBar "智" 页面与其他4个维度页面视觉和交互体验一致
+2. FamilyRelationGraph 在智慧页面正常渲染,主题色为 #FFD700
+3. "自己出题自己答" 4步流程完整可操作
+4. 认知报告显示6维DAN标准(无"注意力"重复维度)
+5. 训练中心含2个游戏入口(舒尔特+猜数字),不超过上限
+6. 所有新页面注册在 pages.json,导航可达
+7. 编译零错误

+ 180 - 0
docs/设计/智维度页面重设计方案.md

@@ -0,0 +1,180 @@
+# 智维度页面重设计方案
+
+> 浠艾福五维能量体系 — 智(金)TabBar 页面全面升级
+
+## 一、背景与目标
+
+智维度(`pages/wisdom/index.vue`)是五维 TabBar 之一(身·智·心·行·我的),当前实现极度单薄(368行),缺少其他维度页面的标准组件和交互体验。本次重设计目标是:
+
+- 与身/心/行动维度页面保持视觉和交互一致性
+- 集成家庭成员关系图(FamilyRelationGraph)
+- 落地核心新功能「自己出题自己答」(元认知训练)
+- 修正认知报告维度错误(7维→6维DAN标准)
+
+## 二、设计约束
+
+| 约束 | 说明 |
+|------|------|
+| 小程序限制 | 禁止可选链 `?.`(用 `&&` 替代)、禁止 CSS Grid(用 flexbox) |
+| Vue 版本 | Vue 2 Options API |
+| 后端限制 | `@PostMapping` 统一接口、JWT 认证、MyBatis-Plus |
+| 接口规范 | 无新后端 API(自测题 MVP 前端 localStorage) |
+| 游戏上限 | 每维度最多 2 个游戏 |
+
+## 三、页面结构
+
+```
+pages/wisdom/
+├── index.vue              # 主 TabBar 页面(重写)
+├── cognitive-report.vue   # 认知报告(修正 7→6 维)
+├── member-wisdom-detail.vue  # 成员详情(新建)
+├── self-quiz.vue          # 自己出题自己答(新建)
+└── training-hub.vue       # 认知训练中心(新建)
+```
+
+### 3.1 主页面布局(index.vue)
+
+严格遵循 `body/index.vue` 模式,从上到下:
+
+| 顺序 | 组件 | 说明 |
+|------|------|------|
+| 1 | PageBanner | `theme="wisdom"`,金渐变,标语"学以启智·慧及未来" |
+| 2 | LoginGuideCard | 游客可见,引导登录 |
+| 3 | FamilyEnergyBar | 登录用户,五维能量条,dimensionCode="wisdom" |
+| 4 | **FamilyRelationGraph** | 登录用户,家庭成员关系图,dimensionCode="wisdom" |
+| 5 | UserQuickEntry | 登录用户,孩子切换入口 |
+| 6 | funcList | 5个功能入口:认知报告/自己出题/训练中心/测评预约/阅读天地 |
+| 7 | 认知摘要区 | 登录后,显示最新认知总分+DAN等级+最低维度提示 |
+| 8 | 自己出题入口卡 | 高亮卡片,入口→ self-quiz |
+| 9 | 训练中心入口卡 | 入口→ training-hub |
+| 10 | DimensionTasks | 今日智维度任务 |
+| 11 | DimensionActivities | 智维度活动 |
+| 12 | DimensionProducts | 智维度商品 |
+| 13 | 智慧小贴士 | 静态内容 |
+| 14 | 快捷操作按钮 | 认知报告/认知训练/测评预约 |
+
+### 3.2 自己出题自己答(self-quiz.vue)— 核心新功能
+
+**设计理念:** 赋能而非贩卖焦虑。孩子自己出题、自己答题,通过元认知训练提升自我觉察和学习能力。
+
+**四步交互流程:**
+
+```
+Step 1 设定目标
+  → 选择连续答对目标 N 题(范围 2-15,默认值按年龄+DAN自适应)
+  → "确认开始" 按钮
+
+Step 2 选择题型 + 获取提示
+  → 6种题型卡片(对应DAN六维)
+  → 系统根据孩子 DAN 最低维度 + 年龄段高亮推荐
+  → 推荐提示语(Phase 1 硬编码,Phase 2 接 Dify AI)
+
+Step 3 出题 + 答题
+  → textarea 输入题目(max 200字)
+  → input 输入正确答案(max 50字)
+  → "提交答案" 按钮
+  → 答错:鼓励 + 连续计数归0
+  → 答对:连续计数+1,显示进度 X/N
+
+Step 4 达标通过
+  → 连续答对 N 题 → 庆祝页面
+  → 展示:用时 + 总答题数 + 正确率
+  → "再来一轮" / "返回智维度" 按钮
+```
+
+**自适应目标 N 规则:**
+
+| 年龄段/DAN水平 | 默认目标 | 范围 |
+|---------------|---------|------|
+| 5-7岁 / DAN低分组 | 3 | 2-6 |
+| 8-10岁 / DAN中分组 | 5 | 3-8 |
+| 11岁+ / DAN高分组 | 8 | 5-15 |
+
+**MVP 数据存储:** `uni.getStorageSync('selfQuizSession')` — Phase 2 迁移至后端 API。
+
+### 3.3 训练中心(training-hub.vue)
+
+| 游戏 | 认知维度 | 路径 |
+|------|---------|------|
+| 🎯 舒尔特方格 | 专注力 | `/pages/games/schulte` |
+| 🔢 猜数字 | 逻辑思维 | `/pages/games/1a2b` |
+
+注:数独不放在智维度(已达 2 个游戏上限;且属于"空间思维"非核心维度)
+
+### 3.4 认知报告修正(cognitive-report.vue)
+
+**DAN 认知六维标准(修正后):**
+
+| 维度 | Key | 说明 |
+|------|-----|------|
+| 感知觉 | perceptionScore | 感官信息处理与知觉整合能力 |
+| 专注力 | focusScore | 持续集中注意力和抗干扰能力 |
+| 记忆力 | memoryScore | 信息编码、存储和回忆能力 |
+| 逻辑思维 | logicScore | 推理判断和问题解决能力 |
+| 空间思维 | spatialScore | 空间想象和方位判断能力 |
+| 加工速度 | processingSpeedScore | 信息处理和反应速度 |
+
+> 修正:删除重复的「注意力」(attentionScore),保留专注力。「执行功能」不在DAN六维内。
+
+### 3.5 成员关系图设计(FamilyRelationGraph)
+
+组件需修改以支持 `dimensionCode="wisdom"`:
+
+```javascript
+// validator 扩展
+validator: val => ['body', 'mind', 'action', 'home', 'wisdom'].indexOf(val) !== -1
+
+// themeColors 扩展
+wisdom: '#FFD700'
+```
+
+## 四、FamilyRelationGraph 组件改动
+
+| 文件 | 改动位置 | 内容 |
+|------|---------|------|
+| `components/FamilyRelationGraph.vue:107-108` | validator 数组 | 添加 `'wisdom'` |
+| `components/FamilyRelationGraph.vue:138-143` | themeColors 对象 | 添加 `wisdom: '#FFD700'` |
+
+## 五、不做的事(Must NOT Have)
+
+- ❌ 新建后端 SelfQuiz API 或数据库表(Phase 2)
+- ❌ 实现新游戏(只用已有 /pages/games/ 下的游戏)
+- ❌ 迁移心维度"智·认知"tab内容
+- ❌ 接入 Dify AI 生成出题提示(Phase 2)
+- ❌ 修改 Web 管理端
+- ❌ 修改其他维度页面(body/mind/action)的逻辑或外观
+
+## 六、Phase 2 待办
+
+以下为本次 MVP 范围外的规划,需后续迭代:
+
+1. **SelfQuiz 后端 API** — 持久化答题记录、能量奖励、历史统计
+2. **Dify AI 出题提示** — 根据孩子 DAN 六维数据生成个性化出题建议
+3. **心维度"智·认知"tab 迁移** — 将 mind/index.vue 中的认知内容迁移至 wisdom 体系
+4. **Web 管理端智维度配置** — 知识库管理、维度配置等
+
+## 七、附录
+
+### A. 参考文件
+
+- `cfc-frontend/pages/body/index.vue` — 维度页面标准模式
+- `cfc-frontend/pages/mind/member-mind-detail.vue` — 成员详情页模板
+- `cfc-frontend/components/FamilyRelationGraph.vue` — 关系图组件
+- `cfc-frontend/components/PageBanner.vue` — 主题色定义
+- `cfc-backend/.../CognitiveController.java` — DAN 认知 API
+
+### B. 能量体系
+
+- 智维度能量日上限:80/天
+- 全局日上限:200/天
+- 计算公式:认知测评70% + 天赋30% + 行为修正
+
+### C. 五行对应
+
+| 维度 | 五行 | 色值 |
+|------|------|------|
+| 智 | 金 | #FFD700 |
+| 心 | 火 | #FF6B35 |
+| 身 | 土 | #8D6E63 |
+| 行 | 木 | #4CAF50 |
+| 富 | 水 | #42A5F5 |