---
comet_change: refine-weapp-ui-style
role: technical-design
canonical_spec: openspec
---

# 清道夫 App 全站样式体验优化设计文档

## 设计目标

在不动业务逻辑和胶囊安全布局的前提下，借鉴 V21-SOP 原型提升小程序视觉品质与交互流畅度。核心方向：统一卡片/按钮/标签视觉语言、增强首页头部品牌感、强化任务状态识别、增加点击反馈。

## 关键设计决策

### 1. 首页头部统一渐变背景
- 销售/调度/施工三端首页顶部均使用 `bg-gradient-to-r from-blue-500 to-blue-600`。
- 顶部文字（欢迎语、用户名、标题）反白显示。
- 通知铃铛按钮使用半透明白色背景 `bg-white/20`，与渐变头部融合。
- 状态栏高度仍由 `StatusBar` 组件计算，渐变背景从状态栏下方开始或覆盖整个顶部区域（视组件结构而定）。

### 2. 卡片统一为 rounded-xl + shadow-sm
- 所有内容卡片、列表容器统一使用 `bg-white rounded-xl shadow-sm`。
- 页面section间距保持 `gap-y-4`（16px）。
- 卡片内边距保持 `p-4`（16px）。

### 3. 统计卡片使用渐变
- 销售端三个统计卡片分别使用蓝紫、粉紫、青蓝渐变。
- 调度端/施工端统计卡片使用统一渐变或品牌色渐变，数字反白显示。
- 渐变使用内联 `style="background: linear-gradient(...)"`，避免 Tailwind 配置扩展。

### 4. 状态标签与按钮统一
- 状态标签：`bg-*-50 text-*-500 rounded px-2 py-0.5 text-xs`。
  - 蓝色：进行中/已排班
  - 绿色：已完成
  - 橙色：待处理/待确认
  - 红色：紧急/已取消
- 主按钮：`bg-primary text-white rounded-xl py-3`。
- 次要按钮：`bg-white border border-gray-200 text-gray-600 rounded-xl`。

### 5. 任务卡片状态增强
- 应急任务：`border-l-4 border-red-500`。
- 已完成：`bg-green-50`。
- 进行中：保持白色背景 + 蓝色状态标签。
- 卡片整体增加 `active:scale-95 transition-transform`。

### 6. 排班日历卡片化
- 日历整体容器使用 `bg-white rounded-xl shadow-sm p-4`。
- 选中日期：`bg-primary text-white rounded-lg`。
- 今天未选中：`bg-blue-50 text-primary rounded-lg`。
- 有排班标记点：`w-1.5 h-1.5 rounded-full bg-primary`（不使用 Tailwind 小数类时改用 `w-2 h-2`）。

### 7. 我的页深蓝渐变头部
- 顶部使用 `bg-gradient-to-br from-blue-900 to-blue-800`。
- 头像容器：`bg-white/20 rounded-full`。
- 功能列表：`bg-white rounded-xl shadow-sm`，列表项带右侧箭头。
- 退出登录：`bg-red-500 text-white rounded-xl`。

### 8. 点击/按压反馈
- 卡片、列表项：`active:scale-95 transition-transform duration-150`。
- 按钮：`active:opacity-80 transition-opacity` 或 `active:bg-*-600`。
- 快捷入口图标：`active:scale-95`。

##  affected files

- `src/components/common/TopBar.vue` — 支持渐变背景模式
- `src/components/common/StatusTag.vue` — 统一配色
- `src/components/home/SalesHome.vue`
- `src/components/home/DispatchHome.vue`
- `src/components/home/ConstructionHome.vue`
- `src/components/task/TaskListView.vue`
- `src/components/task/SalesTaskCard.vue`
- `src/components/task/DispatchTaskCard.vue`
- `src/components/task/ConstructionTaskCard.vue`
- `src/components/dispatch/ScheduleView.vue`
- `src/components/my/ProfileView.vue`

## 风险与缓解

| 风险 | 缓解 |
|---|---|
| 渐变背景与自定义导航栏高度配合不当 | 仅替换 TopBar 背景类，不改动高度计算逻辑 |
| Tailwind 任意值/小数类导致 WXSS 编译失败 | 特殊尺寸使用内联 style，禁用 `w-1.5`、`max-h-[80vh]` 等类 |
| uni-card 组件自带样式冲突 | 优先通过外层容器覆盖，必要时改用自定义 view |
| 全站改动范围广导致视觉回归 | 按页面模块分任务，每个任务后运行 build 检查 |

## 测试策略

- `npm run type-check` 无 TS 错误。
- `npm run build:mp-weixin` 构建通过，WXSS 无转义选择器。
- 微信开发者工具预览三端首页、任务页、排班页、我的页，确认视觉层次与交互反馈。