# 清道夫 App 自定义 tabBar 开发文档

## 目标

实现按角色动态显示的底部 tabBar：
- **销售端 / 施工端**：3 个 tab（首页、任务、我的）
- **调度端**：4 个 tab（首页、排班、任务、我的）

## 技术方案

uni-app 微信小程序支持自定义 tabBar，通过 `custom-tab-bar` 组件实现。

### 1. 启用自定义 tabBar

在 `src/pages.json` 中：
- 设置 `tabBar.custom = true`
- 保留 `tabBar.list` 作为基础配置（微信小程序要求），但删除 `iconPath` / `selectedIconPath`，仅保留 `pagePath` 和 `text`

### 2. 新建自定义 tabBar 组件

文件：`src/custom-tab-bar/index.vue`

组件逻辑：
- 读取 `authStore.userRole`
- 根据角色返回不同的 tab 列表
- 使用 `uni.switchTab` 切换页面
- 高亮当前选中的 tab

### 3. tab 配置

| 角色 | tab 列表 |
|------|---------|
| sales | 首页 (`/pages/home/home`)、任务 (`/pages/task/task`)、我的 (`/pages/my/my`) |
| construction | 首页 (`/pages/home/home`)、任务 (`/pages/task/task`)、我的 (`/pages/my/my`) |
| dispatch | 首页 (`/pages/home/home`)、排班 (`/subPackages/pages-dispatch/schedule`)、任务 (`/pages/task/task`)、我的 (`/pages/my/my`) |

### 4. 关键约束

- 自定义 tabBar 中的页面必须是 `pages.json` 中 `tabBar.list` 已注册的页面
- 但 `subPackages/pages-dispatch/schedule` 是分包页面，**不能**直接放进 `tabBar.list`
- 解决方案：在 `pages` 主包中建一个轻量壳页 `pages/schedule/schedule.vue`，内容直接渲染调度端排班组件；调度端原 `subPackages/pages-dispatch/schedule.vue` 保留或重定向

### 5. 需要修改/新建的文件

| 文件 | 操作 | 说明 |
|------|------|------|
| `src/pages.json` | 修改 | `tabBar.custom = true`，调整 `tabBar.list` |
| `src/custom-tab-bar/index.vue` | 新建 | 自定义 tabBar 组件 |
| `src/custom-tab-bar/index.json` | 新建 | 组件配置（component: true） |
| `src/pages/schedule/schedule.vue` | 新建 | 排班 tabBar 壳页（主包） |
| `src/components/dispatch/ScheduleView.vue` | 新建 | 排班实际内容组件 |
| `src/subPackages/pages-dispatch/schedule.vue` | 修改 | 复用 `ScheduleView` 组件 |
| `src/pages/home/home.vue` | 无需修改 | 已按角色渲染 |
| `src/pages/task/task.vue` | 无需修改 | 已按角色渲染 |
| `src/pages/my/my.vue` | 无需修改 | 已按角色渲染 |

### 6. 开发步骤

1. 新建 `src/components/dispatch/ScheduleView.vue`，将 `subPackages/pages-dispatch/schedule.vue` 的内容抽成组件
2. 新建 `src/pages/schedule/schedule.vue`，引入 `ScheduleView`
3. 修改 `subPackages/pages-dispatch/schedule.vue`，改为引入 `ScheduleView`
4. 新建 `src/custom-tab-bar/index.vue` 和 `index.json`
5. 修改 `src/pages.json`：
   - `tabBar.custom = true`
   - `tabBar.list` 注册 4 个页面：home、schedule、task、my
6. 验证构建和类型检查
7. 在微信开发者工具中测试三个角色 tabBar 显示是否正确

### 7. 风险点

- 自定义 tabBar 首次加载可能略有延迟
- 分包页面不能直接作为 tabBar 页，必须通过主包壳页中转
- 需要确保 `authStore.userRole` 在 tabBar 渲染时已经可用

### 8. 验证方式

- `npm run type-check`
- `npm run build:mp-weixin`
- 微信开发者工具：分别用 sales/dispatch/construction 角色登录，检查底部 tabBar 数量和跳转

---

文档生成时间：2026-06-24