## 1. 全局样式系统准备 - [ ] 1.1 检查项目 Tailwind 配置,确认 `primary` 色值与 `rounded-xl`、`shadow-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-95` 或 `active: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