# redesign-wisdom-page - Work Plan

## TL;DR (For humans)

**What you'll get:** The "智" (wisdom) tab page gets a clearer, more visual layout: a cognitive 6-dimension radar chart replaces the old text summary, and the page removes clutter (extra highlight cards, tips section, bottom buttons) so the content flow is: energy bar → radar chart → member graph → quick entry → 4 content cards. The 4 content cards (tasks/activities/products/articles) remain inline for now — extracting them into a shared component is done in the companion plan `extract-dimension-components`.

**Why this approach:** The existing `RadarChart.vue` component is already used on the "心" (mind) page and works perfectly — reusing it saves effort and ensures consistency. Splitting the page restructure and component extraction into two plans keeps each unit of work focused and independently verifiable.

**What it will NOT do:** Create any new components (that's the companion plan). Change backend code. Modify existing component files (RadarChart, DimensionTasks, etc.). Touch page routing/pages.json.

**Effort:** Short
**Risk:** Low — mostly removing code sections and reordering, with RadarChart integration following an established pattern from mind/index.vue
**Decisions to sanity-check:** RadarChart fill color for wisdom brand (`#6366F1`), "更多" navigation targets for each content card

Your next move: **Approve** this plan, or ask for a high-accuracy review first. Companion plan `extract-dimension-components` can run before or after this one.

---

> TL;DR (machine): Short, Low — Frontend-only restructure of wisdom/index.vue: RadarChart integration with 6 cognitive dimensions, reorder to new layout, remove 5 obsolete sections, cleanup. No component creation. 2 todos.

## Scope
### Must have
- Add RadarChart section showing 6 cognitive dimensions (感知/专注/记忆/逻辑/空间/加工速度) from assessment data
- Reorder sections to: PageBanner → LoginGuideCard → FamilyEnergyBar → RadarChart → FamilyRelationGraph → UserQuickEntry → func-grid → DimensionTasks → DimensionActivities → DimensionProducts → article-list (inline)
- Remove sections: 认知概览(7), 自己出题card(8), 训练中心card(9), 智慧小贴士(14), 快捷操作(15)
- Remove associated data, computed, methods, styles
- Verify frontend compiles without errors

### Must NOT have (guardrails, anti-slop, scope boundaries)
- No new component creation (DimensionArticles done in companion plan)
- No backend changes
- No modifications to existing components (RadarChart.vue, DimensionTasks.vue, DimensionActivities.vue, DimensionProducts.vue, PageBanner.vue, FamilyEnergyBar.vue, FamilyRelationGraph.vue, UserQuickEntry.vue)
- No CSS Grid usage (use flexbox per mini-program constraint)
- No optional chaining `?.` (use `&&` alternative)
- No pages.json routing changes
- No new dependencies

## Verification strategy
> Zero human intervention - all verification is agent-executed.
- Test decision: tests-after (compilation check)
- Evidence: build output + grep-based assertions on modified file

## Execution strategy
### Waves
- **Wave 1** (1 todo): Todo 1 — restructure wisdom/index.vue (RadarChart, reorder, cleanup)
- **Wave 2** (1 todo): Todo 2 — verify compilation

### Dependency matrix
| Todo | Depends on | Blocks | Can parallelize with |
| --- | --- | --- | --- |
| T1. Restructure wisdom/index.vue | — | T2 | — |
| T2. Verify frontend compilation | T1 | — | — |

## Todos
- [ ] 1. Restructure wisdom/index.vue — RadarChart, layout reorder, cleanup
  What to do / Must NOT do: Modify ONLY `cfc-frontend/pages/wisdom/index.vue`. The changes:
    (a) ADD imports: `RadarChart from '../../components/RadarChart.vue'`
    (b) ADD to `components: {}`: `RadarChart`
    (c) ADD computed properties `cognitiveDimensions` (array of 6 {label, key}) and `cognitiveScores` (array of 6 scores from cognitiveReport) mapping the 6 cognitive dimensions. Keys: perceptionScore, focusScore, memoryScore, logicScore, spatialScore, processingSpeedScore. Labels: 感知能力, 专注力, 记忆力, 逻辑思维, 空间思维, 加工速度.
    (d) REORDER template sections to: 1.PageBanner → 2.LoginGuideCard → 3.FamilyEnergyBar → 4.RadarChart (NEW: `<view class="section"><view class="section-header"><text class="section-title">认知雷达</text><text class="section-more" @click="goCognitiveReport">查看详情 ›</text></view><RadarChart :dimensions="cognitiveDimensions" :scores="cognitiveScores" :childName="activeChildName" fillColor="#6366F1" gridColor="#E0E7FF" labelColor="#3730A3" /></view>`) → 5.FamilyRelationGraph → 6.UserQuickEntry → 7.func-grid → 8.DimensionTasks → 9.DimensionActivities → 10.DimensionProducts → 11.article-list (keep inline, just reposition)
    (e) REMOVE template sections: 认知概览(lines 62-84), 自己出题card(lines 86-98), 训练中心card(lines 100-112), 智慧小贴士(lines 163-174), 快捷操作(lines 176-190), bottom-spacer(lines 192-194)
    (f) REMOVE from `<script>`: `WisdomTips` import (line 201), `lowestDimension` data (line 223-226 — partial of data block), `wisdomTips[]` data (lines 238-243), `loadCognitiveReport()` method (lines 359-368), `findLowestDimension()` method (lines 370-388), `WisdomTips` from components registration (line 211), `lowestDimension` ref in computed (lines 223-226)
    (g) REMOVE from `<style>`: `.cognition-summary`, `.cognition-empty`, `.summary-*`, `.cognition-*`, `.highlight-card`, `.highlight-*`, `.tips-list`, `.tip-card`, `.tip-*`, `.quick-actions`, `.action-*`, `.bottom-spacer` rule blocks (lines 589-782)
    Must NOT touch: PageBanner, LoginGuideCard, FamilyEnergyBar, FamilyRelationGraph, UserQuickEntry, func-grid sections. Must NOT break existing DimensionTasks/DimensionActivities/DimensionProducts components. Must NOT create DimensionArticles — keep inline articles section.
  Parallelization: Wave 1 | Blocked by: — | Blocks: T2
  References:
    - Full source: `/app/cfc/cfc-frontend/pages/wisdom/index.vue` (all 784 lines)
    - RadarChart usage: `/app/cfc/cfc-frontend/pages/mind/index.vue` lines 109-115 — props: dimensions, scores, childName, fillColor, gridColor, labelColor; event: dimensionClick
    - RadarChart component: `/app/cfc/cfc-frontend/components/RadarChart.vue` (props listed above)
    - Cognitive 6 dim fields: wisdom/index.vue lines 371-378 — perceptionScore, focusScore, memoryScore, logicScore, spatialScore, processingSpeedScore
    - Wisdom brand color: README.md五维色系 — 智=金 `#6366F1`
  Acceptance criteria (agent-executable):
    - Template has `<RadarChart` after `</FamilyEnergyBar>` and before `<FamilyRelationGraph`
    - Template has NO `cognition-summary`, `highlight-card`, `tips-list`, `quick-actions`, `bottom-spacer`
    - Script has `RadarChart` imported and registered (import line + components block entry)
    - Script has `cognitiveDimensions` and `cognitiveScores` computed properties
    - Script has NO `WisdomTips`, NO `lowestDimension`, NO `wisdomTips`, NO `loadCognitiveReport`, NO `findLowestDimension`
    - Style has NO `.cognition-summary`, `.cognition-empty`, `.highlight-card`, `.highlight-*`, `.tips-list`, `.tip-card`, `.quick-actions`, `.action-btn`, `.bottom-spacer`
    - Grep for `\?\.` returns empty
  QA scenarios:
    - Happy: Read modified file, verify all section changes
    - No-regression: Grep for removed identifiers; verify inline articles section still exists
    - Evidence: `.omo/evidence/task-1-wisdom-restructure-verified.txt`
  Commit: Y | `refactor(frontend): 重构智页面布局 — 集成雷达图、重排顺序、清理废弃区块`

- [ ] 2. Verify frontend compilation
  What to do / Must NOT do: Run `npm run build:mp-weixin` from `/app/cfc/cfc-frontend/`. Exit code 0 required. Capture output.
  Parallelization: Wave 2 | Blocked by: T1 | Blocks: —
  References: `cfc-frontend/AGENTS.md` commands section
  Acceptance criteria: build exits 0, no compilation errors, dist/ exists
  QA: Run build, capture output to `.omo/evidence/task-2-build-output.txt`
  Commit: N

## Final verification wave
- [ ] F1. Plan compliance — RadarChart present, correct order, removed sections gone, no new components created
- [ ] F2. Code quality — no `?.`, no CSS Grid, Vue 2 Options API
- [ ] F3. Scope fidelity — no backend changes, no existing component modifications

## Commit strategy
- Todo 1: `refactor(frontend): 重构智页面布局 — 集成雷达图、重排顺序、清理废弃区块`

## Success criteria
1. Wisdom tab shows: PageBanner → LoginGuideCard → FamilyEnergyBar → RadarChart(6dim) → FamilyRelationGraph → UserQuickEntry → func-grid → DimensionTasks → DimensionActivities → DimensionProducts → articles
2. RadarChart renders with actual cognitive assessment scores for the active child
3. Removed sections (认知概览, highlight cards, tips, quick-actions) no longer appear
4. Frontend builds without errors