# 清道夫App UI还原开发计划

> 开发目标：按原型UI样式还原小程序，同时做好小程序适配
> 计划时间：约12-15个工作日
> 基于：UI还原开发文档.md 及用户确认意见

---

## 一、小程序适配原则（贯穿全程）

### 1.1 样式适配
- **单位**：使用 `rpx` 为主（1px 细边框除外），设计稿基准 750rpx
- **选择器**：不使用 `*` 通用选择器，不使用 `::before`/`::after` 在 view 外元素
- **渐变**：使用 `linear-gradient()` 需测试真机兼容性
- **阴影**：小程序 `box-shadow` 支持，但避免过大模糊值
- **边框**：优先使用 `border` 而非 `box-shadow` 模拟边框
- **圆角**：使用 `rpx` 单位，如 `24rpx` 对应 12px

### 1.2 组件适配
- **自定义组件**：所有组件使用 `defineProps`/`defineEmits` 标准写法
- **插槽**：使用 Vue3 具名插槽 `#slotName`
- **事件**：使用 `@click` 而非 `onclick`，禁止 `e.stopPropagation()` 滥用
- **图片**：使用 `image` 标签而非 `img`，设置 `mode="aspectFill"` 等
- **列表**：长列表使用 `scroll-view` 或 `uni-list`，避免渲染过多节点

### 1.3 性能适配
- **包大小**：单包不超过 2MB，总包不超过 20MB
- **分包**：已配置 subPackages，保持现状
- **图片资源**：图标使用 uni-icons 字体，避免过多图片资源
- **懒加载**：非首屏组件使用 `v-if` 延迟渲染
- **动画**：避免复杂 CSS 动画，使用简单 `transition`

### 1.4 兼容性
- **基础库**：兼容微信基础库 2.19.0+
- **刘海屏**：使用 `safe-area-inset-bottom` 适配底部安全区
- **深色模式**：暂不适配，保持浅色主题

---

## 二、开发阶段计划

### 阶段一：基础样式系统（第1-2天）

**目标**：统一颜色、字体、间距、组件基础样式

| 任务 | 文件 | 具体工作 |
|------|------|---------|
| 1.1 | `src/styles/variables.scss` | 新增渐变变量、统一颜色值与原型一致 |
| 1.2 | `src/styles/global.scss` | 修改按钮样式为渐变、表单聚焦效果、列表点击效果 |
| 1.3 | `src/styles/tailwind.css` | 确认 WXSS 兼容，补充自定义工具类 |
| 1.4 | `src/components/uni-card/uni-card.vue` | 移除边框，使用阴影；调整 padding |
| 1.5 | `src/components/common/TopBar.vue` | 确认渐变高度，调整标题样式 |
| 1.6 | `src/custom-tab-bar/` | 按原型调整底部导航样式（3Tab，圆形图标背景） |
| 1.7 | `src/components/common/EmptyState.vue` | 按原型添加图标+文字样式 |

**交付物**：基础样式系统可用，所有页面视觉基调统一

---

### 阶段二：首页组件重构（第3-5天）

**目标**：三个角色首页完全还原原型

| 任务 | 文件 | 具体工作 |
|------|------|---------|
| 2.1 | `src/components/common/GradientStatCard.vue` | **新增** 渐变统计卡片组件，支持3色渐变配置 |
| 2.2 | `src/components/common/QuickEntry.vue` | **新增** 快捷入口组件（图标+文字，支持禁用状态） |
| 2.3 | `src/components/home/SalesHome.vue` | 重构：顶部区域、3色渐变统计卡片、快捷入口、任务提醒、最新任务、通知公告、行业知识 |
| 2.4 | `src/components/home/DispatchHome.vue` | 重构：顶部区域、统计卡片、快捷操作（4个）、待审核任务 |
| 2.5 | `src/components/home/ConstructionHome.vue` | 重构：顶部区域、统计卡片、每日任务入口、快捷功能、当前任务、通知公告 |
| 2.6 | 首页API数据联调 | 确认各首页数据接口，补充 mock 数据 |

**关键决策**：
- 排班页面：作为独立 Tab 保留（现有4Tab），调度端在首页提供快捷入口
- 不同角色 TabBar：使用 custom-tab-bar，根据角色动态渲染不同 Tab 列表
- 禁用功能：保留显示，添加 `opacity-50` 和 `pointer-events-none`

**交付物**：三个首页视觉与原型一致，可正常切换角色

---

### 阶段三：任务/项目卡片组件（第6-8天）

**目标**：统一卡片组件，支持状态样式

| 任务 | 文件 | 具体工作 |
|------|------|---------|
| 3.1 | `src/components/task/TaskCard.vue` | 重构：支持左侧边框状态（应急红）、背景色状态（超时淡红/完成淡绿） |
| 3.2 | `src/components/task/SalesTaskCard.vue` | 按销售端原型调整 |
| 3.3 | `src/components/task/DispatchTaskCard.vue` | 按调度端原型调整（带操作按钮） |
| 3.4 | `src/components/task/ConstructionTaskCard.vue` | 按施工端原型调整 |
| 3.5 | `src/components/task/TaskListView.vue` | 调整列表容器样式、空状态 |
| 3.6 | `src/components/project/ProjectCard.vue` | 重构：项目卡片样式，支持状态标签 |
| 3.7 | `src/components/common/StatusTag.vue` | 补充原型中所有状态的颜色映射 |
| 3.8 | `src/components/common/FilterTabs.vue` | 调整样式与原型一致（pill形状） |

