# 清道夫 App 全局样式重设计调整文档

## 一、调整目标

让小程序整体视觉更符合微信小程序原生风格：

1. 统一页面背景色、卡片、文字、图标配色
2. 大量减少渐变色和花俏装饰
3. 简化首页头部，去掉毛玻璃、渐变背景
4. 统一卡片、列表、按钮、标签样式
5. 保持各角色首页信息结构清晰

---

## 二、色彩规范

### 主色板

| 名称 | 色值 | Tailwind 类 | 用途 |
|------|------|-------------|------|
| 主色 | `#2563eb` | `bg-primary` / `text-primary` | 按钮、激活态、主图标 |
| 主色浅 | `#eff6ff` | `bg-primary-light` | 图标底色、选中背景 |
| 成功 | `#10b981` | `text-success` | 完成/通过状态 |
| 成功浅 | `#ecfdf5` | `bg-success-light` | 成功状态背景 |
| 警告 | `#f59e0b` | `text-warning` | 待处理/提醒 |
| 警告浅 | `#fff7ed` | `bg-warning-light` | 警告状态背景 |
| 危险 | `#ef4444` | `bg-danger` / `text-danger` | 取消/拒绝/重要 |
| 危险浅 | `#fef2f2` | `bg-danger-light` | 危险状态背景 |

### 中性色

| 名称 | 色值 | Tailwind 类 | 用途 |
|------|------|-------------|------|
| 页面背景 | `#f5f5f5` | `bg-background` | 全局页面底色 |
| 浅灰背景 | `#f3f4f6` | `bg-surface` | hover、筛选标签默认态 |
| 主要文字 | `#1f2937` | `text-gray-800` | 标题、正文 |
| 次要文字 | `#6b7280` | `text-gray-500` | 备注、说明 |
| 辅助文字 | `#9ca3af` | `text-gray-400` | 时间、占位 |
| 分割线 | `#e5e7eb` | `border-gray-200` | 边框、分隔线 |

> 说明：`text-primary`、`text-secondary` 等语义化文字类因 Tailwind 生成规则与命名冲突，统一改用 `text-gray-800/500/400`。

---

## 三、核心样式文件变更

### 1. `src/styles/variables.scss`

- 背景色改为 `#f5f5f5`
- 主色改为 `#2563eb`
- 删除渐变按钮、渐变标签相关变量
- 文字色改为 `#1f2937` / `#6b7280` / `#9ca3af`
- 卡片阴影更柔和

### 2. `src/styles/global.scss`

- 去掉所有渐变按钮、渐变标签、渐变进度条
- `.card` 改为白底 + 1px 浅灰边框 + 柔和阴影
- `.btn-primary` 等改为纯色
- `.tag-*` 改为纯色小圆角标签
- 新增 `.icon-box` 图标容器
- 新增 `.page-header` 页面头部样式

### 3. `tailwind.config.js`

- 扩展颜色：`primary`、`success`、`warning`、`danger` 及其浅色
- 扩展：`background`、`surface`、`card-bg`
- 保持 `preflight: false`

---

## 四、页面/组件具体调整

### 首页（SalesHome / DispatchHome / ConstructionHome）

| 调整项 | 改前 | 改后 |
|--------|------|------|
| 顶部背景 | `bg-gradient-to-br` 渐变 + 毛玻璃 | 白色背景 + 下边框 |
| 用户头像区 | 半透明毛玻璃 | `bg-primary-light` + `text-primary` |
| 通知按钮 | 半透明毛玻璃 | `bg-surface` + `text-gray-500` |
| 统计卡片 | 彩色背景 `bg-blue-50`/`bg-orange-50` | 白色卡片内 `bg-surface` 统计块 |
| 统计数字 | 彩色 `text-blue-500` | 语义色 `text-primary`/`text-warning`/`text-success` |
| 快捷入口图标 | 各功能彩色底 | 统一 `bg-primary-light` + `text-primary` |
| 卡片阴影 | `is-shadow="true"` | `is-shadow="false"`，统一边框 |

### 任务列表（TaskListView）

- 筛选标签默认态：`bg-surface text-gray-500`
- 选中态：`bg-primary text-white`
- 状态图标：统一语义化颜色
- 加载/空态文字改为 `text-gray-400`

### 我的页面（ProfileView）

