---
comet_change: weapp-fixes-and-schedule-creation
role: technical-design
canonical_spec: openspec
archived-with: 2026-06-25-weapp-fixes-and-schedule-creation
status: final
---

# 清道夫 App 5 项修复与排班新增设计文档

## 变更概述

本次变更修复清道夫 App 的 5 个 UI/交互问题，并补全后端缺失的车辆下拉接口：

1. tab 页面 TopBar 出现多余返回按钮。
2. 任务页发布/新增按钮仍被微信胶囊遮挡。
3. 排班页无法新增排班。
4. 自定义 tabBar 切换后高亮不同步。
5. 退出登录无动画、卡顿。

## 上下文

- 前端：uni-app Vue 3 + TypeScript，自定义导航栏 `navigationStyle: custom`。
- 通用组件：`TopBar.vue`、`CapsuleSafeArea.vue`。
- 自定义 tabBar：`src/custom-tab-bar/index.js`。
- 后端：Java Spring Boot + MyBatis-Plus。
- 用户要求：所有 API 以后端接口为准；缺失则后端补全。

## 目标与非目标

**目标：**
- tab 页面 TopBar 不显示返回按钮。
- 任务页新增/发布按钮完全避开微信胶囊。
- 排班页可按 V21-SOP 原型新增排班并保存到后端。
- tabBar 高亮与当前页面实时同步。
- 退出登录动画流畅、无卡顿。
- 后端补全 `/vehicle/simple-list`。

**非目标：**
- 不重构导航/tabBar 整体架构。
- 不改变任务/排班核心业务状态机。
- 不新增排班以外的调度功能。

## 技术方案

### 1. TopBar 返回按钮

- 修改 `src/components/common/TopBar.vue`，将 `showBack` 默认值从 `true` 改为 `false`。
- tab 页面无需传入；非 tab 页面若需返回，显式传入 `:showBack="true"`。
- 全局搜索 `<TopBar` 使用处，为需要返回的非 tab 页面补充属性。

### 2. 任务页发布按钮胶囊遮挡

- 确认 `TaskListView.vue` 的发布/新增按钮已放入 `TopBar` 的 `right` slot。
- 确认 `TopBar.vue` 的 right slot 外层已包裹 `<CapsuleSafeArea>`。
- 若 `CapsuleSafeArea` 计算的安全宽度仍不足，检查 `safeWidth` 公式与微信胶囊边界，必要时调整按钮内边距或字体大小，确保按钮完整可见且可点击。

### 3. 排班页新增排班

在 `ScheduleView.vue` 内实现新增排班弹窗：

**表单字段（对齐后端 `DispatchSchedule`）：**
| 原型字段 | 提交字段 | 说明 |
|---|---|---|
| 班组 | `teamId` / `teamName` | 下拉 `/team/simple-list` |
| 工作日期 | `workDate` | `uni-datetime-picker` 或日期选择器，格式 `yyyy-MM-dd` |
| 班次类型 | `shiftType` | 月计划 → `month_plan`；应急 → `emergency` |
| 车辆 | `vehicleIds` | 多选，调用 `/vehicle/simple-list` |
| 人员 | `staffIds` | 多选，调用 `/staff/simple-list` |
| 备注 | `remark` | 文本输入 |
| 状态 | `status` | 默认 `idle` 或 `0`，与后端约定 |

**API 调整：**
- 更新 `src/api/schedule.ts` 的 `createSchedule` 参数，改为接收 `DispatchSchedule` 对象。
- 更新 `src/api/vehicle.ts`，新增/复用 `getVehicleSimpleList()` 调用 `/vehicle/simple-list`。

**后端补全：**
- `VehicleController.java` 新增 `GET /vehicle/simple-list`，返回 `List<Map<String, Object>>`，结构 `{ value: vehicleId, label: plateNo }`。
- `VehicleService.java` 新增 `simpleList()` 查询未删除车辆列表。

### 4. 自定义 tabBar 高亮同步

- 在每个 tab 页面的 `onShow` 生命周期中调用 `this.getTabBar()?.setData({ selected: <index> })`。
- `custom-tab-bar/index.js` 保持 `selected` 数据字段响应式，无需额外逻辑。
- tab 索引映射：home=0，task=1，schedule=2，my=3（以当前代码为准）。

### 5. 退出登录卡顿

- 调整 `ProfileView.vue` 中 `logout` 方法顺序：
  1. 先调用 `uni.reLaunch({ url: '/pages/login/login' })` 触发页面切换动画。
  2. 再调用 `authStore.doLogout()` 清理 token、用户信息。
  3. toast 提示在跳转后可选显示或省略，避免阻塞主线程。

## 数据流

```
[ScheduleView] 打开弹窗
    ├── GET /team/simple-list  → 班组下拉
    ├── GET /vehicle/simple-list → 车辆多选
    ├── GET /staff/simple-list  → 人员多选
    └── POST /schedule         → 保存排班
            └── GET /schedule/date/{workDate} → 刷新列表
```

## 测试策略

- `npm run type-check` 无 TS 错误。
- `npm run build:mp-weixin` 构建通过。
- 微信开发者工具真机预览：
  - tab 页面无返回按钮。
  - 任务页发布按钮可点击、不与胶囊重叠。
  - 排班新增完整流程：选择班组/日期/类型/车辆/人员 → 保存 → 列表刷新。
  - 切换 tab 时 tabBar 高亮即时更新。
  - 退出登录动画流畅。
- 后端：`mvn compile` 通过，`/vehicle/simple-list` 返回正确格式。

## 风险与缓解

| 风险 | 缓解 |
|---|---|
| `TopBar` 默认关闭返回后，非 tab 页面遗漏补充 | 全局搜索使用处并逐一确认 |
| 车辆下拉后端接口未部署 | 本次同时修改前端与后端，按用户要求后端补全 |
| tabBar `getTabBar()` 在页面未挂载时为 null | 使用可选链 `?.setData` |
| 退出登录清理逻辑在跳转后执行失败 | 确保 `authStore.doLogout()` 不依赖当前页面上下文 |

## Spec Patch

无。delta spec `schedule-creation` 已覆盖新增排班需求；其余修复为既有能力实现层修正，未改变 spec 级需求。