## Context

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

## Goals / Non-Goals

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

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

## Decisions

1. **颜色系统沿用 Tailwind 语义色 + 项目自定义色**：
   - 主色保持 `primary`（项目已配置为 blue-500 #3b82f6）。
   - 渐变统计卡片使用内联 `linear-gradient` 实现，避免扩展 Tailwind 配置。
   - 状态标签使用 `bg-*-50 text-*-500` 的轻量标签风格，与原型一致。

2. **卡片统一为 `rounded-xl shadow-sm bg-white`**：
   - 原型中 12px 圆角和微阴影是核心视觉语言，统一替换当前大小不一的 `rounded-lg`/`rounded-2xl` 和缺失阴影的容器。

3. **首页头部渐变背景**:
   - 销售/施工端首页顶部区域改为 `bg-gradient-to-r from-blue-500 to-blue-600`，文字反白，营造品牌氛围。
   - 调度端控制台保持简洁专业感，但统一卡片与统计样式。

4. **按钮统一为 `rounded-xl` 大圆角**：
   - 底部主操作按钮、表单确认按钮使用 `rounded-xl`，与原型一致。
   - 顶部小操作按钮保持 `rounded-lg` 以节省空间。

5. **点击反馈**:
   - 卡片和列表项使用 `active:scale-95` 或 `active:bg-gray-50`。
   - 按钮使用 `active:opacity-80` 或 `active:bg-*-600`。
   - 使用 Tailwind 的 `transition` 类保证过渡自然。

6. **避免 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 映射）