cfc/docs/redesign-wisdom-page.md

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