|
|
@@ -0,0 +1,570 @@
|
|
|
+# TabBar 重新设计
|
|
|
+
|
|
|
+> 状态：设计草案 · 待评审
|
|
|
+> 设计者：Sisyphus
|
|
|
+
|
|
|
+## 一、现状分析
|
|
|
+
|
|
|
+### 当前 TabBar 结构
|
|
|
+
|
|
|
+```
|
|
|
+原生 TabBar: [行] [心] [身] [智] [富]
|
|
|
+自定义 TabBar: 同上（登录态覆盖原生）
|
|
|
+规划师 TabBar: [首页] [家庭] [团队] [成长档案] [我的]
|
|
|
+```
|
|
|
+
|
|
|
+主包 5 页：`index-home`（行）、`mind`（心）、`body`（身）、`wisdom`（智）、`wealth`（富）
|
|
|
+
|
|
|
+### 当前问题
|
|
|
+
|
|
|
+| 问题 | 说明 |
|
|
|
+|------|------|
|
|
|
+| **"行"含义模糊** | 新用户不理解"行"代表什么，实际是首页+行动维度混在一起 |
|
|
|
+| **五维即导航** | 用"五行维度"作为导航结构，而非用户任务导向 |
|
|
|
+| **功能入口深** | 健康报告、测评、打卡、成长档案等核心功能藏在分包里，需要多次点击 |
|
|
|
+| **缺少首页感** | 没有真正的"首页"，index-home 同时承担首页和"行"维度两个角色 |
|
|
|
+| **导航损耗高** | 家长切换孩子、查看健康、管理成长需要在不同 Tab 间反复跳转 |
|
|
|
+
|
|
|
+## 二、设计目标
|
|
|
+
|
|
|
+1. **任务导向**：导航按用户想"做什么"组织，而非"五维是什么"
|
|
|
+2. **减少层级**：核心功能入口从 2-3 次点击减为 1 次
|
|
|
+3. **保留五维**：五维是核心概念，但不作为主导航；通过中间按钮快速访问
|
|
|
+4. **规划师不变**：规划师 TabBar 保持独立，不受影响
|
|
|
+5. **渐进变化**：现有页面结构尽量复用，减少重构风险
|
|
|
+
|
|
|
+## 二-A、Tab 定位逻辑
|
|
|
+
|
|
|
+按照**主动健康干预闭环**模型组织四个 Tab：
|
|
|
+
|
|
|
+```
|
|
|
+闭环模型: 测评→诊断 → 方案→执行 → 成果追踪
|
|
|
+ ↓ ↓ ↓
|
|
|
+Tab 映射: 健康 成长 我的
|
|
|
+
|
|
|
+汇总视角: 首页（家庭仪表板，全貌概览）
|
|
|
+```
|
|
|
+
|
|
|
+| Tab | 定位 | 内容范围 |
|
|
|
+|-----|------|----------|
|
|
|
+| **首页** | 家庭仪表板 | 五维能量总览、家庭成员、待办任务、推荐内容 |
|
|
|
+| **健康** | 测评与诊断 | 测评申请、健康报告、诊断评分、调研问卷 |
|
|
|
+| **成长** | 方案与执行 | 成长方案、计划任务、打卡执行、饮食运动作息记录、成长档案 |
|
|
|
+| **我的** | 成果与进展 | 成就徽章、健康等级、成长报告、会员权益、家庭管理 |
|
|
|
+
|
|
|
+## 三、新 TabBar 结构
|
|
|
+
|
|
|
+```
|
|
|
+原生 TabBar: [首页] [健康] [成长] [我的] + 中间⭐五维启动器
|
|
|
+自定义 TabBar: 同上（登录态覆盖原生）
|
|
|
+规划师 TabBar: [首页] [家庭] [团队] [成长档案] [我的]（不变）
|
|
|
+```
|
|
|
+
|
|
|
+### 4 个 Tab 页
|
|
|
+
|
|
|
+| Tab | 页面路径 | 来源 | 职责 |
|
|
|
+|-----|----------|------|------|
|
|
|
+| **首页** | `pages/index-home/index` | 主包已有 | 家庭仪表板：五维能量总览、待办、推荐 |
|
|
|
+| **健康** | `pages/health/index` | **新建** | 健康干预闭环：测评→报告→打卡→饮食→运动→作息 |
|
|
|
+| **成长** | `pages/growth/index` | 从分包**移入**主包 | 成长档案记录、测评结果、里程碑 |
|
|
|
+| **我的** | `pages/profile/profile` | 从分包**移入**主包 | 个人资料、家庭管理、会员、订单、设置 |
|
|
|
+
|
|
|
+### 中间五维启动器
|
|
|
+
|
|
|
+点击弹出半屏浮层，显示 5 个维度入口：
|
|
|
+
|
|
|
+| 维度 | 编码 | 目标页面 | 跳转方式 |
|
|
|
+|------|------|----------|----------|
|
|
|
+| 🌿 行 | action | `pages/index-home/index` | switchTab（同首页） |
|
|
|
+| 🔥 心 | mind | `pages/mind/index` | navigateTo 分包 |
|
|
|
+| 🌏 身 | body | `pages/body/index` | navigateTo 分包 |
|
|
|
+| ⚡ 智 | wisdom | `pages/wisdom/index` | navigateTo 分包 |
|
|
|
+| 💧 富 | wealth | `pages/wealth/index` | navigateTo 分包 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 四、各 Tab 页详细设计
|
|
|
+
|
|
|
+### 4.1 首页（`pages/index-home/index`）
|
|
|
+
|
|
|
+**现状**：已有完整首页，内容非常丰富，是平台的核心仪表板。
|
|
|
+
|
|
|
+**定位**：家庭仪表板，以家庭为视角汇总主要信息——五维能量总览、家庭成员动态、待办事项、推荐内容。
|
|
|
+
|
|
|
+Tab 标签从"行"改为"首页"后，内容基本不变。Tab 图标用新设计的"首页"图标。
|
|
|
+
|
|
|
+**页面结构**：
|
|
|
+
|
|
|
+```
|
|
|
+┌─ 未登录态 ────────────────────────────┐
|
|
|
+│ PageBanner「家庭健康成长俱乐部」 │
|
|
|
+│ WuxingSandbox 预览模式 │
|
|
|
+│ → 活动/商品推荐 │
|
|
|
+│ → 登录按钮 │
|
|
|
+└────────────────────────────────────────┘
|
|
|
+
|
|
|
+┌─ 登录态 ──────────────────────────────┐
|
|
|
+│ PageBanner「知行合一·快乐成长」 │
|
|
|
+│ ├─ 会员入口（非会员显示开通） │
|
|
|
+│ ├─ 五维能量沙盘 Canvas（WuxingSandbox） │
|
|
|
+│ │ 五行星图 + 总体评分 + 成员列表 │
|
|
|
+│ ├─ 家庭成员选择条（FamilyMemberStrip） │
|
|
|
+│ ├─ 五维能量条（FamilyEnergyBar） │
|
|
|
+│ ├─ 家庭挑战任务（FamilyChallengeCard） │
|
|
|
+│ ├─ 今日行动任务（DimensionTasks） │
|
|
|
+│ │ 「更多」→ 任务列表 │
|
|
|
+│ ├─ 活动推荐（DimensionActivities） │
|
|
|
+│ │ 「更多」→ 活动列表 │
|
|
|
+│ ├─ 文章推荐（ArticleBookshelf） │
|
|
|
+│ │ 「更多」→ 文章列表 │
|
|
|
+│ ├─ 商品推荐（DimensionProducts） │
|
|
|
+│ ├─ 家庭圈子（CircleCard） │
|
|
|
+│ │ ├─ 我的圈子 │
|
|
|
+│ │ └─ 发现圈子 │
|
|
|
+│ └─ AI 浮动头像（AIFloatingAvatar） │
|
|
|
+└────────────────────────────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+**迁移注意**：
|
|
|
+- 无内容变更，仅 Tab 标签文字从"行"改为"首页"
|
|
|
+- 图标文件：`static/tab-home.png` / `static/tab-home-active.png`（需新增）
|
|
|
+- 五维浮层中"行"也指向此页（switchTab 处理）
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### 4.2 健康（`pages/health/index`）
|
|
|
+
|
|
|
+**状态**：**新建页面**。当前 `pages/health/` 分包下已有 19 个健康功能页面，但缺少聚合首页。
|
|
|
+
|
|
|
+**定位**：测评与诊断。聚焦于"评估当前状态"——申请测评、查看报告、了解诊断结果。
|
|
|
+
|
|
|
+**页面结构**（登录态）：
|
|
|
+
|
|
|
+```
|
|
|
+┌─ PageBanner ───────────────────────────┐
|
|
|
+│ theme="body" │
|
|
|
+│ tagline="科学测评 · 精准诊断" │
|
|
|
+│ quote="了解是改善的第一步" │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ FamilyMemberStrip │
|
|
|
+│ [👩 妈妈] [👨 爸爸] [👦 小明] [+] │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ ┌─ 健康概览卡片 ──────────────────┐ │
|
|
|
+│ │ 健康综合评分 85分 │ │
|
|
|
+│ │ 待处理报告 2 份 │ │
|
|
|
+│ │ 上次测评 {{日期}} │ │
|
|
|
+│ │ 连续打卡 7 天 │ │
|
|
|
+│ └──────────────────────────────────┘ │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 功能入口网格（3列） │
|
|
|
+│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
|
|
+│ │ 📋 │ │ 📊 │ │ 📝 │ │
|
|
|
+│ │ 申请 │ │ 健康 │ │ 健康 │ │
|
|
|
+│ │ 测评 │ │ 报告 │ │ 调研 │ │
|
|
|
+│ └──────┘ └──────┘ └──────┘ │
|
|
|
+│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
|
|
+│ │ 🔬 │ │ 🧬 │ │ 🌡️ │ │
|
|
|
+│ │ 体检 │ │ 肠道 │ │ 体征 │ │
|
|
|
+│ │ 报告 │ │ 菌群 │ │ 记录 │ │
|
|
|
+│ └──────┘ └──────┘ └──────┘ │
|
|
|
+│ ┌──────┐ ┌──────┐ │
|
|
|
+│ │ 📐 │ │ 🧠 │ │
|
|
|
+│ │ 五维 │ │ 心智 │ │
|
|
|
+│ │ 测评 │ │ 评估 │ │
|
|
|
+│ └──────┘ └──────┘ │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 最近报告 │
|
|
|
+│ ┌─ 报告卡片 ───────────────────────┐ │
|
|
|
+│ │ 📄 2026-08-01 体检报告 │ │
|
|
|
+│ │ 状态：已解析 查看详情 › │ │
|
|
|
+│ ├──────────────────────────────────┤ │
|
|
|
+│ │ 📄 2026-07-15 肠道菌群报告 │ │
|
|
|
+│ │ 状态：待确认 查看详情 › │ │
|
|
|
+│ └──────────────────────────────────┘ │
|
|
|
+│ 📋 查看全部报告 › │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 诊断建议（最近报告的 AI 解读摘要） │
|
|
|
+│ 💡 "根据最新体检报告，建议关注…" │
|
|
|
+└────────────────────────────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+**未登录态**：
|
|
|
+
|
|
|
+```
|
|
|
+┌─ PageBanner ───────────────────────────┐
|
|
|
+│ theme="body" │
|
|
|
+│ tagline="科学管理全家健康" │
|
|
|
+│ quote="身体健康是幸福的基础" │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ LoginGuideCard │
|
|
|
+│ "登录后查看全家健康数据" │
|
|
|
+│ · 申请专业测评 │
|
|
|
+│ · 查看健康报告和诊断结果 │
|
|
|
+│ · 了解家人健康状态 │
|
|
|
+│ [登录 / 注册] │
|
|
|
+└────────────────────────────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+**功能入口跳转目标**：
|
|
|
+
|
|
|
+| 入口 | 目标页面 | 说明 |
|
|
|
+|------|----------|------|
|
|
|
+| 📋 申请测评 | `/pages/assessment/purchase` | 购买/申请测评（对接原有测评流程） |
|
|
|
+| 📊 健康报告 | `/pages/health/report-list` | 所有健康报告列表 |
|
|
|
+| 📝 健康调研 | `/pages/health/report-survey` | 健康调研问卷 |
|
|
|
+| 🔬 体检报告 | `/pages/health/physical-exam-detail` | 体检报告详情 |
|
|
|
+| 🧬 肠道菌群 | `/pages/health/gut-index` | 肠道菌群报告 |
|
|
|
+| 🌡️ 体征记录 | `/pages/health/daily-checkin` | 体征打卡记录 |
|
|
|
+| 📐 五维测评 | `/pages/assessment/purchase` | 五维能量测评 |
|
|
|
+| 🧠 心智评估 | `/pages/mind-detail/emotion-report` | 心智维度评估报告 |
|
|
|
+
|
|
|
+**数据来源**：
|
|
|
+- `getMyMembership` — 会员身份
|
|
|
+- `getFamilyMembers` — 家庭成员列表
|
|
|
+- `getHealthScoreInfo` — 健康评分
|
|
|
+- `getHealthReportList` — 最近报告列表
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### 4.3 成长（`pages/growth/index`）
|
|
|
+
|
|
|
+**现状**：已有完整页面（分包中），含孩子列表、成长档案记录（按类型筛选）、创建档案按钮。
|
|
|
+
|
|
|
+**定位**：方案与执行。聚焦于"采取行动"——执行成长方案、完成每日任务、打卡记录、饮食运动作息追踪。
|
|
|
+
|
|
|
+**迁移为 Tab 页后的调整**：内容大幅扩展，从"档案查看"变为"方案执行中心"。
|
|
|
+
|
|
|
+**页面结构**：
|
|
|
+
|
|
|
+```
|
|
|
+┌─ PageBanner ───────────────────────────┐
|
|
|
+│ theme="action" │
|
|
|
+│ tagline="方案 · 执行 · 成长" │
|
|
|
+│ quote="知行合一，每天进步一点点" │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ FamilyMemberStrip │
|
|
|
+│ [👩 妈妈] [👨 爸爸] [👦 小明] [+] │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 今日待办卡片 │
|
|
|
+│ ┌─ 今日执行概览 ──────────────────┐ │
|
|
|
+│ │ ✅ 今日打卡 已完成 │ │
|
|
|
+│ │ 📋 待完成任务 3 项 │ │
|
|
|
+│ │ 🔥 进行中挑战 1 个 │ │
|
|
|
+│ │ 📊 今日饮食 已记录 2 餐 │ │
|
|
|
+│ └──────────────────────────────────┘ │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 功能入口网格（3列） │
|
|
|
+│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
|
|
+│ │ ✅ │ │ 📋 │ │ 🔥 │ │
|
|
|
+│ │ 每日 │ │ 日常 │ │ 家庭 │ │
|
|
|
+│ │ 打卡 │ │ 任务 │ │ 挑战 │ │
|
|
|
+│ └──────┘ └──────┘ └──────┘ │
|
|
|
+│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
|
|
+│ │ 🍽️ │ │ 🏃 │ │ 😴 │ │
|
|
|
+│ │ 饮食 │ │ 运动 │ │ 作息 │ │
|
|
|
+│ │ 记录 │ │ 记录 │ │ 记录 │ │
|
|
|
+│ └──────┘ └──────┘ └──────┘ │
|
|
|
+│ ┌──────┐ ┌──────┐ │
|
|
|
+│ │ 📈 │ │ 🧘 │ │
|
|
|
+│ │ 成长 │ │ 冥想 │ │
|
|
|
+│ │ 档案 │ │ 练习 │ │
|
|
|
+│ └──────┘ └──────┘ │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 成长档案（最近记录） │
|
|
|
+│ ┌─ 记录卡片 ───────────────────────┐ │
|
|
|
+│ │ 成长档案标题 [手动] │ │
|
|
|
+│ │ 得分: 85 2026-08-01 │ │
|
|
|
+│ ├──────────────────────────────────┤ │
|
|
|
+│ │ 测评报告标题 [测评] │ │
|
|
|
+│ │ 得分: 92 2026-07-15 │ │
|
|
|
+│ └──────────────────────────────────┘ │
|
|
|
+│ 📋 查看全部成长档案 › │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ 底部按钮 │
|
|
|
+│ [创建成长档案] │
|
|
|
+└────────────────────────────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+**无家庭/无孩子**：显示 FamilyEmptyState 或引导添加孩子。
|
|
|
+
|
|
|
+**功能入口跳转目标**：
|
|
|
+
|
|
|
+| 入口 | 目标页面 | 说明 |
|
|
|
+|------|----------|------|
|
|
|
+| ✅ 每日打卡 | `/pages/health/daily-checkin` | 每日健康打卡 |
|
|
|
+| 📋 日常任务 | `/pages/tasks/daily-tasks` | 日常任务列表 |
|
|
|
+| 🔥 家庭挑战 | `/pages/health/challenge-manage` | 家庭挑战管理 |
|
|
|
+| 🍽️ 饮食记录 | `/pages/diet/index` | 饮食推荐与记录 |
|
|
|
+| 🏃 运动记录 | `/pages/health/exercise-index` | 运动记录 |
|
|
|
+| 😴 作息记录 | `/pages/health/sleep-index` | 睡眠记录 |
|
|
|
+| 📈 成长档案 | `/pages/growth/index`（当前页切换） | 成长档案（筛选/查看） |
|
|
|
+| 🧘 冥想练习 | `/pages/health/meditation-index` | 冥想引导 |
|
|
|
+
|
|
|
+**迁移注意**：
|
|
|
+- 从 subpackage `pages/growth` 移入主包 `pages` 数组
|
|
|
+- 从 `pages/growth` 分包中移除 `index` 页面
|
|
|
+- 路由不变，直接设为 TabBar 页
|
|
|
+- 当前页面功能需大幅扩展（增加待办卡片、功能入口网格）
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### 4.4 我的（`pages/profile/profile`）
|
|
|
+
|
|
|
+**现状**：已有完整个人中心页（分包中），包含用户卡片、个人信息完善、成长报告、成就徽章、健康等级、健康时间线、菜单列表。
|
|
|
+
|
|
|
+**定位**：个人成果与进展。聚焦于"我的收获"——成就徽章、健康等级、成长报告、会员权益、家庭与订单管理。
|
|
|
+
|
|
|
+**页面结构**：
|
|
|
+
|
|
|
+```
|
|
|
+┌─ 未登录态 ────────────────────────────┐
|
|
|
+│ 👤 登录浠艾福 │
|
|
|
+│ 登录后可查看个人资料、积分记录等 │
|
|
|
+│ [登录 / 注册] │
|
|
|
+└────────────────────────────────────────┘
|
|
|
+
|
|
|
+┌─ 登录态 ──────────────────────────────┐
|
|
|
+│ ├─ ProfileHeader ──────────────────┤ │
|
|
|
+│ │ [头像] 昵称 │ │
|
|
|
+│ │ 角色：家长 │ │
|
|
|
+│ └──────────────────────────────────┘ │
|
|
|
+│ ├─ 个人信息完善卡片 ────────────────┤ │
|
|
|
+│ │ 已完善 8/14 个字段，点击继续补充 │ │
|
|
|
+│ └──────────────────────────────────┘ │
|
|
|
+│ ├─ ProfileGrowth ──────────────────┤ │
|
|
|
+│ │ 成长报告概览 │ │
|
|
|
+│ └──────────────────────────────────┘ │
|
|
|
+│ ├─ ProfileBadges ──────────────────┤ │
|
|
|
+│ │ 成就徽章墙 │ │
|
|
|
+│ └──────────────────────────────────┘ │
|
|
|
+│ ├─ HealthBadge ────────────────────┤ │
|
|
|
+│ │ 健康等级称号 + 进度条 │ │
|
|
|
+│ └──────────────────────────────────┘ │
|
|
|
+│ ├─ HealthTimeline ─────────────────┤ │
|
|
|
+│ │ 健康故事时间线 │ │
|
|
|
+│ └──────────────────────────────────┘ │
|
|
|
+│ └─ ProfileMenu ────────────────────┘ │
|
|
|
+│ ┌─ 个人 ──────────────────────┐ │
|
|
|
+│ │ 👨👩👧👦 家庭成员 › │ │
|
|
|
+│ │ 📅 测评预约 › │ │
|
|
|
+│ │ 📋 每日任务 › │ │
|
|
|
+│ │ 🎯 新手任务 › │ │
|
|
|
+│ │ 📋 报告管理 › │ │
|
|
|
+│ │ 📋 服务角色申请 › │ │
|
|
|
+│ ├─ 服务 ──────────────────────┤ │
|
|
|
+│ │ 👑 会员中心 › │ │
|
|
|
+│ │ 🏪 服务商中心 › │ │
|
|
|
+│ │ 🛒 订单管理 › │ │
|
|
|
+│ │ 📍 收货人管理 › │ │
|
|
|
+│ │ 🔄 售后记录 › │ │
|
|
|
+│ ├─ 设置 ──────────────────────┤ │
|
|
|
+│ │ 🔐 设置密码 › │ │
|
|
|
+│ │ 👁 对家庭成员可见 [开关] │ │
|
|
|
+│ │ 📨 邀请加入 › │ │
|
|
|
+│ │ 🚪 退出登录 › │ │
|
|
|
+│ └──────────────────────────────┘ │
|
|
|
+│ └─ AIFloatingAvatar ───────────────┘ │
|
|
|
+└────────────────────────────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+**Tab 页调整建议**：
|
|
|
+- `profile.vue` 中 `ProfileMenu` 的 `showServices` prop 当前为 `false`（隐藏"服务"板块——会员中心、订单、收货人、售后），改为 `true` 以显示完整菜单，承载"我的"Tab 的成果与权益入口
|
|
|
+- 顶部成果展示（成长报告、成就徽章、健康等级）已完整覆盖"个人成果与进展"定位，保持不变
|
|
|
+
|
|
|
+**迁移注意**：
|
|
|
+- 从 subpackage `pages/profile` 移入主包 `pages` 数组
|
|
|
+- 从 `pages/profile` 分包中移除 `profile` 页面
|
|
|
+- 路由不变，直接设为 TabBar 页
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 五、五维半屏浮层
|
|
|
+
|
|
|
+### 交互流程
|
|
|
+
|
|
|
+```
|
|
|
+用户点击中间⭐按钮
|
|
|
+ → 底部弹出半屏浮层（slideUp 动画，300ms）
|
|
|
+ → 显示 5 个维度卡片（行/心/身/智/富）
|
|
|
+ → 用户点击维度卡片
|
|
|
+ → 浮层关闭（slideDown 动画）
|
|
|
+ → 跳转对应页面
|
|
|
+ → 点击遮罩/关闭按钮
|
|
|
+ → 浮层关闭
|
|
|
+```
|
|
|
+
|
|
|
+### 浮层布局
|
|
|
+
|
|
|
+```
|
|
|
+┌────────────────────────────────────────┐
|
|
|
+│ 五维能量 ✕ │
|
|
|
+├────────────────────────────────────────┤
|
|
|
+│ ┌──────────┐ ┌──────────┐ ┌──────────┐│
|
|
|
+│ │ 🌿 行 │ │ 🔥 心 │ │ 🌏 身 ││
|
|
|
+│ │ 知行合一 │ │ 大爱传承 │ │ 主动健康 ││
|
|
|
+│ │ #10B981 │ │ #FF6B9D │ │ #FF8C42 ││
|
|
|
+│ └──────────┘ └──────────┘ └──────────┘│
|
|
|
+│ ┌──────────┐ ┌──────────┐ │
|
|
|
+│ │ ⚡ 智 │ │ 💧 富 │ │
|
|
|
+│ │ 赋能未来 │ │ 利他创富 │ │
|
|
|
+│ │ #6366F1 │ │ #F59E0B │ │
|
|
|
+│ └──────────┘ └──────────┘ │
|
|
|
+└────────────────────────────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+### 维度卡片视觉规格
|
|
|
+
|
|
|
+| 维度 | 图标 | 色值 | 背景色 |
|
|
|
+|------|------|------|--------|
|
|
|
+| 行 | 🌿 | `#10B981` | `rgba(16,185,129,0.15)` |
|
|
|
+| 心 | 🔥 | `#FF6B9D` | `rgba(255,107,157,0.15)` |
|
|
|
+| 身 | 🌏 | `#FF8C42` | `rgba(255,140,66,0.15)` |
|
|
|
+| 智 | ⚡ | `#6366F1` | `rgba(99,102,241,0.15)` |
|
|
|
+| 富 | 💧 | `#F59E0B` | `rgba(245,158,11,0.15)` |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 六、技术方案
|
|
|
+
|
|
|
+### 6.1 pages.json 变更
|
|
|
+
|
|
|
+**主包 pages 数组**（从 5 页改为 4 页）：
|
|
|
+
|
|
|
+```json
|
|
|
+{
|
|
|
+ "pages": [
|
|
|
+ { "path": "pages/index-home/index", "style": { "navigationBarTitleText": "首页" } },
|
|
|
+ { "path": "pages/health/index", "style": { "navigationBarTitleText": "健康" } },
|
|
|
+ { "path": "pages/growth/index", "style": { "navigationBarTitleText": "成长档案" } },
|
|
|
+ { "path": "pages/profile/profile", "style": { "navigationBarTitleText": "我的" } }
|
|
|
+ ]
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**移除出主包**：
|
|
|
+- `pages/mind/index` → 移入 `pages/mind-detail` 分包
|
|
|
+- `pages/body/index` → 移入 `pages/body-detail` 分包
|
|
|
+- `pages/wisdom/index` → 移入 `pages/wisdom-detail` 分包
|
|
|
+- `pages/wealth/index` → 移入新建 `pages/wealth` 分包
|
|
|
+
|
|
|
+**分包移除**：
|
|
|
+- `pages/growth` 分包：移除 `index` 页面
|
|
|
+- `pages/profile` 分包：移除 `profile` 页面
|
|
|
+
|
|
|
+**分包新增**：
|
|
|
+- `pages/wealth` 新建分包：含 `{ "path": "index", "style": { "navigationBarTitleText": "富" } }`
|
|
|
+
|
|
|
+### 6.2 tabBar 配置
|
|
|
+
|
|
|
+```json
|
|
|
+"tabBar": {
|
|
|
+ "color": "#7A7E83",
|
|
|
+ "selectedColor": "#F97316",
|
|
|
+ "borderStyle": "black",
|
|
|
+ "backgroundColor": "#FFFFFF",
|
|
|
+ "list": [
|
|
|
+ { "pagePath": "pages/index-home/index", "text": "首页", "iconPath": "static/tab-home.png", "selectedIconPath": "static/tab-home-active.png" },
|
|
|
+ { "pagePath": "pages/health/index", "text": "健康", "iconPath": "static/tab-health.png", "selectedIconPath": "static/tab-health-active.png" },
|
|
|
+ { "pagePath": "pages/growth/index", "text": "成长", "iconPath": "static/tab-growth.png", "selectedIconPath": "static/tab-growth-active.png" },
|
|
|
+ { "pagePath": "pages/profile/profile", "text": "我的", "iconPath": "static/tab-profile.png", "selectedIconPath": "static/tab-profile-active.png" }
|
|
|
+ ]
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 6.3 新建文件
|
|
|
+
|
|
|
+| 文件 | 说明 | 预估行数 |
|
|
|
+|------|------|----------|
|
|
|
+| `utils/nav.js` | 统一导航工具 | ~80 行 |
|
|
|
+| `pages/health/index.vue` | 健康 Tab 页 | ~400 行 |
|
|
|
+
|
|
|
+### 6.4 修改文件
|
|
|
+
|
|
|
+| 文件 | 变更内容 |
|
|
|
+|------|----------|
|
|
|
+| `pages.json` | 主包 5→4 页，tabBar 4 项，分包调整 |
|
|
|
+| `custom-tab-bar/index.vue` | 4 Tab + 中间按钮 + 五维浮层 |
|
|
|
+| `index-home/index.vue` | switchTab → nav.goPage |
|
|
|
+| `wisdom/index.vue` | switchTab → nav.goPage |
|
|
|
+| `wisdom/self-quiz.vue` | switchTab → navigateTo |
|
|
|
+| `wisdom-detail/self-quiz.vue` | switchTab → navigateTo |
|
|
|
+| `profile/profile.vue` | showServices 改为 true |
|
|
|
+| `pages/growth` 分包 | 移除 index 页 |
|
|
|
+| `pages/profile` 分包 | 移除 profile 页 |
|
|
|
+
|
|
|
+### 6.5 图标资源
|
|
|
+
|
|
|
+| 图标 | 路径 | 来源 |
|
|
|
+|------|------|------|
|
|
|
+| 首页 | `static/tab-home.png` / `tab-home-active.png` | **需新增** |
|
|
|
+| 健康 | `static/tab-health.png` / `tab-health-active.png` | **需新增** |
|
|
|
+| 成长 | `static/tab-growth.png` / `tab-growth-active.png` | 复用 teacher TabBar 现有 |
|
|
|
+| 我的 | `static/tab-profile.png` / `tab-profile-active.png` | 复用 teacher TabBar 现有 |
|
|
|
+
|
|
|
+### 6.6 switchTab 引用改造
|
|
|
+
|
|
|
+```bash
|
|
|
+# 搜索所有对五维页的 switchTab 调用
|
|
|
+grep -rn "switchTab.*/pages/\(mind\|body\|wisdom\|wealth\)" --include="*.vue" .
|
|
|
+```
|
|
|
+
|
|
|
+| 文件 | 行号 | 原代码 | 改后 |
|
|
|
+|------|------|--------|------|
|
|
|
+| `index-home/index.vue` | onFuncClick | `uni.switchTab({ url: item.page })` | `nav.goPage(item.page)` |
|
|
|
+| `wisdom/index.vue` | onFuncClick | `uni.switchTab({ url: item.page })` | `nav.goPage(item.page)` |
|
|
|
+| `wisdom/self-quiz.vue` | ~453 | `uni.switchTab({ url: '/pages/wisdom/index' })` | `uni.navigateTo({ url: '/pages/wisdom/index' })` |
|
|
|
+| `wisdom-detail/self-quiz.vue` | ~453 | `uni.switchTab({ url: '/pages/wisdom/index' })` | `uni.navigateTo({ url: '/pages/wisdom/index' })` |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 七、主包体积影响
|
|
|
+
|
|
|
+| 项目 | 当前 | 变更后 |
|
|
|
+|------|------|--------|
|
|
|
+| 主包页面数 | 5 | 4 |
|
|
|
+| 主包体积 | ~188KB | ~75KB + 健康页(估计 < 120KB) |
|
|
|
+| 分包变化 | mind/body/wisdom/wealth 在主包 | 移入各自分包 |
|
|
|
+| 风险 | — | 主包体积降低，无超限风险 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 八、边界情况
|
|
|
+
|
|
|
+| 场景 | 处理 |
|
|
|
+|------|------|
|
|
|
+| **未登录用户** | 看到原生 4 Tab + 中间按钮，无自定义 TabBar；点击功能页→引导登录 |
|
|
|
+| **规划师用户** | 保持独立 5 Tab（首页/家庭/团队/成长档案/我的），中间按钮不显示 |
|
|
|
+| **孩子角色** | 与家长相同 4 Tab，内容按孩子视角展示 |
|
|
|
+| **从五维浮层跳转"行"** | 即首页，用 switchTab |
|
|
|
+| **从五维浮层跳转"心/身/智/富"** | 用 navigateTo 至分包页 |
|
|
|
+| **分包异步加载** | 首次访问五维页时可能短暂 loading，微信分包机制自动处理 |
|
|
|
+| **成长/我的移到主包后** | 分包体积减小，加载更快；但主包体积增加约 2 页 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 九、实施步骤
|
|
|
+
|
|
|
+### 阶段 1：基础设施
|
|
|
+1. 创建 `utils/nav.js` 统一导航工具
|
|
|
+2. 准备新的 TabBar 图标（首页、健康）
|
|
|
+
|
|
|
+### 阶段 2：pages.json 重构
|
|
|
+3. 修改主包 pages 数组（4 页）
|
|
|
+4. 修改 tabBar.list（4 项）
|
|
|
+5. 调整分包（五维页移入、成长/我的移出）
|
|
|
+
|
|
|
+### 阶段 3：引用改造
|
|
|
+6. 替换所有 switchTab → navigateTo/nav.goPage
|
|
|
+7. 全局 grep 兜底检查
|
|
|
+
|
|
|
+### 阶段 4：自定义 TabBar 改造
|
|
|
+8. 重构 `custom-tab-bar/index.vue`
|
|
|
+9. 添加五维半屏浮层
|
|
|
+
|
|
|
+### 阶段 5：新建健康页
|
|
|
+10. 创建 `pages/health/index.vue`
|
|
|
+11. 实现健康概览、功能入口网格、最近报告
|
|
|
+
|
|
|
+### 阶段 6：构建验证
|
|
|
+12. `npm run build:mp-weixin`
|
|
|
+13. 路由完整性检查
|
