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: 保持不变

二、设计目标

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

二-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 页）：

{
  "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 配置

"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 保留	✅ 已实现

2026-08-08-tabbar-redesign.md 27 KB Histórico Raw

TabBar 重新设计

一、现状分析（改造前）

改造前 TabBar 结构

改造前问题

改造后结果

二、设计目标

二-A、Tab 定位逻辑

三、新 TabBar 结构

4 个 Tab 页

中间⭐五维启动器

四、各 Tab 页详细设计

4.1 首页（pages/index-home/index）

4.2 健康（pages/health-main/index）

4.3 成长（pages/growth/index）

4.4 我的（pages/profile/profile）

五、五维横排扇形菜单

交互流程

扇形布局

视觉规格

六、技术方案

6.1 pages.json 变更

6.2 tabBar 配置

6.3 核心文件

6.4 修改文件

6.5 图标资源

6.6 导航方式

七、主包体积影响

八、边界情况

九、实施状态

2026-08-08-tabbar-redesign.md 27 KB

Histórico Raw

4.1 首页（`pages/index-home/index`）

4.2 健康（`pages/health-main/index`）

4.3 成长（`pages/growth/index`）

4.4 我的（`pages/profile/profile`）