五角星布局 & 五维映射修正 — 实现计划

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 将前端五行能量沙盘的五角星布局与后端五维映射修正为新的五维五行体系（智·金→富·水→行·木→心·火→身·土），并更新 README 品牌理念表。

Architecture: 仅涉及前端 wuxing-sandbox.vue 模板/CSS/Canvas 映射 + 后端现有 EnergyService 中的维度变量命名对齐 + README 品牌理念表更新。不新增表或 API。

Tech Stack: uni-app Vue 2 + Canvas 2D / Spring Boot / Markdown

设计依据: docs/superpowers/specs/2026-06-08-five-dimension-wuxing-philosophy.md

变更前后映射对照

五角星顶点布局

位置	CSS class	当前(old)	新(new)	五行	颜色
最左侧 (top-left, 26% 13%)	`star-point--ul`	身(body)	行(action)	木	绿 #4CAF50
顶部 (top, 3% 50%)	`star-point--top`	心(mind)	心(mind) ——不变——	火	橙 #FF6B35
最右侧 (top-right, 26% 87%)	`star-point--ur`	财/富(wealth)	身(body)	土	棕 #8D6E63
右下 (bottom-right, 73% 75%)	`star-point--lr`	行(action)	智(wisdom)	金	黄 #FFD700
左下 (bottom-left, 73% 25%)	`star-point--ll`	智(wisdom)	富(wealth)	水	蓝 #42A5F5

Canvas 星臂索引映射

Canvas i	对应星臂位置	当前(old) ts	新(new) ts	当前(old) color	新(new) color
0	top-left	animBody	animAction	木·绿(76,175,80)	木·绿 ——不变——
1	top	animMind	animMind ——不变——	火·橙(255,107,53)	火·橙 ——不变——
2	top-right	animWealth	animBody	土·棕(141,110,99)	土·棕 ——不变——
3	bottom-right	animAction	animWisdom	金·黄(255,215,0)	金·黄 ——不变——
4	bottom-left	animWisdom	animWealth	水·蓝(66,165,245)	水·蓝 ——不变——

维度详情条 & CSS dot 样式

顺序	当前(old)	新(new)
第1项	🌿身 (dim-item--wood)	🌿行 (dim-item--wood)
第2项	🔥心 (dim-item--fire)	🔥心 (dim-item--fire)——不变——
第3项	🌏智 (dim-item--earth)	🌏身 (dim-item--earth)
第4项	⚡行 (dim-item--metal)	⚡智 (dim-item--metal)
第5项	💧富 (dim-item--water)	💧富 (dim-item--water)

文件改动清单

文件	改动类型	说明
`cfc-frontend/components/wuxing-sandbox.vue`	修改	模板顶点映射、Canvas 颜色/ts 映射、CSS 样式一致性
`cfc-backend/src/main/java/com/etotem/cfc/service/EnergyService.java`	修改	维度注释/变量名对齐（逻辑不变）
`cfc-backend/src/main/java/com/etotem/cfc/dto/EnergySandboxDTO.java`	不改	DTO 字段按名称访问，顺序无关
`cfc-backend/src/main/java/com/etotem/cfc/dto/MemberEnergyDTO.java`	不改	同上
`README.md`	修改	品牌理念表格五行 icon 对齐新映射

Task 1: 修正前端 wuxing-sandbox.vue 模板 —— 顶点标签 & 样式

Files:

Modify: cfc-frontend/components/wuxing-sandbox.vue:17-52 (template)
Modify: cfc-frontend/components/wuxing-sandbox.vue:752-756 (CSS)
[ ] Step 1: 更新 HTML 模板中的五个顶点标签和点击回调

将以下代码（旧映射）：

<view class="star-point star-point--ul" @click="onPointClick('body')">
  <view class="point-dot point-dot--wood"><text class="point-icon">🌿</text></view>
  <text class="point-label">身</text>
</view>
<view class="star-point star-point--top" @click="onPointClick('mind')">
  <view class="point-dot point-dot--fire"><text class="point-icon">🔥</text></view>
  <text class="point-label">心</text>
</view>
<view class="star-point star-point--ur" @click="onPointClick('wealth')">
  <view class="point-dot point-dot--earth"><text class="point-icon">🌏</text></view>
  <text class="point-label">财</text>
</view>
<view class="star-point star-point--lr" @click="onPointClick('action')">
  <view class="point-dot point-dot--metal"><text class="point-icon">⚡</text></view>
  <text class="point-label">行</text>
</view>
<view class="star-point star-point--ll" @click="onPointClick('wisdom')">
  <view class="point-dot point-dot--water"><text class="point-icon">💧</text></view>
  <text class="point-label">智</text>
</view>

改为（新映射）：

<view class="star-point star-point--ul" @click="onPointClick('action')">
  <view class="point-dot point-dot--wood"><text class="point-icon">🌿</text></view>
  <text class="point-label">行</text>
</view>
<view class="star-point star-point--top" @click="onPointClick('mind')">
  <view class="point-dot point-dot--fire"><text class="point-icon">🔥</text></view>
  <text class="point-label">心</text>
