aquagreen_wechat_app/openspec/changes/archive/2026-06-24-fix-missing-custom-tabbar/design.md

Fix: 自定义 tabBar 不显示

根因

src/custom-tab-bar/index.vue 使用的是 Vue 单文件组件（SFC）格式。但当前 @dcloudio/uni-app 版本（3.0.0-4080420251103001）在编译到微信小程序时，并未将 custom-tab-bar/index.vue 编译为微信小程序原生组件格式（wxml/wxss/js/json），而是原样复制为 .vue 文件输出到 dist/build/mp-weixin/custom-tab-bar/index.vue。微信小程序运行时无法识别 .vue 文件，因此自定义 tabBar 完全不渲染。

验证：构建产物 dist/build/mp-weixin/custom-tab-bar/ 下仅有 index.vue 与 index.json，缺少微信小程序所需的 index.wxml、index.wxss、index.js。

修复方案

将 src/custom-tab-bar/index.vue 替换为微信小程序原生自定义 tabBar 组件：

• src/custom-tab-bar/index.wxml：tabBar 结构
• src/custom-tab-bar/index.wxss：tabBar 样式
• src/custom-tab-bar/index.js：读取 user 缓存判断角色、切换 tab、高亮当前 tab
• src/custom-tab-bar/index.json：保持 { "component": true }

保留原有业务逻辑：

• 销售/施工角色显示 3 个 tab：首页、任务、我的
• 调度角色显示 4 个 tab：首页、排班、任务、我的
• 使用静态图标资源 src/static/tabbar/*.png 替换字符图标

实施计划

1. 删除 src/custom-tab-bar/index.vue。
2. 新建 src/custom-tab-bar/index.wxml、index.wxss、index.js。
3. 运行 npm run type-check 与 npm run build:mp-weixin。
4. 检查构建产物中 custom-tab-bar/ 是否生成 wxml/wxss/js/json。
5. 提交修复。

验收标准

• dist/build/mp-weixin/custom-tab-bar/ 下包含 index.wxml、index.wxss、index.js、index.json。
• 微信开发者工具/真机预览中，tabBar 页面底部出现自定义 tabBar。
• 切换 tab 时高亮状态正确。
• 调度角色登录后显示 4 个 tab（首页/排班/任务/我的）。