design.md 4.8 KB

Context

清道夫 App 采用 uni-app Vue 3 + TypeScript 开发,页面使用 navigationStyle: custom 自定义导航栏。TopBar 组件为通用导航头,CapsuleSafeArea 负责计算微信胶囊安全区。自定义 tabBar 使用微信小程序 custom-tab-bar 组件。后端为 Java Spring Boot + MyBatis-Plus。

当前问题:

  • TopBar 默认 showBack: true,导致 tab 页面(首页、任务、排班、我的)出现多余返回按钮。
  • 任务页发布/新增按钮虽放入 TopBar 右侧插槽,但仍被胶囊遮挡,需要进一步调整。
  • 排班页 addSchedule() 仅提示“排班功能开发中”,未实现 V21-SOP 原型的新增排班流程。
  • 自定义 tabBar 在页面切换后高亮状态未同步更新。
  • 退出登录时先执行 authStore.doLogout()uni.showToast,再 uni.reLaunch,导致页面切换无动画、卡顿。

Goals / Non-Goals

Goals:

  • tab 页面 TopBar 不显示返回按钮,非 tab 页面保留返回能力。
  • 任务页新增/发布按钮完全避开微信胶囊,可正常点击。
  • 排班页可按原型新增排班并保存到后端。
  • tabBar 高亮与当前页面实时同步。
  • 退出登录动画流畅、无卡顿。
  • 后端缺失 /vehicle/simple-list 时补全该接口,保证前端下拉数据可用。

Non-Goals:

  • 不重构整个导航或 tabBar 架构。
  • 不改变任务/排班核心业务状态机。
  • 不新增排班以外的调度功能。

Decisions

  1. TopBar 默认不显示返回按钮

    • showBack 默认值改为 false;需要返回的页面显式传入 :showBack="true"
    • 理由:tab 页面是入口页,绝大多数场景不需要返回;显式开启更安全,避免遗漏。
  2. 任务页按钮胶囊安全区二次确认

    • 检查 TaskListView 是否正确将按钮放入 TopBar 的 right slot,并确认 CapsuleSafeArea 已包裹 right slot。
    • 如仍被遮挡,调整按钮容器为 CapsuleSafeArea 内部元素,确保 margin-left 生效。
  3. 排班新增采用弹窗表单

    • ScheduleView 内实现 uni-popup 或同项目弹窗组件,表单字段:班组(下拉 /team/simple-list)、工作日期(日期选择器)、班次类型(月计划/应急,映射 month_plan/emergency)、车辆(多选,调用 /vehicle/simple-list)、人员(多选,调用 /staff/simple-list)、备注(文本)。
    • 提交调用 POST /schedule,成功后刷新当前日期班表列表。
    • 理由:与原型一致,保持在当前页面完成新增,避免全页跳转。
  4. 后端车辆下拉接口补全 /vehicle/simple-list

    • VehicleController 新增该接口,返回 { value: vehicleId, label: plateNo }
    • 理由:前端现有 getAvailableVehicles() 调用不存在的 /vehicle/available;用户要求以后端接口为准,缺失则补全。
  5. tabBar 高亮同步

    • 在每个 tab 页面的 onShow 中调用 uni.setTabBarItem 不够,因为项目使用自定义 tabBar;需通过 getTabBar().setData({ selected: index }) 显式同步。
  6. 退出登录顺序调整

    • 先调用 uni.reLaunch({ url: '/pages/login/login' }),再执行 authStore.doLogout() 清理 token/state;toast 可在跳转后可选显示或省略。
    • 理由:reLaunch 是同步触发页面切换的 API,放在前面可立即释放当前页面;清理逻辑在后台完成不影响动画。

Risks / Trade-offs

  • [Risk] TopBar 默认 showBack=false 可能导致已有非 tab 页面依赖默认返回而失效。 → Mitigation:全局搜索 TopBar 使用处,为非 tab 页面补充 :showBack="true"
  • [Risk] 排班表单字段与后端 DispatchSchedule 不完全对齐。 → Mitigation:严格参考后端 entity 字段命名,提交前做一次字段映射。
  • [Risk] 自定义 tabBar getTabBar() 在页面未完全挂载时可能为 null。 → Mitigation:使用 this.getTabBar()?.setData 并加空值保护。
  • [Risk] 后端新增接口需要重新部署才能生效。 → Mitigation:前端同时保留降级方案(如使用 /vehicle/list?pageSize=100),但本次按用户要求优先补全后端接口。

Migration Plan

  1. 后端:新增 /vehicle/simple-list,重启服务。
  2. 前端:修改 TopBarTaskListViewScheduleViewcustom-tab-bar/index.jsProfileView 及相关 API 文件。
  3. 构建:npm run type-checknpm run build:mp-weixin 验证。
  4. 真机验证:微信开发者工具 + 真机预览,检查胶囊遮挡、tabBar 高亮、退出动画。

Open Questions

  • 任务页发布按钮在当前角色化首页改造后,是否仍命名为“发布”或已改为“新增”?以当前代码为准。
  • V21-SOP 原型文件路径需读取确认排班弹窗具体字段顺序与校验规则。