</view>
<view class="star-point star-point--ur" @click="onPointClick('body')">
  <view class="point-dot point-dot--earth"><text class="point-icon">🌏</text></view>
  <text class="point-label">身</text>
</view>
<view class="star-point star-point--lr" @click="onPointClick('wisdom')">
  <view class="point-dot point-dot--metal"><text class="point-icon">⚔️</text></view>
  <text class="point-label">智</text>
</view>
<view class="star-point star-point--ll" @click="onPointClick('wealth')">
  <view class="point-dot point-dot--water"><text class="point-icon">💧</text></view>
  <text class="point-label">富</text>
</view>

Step 2: 更新维度详情条（dimension-bar）

将以下代码：

<view class="dim-item dim-item--wood">🌿身 {{ activeScores[0] }}%</view>
<view class="dim-item dim-item--fire">🔥心 {{ activeScores[1] }}%</view>
<view class="dim-item dim-item--earth">🌏智 {{ activeScores[2] }}%</view>
<view class="dim-item dim-item--metal">⚡行 {{ activeScores[3] }}%</view>
<view class="dim-item dim-item--water">💧富 {{ activeScores[4] }}%</view>

改为：

<view class="dim-item dim-item--wood">🌿行 {{ activeScores[0] }}%</view>
<view class="dim-item dim-item--fire">🔥心 {{ activeScores[1] }}%</view>
<view class="dim-item dim-item--earth">🌏身 {{ activeScores[2] }}%</view>
<view class="dim-item dim-item--metal">⚡智 {{ activeScores[3] }}%</view>
<view class="dim-item dim-item--water">💧富 {{ activeScores[4] }}%</view>

注意：activeScores 数组索引保持 [body, mind, wisdom, action, wealth] 不变。Canvas 渲染通过 ts 数组取值时，映射会通过在 renderStar 中调整 ts 的索引顺序来实现（见 Task 2）。

Task 2: 修正 Canvas 渲染 —— 颜色映射 & ts 数组索引

Files:

Modify: cfc-frontend/components/wuxing-sandbox.vue:57, 88-94, 322-337, 448-458, 513

关键逻辑： Canvas 的 renderStar() 用 for i = 0..4 遍历，每个 i 对应一个星臂几何位置。当前 ts 数组 [animBody, animMind, animWealth, animAction, animWisdom] 的索引顺序必须与新的顶点映射一致。

Step 1: 修正 Canvas 五色数组的索引映射

只需将 colors 数组的注释对齐（颜色值不变），同时调整 ts 数组的取值索引以匹配新布局：

// 在 renderStar() 方法中：

// 当前（旧）：
var ts = [
  this.animBody,     // i=0 → top-left (旧:身)
  this.animMind,     // i=1 → top (心——不变)
  this.animWealth,   // i=2 → top-right (旧:财)
  this.animAction,   // i=3 → bottom-right (旧:行)
  this.animWisdom    // i=4 → bottom-left (旧:智)
]

// 改为（新）：
var ts = [
  this.animAction,   // i=0 → top-left (新:行·木)
  this.animMind,     // i=1 → top (新:心·火——不变)
  this.animBody,     // i=2 → top-right (新:身·土)
  this.animWisdom,   // i=3 → bottom-right (新:智·金)
  this.animWealth    // i=4 → bottom-left (新:富·水)
]

[ ] Step 2: 修正 colors 数组注释对齐

var colors = [
{ r: 76, g: 175, b: 80 },   // 木·行
{ r: 255, g: 107, b: 53 },  // 火·心
{ r: 141, g: 110, b: 99 },  // 土·身
{ r: 255, g: 215, b: 0 },   // 金·智
{ r: 66, g: 165, b: 245 }   // 水·富
]

[ ] Step 3: 修正 animateFill 中的 startTs 和 dimKeys

// animateFill 方法中：
var startTs = [
this.animBody,
this.animMind,
this.animWealth,
this.animAction,
this.animWisdom
]
// 改为：
var startTs = [
this.animAction,  // 行
this.animMind,    // 心
this.animBody,    // 身
this.animWisdom,  // 智
this.animWealth   // 富
]

// dimKeys 数组：
var dimKeys = ['animBody', 'animMind', 'animWealth', 'animAction', 'animWisdom']
// 改为：
var dimKeys = ['animAction', 'animMind', 'animBody', 'animWisdom', 'animWealth']

[ ] Step 4: 修正 onCanvasTap 中的 domains 数组

// 当前：
var domains = ['body', 'mind', 'wealth', 'action', 'wisdom']
// 改为（按新顶点顺序，i=0→top-left=行, i=1→top=心, etc.）：
var domains = ['action', 'mind', 'body', 'wisdom', 'wealth']

[ ] Step 5: 修正 data 中的动画变量默认值顺序（仅对齐注释，值不变）

