xuyunhui/aquagreen_wechat_app

Context

清道夫 App 前端基于 uni-app + Vue 3 + TypeScript + Tailwind CSS 构建，当前已按销售/调度/施工三端完成角色化首页、任务列表、任务详情、排班、我的等核心功能。V21-SOP 原型提供了完整的视觉参考：卡片化布局、蓝色渐变头部、渐变统计卡片、统一的状态色与圆角规范。本次 change 是一次纯样式层面的体验打磨，目标是让小程序在视觉上更接近原型质感，同时保持现有业务逻辑和胶囊安全布局不变。

Goals / Non-Goals

Goals:

统一全站卡片、按钮、标签、输入框的圆角、阴影与色阶。
优化首页头部与统计卡片，增强数据可视化表现力。
提升任务卡片状态识别度（紧急、已完成、超时等）。
优化排班日历与我的页视觉层次。
增加合理的点击/按压反馈，让交互更流畅。

Non-Goals:

不修改业务逻辑、状态机、API 接口或路由结构。
不调整胶囊安全区计算与相关布局。
不新增页面或功能模块。
不改动后端代码。

Decisions

颜色系统沿用 Tailwind 语义色 + 项目自定义色：
- 主色保持 primary（项目已配置为 blue-500 #3b82f6）。
- 渐变统计卡片使用内联 linear-gradient 实现，避免扩展 Tailwind 配置。
- 状态标签使用 bg-*-50 text-*-500 的轻量标签风格，与原型一致。
卡片统一为 rounded-xl shadow-sm bg-white：
- 原型中 12px 圆角和微阴影是核心视觉语言，统一替换当前大小不一的 rounded-lg/rounded-2xl 和缺失阴影的容器。
首页头部渐变背景:
- 销售/施工端首页顶部区域改为 bg-gradient-to-r from-blue-500 to-blue-600，文字反白，营造品牌氛围。
- 调度端控制台保持简洁专业感，但统一卡片与统计样式。
按钮统一为 rounded-xl 大圆角：
- 底部主操作按钮、表单确认按钮使用 rounded-xl，与原型一致。
- 顶部小操作按钮保持 rounded-lg 以节省空间。
点击反馈:
- 卡片和列表项使用 active:scale-95 或 active:bg-gray-50。
- 按钮使用 active:opacity-80 或 active:bg-*-600。
- 使用 Tailwind 的 transition 类保证过渡自然。
避免 WXSS 转义问题:
- 不使用 Tailwind 小数类（如 w-1.5）、任意值类（如 max-h-[80vh]）或 last:/hover: 变体。
- 需要特殊尺寸时使用内联 style。

Risks / Trade-offs

[Risk] 全站样式改动范围广，可能引入局部视觉回归 → Mitigation: 按页面模块分任务实施，每个任务后构建检查；最终在微信开发者工具中逐页预览。
[Risk] 渐变背景与自定义导航栏/状态栏高度配合不当 → Mitigation: 渐变区域仍使用 StatusBar + TopBar 结构，仅在 TopBar 内部使用渐变背景类，不改动高度计算。
[Risk] 部分uni-app组件（如 uni-card）自带样式，可能与 Tailwind 类冲突 → Mitigation: 通过组件 props 或外层容器覆盖，必要时改用自定义 view 卡片。
[Risk] 状态标签颜色过多导致视觉嘈杂 → Mitigation: 严格限制为蓝/绿/橙/红四色，与原型一致。

Migration Plan

无需迁移。本次为前端样式优化，构建完成后直接部署小程序即可。

Open Questions

是否需要同步调整登录页/启动页样式以匹配新的视觉系统？（本次不做，待后续确认）
原型中部分图标为 Font Awesome，项目使用 uni-icons，是否需要在关键位置引入 Font Awesome 图标以提升一致性？（本次优先使用现有 uni-icons 映射）

design.md 3.6 KB 文件歷史 原始文件