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/交互问题，并补全后端缺失的车辆下拉接口：

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

上下文

前端：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 级需求。

2026-06-24-weapp-fixes-and-schedule-creation-design.md 5.2 KB Historia Raaka