// data() 中：
animBody: 0,      // 身
animMind: 0,      // 心
animWisdom: 0,    // 智
animAction: 0,    // 行
animWealth: 0,    // 富
// 保持字段名不变（它们通过 dimKeys 动态访问），不需要改变量声明

[ ] Step 6: 验证映射一致性

检查 renderStar 循环中的多边形几何索引 (i+4)%5, (i+3)%5 等是否正确对应新布局。这些是纯数学计算，不依赖维度名称，因此不需要修改。

Task 3: 对齐后端 EnergyService 维度注释

Files:

Modify: cfc-backend/src/main/java/com/etotem/cfc/service/EnergyService.java
[ ] Step 1: 修正 Javadoc 注释中的维度描述

在第 17 行的类级注释中：

/**
 * 家庭能量沙盘 — 核心计算服务
 * 计算每个家庭成员（家长+孩子）的身/心/智/行/富五维能量值 (0-100%)，
 * 并聚合出家庭整体能量视图。
 */

改为：

/**
 * 家庭能量沙盘 — 核心计算服务
 * 计算每个家庭成员（家长+孩子）的智/富/行/心/身五维能量值 (0-100%)，
 * 并聚合出家庭整体能量视图。
 */

Step 2: 修正各 calc 方法的注释（五行对齐）

保持方法名和逻辑不变，仅修正注释中的五行元素对应：

方法	旧注释	新注释
`calcParentBody` / `calcChildBody`	身 — 运动健康	身·土 — 运动健康
`calcParentMind` / `calcChildMind`	心 — 学习/阅读/亲子	心·火 — 学习/阅读/亲子
`calcParentWisdom` / `calcChildWisdom`	智 — 学习提升/游戏测评	智·金 — 学习提升/游戏测评
`calcParentAction` / `calcChildAction`	行 — 习惯/自律/打卡	行·木 — 习惯/自律/打卡
`calcParentWealth` / `calcChildWealth`	富 — 积分积累	富·水 — 积分积累

例如：

/** 家长 身·土 — 运动健康类任务完成率 */
private int calcParentBody(User parent) {

将每个注释行中的 「身」 改为 「身·土」，「心」 改为 「心·火」 等，方法名和逻辑不变。

Task 4: 更新 README 品牌理念表格

Files:

Modify: README.md
[ ] Step 1: 更新品牌理念五维表格

当前表格：

| 维度 | 代码 | 含义 |
|:----:|:----:|------|
| 🌏 **身** | body | 身体健康、活力充沛 |
| 🔥 **心** | mind | 情绪管理、内心丰盈 |
| ⚔️ **智** | wisdom | 认知提升、终身学习 |
| 🌿 **行** | action | 行动力强、习惯养成 |
| 💧 **富** | wealth | 财富素养、价值创造 |

改为（补充五行元素列，排序改为相生链：智→富→行→心→身）：

| 维度 | 五行 | 代码 | 含义 |
|:----:|:----:|:----:|------|
| ⚔️ **智** | 金 | wisdom | 认知提升、终身学习 |
| 💧 **富** | 水 | wealth | 财富素养、价值创造 |
| 🌿 **行** | 木 | action | 行动力强、习惯养成 |
| 🔥 **心** | 火 | mind | 情绪管理、内心丰盈 |
| 🌏 **身** | 土 | body | 身体健康、活力充沛 |

说明：该顺序遵循相生链（智生富→富生行→行生心→心生身），与 2026-06-08-five-dimension-wuxing-philosophy.md 保持一致。项目简介首段中的"身、心、智、行、富"描述也同步更新。

[ ] Step 2: 同步更新项目简介首段

浠艾福（Care Family）是一个以家庭为单位的健康成长平台，围绕**智、富、行、心、身**五个维度...

将原有的 "身、心、智、行、富" 改为 "智、富、行、心、身"。

验证清单

wuxing-sandbox.vue 重新编译后，五角星最左侧显示"行·🌿木"，顶部显示"心·🔥火"，右上显示"身·🌏土"，右下显示"智·⚔️金"，左下显示"富·💧水"
点击每个顶点触发正确的 onPointClick 回调（domain 参数正确）
Canvas 填充颜色与顶点元素一致（木绿→行，火橙→心，土棕→身，金黄→智，水蓝→富）
Canvas 填充动画 (ts 数组) 对应正确的星臂几何位置
LSP 诊断无错误
后端编译无错误
README 品牌理念表格五行 icon 正确对应

2026-06-08-wuxing-pentagram-layout-update.md 13 KB История Исходник

五角星布局 & 五维映射修正 — 实现计划

变更前后映射对照

五角星顶点布局

Canvas 星臂索引映射

维度详情条 & CSS dot 样式

文件改动清单

Task 1: 修正前端 wuxing-sandbox.vue 模板 —— 顶点标签 & 样式

Task 2: 修正 Canvas 渲染 —— 颜色映射 & ts 数组索引

Task 3: 对齐后端 EnergyService 维度注释

Task 4: 更新 README 品牌理念表格

验证清单

2026-06-08-wuxing-pentagram-layout-update.md 13 KB

История Исходник