# TabBar 重新设计

> 状态：已对齐实现（2026-08-23 更新）
> 设计者：Sisyphus

## 一、现状分析（改造前）

### 改造前 TabBar 结构

```
原生 TabBar:  [行] [心] [身] [智] [富]
自定义 TabBar: 同上（登录态覆盖原生）
规划师 TabBar: [首页] [家庭] [团队] [成长档案] [我的]
```

主包 5 页：`index-home`（行）、`mind`（心）、`body`（身）、`wisdom`（智）、`wealth`（富）

### 改造前问题

| 问题 | 说明 |
|------|------|
| **"行"含义模糊** | 新用户不理解"行"代表什么，实际是首页+行动维度混在一起 |
| **五维即导航** | 用"五行维度"作为导航结构，而非用户任务导向 |
| **功能入口深** | 健康报告、测评、打卡、成长档案等核心功能藏在分包里，需要多次点击 |
| **缺少首页感** | 没有真正的"首页"，index-home 同时承担首页和"行"维度两个角色 |
| **导航损耗高** | 家长切换孩子、查看健康、管理成长需要在不同 Tab 间反复跳转 |

### 改造后结果

```
当前 TabBar:  [首页] [健康] [成长] [我的]  + 中间⭐五维扇形
主包 4 页：  index-home / health-main / growth-main / profile-main
五维 detail:  body-detail / mind-detail / wisdom-detail / action-detail / wealth
规划师 TabBar: 保持不变
```

## 二、设计目标

1. **任务导向**：导航按用户想"做什么"组织，而非"五维是什么"
2. **减少层级**：核心功能入口从 2-3 次点击减为 1 次
3. **保留五维**：五维是核心概念，但不作为主导航；通过中间按钮快速访问
4. **规划师不变**：规划师 TabBar 保持独立，不受影响
5. **渐进变化**：现有页面结构尽量复用，减少重构风险

## 二-A、Tab 定位逻辑

按照**主动健康干预闭环**模型组织四个 Tab：

```
闭环模型:  测评→诊断  →  方案→执行  →  成果追踪
              ↓              ↓              ↓
Tab 映射:    健康           成长            我的

汇总视角:  首页（家庭仪表板，全貌概览）
```

| Tab | 定位 | 内容范围（实际实现） |
|-----|------|-------------------|
| **首页** | 家庭仪表板 | 五维能量沙盘、家庭成员、今日任务、家庭挑战、活动/商品/文章推荐 |
| **健康** | 五维总入口 | 5 子 Tab（身/智/富/行/心）+ 各维度雷达图 + 五维相生相克展示 + 维度卡片 |
| **成长** | 方案与执行 | 今日成长概览、成长档案记录、打卡任务、饮食运动作息 |
| **我的** | 成果与进展 | 个人资料、家庭成员、成就徽章、健康等级、健康时间线、服务菜单 |

## 三、新 TabBar 结构

```
原生 TabBar:  [首页] [健康] [成长] [我的]  + 中间⭐五维启动器
自定义 TabBar: 同上（登录态覆盖原生）
规划师 TabBar: [首页] [家庭] [团队] [成长档案] [我的]（不变）
```

### 4 个 Tab 页

| Tab | 页面路径 | 状态 | 职责 |
|-----|----------|:----:|------|
| **首页** | `pages/index-home/index` | ✅ | 家庭仪表板：五维能量沙盘、家庭成员、今日任务、活动/商品/文章推荐 |
| **健康** | `pages/health-main/index` | ✅ | 五维总入口：5 子 Tab（身/智/富/行/心）+ 各维度雷达图 + 五维相生相克 |
| **成长** | `pages/growth-main/index` | ✅ | 方案与执行：今日成长概览、成长档案、打卡任务 |
| **我的** | `pages/profile-main/profile` | ✅ | 个人资料、家庭成员、成就徽章、健康等级、健康时间线、服务菜单 |

### 中间⭐五维启动器

点击弹出横排扇形（5 个圆形维度入口错落排列，弹性缩放动画）。跳转目标如下：

| 维度 | 编码 | 目标页面 | 跳转方式 |
|------|------|----------|----------|
| 💧 富 | wealth | `pages/wealth/index` | switchTab（TabBar 页） |
| 🌿 行 | action | `pages/action-detail/index` | navigateTo 分包 |
| 🔥 心 | mind | `pages/mind-detail/index` | navigateTo 分包 |
| 🌏 身 | body | `pages/body-detail/index` | navigateTo 分包 |
| ⚡ 智 | wisdom | `pages/wisdom-detail/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-main/index`）

**状态**：**已实现**（787 行）。当前 `pages/health-main/index` 是健康 Tab 的实际页面。

**定位**：健康总入口 + 五维健康体系展示。聚焦于"五维健康是什么"、"如何进入各维度"。

**页面结构**（登录态）：