**交付物**：所有卡片组件可复用，视觉统一

---

### 阶段四：详情页与表单页（第9-12天）

**目标**：任务详情、项目详情、发布任务等页面还原

| 任务 | 文件 | 具体工作 |
|------|------|---------|
| 4.1 | `src/components/common/Timeline.vue` | **新增** 时间线组件（处理记录） |
| 4.2 | `src/components/common/ProgressBar.vue` | **新增** 进度条组件（带步骤点） |
| 4.3 | `src/components/common/ServicePointCard.vue` | **新增** 服务点选择卡片 |
| 4.4 | `src/components/common/PhotoUploader.vue` | **新增** 拍照上传网格组件（3列） |
| 4.5 | `src/subPackages/pages-common/taskDetail.vue` | 重构：详情区块、时间线、操作按钮 |
| 4.6 | `src/subPackages/pages-common/projectDetail.vue` | 重构：项目信息展示、联系人列表 |
| 4.7 | `src/subPackages/pages-common/publishTask.vue` | 重构：表单布局、联系人动态添加、服务点选择 |
| 4.8 | `src/subPackages/pages-common/addProject.vue` | 重构：表单样式统一 |
| 4.9 | `src/subPackages/pages-dispatch/publishTask.vue` | 重构：调度端发布任务（类型选择器） |
| 4.10 | `src/components/common/Modal.vue` | 调整模态框样式与原型一致 |

**交付物**：详情页、表单页视觉还原，交互完整

---

### 阶段五：施工端特殊页面（第13-14天）

**目标**：施工流程、每日任务等特殊页面

| 任务 | 文件 | 具体工作 |
|------|------|---------|
| 5.1 | `src/components/common/ConstructionFlowBar.vue` | **新增** 施工流程进度条（5步骤） |
| 5.2 | `src/components/common/CheckItem.vue` | **新增** 检查项卡片（标题+状态+上传区） |
| 5.3 | `src/subPackages/pages-construction/dailyTask.vue` | 重构：流程进度条、检查项列表 |
| 5.4 | `src/subPackages/pages-construction/taskDetail.vue` | 重构：施工端任务详情（含流程） |
| 5.5 | `src/subPackages/pages-construction/historyTask.vue` | 调整样式 |
| 5.6 | `src/subPackages/pages-construction/tomorrowTask.vue` | 调整样式 |

**交付物**：施工端页面完整，流程可视化

---

### 阶段六：收尾与优化（第15天）

| 任务 | 文件 | 具体工作 |
|------|------|---------|
| 6.1 | 全局检查 | 检查所有页面的样式一致性 |
| 6.2 | 图标统一 | 检查所有 FontAwesome 映射到 uni-icons |
| 6.3 | 真机测试 | 微信小程序真机预览，检查样式兼容性 |
| 6.4 | 性能检查 | 检查包大小、渲染性能 |
| 6.5 | 代码清理 | 删除无用样式、注释 |

**交付物**：可交付的完整UI还原版本

---

## 三、每日开发节奏

```
Day 1:  基础样式系统（variables + global + uni-card + TopBar）
Day 2:  custom-tab-bar + EmptyState + 基础组件调整
Day 3:  GradientStatCard + QuickEntry（新增组件）
Day 4:  SalesHome 重构
Day 5:  DispatchHome + ConstructionHome 重构
Day 6:  TaskCard 系列重构 + StatusTag 补充
Day 7:  ProjectCard + FilterTabs 调整
Day 8:  TaskListView + 卡片组件收尾
Day 9:  Timeline + ProgressBar + ServicePointCard（新增）
Day 10: PhotoUploader + taskDetail 重构
Day 11: projectDetail + publishTask 重构
Day 12: addProject + dispatch/publishTask + Modal 调整
Day 13: ConstructionFlowBar + CheckItem（新增）
Day 14: dailyTask + construction/taskDetail 重构
Day 15: 全局检查 + 真机测试 + 收尾
```

---

## 四、风险与应对

| 风险 | 影响 | 应对 |
|------|------|------|
| uni-icons 图标不全 | 部分原型图标无法还原 | 使用最接近替代，或自定义图标字体 |
| 小程序渐变兼容 | 部分真机渐变显示异常 | 准备纯色回退方案 |
| 分包大小超限 | 无法编译 | 监控包大小，必要时进一步拆分 |
| 角色切换 TabBar | 小程序限制动态 TabBar | 使用 custom-tab-bar，通过条件渲染解决 |
| 复杂动画性能 | 卡顿 | 简化动画，使用 transform 和 opacity |

---

## 五、开发规范 Checklist

每个文件开发时需检查：

- [ ] 不使用 `*` 选择器
- [ ] 不使用 `::before`/`::after` 在 button/image 上
- [ ] 使用 `rpx` 单位（1px 边框除外）
- [ ] 使用 `uni-icons` 而非 FontAwesome
- [ ] 颜色使用变量，不硬编码
- [ ] 组件使用 `defineProps`/`defineEmits`
- [ ] 长列表使用 `scroll-view`
- [ ] 图片使用 `image` 标签
- [ ] 按钮使用 `view` 或 `button` 并处理样式
- [ ] 添加 `scoped` 样式隔离

---

*计划生成时间：2026-07-09*
*基于：UI还原开发文档.md*