tasks.md 2.4 KB

1. 全局样式系统准备

  • 1.1 检查项目 Tailwind 配置,确认 primary 色值与 rounded-xlshadow-sm 等工具类可用
  • 1.2 确认 app-container、卡片、按钮等全局类名规范,避免 WXSS 转义问题

2. 通用组件样式优化

  • 2.1 优化 StatusBar + TopBar 渐变背景支持(可选渐变/白色模式)
  • 2.2 统一 uni-card 或自定义卡片容器为 bg-white rounded-xl shadow-sm
  • 2.3 优化 StatusTag 状态标签配色(蓝/绿/橙/红)
  • 2.4 为常用按钮添加 active: 按压反馈
  • 2.5 为卡片/列表项添加 active:scale-95active:bg-gray-50 反馈

3. 首页样式优化

  • 3.1 销售端 SalesHome.vue:顶部改为渐变背景,统计卡片改为渐变,快捷入口统一图标容器
  • 3.2 调度端 DispatchHome.vue:统计卡片与快捷操作统一卡片/图标样式
  • 3.3 施工端 ConstructionHome.vue:顶部改为渐变背景,统计卡片样式统一

4. 任务页样式优化

  • 4.1 TaskListView.vue:筛选标签改为 rounded-full,选中态使用 bg-primary text-white
  • 4.2 SalesTaskCard.vue:增加应急红色左边框、已完成浅绿背景、点击反馈
  • 4.3 DispatchTaskCard.vue:增加应急红色左边框、状态背景区分、点击反馈
  • 4.4 ConstructionTaskCard.vue:增加应急红色左边框、状态背景区分、点击反馈

5. 排班页样式优化

  • 5.1 ScheduleView.vue:日历区域使用 bg-white rounded-xl shadow-sm 卡片包裹
  • 5.2 ScheduleView.vue:日期选中态改为蓝色填充白字,今天改为浅蓝背景蓝字
  • 5.3 ScheduleView.vue:排班列表项增加月计划/应急图标背景色区分与点击反馈
  • 5.4 ScheduleView.vue:新增/编辑弹窗按钮使用 rounded-xl,字段间距统一

6. 我的页样式优化

  • 6.1 ProfileView.vue:顶部改为深蓝渐变头部,头像与用户信息反白显示
  • 6.2 ProfileView.vue:功能入口列表改为统一卡片,列表项增加点击反馈
  • 6.3 ProfileView.vue:退出登录按钮使用 rounded-xl 大圆角

7. 验证与收尾

  • 7.1 运行 npm run type-check 确认无 TypeScript 错误
  • 7.2 运行 npm run build:mp-weixin 确认构建通过且 WXSS 无转义选择器
  • 7.3 在微信开发者工具中预览主要页面,确认视觉层次与交互反馈正常
  • 7.4 提交所有改动并合并到 master