```
┌─ TabBar ────────────────────────────┐
│  [🌏 身] [⚡ 智] [💧 富] [🌿 行] [🔥 心] │  ← 5 Tab 切换
├──────────────────────────────────────┤
│  当前 Tab 对应的雷达图                │
│  ┌──────────────────────────────┐    │
│  │     RadarChart              │    │
│  │  (身=7维/智=6维/富=4子维/    │    │
│  │   行=6维/心=13维)            │    │
│  └──────────────────────────────┘    │
│  无数据时显示"数据待采集"引导         │
└──────────────────────────────────────┘
```

**各 Tab 内容**：

| Tab | 编码 | 雷达维度 | 数据源 |
|:----:|:----:|---------|--------|
| 🌏 身 | body | 7维（生长发育/睡眠/视力/免疫/营养/肠胃/运动） | `getDimensionOverview` |
| ⚡ 智 | wisdom | 6维认知能力 | 认知测评结果 |
| 💧 富 | wealth | 4子维（技能/利他/收入/汇率） | 财富数据 |
| 🌿 行 | action | 6维关系质量 | 关系数据 |
| 🔥 心 | mind | 13维情绪与性格 | EMI 心理测评 |

**未登录态**：

```
┌─ 品牌定位语 ───────────────────────────┐
│  科学管理全家健康数据                    │
├────────────────────────────────────────┤
│  痛点卡：指标正常 ≠ 健康                │
│  "孩子反复生病，你扛了多少次了？"         │
├────────────────────────────────────────┤
│  功能预览（4个卡片）                   │
│  · 上传健康报告                        │
│  · 认知能力测评                        │
│  · 心理健康测评                        │
│  · 健康方案                            │
├────────────────────────────────────────┤
│  15题五维健康自检（自测入口）           │
├────────────────────────────────────────┤
│  五维健康体系（相生/相克关系展示）        │
│  · 五张维度卡片（身/智/富/行/心）        │
│    点击各卡 → 跳对应维度 detail 页       │
├────────────────────────────────────────┤
│  登录引导卡（LoginGuideCard）           │
└────────────────────────────────────────┘
```

**维度卡片跳转目标**：

| 卡片 | 目标页面 |
|------|----------|
| 身 | `pages/body-detail/index` |
| 智 | `pages/wisdom-detail/index` |
| 富 | `pages/wealth/index` |
| 行 | `pages/action-detail/member-action-detail` |
| 心 | `pages/mind-detail/index` |

---

### 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 页

---

## 五、五维横排扇形菜单

### 交互流程

```
用户点击中间⭐按钮
  → 全屏半透明遮罩（fadeIn，200ms）
  → 5 个维度圆形图标横排展开（弹性缩放 cubic-bezier，0.05s 递进）
  → 用户点击维度圆形
    → 扇形折叠（淡出 + 缩放回原点）
    → 跳转对应页面
  → 点击遮罩
    → 扇形折叠并关闭
```

### 扇形布局

```
                        🔥 心（-120rpx 高位）
         💧 富（-60rpx）  🌿 行（-60rpx）
                        🌏 身（-60rpx）  ⚡ 智（-60rpx）

实际为 5 个横排等距排列，mind 居中最高，body 居中略低
其余 3 个（wealth/action/wisdom）在两侧低位
```

### 视觉规格

| 维度 | 图标 | 色值 | 圆形尺寸 | 位置 |
|:----:|:----:|------|:------:|------|
| 💧 富 | `#F59E0B` | 88rpx 圆 | 低位（左） |
| 🌿 行 | `#10B981` | 88rpx 圆 | 中位（中偏左） |
| 🔥 心 | `#FF6B9D` | 88rpx 圆 | **高位**（居中） |
| 🌏 身 | `#FF8C42` | 88rpx 圆 | 中位（中偏右） |
| ⚡ 智 | `#6366F1` | 88rpx 圆 | 低位（右） |

- 圆形使用维度主题色纯色填充
- 圆形内含 emoji 图标
- 圆形下方显示维度名称（白色文字，`#fff`）
- 弹入动画：`transform: scale(0) → scale(1)`，`cubic-bezier(0.34, 1.56, 0.64, 1)`，每个圆形 0.05s 递增延迟
- 弹入后圆形下方标签跟随淡入（`translateY(-10rpx) → translateY(0)`）

---

## 六、技术方案

### 6.1 pages.json 变更

**主包 pages 数组**（从 5 页改为 4 页）：

```json
{
  "pages": [
    { "path": "pages/index-home/index", "style": { "navigationBarTitleText": "首页" } },
    { "path": "pages/health-main/index", "style": { "navigationBarTitleText": "健康" } },
    { "path": "pages/growth-main/index", "style": { "navigationBarTitleText": "成长档案" } },
    { "path": "pages/profile-main/profile", "style": { "navigationBarTitleText": "我的" } }
  ]
}
```

**五维 detail 页路径（分包）**：

