TabBar 重新设计

状态：设计草案 · 待评审设计者：Sisyphus

一、现状分析

当前 TabBar 结构

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

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

当前问题

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

二、设计目标

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

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

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

"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 引用改造

# 搜索所有对五维页的 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：基础设施

创建 utils/nav.js 统一导航工具
准备新的 TabBar 图标（首页、健康）

阶段 2：pages.json 重构

修改主包 pages 数组（4 页）
修改 tabBar.list（4 项）
调整分包（五维页移入、成长/我的移出）

阶段 3：引用改造

替换所有 switchTab → navigateTo/nav.goPage
全局 grep 兜底检查

阶段 4：自定义 TabBar 改造

重构 custom-tab-bar/index.vue
添加五维半屏浮层

阶段 5：新建健康页

创建 pages/health/index.vue
实现健康概览、功能入口网格、最近报告

阶段 6：构建验证

npm run build:mp-weixin
路由完整性检查

2026-08-08-tabbar-redesign.md 28 KB Geçmiş Ham

TabBar 重新设计

一、现状分析

当前 TabBar 结构

当前问题

二、设计目标

二-A、Tab 定位逻辑

三、新 TabBar 结构

4 个 Tab 页

中间五维启动器

四、各 Tab 页详细设计

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

4.2 健康（pages/health/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 switchTab 引用改造

七、主包体积影响

八、边界情况

九、实施步骤

阶段 1：基础设施

阶段 2：pages.json 重构

阶段 3：引用改造

阶段 4：自定义 TabBar 改造

阶段 5：新建健康页

阶段 6：构建验证

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

Geçmiş Ham

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

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

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

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