cfc/docs/superpowers/plans/2026-08-08-tabbar-restructure.md

TabBar 重构实施计划

基于 2026-08-08-tabbar-redesign.md 设计文档 状态：completed · 2026-08-08 执行完成 提交：db6c2d3c feat(frontend): TabBar 重构 - 4Tabs + 中间五维启动器 + 自定义TabBar

总体目标

将小程序底部 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 分包调整

⚠️ 现状核对（2026-08-08 评审）：pages/mind-detail、pages/body-detail、pages/wisdom-detail 已存在为分包（分别含 11/6/4 页），不是新增；只有 pages/wealth 分包是真正需要新建的。pages/health 分包已存在含 18 页，主包新增 pages/health/index 与分包 root: "pages/health" 同目录共存 —— uni-app 允许（主包声明 pages/health/index.vue，分包声明其他页面），首次打包需验证无路径冲突。

操作	分包	说明
移除	pages/growth	删除 { "path": "index" } 条目（index 移入主包），其余 5 页保留
移除	pages/profile	删除 { "path": "profile" } 条目（profile 移入主包），其余 3 页保留（index/report-management/report-detail）
加入	pages/mind-detail	已存在，添加 { "path": "index", "style": { "navigationBarTitleText": "心" } }（指向 pages/mind/index.vue 物理文件，从主包 pages 数组移除）
加入	pages/body-detail	已存在，添加 { "path": "index", "style": { "navigationBarTitleText": "身" } }（指向 pages/body/index.vue）
加入	pages/wisdom-detail	已存在，添加 { "path": "index", "style": { "navigationBarTitleText": "智" } }（指向 pages/wisdom/index.vue）
新建	pages/wealth 分包	真正新建，含 { "path": "index", "style": { "navigationBarTitleText": "富" } }（指向 pages/wealth/index.vue）

2.4 主包五维页移除（与 2.3 配套）

从主包 pages 数组移除以下 4 个条目（物理文件不动，路径归属转移到对应分包）：

• pages/mind/index → pages/mind-detail 分包
• pages/body/index → pages/body-detail 分包
• pages/wisdom/index → pages/wisdom-detail 分包
• pages/wealth/index → pages/wealth 分包（新建）

注意：分包页面路径 = root + "/" + path。加入 pages/mind-detail 的 { path: "index" } 实际指向 pages/mind-detail/index.vue，因此物理文件需要移动：pages/mind/index.vue → pages/mind-detail/index.vue（同理 body/wisdom/wealth）。移动后原目录若为空则删除。

阶段 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 语法/结构校验（cfc-frontend AGENTS.md 强制：Agent 禁止执行 npm run build:mp-weixin，打包必须用 HBuilderX）

# 检查所有修改过的 .vue 文件的 script 块语法
for f in $(git diff --name-only -- '*.vue'); do
  node -e "var s=require('fs').readFileSync('$f','utf8');var m=s.match(/<script>([\s\S]*?)<\/script>/);if(m)try{new Function(m[1])}catch(e){console.error('SYNTAX ERROR in $f:',e.message)}"
done

9.2 路由完整性检查

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

预期：无输出

9.3 主包体积确认

• 在 HBuilderX 中打包后检查 unpackage/dist/dev/mp-weixin/ 主包体积是否 < 1.5MB

依赖关系

阶段1 → 阶段3（nav.js 是 switchTab 改造的前提）
     ↘ 阶段4（custom-tab-bar 需要 nav.js）
阶段2 → 阶段3（pages.json 改完后 switchTab 才失效）
阶段5、6、7 可并行
阶段8 独立
阶段9 最后

回滚方案

若构建失败：

1. 恢复 pages.json 到 git HEAD
2. 恢复 custom-tab-bar/index.vue 到 git HEAD
3. 删除新增文件
4. 重新构建确认

完成情况（2026-08-08）

阶段	项目	状态	备注
1	utils/nav.js	✅	路径正确
1	TabBar 图标（tab-home/tab-health）	✅	占位图，需设计师替换
2	pages.json 主包 5→4 页	✅	首页/健康/成长/我的
2	tabBar.list 4 项 + custom:true	✅	启用自定义TabBar
2	分包调整	✅	growth/profile移除index/profile；mind/body/wisdom/wealth 加入/新建分包
2	物理文件移动	✅	mind/body/wisdom → 对应分包目录
3	switchTab 引用替换	✅	3 处 nav.goPage + 2 处 navigateTo
3	全局 grep 兜底	✅	0 残留
4	custom-tab-bar 重写	✅	4Tab + ⭐按钮 + 五维半屏浮层；规划师5Tab不变
5	新建健康页	✅	含概览卡片、功能入口网格、最近报告、诊断建议、未登录态
6	增强成长页	✅	含待办卡片、功能入口网格、原有成长档案保留
7	推荐分布调整	✅	活动→成长页，健康科普→健康页
8	profile showServices=true	✅
9.1	语法校验	⚠️	结构闭合性验证通过；new Function 不支持 ES module import
9.2	路由完整性	✅	0 残留 switchTab
9.3	主包体积确认	⬜	需 HBuilderX 打包后验证 < 1.5MB

未完成项： tab 图标需设计师替换正式图标；主包体积需 HBuilderX 验证。