# 富维度页面 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 配置