TabBar 重构实施计划

基于 2026-08-08-tabbar-redesign.md 设计文档状态：pending · 待执行

总体目标

将小程序底部 TabBar 从 5 个五维标签（行/心/身/智/富）重构为 4 个功能标签（首页/健康/成长/我的）+ 中间五维启动器按钮。

阶段分解

阶段 1：基础设施

1.1 创建 utils/nav.js 统一导航工具

/**
 * 统一导航工具
 * TabBar 页面列表（4个新Tab）
 */
var TAB_BAR_PAGES = [
  '/pages/index-home/index',
  '/pages/health/index',
  '/pages/growth/index',
  '/pages/profile/profile'
]

/**
 * 跳转到维度页面（五维页已移出 TabBar，统一用 navigateTo）
 * 行 = index-home（仍是 TabBar 页，用 switchTab）
 * 心/身/智/富 = 分包页，用 navigateTo
 */
function goDimension(dimCode) {
  var dimMap = {
    action: '/pages/index-home/index',
    mind: '/pages/mind/index',
    body: '/pages/body/index',
    wisdom: '/pages/wisdom/index',
    wealth: '/pages/wealth/index'
  }
  var url = dimMap[dimCode]
  if (!url) return
  if (TAB_BAR_PAGES.indexOf(url) !== -1) {
    uni.switchTab({ url: url })
  } else {
    uni.navigateTo({ url: url })
  }
}

function goPage(url) {
  if (!url) return
  if (TAB_BAR_PAGES.indexOf(url) !== -1) {
    uni.switchTab({ url: url })
  } else {
    uni.navigateTo({ url: url })
  }
}

module.exports = {
  TAB_BAR_PAGES: TAB_BAR_PAGES,
  goDimension: goDimension,
  goPage: goPage
}

1.2 准备 TabBar 图标

新增：static/tab-home.png / static/tab-home-active.png
新增：static/tab-health.png / static/tab-health-active.png
复用：static/tab-growth.png / static/tab-growth-active.png（已有）
复用：static/tab-profile.png / static/tab-profile-active.png（已有）

阶段 2：pages.json 重构

2.1 修改主包 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": "我的" } }
  ]
}

2.2 修改 tabBar.list

"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" }
  ]
}

2.3 分包调整

操作	分包	说明
移除	`pages/growth`	删除 `{ "path": "index" }` 条目
移除	`pages/profile`	删除 `{ "path": "profile" }` 条目
新增	`pages/mind-detail`	添加 `{ "path": "index", "style": { "navigationBarTitleText": "心" } }`
新增	`pages/body-detail`	添加 `{ "path": "index", "style": { "navigationBarTitleText": "身" } }`
新增	`pages/wisdom-detail`	添加 `{ "path": "index", "style": { "navigationBarTitleText": "智" } }`
新建	`pages/wealth` 分包	含 `{ "path": "index", "style": { "navigationBarTitleText": "富" } }`

阶段 3：替换 switchTab 引用

3.1 index-home/index.vue — onFuncClick 中改用 nav.goPage()

3.2 wisdom/index.vue — onFuncClick 中改用 nav.goPage()

3.3 wisdom/self-quiz.vue — switchTab → navigateTo

3.4 wisdom-detail/self-quiz.vue — switchTab → navigateTo

3.5 全局 grep 兜底

grep -rn "switchTab.*/pages/\(mind\|body\|wisdom\|wealth\)" --include="*.vue" .

预期：无输出

阶段 4：自定义 TabBar 改造

4.1 重构 custom-tab-bar/index.vue

模板结构：

普通用户：4 Tab（首页/健康/成长/我的）+ 中间⭐按钮 + 五维半屏浮层
规划师：5 Tab（不变，不走自定义）

4.2 五维半屏浮层

5 个维度卡片（行草木火金水对应色）
slideUp 动画
点击关闭浮层 → navigateTo/switchTab 对应页面

阶段 5：新建健康页

5.1 创建 pages/health/index.vue

内容：

PageBanner（theme="body", tagline="科学测评·精准诊断"）
FamilyMemberStrip
健康概览卡片（综合评分、待处理报告、上次测评日期、连续打卡天数）
功能入口网格（8 个：申请测评、健康报告、健康调研、体检报告、肠道菌群、体征记录、五维测评、心智评估）
最近报告列表
诊断建议（AI 解读摘要）
未登录态：LoginGuideCard

阶段 6：增强成长页

6.1 改造 pages/growth/index.vue

从"档案查看"扩展为"方案执行中心"：

新增内容：

PageBanner（theme="action", tagline="方案·执行·成长"）
FamilyMemberStrip
今日待办卡片（打卡状态、待完成任务数、挑战数、饮食记录数）
功能入口网格（8 个：每日打卡、日常任务、家庭挑战、饮食记录、运动记录、作息记录、成长档案、冥想练习）
成长档案记录列表（原有）
创建成长档案按钮

保留原有：

孩子选择 → 成长档案记录列表
筛选 Tab（全部/手动/测评/上传/补充）

阶段 7：调整推荐分布

推荐分布原则：

🏷️ 推荐商品 → 首页（消费发现）
🎯 推荐活动 → 成长（活动是"可参与的行动"，与执行主题一致）
📖 推荐阅读-健康类 → 健康（诊断后延伸学习）
📖 推荐阅读-成长类 → 成长（方案执行的知识补充）
📖 推荐阅读-综合类 → 首页（信息流）

7.1 首页 index-home/index.vue

保留：商品推荐（DimensionProducts）
保留：综合类文章推荐（ArticleBookshelf）
移除：活动推荐（DimensionActivities → 移到成长页）

7.2 成长页 growth/index.vue

新增：活动推荐（DimensionActivities 组件，从首页移过来）
新增：成长类文章推荐（如图文育儿知识）

7.3 健康页 pages/health/index.vue

新增：健康类文章推荐（科普知识：体检、营养、疾病预防）

阶段 8：调整我的页

8.1 profile/profile.vue

将 ProfileMenu 的 showServices prop 改为 true

阶段 9：构建验证

9.1 构建

cd cfc-frontend && npm run build:mp-weixin

9.2 路由完整性检查

grep -rn "switchTab.*/pages/\(mind\|body\|wisdom\|wealth\)" --include="*.vue" .