docs: 富维度页面 redesign 设计文档 (财富之泉方案)

cfc-frontend/docs/superpowers/specs/2026-08-09-wealth-page-redesign.md

@@ -0,0 +1,257 @@
+# 富维度页面 Redesign 设计文档
+
+- **日期**：2026-08-09
+- **主题**：富维度首页 `pages/wealth/index` 重新设计
+- **方案**：方案一「💧 财富之泉」（水元素主题）
+- **核心理念**：富属水 → 水=流动+积累 → 用水的意象表达财富增长与成长
+
+## 目标
+
+解决当前富页面的问题：
+1. **工具化**：一排排数字卡片+导航链接，视觉平淡
+2. **配色不一致**：富维度五行属水，色值 `#F59E0B`（琥珀金），但 PageBanner 用了蓝色 `#42A5F5`
+3. **无成长感**：只有静态快照数字，没有阶段/趋势表达
+4. **无视觉化财富表达**：缺乏视觉层次，子维度只是颜色变化的数字
+5. **与身/智/心详情页的视觉丰富度差距明显**
+
+## 设计原则
+
+- 沿用项目统一设计 Token（`uni.scss`：扁平圆角卡片、柔和蓝色系）
+- 富维度专属色系：主色 `#F59E0B`、渐变 `#F59E0B → #FBBF24`、水面 `#FEF3C7`、深琥珀文字 `#92400E`
+- **小程序限制**：禁止可选链 `?.`、禁止 CSS Grid（用 flexbox）、禁止 `:key` 表达式
+- 两端（家长/孩子）共用水元素视觉语言，数据源不同
+
+## 整体信息架构
+
+```
+┌──────────────────────────────────────────────┐
+│  🌊 财富之泉 顶部主视觉（能量环）              │
+│    环形进度 + 水波纹填充 + 财富总分/等级        │
+├──────────────────────────────────────────────┤
+│  📈 成长溪流（3 阶段水位：起步/汇流/奔涌）      │
+│    未来可替换为折线趋势图                      │
+├──────────────────────────────────────────────┤
+│  💧 财富子维度水滴（3 个，水满程度=分数）        │
+├──────────────────────────────────────────────┤
+│  💰 财富数据卡                                │
+│    家长：收益/提现/邀请                       │
+│    孩子：积分/任务/徽章                       │
+├──────────────────────────────────────────────┤
+│  🛍️ 功能入口（财富服务 8 宫格 + 底部菜单）      │
+└──────────────────────────────────────────────┘
+```
+
+**角色差异**：财富能量环、成长溪流两端共用（数据来源不同）；子维度水滴、财富数据卡按角色切换。
+
+## 第一节：🌊 财富能量环（顶部主视觉）
+
+全页视觉锚点，是"富"的第一印象。
+
+### 结构
+```
+┌──────────────────────────────┐
+│        ╭───────╮             │
+│       ╱  ════  ╲   ← 环形进度   │
+│      │  85/100  │  ← 财富总分    │
+│       ╲  ✦LV3  ╱   ← 等级      │
+│        ╰───────╯             │
+│                              │
+│   富足 · 财富之泉             │
+│   较上月 ↑ 5.2%               │
+└──────────────────────────────┘
+```
+
+### 视觉细节
+- **环形**：SVG/CSS 圆环，进度弧线用琥珀金→浅金渐变描边，末端水滴形端点
+- **填充**：环内极浅水波纹底纹（`#FEF3C7` 淡金），若隐若现波纹动画
+- **中心**：大号财富总分（如 85），下方小字等级（LV3 富足）
+- **底部**：金句"富足源于利他与坚持" + 环比变化（占位）
+- **配色**：`#F59E0B` 主色，渐变 `#F59E0B → #FBBF24`，水面 `#FEF3C7`
+
+### 数据
+- 财富总分：已有 `wealthScore`
+- 等级：由分数映射（如 0-30 播种 / 30-70 成长 / 70-100 富足）
+- 环比：占位 `↑ +5.2%`（待后端补充）
+
+### 交互
+- 环自带轻微呼吸动画
+- 点击可查看等级说明
+
+## 第二节：📈 成长溪流（3 阶段水位）
+
+用"水位线"展示财富积累的阶段性，弥补无趋势数据的不足。未来可平滑替换为折线图。
+
+### 结构
+```
+┌──────────────────────────────────────┐
+│  📈 成长溪流                          │
+│   ┌──────┐   ┌──────┐   ┌──────┐    │
+│   │ 起步  │ → │ 汇流  │ → │ 奔涌  │    │
+│   │  💧   │   │  🌊   │   │  🌊🌊  │    │
+│   │ 新人  │   │ 成长  │   │ 达人  │    │
+│   │ 阶段  │   │ 阶段  │   │ 阶段  │    │
+│   │ 0-30% │   │ 30-70%│   │ 70-100│    │
+│   └──────┘   └──────┘   └──────┘    │
+│   ─────▰▰▰▰▰▰▰▰▰─── 水位 65% ──     │
+│   💡 坚持分享，下一阶段"奔涌"在望       │
+└──────────────────────────────────────┘
+```
+
+### 视觉细节
+- **3 阶段卡片**：起步（水滴）→ 汇流（溪流）→ 奔涌（江河），箭头连接，递进感
+- **当前水位线**：水平进度条，水波纹渐变填充，显示当前百分比
+- **激励文案**：底部动态提示，根据当前阶段给出不同建议
+- **孩子端文案**："学习积累"→"小有收获"→"财富小达人"
+- **未来替换**：移除本区，直接放入折线趋势图，布局不变
+
+### 数据
+- 当前分数 `wealthScore` 映射到 0-100% 水位
+
+### 交互
+- 滑动查看不同阶段说明，点击阶段卡片查看对应成就
+
+## 第三节：💧 财富子维度水滴
+
+用"水滴"造型 + "水满程度"表达子维度分数。
+
+### 结构
+```
+┌──────────────────────────────────────────┐
+│  💧 财富维度构成                          │
+│   ┌──────┐    ┌──────┐    ┌──────┐      │
+│   │  💧   │    │  💧   │    │  💧   │      │
+│   │ ▓▓▓▓  │    │ ▓▓░░  │    │ ░░░░  │      │
+│   │ 85    │    │ 60    │    │ 35    │      │
+│   ├──────┤    ├──────┤    ├──────┤      │
+│   │金钱  │    │社会  │    │资源  │      │
+│   │收入  │    │成就  │    │网络  │      │
+│   │权重50%│   │权重30%│   │权重20%│      │
+│   └──────┘    └──────┘    └──────┘      │
+│   💡 金钱收入表现优秀，建议提升资源网络    │
+└──────────────────────────────────────────┘
+```
+
+### 视觉细节
+- **水滴造型**：圆角水滴形（上窄下圆），用 `border-radius` 实现
+- **水满程度**：内部从底部向上填充渐变色（`#F59E0B` 琥珀金），填充比例=分数
+- **分数**：水滴中央白色数字
+- **底部标签**：子维度名称 + 权重百分比
+- **智能提示**：底部一行文案，自动指出最高分和最低分项，给出建议
+- **孩子端标签**："学业成绩"、"社交筹码"、"规则博弈"，权重和文案同步调整
+
+### 配色
+- 填充：`#F59E0B` → `#FBBF24` 渐变
+- 空区域：`#FEF3C7` 淡金
+- 文字：白色（水上）/ `#92400E` 深琥珀（水下）
+
+## 第四节：💰 财富数据卡（按角色区分）
+
+### 家长端
+```
+┌──────────────────────────────────────────┐
+│  💰 财富数据（家长）                      │
+│  ┌────────────────────────────────────┐  │
+│  │  💰 累计收益                        │  │
+│  │  ¥12,850.00                        │  │
+│  │  ─── 小趋势折线占位 ───             │  │
+│  │  较上月 +8.3%                       │  │
+│  └────────────────────────────────────┘  │
+│  ┌──────────┐  ┌──────────┐              │
+│  │ 可提现    │  │ 邀请人数  │              │
+│  │ ¥3,200   │  │ 18人     │              │
+│  │ 提现 →   │  │ 邀请 →   │              │
+│  └──────────┘  └──────────┘              │
+│  ┌────────────────────────────────────┐  │
+│  │  我的邀请码：ABCD1234     📋 复制  │  │
+│  └────────────────────────────────────┘  │
+└──────────────────────────────────────────┘
+```
+- **主卡**：累计收益独占一行，大号金色数字，下方预留微型趋势线（未来展示）
+- **副卡**：可提现和邀请人数并排，带"→"操作入口直接跳转
+- **邀请码**：底部条状卡片，与主卡形成水波纹状层次堆叠
+- **配色**：主卡 `#F59E0B` 浅底，副卡纯白底
+
+### 孩子端
+```
+┌──────────────────────────────────────────┐
+│  🎯 我的成长财富                          │
+│  ┌──────────┐  ┌──────────┐  ┌──────────┐│
+│  │  ⭐      │  │  📝      │  │  🏆      ││
+│  │ 积分     │  │ 任务完成  │  │ 徽章     ││
+│  │ 1,280    │  │ 23/30    │  │ 5        ││
+│  │ 累计积分  │  │ 本月完成  │  │ 已获得   ││
+│  └──────────┘  └──────────┘  └──────────┘│
+│  📊 本周成长趋势                           │
+│  ▁▂▃▂▄▅▆  （迷你柱状图占位）               │
+│  一 二 三 四 五 六 日                      │
+└──────────────────────────────────────────┘
+```
+- 三列并排：积分 / 任务完成 / 徽章
+- 下方迷你柱状图占位（本周成长趋势）
+
+## 第五节：🛍️ 功能入口（底部）
+
+### 结构
+```
+┌──────────────────────────────────────────┐
+│  🚀 财富服务                              │
+│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐   │
+│  │  📝  │ │  🛡️  │ │  🎨  │ │  🏪  │   │
+│  │记账  │ │保单  │ │创客  │ │商城  │   │
+│  │打卡  │ │管理  │ │中心  │ │首页  │   │
+│  └──────┘ └──────┘ └──────┘ └──────┘   │
+│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐   │
+│  │  🛒  │ │  📋  │ │  🔄  │ │  📊  │   │
+│  │购物车│ │我的  │ │售后  │ │积分  │   │
+│  │      │ │订单  │ │服务  │ │记录  │   │
+│  └──────┘ └──────┘ └──────┘ └──────┘   │
+│  ┌────────────────────────────────────┐  │
+│  │  👤 个人中心                ›      │  │
+│  ├────────────────────────────────────┤  │
+│  │  🚪 退出登录                       │  │
+│  └────────────────────────────────────┘  │
+└──────────────────────────────────────────┘
+```
+
+### 视觉细节
+- **合并**：将"增值服务"+"消费中心"合并为一个"财富服务"区域
+- **8 宫格**：2 行×4 列，图标矢量风格（不再纯 emoji），背景圆角浅金块
+- **图标**：建议用纯 CSS 图标或简单文本符号替代 emoji，保证跨端一致性
+- **底部菜单**：保留"个人中心""退出登录"，去掉"积分记录"（并入 8 宫格）
+- **间距**：8 宫格与底部菜单之间留白分层
+
+### 入口列表（按优先级）
+```
+第一行：记账打卡 | 保单管理 | 创客中心 | 商城首页
+第二行：购物车   | 我的订单 | 售后服务 | 积分记录
+```
+
+### 移除项
+- **退出切换按钮**（用户确认移除；原 `pages/wealth/index` 中的 `exit-switch` 区块）
+
+## 数据源对接
+
+| 区块 | 数据字段 | 状态 |
+|------|---------|------|
+| 财富能量环 | `wealthScore` | ✅ 已有 |
+| 成长溪流 | `wealthScore` | ✅ 已有 |
+| 子维度水滴（家长） | `wealthIncome` / `wealthAchievement` / `wealthNetwork` | ✅ 已有 |
+| 子维度水滴（孩子） | `wealthEducation` / `wealthSocial` / `wealthPoints` | ✅ 已有 |
+| 财富数据卡（家长） | `totalEarnings` / `availableAmount` / `referralCount` / `referralCode` | ✅ 已有 |
+| 财富数据卡（孩子） | 积分/任务/徽章 | ⚠️ 需确认现有接口 |
+| 成长溪流环比 | `↑ +5.2%` | ⚠️ 占位待后端 |
+| 趋势图 | 折线/柱状 | ⚠️ 占位待后端 |
+
+## 待实现组件
+
+基于现有 `pages/wealth/index.vue` 重构，可能需要新增/改造组件：
+- `WealthEnergyRing`（或内联）— 财富能量环
+- 成长溪流区（内联）
+- 改造 `WealthSubScores` → 水滴样式
+- 财富数据卡（家长/孩子分版）
+- 财富服务 8 宫格
+
+## 范围
+
+- **In scope**：`pages/wealth/index.vue` 模板/样式/脚本重构，相关组件改造
+- **Out of scope**：后端新增趋势接口、其他维度页面、TabBar 配置