- 顶部：白底 + 下边框，头像 `bg-primary-light`
- 卡片统一 `is-shadow="false"`
- 退出登录按钮：白底红字 + 灰边框

### 登录页（login.vue）

- 背景：`bg-background`
- Logo：纯色 `bg-primary`
- 表单卡片：白底 + 灰边框 + 柔和阴影
- 按钮：`bg-primary` 纯色
- 输入框：`bg-surface` + 灰边框

### 知识库（knowledgeList / knowledgeDetail）

- 列表封面：去掉渐变，改为 `bg-primary-light` + `text-primary`
- 详情封面：去掉渐变，改为 `bg-primary-light`
- 摘要/内容/分类块：使用 `bg-primary-light`、`bg-success-light`、`bg-surface`

### 通用组件

| 组件 | 调整 |
|------|------|
| `uni-card` | 默认有 1px 灰边框，阴影默认关闭，标题 `#1f2937`，extra `#2563eb` |
| `uni-list` | 边框颜色 `#e5e7eb` |
| `uni-list-item` | 图标背景 `#f3f4f6`，图标颜色 `#6b7280`，hover 背景 `#f5f5f5`，文字色更新 |
| `FilterTabs` | 默认 `bg-surface text-gray-500`，选中 `bg-primary text-white` |
| `StatusTag` | 通过 `utils/index.ts` 统一状态色 |

---

## 五、状态色统一

`src/utils/index.ts` 中状态颜色已统一：

```js
pending/inspecting    -> 警告色 #f59e0b / #fff7ed
confirmed/scheduled/constructing -> 主色 #2563eb / #eff6ff
departed              -> 紫色 #8b5cf6 / #f3e8ff
arrived/completed     -> 成功色 #10b981 / #ecfdf5
cancelled/rejected    -> 危险色 #ef4444 / #fef2f2
```

---

## 六、注意事项

1. **语义化颜色类使用规则**
   - 可用：`bg-primary`、`bg-primary-light`、`bg-success-light`、`bg-warning-light`、`bg-danger-light`、`bg-surface`、`bg-background`、`text-primary`、`text-success`、`text-warning`、`text-danger`
   - 避免：`text-text-*`、`bg-text-*`、`border-border-color` 等带连词的自定义类，Tailwind 可能无法正确解析

2. **卡片阴影**
   - 改造后默认使用 `is-shadow="false"`，依赖 `uni-card` 自带的 1px 边框分隔内容
   - 如需强调可用 `shadow-card`

3. **渐变保留**
   - 本次改造后，除 `global.scss` 中原有少量样式外，业务页面不再使用渐变背景
   - 后续如需品牌氛围，可在启动页或空状态插画中使用

4. **图标**
   - 快捷入口、列表项、状态标签统一使用 `uni-icons`
   - 图标底色统一 `bg-primary-light`，图标颜色统一 `text-primary`

---

## 七、已修改文件清单

- `src/styles/variables.scss`
- `src/styles/global.scss`
- `tailwind.config.js`
- `src/pages.json`
- `src/utils/index.ts`
- `src/pages/login/login.vue`
- `src/components/home/SalesHome.vue`
- `src/components/home/DispatchHome.vue`
- `src/components/home/ConstructionHome.vue`
- `src/components/my/ProfileView.vue`
- `src/components/task/TaskListView.vue`
- `src/components/common/FilterTabs.vue`
- `src/components/uni-card/uni-card.vue`
- `src/components/uni-list/uni-list.vue`
- `src/components/uni-list/uni-list-item.vue`
- `src/subPackages/pages-common/knowledgeList.vue`
- `src/subPackages/pages-common/knowledgeDetail.vue`

---

## 八、验证结果

- `npm run build:mp-weixin` 编译通过
- 主包体积 923K，各分包 62K–152K，均小于 2MB
- 生成 WXSS 中无无效类名

---

## 九、后续建议

1. 逐步将剩余页面中的硬编码 `#3b82f6` / `#f59e0b` 等替换为语义化类
2. 检查分包页面中的表单、详情页是否还有未统一的彩色背景块
3. 如果 UI 提供正式 tabBar 图标，替换 `src/static/tabbar/` 下占位图标
4. 继续验证各角色首页、任务页、我的页在微信开发者工具中的实际效果