| 维度 | 分包路径 | 说明 |
|:----:|---------|------|
| 🌏 身 | `pages/body-detail/index` | 7维雷达 + 指标 + 菌群 |
| ⚡ 智 | `pages/wisdom-detail/index` | 6维认知雷达 + 指标 |
| 💧 富 | `pages/wealth/index` | TabBar 页（能量环 + 子分 + 推广） |
| 🌿 行 | `pages/action-detail/index` | 关系图谱 + 6维雷达 + Products/Activities/Tasks |
| 🔥 心 | `pages/mind-detail/index` | 天盘 + EMI报告 + 13维雷达 + 肠脑轴 |

**主包 4 页**：`index-home` / `health-main` / `growth-main` / `profile-main/profile`

**五维 detail 页（分包）**：body-detail / mind-detail / wisdom-detail / action-detail / wealth 各自独立分包

**原 5 维主包页已移除**：mind/body/wisdom/wealth 从主包移入各自 detail 分包

### 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-main/index", "text": "健康", "iconPath": "static/tab-health.png", "selectedIconPath": "static/tab-health-active.png" },
    { "pagePath": "pages/growth-main/index", "text": "成长", "iconPath": "static/tab-growth.png", "selectedIconPath": "static/tab-growth-active.png" },
    { "pagePath": "pages/profile-main/profile", "text": "我的", "iconPath": "static/tab-profile.png", "selectedIconPath": "static/tab-profile-active.png" }
  ]
}
```

### 6.3 核心文件

| 文件 | 说明 | 状态 |
|------|------|:----:|
| `custom-tab-bar/index.vue` | 4 Tab + 中间⭐按钮 + 五维横排扇形 | 已实现 |
| `pages/health-main/index.vue` | 健康 Tab 页（5子Tab + 雷达图 + 五维体系） | 已实现 |
| `pages/index-home/index.vue` | 首页（家庭仪表板） | 已实现 |
| `utils/nav.js` | 统一导航工具 | 按需创建 |

### 6.4 修改文件

| 文件 | 变更内容 | 状态 |
|------|----------|:----:|
| `pages.json` | 主包 5→4 页，tabBar 4 项，五维页移入分包 | 已实现 |
| `custom-tab-bar/index.vue` | 4 Tab + 中间⭐按钮 + 五维扇形 | 已实现 |
| `pages/health-main/index.vue` | 健康 Tab 页（5 子 Tab + 雷达图） | 已实现 |
| `profile-main/profile.vue` | 成就区增加推广收益入口 | 部分实现 |

### 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 导航方式

五维 detail 页从主包移入分包后，`switchTab` 不再适用于这些页面。跳转统一使用 `navigateTo`（分包异步加载）。唯一例外：`pages/wealth/index` 仍为 TabBar 页，使用 `switchTab`。

| 维度 | 跳转方式 | 原因 |
|:----:|---------|------|
| 富 | `switchTab` | TabBar 页 |
| 行/心/身/智 | `navigateTo` | 分包页 |

---

## 七、主包体积影响

| 项目 | 旧结构（5维TabBar） | 当前（4 Tab + 扇形） |
|------|:-----------------:|:-----------------:|
| 主包页面数 | 5（mind/body/wisdom/action/wealth） | 4（首页/健康/成长/我的） |
| 主包体积 | ~188KB+ | ~75KB + health-main(~150KB) |
| 分包变化 | 无 | body-detail/mind-detail/wisdom-detail/action-detail/wealth 各分包 |
| 风险 | 主包过大风险 | 主包体积可控，无超限风险 |

---

## 八、边界情况

| 场景 | 处理 |
|------|------|
| **未登录用户** | 看到原生 4 Tab + 中间⭐按钮，无自定义 TabBar；点击功能页→引导登录 |
| **规划师用户** | 保持独立 5 Tab（首页/家庭/团队/成长档案/我的），中间⭐按钮不显示 |
| **孩子角色** | 与家长相同 4 Tab，内容按孩子视角展示 |
| **从扇形跳转"富"** | `switchTab` 到 TabBar 页 |
| **从扇形跳转"行/心/身/智"** | `navigateTo` 到分包 detail 页 |
| **分包异步加载** | 首次访问五维页时可能短暂 loading，微信分包机制自动处理 |
| **健康 Tab 内部 5 子 Tab** | `health-main` 页内维护独立 tab 状态（body/wisdom/wealth/action/mind），各自对应不同雷达维度 |

---

## 九、实施状态

| # | 步骤 | 状态 |
|:-:|------|:----:|
| 1 | pages.json 主包 5→4 页，tabBar 4 项 | ✅ 已实现 |
| 2 | 自定义 TabBar 重构（4 Tab + 中间⭐ + 扇形） | ✅ 已实现 |
| 3 | 五维页从主包移入分包（body-detail/mind-detail/wisdom-detail/action-detail） | ✅ 已实现 |
| 4 | wealth 保持 TabBar 页 | ✅ 已实现 |
| 5 | health-main 健康 Tab 页实现 | ✅ 已实现 |
| 6 | growth-main 成长 Tab 页 | ✅ 已实现 |
| 7 | profile-main 我的 Tab 页 | ✅ 已实现 |
| 8 | 规划师独立 TabBar 保留 | ✅ 已实现 |