# 清道夫App - UI还原开发文档

> 基于原型 `清道夫系统原型_完整版_V21_SOP.html` 与现有小程序代码的对比分析
> 分析日期：2026-07-09

---

## 一、项目现状概述

### 1.1 现有技术栈

| 技术 | 版本/说明 |
|------|----------|
| 框架 | uni-app Vue3 + TypeScript |
| 构建工具 | Vite |
| CSS 框架 | TailwindCSS 3.4.19（自定义主题配置） |
| UI 组件库 | @dcloudio/uni-ui 1.5.12 |
| 状态管理 | Pinia 2.3.1 |
| 图标 | uni-icons（自定义字体图标） |

### 1.2 现有目录结构

```
src/
├── pages/              # 主页面（Tab页）
│   ├── home/home.vue       # 首页（根据角色渲染不同组件）
│   ├── task/task.vue       # 任务页
│   ├── schedule/schedule.vue  # 排班页
│   ├── my/my.vue           # 我的页
│   └── login/login.vue     # 登录页
├── subPackages/        # 分包页面
│   ├── pages-common/       # 公共页面（项目库、任务详情等）
│   ├── pages-sales/        # 销售端专属
│   ├── pages-dispatch/     # 调度端专属
│   └── pages-construction/ # 施工端专属
├── components/         # 组件
│   ├── common/             # 通用组件（TopBar、StatusTag、Card等）
│   ├── home/               # 首页组件（SalesHome、DispatchHome、ConstructionHome）
│   ├── task/               # 任务卡片组件
│   └── uni-*/              # 封装的uni-ui组件
├── stores/             # Pinia状态管理
├── styles/             # 全局样式
│   ├── tailwind.css        # Tailwind入口（WXSS兼容处理）
│   ├── global.scss         # 全局SCSS样式
│   └── variables.scss      # SCSS变量
└── api/                # API接口
```

### 1.3 现有自定义组件清单

| 组件 | 用途 | 备注 |
|------|------|------|
| TopBar | 顶部导航栏 | 支持渐变背景、返回按钮 |
| StatusTag | 状态标签 | 根据状态自动渲染颜色和文字 |
| Card | 卡片容器 | 基础卡片，带点击效果 |
| FilterTabs | 筛选标签 | 横向滚动标签组 |
| CapsuleSafeArea | 胶囊安全区 | 适配刘海屏 |
| EmptyState | 空状态 | 暂无数据展示 |
| Loading | 加载中 | 加载状态 |
| Modal | 模态框 | 弹窗 |
| Toast | 轻提示 | 消息提示 |
| ImageUploader | 图片上传 | 拍照/相册选择 |
| SignaturePad | 签名板 | 电子签名 |
| MapView | 地图 | 位置展示 |
| ChartView | 图表 | 数据可视化 |
| AppContainer | 页面容器 | 全局布局容器 |
| uni-card | 卡片（封装） | 基于uni-ui封装 |
| uni-list/uni-list-item | 列表（封装） | 基于uni-ui封装 |
| uni-segmented-control | 分段控制器 | 基于uni-ui封装 |
| uni-swipe-action | 滑动操作 | 基于uni-ui封装 |

---

## 二、原型UI分析

### 2.1 原型技术特征

- **类型**：纯HTML单页应用（所有页面在一个HTML文件中）
- **CSS框架**：TailwindCSS（CDN引入）
- **图标库**：FontAwesome 6.4.0
- **设计宽度**：430px（移动端适配）
- **页面数量**：约55个页面（含各角色页面）

### 2.2 三大角色端

原型包含三套完整的UI：

| 角色 | 页面ID前缀 | 主要页面 |
|------|-----------|---------|
| **销售端** | `sales*` / 无前缀 | 首页、任务、项目库、我的 |
| **调度端** | `dispatch*` | 首页、排班、任务、车辆、人员、可视化 |
| **施工端** | `construction*` | 首页、每日任务、历史任务、我的 |

### 2.3 原型核心UI特征

#### 2.3.1 色彩体系

| 用途 | 颜色值 | 说明 |
|------|--------|------|
| 主色 | `#3b82f6` → `#2563eb` | 蓝色渐变 |
| 成功 | `#10b981` → `#059669` | 绿色渐变 |
| 警告 | `#f59e0b` | 橙色 |
| 危险 | `#ef4444` → `#dc2626` | 红色渐变 |
| 背景 | `#f5f5f5` | 页面背景 |
| 卡片背景 | `#ffffff` | 白色 |
| 文字主色 | `#333` / `#1f2937` | 标题/正文 |
| 文字次色 | `#666` / `#6b7280` | 次要信息 |
| 文字辅助 | `#999` / `#9ca3af` | 提示/时间 |

#### 2.3.2 销售端统计卡片渐变（原型特色）

```
卡片1: linear-gradient(135deg, #667eea 0%, #764ba2 100%)  // 紫蓝
卡片2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)  // 粉红
卡片3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)  // 青蓝
```

> ⚠️ **冲突点**：现有项目统计卡片使用统一渐变 `linear-gradient(135deg, #3b82f6, #8b5cf6)`，需按原型改为三张不同渐变色。

#### 2.3.3 调度端统计卡片渐变

```
卡片1: linear-gradient(135deg, #667eea 0%, #764ba2 100%)  // 紫蓝
卡片2: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)  // 青蓝
卡片3: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)  // 粉红
```

#### 2.3.4 施工端统计卡片渐变

```
卡片1: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)  // 蓝色
卡片2: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)  // 浅蓝
卡片3: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%)  // 更浅蓝
```

#### 2.3.5 圆角规范

| 元素 | 圆角值 |
|------|--------|
| 卡片 | 12px (`rounded-xl`) |
| 按钮 | 8px (`rounded-lg`) |
| 标签 | 4px (`rounded`) |
| 筛选标签 | 20px (`rounded-full` pill) |
| 图标容器 | 12px (`rounded-xl`) 或 50% (`rounded-full`) |
| 输入框 | 8px (`rounded-lg`) |

#### 2.3.6 阴影规范

```css
卡片阴影: 0 2px 8px rgba(0,0,0,0.06)
底部导航阴影: 0 -2px 10px rgba(0,0,0,0.08)
```

---

## 三、UI库需求清单

### 3.1 已有UI库（无需新增）

| 库/组件 | 状态 | 说明 |
|---------|------|------|
| @dcloudio/uni-ui | ✅ 已安装 | 官方组件库 |
| TailwindCSS | ✅ 已配置 | 自定义主题已配置 |
| uni-icons | ✅ 已配置 | 字体图标 |

### 3.2 可能需要补充的uni-ui组件

原型中有以下交互组件，需确认uni-ui是否覆盖：

| 组件 | 原型用途 | uni-ui对应 | 状态 |
|------|---------|-----------|------|
| 日历/日期选择 | 排班日历、日期筛选 | uni-calendar | ❓ 需确认 |
| 时间选择器 | 预约时间 | uni-datetime-picker | ❓ 需确认 |
| 步骤条 | 施工流程进度 | uni-steps | ❓ 需确认 |
| 折叠面板 | 详情页折叠区块 | uni-collapse | ❓ 需确认 |
| 开关 | 设置项 | uni-switch | ❓ 需确认 |
| 复选框 | 检查项列表 | uni-checkbox | ❓ 需确认 |
| 评分 | 客户评价 | uni-rate | ❓ 需确认 |
| 搜索栏 | 项目搜索 | uni-search-bar | ❓ 需确认 |
| 加载更多 | 列表分页 | uni-load-more | ❓ 需确认 |
| 弹窗 | 确认/提示 | uni-popup | ❓ 需确认 |
| 抽屉 | 侧边筛选 | uni-drawer | ❓ 需确认 |
| 标签页 | 页面切换 | uni-segmented-control | ✅ 已有封装 |
| 滑动删除 | 列表操作 | uni-swipe-action | ✅ 已有封装 |

### 3.3 需要自定义开发的组件

以下组件原型有特定样式，建议自定义：

| 组件 | 说明 | 优先级 |
|------|------|--------|
| GradientStatCard | 渐变统计卡片（3色） | 高 |
| QuickEntry | 快捷入口（圆角图标+文字） | 高 |
| TaskCard | 任务卡片（带状态标签、进度条） | 高 |
| ProjectCard | 项目卡片 | 高 |
| Timeline | 时间线（处理记录） | 中 |
| ProgressBar | 进度条（带步骤点） | 中 |
| ServicePointCard | 服务点卡片 | 中 |
| PhotoUploader | 拍照上传网格 | 中 |
| ConstructionFlowBar | 施工流程进度条 | 中 |
| FilterTabGroup | 筛选标签组（已有，需调整样式） | 中 |
| ContactCard | 联系人卡片 | 低 |
| EmptyState | 空状态（已有，需确认样式） | 低 |

---

## 四、样式冲突清单（⚠️ 以原型为准）

### 4.1 冲突汇总表

| 序号 | 冲突项 | 现有实现 | 原型要求 | 影响范围 | 处理方式 |
|------|--------|---------|---------|---------|---------|
| 1 | **销售端统计卡片渐变** | 统一蓝紫渐变 | 3张不同渐变色（紫蓝/粉红/青蓝） | `SalesHome.vue` | 按原型修改 |
| 2 | **调度端统计卡片渐变** | 统一蓝紫渐变 | 3张不同渐变色 | `DispatchHome.vue` | 按原型修改 |
| 3 | **施工端统计卡片渐变** | 统一青蓝渐变 | 3张蓝色系渐变 | `ConstructionHome.vue` | 按原型修改 |
| 4 | **快捷入口图标背景** | `bg-primary-light`（浅蓝） | 各角色有特定配色 | 三个Home组件 | 按原型修改 |
| 5 | **卡片边框** | 有1px边框 `border: 1px solid #e5e7eb` | 无边框，纯阴影 | `uni-card`、全局卡片 | 按原型修改 |
| 6 | **TopBar渐变** | `linear-gradient(135deg, #3b82f6, #2563eb)` | 相同，但原型顶部区域更高 | `TopBar.vue` | 需确认高度 |
| 7 | **底部导航栏样式** | custom tabBar | 原型有更大图标+圆形背景 | `custom-tab-bar` | 按原型修改 |
| 8 | **任务卡片左侧边框** | 无 | 应急任务有红色左边框 `border-left: 4px solid #ef4444` | 任务卡片 | 按原型新增 |
| 9 | **任务卡片背景色** | 统一白色 | 超时=淡红、已完成=淡绿 | 任务卡片 | 按原型新增 |
| 10 | **按钮样式** | 纯色背景 | 渐变背景+阴影 | 全局按钮 | 按原型修改 |
| 11 | **表单输入框聚焦** | 边框变蓝 | 边框变蓝+外发光 | 表单页 | 按原型调整 |
| 12 | **列表项点击效果** | `hover-class="scale-down"` | 背景色变灰 `#f9fafb` | 列表页 | 按原型调整 |
| 13 | **空状态图标** | 文字提示 | FontAwesome大图标+文字 | 空状态页 | 按原型修改 |
| 14 | **详情页区块标题** | 简单文字 | 带图标+下分割线 | 详情页 | 按原型修改 |
| 15 | **时间线样式** | 无 | 左侧头像+时间+内容，当前项高亮 | 任务详情 | 按原型新增 |

### 4.2 详细样式差异

#### 4.2.1 统计卡片

**现有代码（SalesHome.vue）：**
```vue
<view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6);">
```

**原型要求：**
```vue
<!-- 卡片1：本月项目 -->
<view style="background: linear-gradient(135deg, #667eea, #764ba2);">

<!-- 卡片2：待确认 -->
<view style="background: linear-gradient(135deg, #f093fb, #f5576c);">

<!-- 卡片3：进行中 -->
<view style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
```

#### 4.2.2 卡片边框

**现有（uni-card.vue）：**
```css
.uni-card {
  border: 1px solid #e5e7eb;  /* 有边框 */
}
```

**原型要求：**
```css
.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  /* 无边框 */
}
```

#### 4.2.3 任务卡片

**原型特有样式需新增：**
```css
/* 应急/加急 - 左侧红色边框 */
.task-card.emergency {
  border-left: 4px solid #ef4444;
}

/* 超时/即将超时 - 淡红色背景 */
.task-card.timeout {
  background: #fef2f2;
}

/* 已完成 - 淡绿色背景 */
.task-card.completed {
  background: #f0fdf4;
}
```

#### 4.2.4 按钮样式

**现有（global.scss）：**
```scss
.btn-primary {
  background-color: $primary;  /* 纯色 */
}
```

**原型要求：**
```css
.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);  /* 渐变 */
}
```

---

## 五、逻辑冲突清单（⚠️ 需确认）

### 5.1 页面结构差异

| 序号 | 冲突描述 | 现有方案 | 原型方案 | 建议 |
|------|---------|---------|---------|------|
| 5.1.1 | **应用架构** | 多页面小程序（pages + subPackages） | 单页应用（所有页面在一个HTML） | 保持现有多页面方案，uni-app不支持单页模式 |
| 5.1.2 | **TabBar数量** | 4个Tab（首页、排班、任务、我的） | 3个Tab（首页、任务、我的）— 销售/施工端 | ❓ **需确认**：排班页是否独立Tab？还是调度端专属？ | 调度端专属
| 5.1.3 | **角色切换入口** | 登录页角色选择 → 进入不同首页 | 登录页有角色Tab切换 | 现有方案合理，保持 | 最新的进度已经是登录接口返回角色 通过就看返回的角色来进入不同的首页
| 5.1.4 | **首页组件化** | 一个home.vue根据角色渲染不同组件 | 三个独立的page div | 现有方案合理，保持 |

### 5.2 底部导航栏差异

**现有（pages.json）：**
```json
"tabBar": {
  "list": [
    { "pagePath": "pages/home/home", "text": "首页" },
    { "pagePath": "pages/schedule/schedule", "text": "排班" },
    { "pagePath": "pages/task/task", "text": "任务" },
    { "pagePath": "pages/my/my", "text": "我的" }
  ]
}
```

**原型底部导航（3个Tab）：**
- 首页
- 任务
- 我的

> ❓ **待确认**：
> 1. 排班页面是否作为TabBar独立存在？还是仅调度端显示？
> 2. 不同角色是否显示不同的TabBar？（小程序custom-tab-bar支持动态设置但有限制）
> 3. 原型中调度端有"排班"功能，但TabBar只有3项，排班放在哪里？

### 5.3 页面路由映射

原型页面与现有页面对照：

| 原型页面 | 现有页面 | 状态 |
|---------|---------|------|
| loginPage | pages/login/login | ✅ 已有 |
| salesPage / dispatch_homePage / construction_homePage | pages/home/home + 角色组件 | ✅ 已有 |
| taskPage | pages/task/task | ✅ 已有 |
| profilePage / sales_basicInfoPage 等 | pages/my/my | ⚠️ 需完善 |
| projectListPage | subPackages/pages-common/projectList | ✅ 已有 |
| projectDetailPage | subPackages/pages-common/projectDetail | ✅ 已有 |
| addProjectPage | subPackages/pages-common/addProject | ✅ 已有 |
| publishTaskPage | subPackages/pages-common/publishTask | ✅ 已有 |
| taskDetailPage | subPackages/pages-common/taskDetail | ✅ 已有 |
| noticeList/Detail | subPackages/pages-common/noticeList/noticeDetail | ✅ 已有 |
| messageList/Detail | subPackages/pages-common/messageList/messageDetail | ✅ 已有 |
| knowledgeList/Detail | subPackages/pages-common/knowledgeList/knowledgeDetail | ✅ 已有 |
| changePasswordPage | subPackages/pages-common/changePassword | ✅ 已有 |
| helpCenterPage | subPackages/pages-common/helpCenter | ✅ 已有 |
| sales_taskReminderPage | subPackages/pages-sales/taskReminder | ✅ 已有 |
| sales_notificationPage | subPackages/pages-sales/notification | ✅ 已有 |
| dispatch_schedulePage | pages/schedule/schedule | ✅ 已有 |
| dispatch_vehicleList/availableVehicles | subPackages/pages-dispatch/vehicleList/availableVehicles | ✅ 已有 |
| dispatch_personnel/dutyPersonnel/onDutyStaff | subPackages/pages-dispatch/personnel/dutyPersonnel/onDutyStaff | ✅ 已有 |
| dispatch_emergencyTeam/Standby | subPackages/pages-dispatch/emergencyTeam/emergencyStandby | ✅ 已有 |
| dispatch_visualizationPage | subPackages/pages-dispatch/visualization | ✅ 已有 |
| dispatch_publishTaskPage | subPackages/pages-dispatch/publishTask | ✅ 已有 |
| construction_dailyTaskPage | subPackages/pages-construction/dailyTask | ✅ 已有 |
| construction_historyTaskPage | subPackages/pages-construction/historyTask | ✅ 已有 |
| construction_tomorrowTaskPage | subPackages/pages-construction/tomorrowTask | ✅ 已有 |

> ✅ **结论**：页面路由结构基本完整，无需大幅调整。

### 5.4 数据流和状态管理

| 现有方案 | 原型方案 | 评估 |
|---------|---------|------|
| Pinia + API请求 | 纯前端静态数据 | 现有方案更合理，保持 |
| 角色存储在authStore | 登录页选择角色 | 现有方案合理，保持 |

### 5.5 交互逻辑差异

| 序号 | 交互 | 现有 | 原型 | 建议 |
|------|------|------|------|------|
| 5.5.1 | **任务筛选** | FilterTabs组件 | 横向滚动标签 | 样式统一为原型风格，逻辑保持 |
| 5.5.2 | **图片上传** | ImageUploader组件 | 网格布局拍照区 | 按原型UI调整布局 |
| 5.5.3 | **施工流程** | 无 | 5步骤流程条 | 新增组件 |
| 5.5.4 | **排班日历** | ScheduleView组件 | 自定义日历 | 需确认是否替换 |
| 5.5.5 | **任务取消** | 无 | 模态框确认 | 新增交互 |
| 5.5.6 | **联系人管理** | 无 | 动态添加/删除 | 新增功能 |
| 5.5.7 | **服务点选择** | 无 | 卡片式选择 | 新增交互 |

---

## 六、开发规范

### 6.1 样式优先级规则

> **原则：样式冲突以原型为准，逻辑冲突需确认**

```
优先级从高到低：
1. 原型视觉稿（唯一标准）
2. 本开发文档
3. 现有代码（当与原型冲突时，以原型为准修改）
```

### 6.2 颜色使用规范

```scss
// 主题色（保持现有变量，值与原型一致）
$primary: #2563eb;
$success: #10b981;
$warning: #f59e0b;
$danger: #ef4444;

// 渐变定义（新增）
$gradient-sales-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$gradient-sales-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
$gradient-sales-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

$gradient-dispatch-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$gradient-dispatch-2: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
$gradient-dispatch-3: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

$gradient-construction-1: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
$gradient-construction-2: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
$gradient-construction-3: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
```

### 6.3 组件开发规范

1. **命名**：PascalCase，语义化
2. **样式**：优先使用Tailwind工具类，复杂样式用scoped `<style>`
3. **图标**：统一使用uni-icons，FontAwesome图标需映射到uni-icons对应图标
4. **颜色**：禁止硬编码颜色值，使用Tailwind配置变量或SCSS变量
5. **间距**：统一使用4的倍数（4px、8px、12px、16px、20px...）

### 6.4 图标映射（FontAwesome → uni-icons）

原型使用FontAwesome，小程序需替换为uni-icons：

| FontAwesome | uni-icons | 用途 |
|------------|-----------|------|
| fa-user | uniui-person-filled | 用户 |
| fa-bell | uniui-notification-filled | 通知 |
| fa-home | uniui-home-filled | 首页 |
| fa-tasks | uniui-flag-filled | 任务 |
| fa-folder-open | uniui-folder-add-filled | 项目库 |
| fa-users | uniui-personadd-filled | 客户 |
| fa-file-contract | uniui-file-text-filled | 合同 |
| fa-calendar | uniui-calendar-filled | 日历/排班 |
| fa-car | uniui-cart-filled | 车辆 |
| fa-map | uniui-map-filled | 地图/可视化 |
| fa-gear | uniui-gear-filled | 设置/检查 |
| fa-clock | uniui-clock-filled | 时间 |
| fa-location | uniui-location-filled | 位置 |
| fa-phone | uniui-phone-filled | 电话 |
| fa-envelope | uniui-email-filled | 邮箱 |
| fa-lock | uniui-locked-filled | 密码 |
| fa-edit | uniui-compose | 编辑 |
| fa-trash | uniui-trash-filled | 删除 |
| fa-plus | uniui-plusempty | 添加 |
| fa-check | uniui-checkmarkempty | 完成 |
| fa-chevron-right | uniui-arrowright | 右箭头 |
| fa-chevron-left | uniui-arrow-left | 左箭头 |
| fa-question-circle | uniui-help-filled | 帮助 |
| fa-headset | uniui-headphones | 客服 |

> ⚠️ 部分图标uni-icons可能没有精确对应，需寻找最接近的替代或使用自定义图标。

### 6.5 文件修改清单

以下文件需要按原型样式修改：

| 文件 | 修改内容 | 优先级 |
|------|---------|--------|
| `src/components/home/SalesHome.vue` | 统计卡片渐变、快捷入口样式 | 高 |
| `src/components/home/DispatchHome.vue` | 统计卡片渐变、快捷入口样式 | 高 |
| `src/components/home/ConstructionHome.vue` | 统计卡片渐变、快捷入口样式 | 高 |
| `src/components/uni-card/uni-card.vue` | 移除边框，调整阴影 | 高 |
| `src/components/common/TopBar.vue` | 确认渐变和高度 | 中 |
| `src/components/task/TaskCard.vue` | 新增左侧边框、背景色状态 | 高 |
| `src/components/task/*TaskCard.vue` | 统一样式 | 高 |
| `src/styles/global.scss` | 按钮渐变、表单样式 | 中 |
| `src/styles/variables.scss` | 新增渐变变量 | 中 |
| `src/custom-tab-bar/*` | 按原型调整底部导航 | 中 |
| `src/components/common/EmptyState.vue` | 按原型调整空状态 | 低 |
| `src/components/project/ProjectCard.vue` | 按原型调整项目卡片 | 中 |

---

## 七、待确认事项（需产品经理/设计师确认）

### 7.1 高优先级

| 编号 | 问题 | 影响 |
|------|------|------|
| Q1 | **TabBar数量**：排班页面是作为独立Tab存在，还是调度端首页内的功能入口？现有4个Tab，原型只有3个。 | 页面架构 |
| Q2 | **角色切换后TabBar变化**：不同角色是否显示不同的底部导航？小程序custom-tab-bar有切换限制。 | 导航架构 |
| Q3 | **销售端"任务提醒"按钮**：原型首页有这个快捷入口，现有代码也有，但位置和样式需确认。 | 首页布局 |

Q1 排班页面是作为调度端独立Tab存在 三个端中只有调度端有排班
Q2 是 所以可能需要自定义底部导航栏
Q3 任务提醒很好 但是要注意不要跟小程序默认功能起冲突
### 7.2 中优先级

| 编号 | 问题 | 影响 |
|------|------|------|
| Q4 | **统计卡片点击**：原型统计卡片是否可点击跳转？跳转到哪里？ | 交互逻辑 |  展示不确定 先保留
| Q5 | **施工端"每日任务"入口**：原型是一个大的卡片入口，现有是一个uni-card包裹的列表项，哪种为准？ | 首页布局 | 原型
| Q6 | **禁用功能入口**：原型有"客户管理""合同管理"等禁用的快捷入口，是否保留显示？ | 功能规划 | 保留 你可以自己拓展一下二级页面
| Q7 | **渐变色的精确值**：原型使用Tailwind的渐变类，小程序中需要精确色值，请确认。 | 视觉还原 | 不用太过一致大致相同即可

### 7.3 低优先级

| 编号 | 问题 | 影响 |
|------|------|------|
| Q8 | **FontAwesome图标**：uni-icons可能没有完全对应的图标，是否允许使用相近替代？ | 图标还原 | 可以 对了尽可能不要使用emoji表情
| Q9 | **原型的交互动画**：如页面切换、按钮点击等动画效果，是否全部还原？ | 体验优化 | 还原
| Q10 | **响应式适配**：原型设计宽度430px，小程序需适配各种屏幕，是否按原型max-width限制？ | 适配策略 | 尽量适配各种屏幕

---

## 八、开发计划建议

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

1. 修改 `variables.scss` - 新增渐变变量
2. 修改 `global.scss` - 按钮、表单样式统一
3. 修改 `uni-card.vue` - 移除边框，调整阴影
4. 修改 `TopBar.vue` - 确认渐变样式

### 8.2 第二阶段：首页组件还原（2-3天）

1. 重构 `SalesHome.vue` - 统计卡片、快捷入口
2. 重构 `DispatchHome.vue` - 统计卡片、快捷入口
3. 重构 `ConstructionHome.vue` - 统计卡片、快捷入口
4. 调整 `custom-tab-bar` - 底部导航样式

### 8.3 第三阶段：列表/卡片组件（2-3天）

1. 重构 `TaskCard` 系列组件
2. 重构 `ProjectCard`
3. 新增 `GradientStatCard` 组件
4. 新增 `QuickEntry` 组件

### 8.4 第四阶段：详情页/表单页（3-5天）

1. 任务详情页样式调整
2. 项目详情页样式调整
3. 表单页面样式统一
4. 新增 `Timeline`、`ProgressBar` 等组件

### 8.5 第五阶段：施工端特殊页面（2-3天）

1. 每日任务页面
2. 施工流程进度条
3. 拍照上传组件
4. 检查项列表

---

## 九、附录

### 9.1 原型页面完整清单

```
登录页
├── loginPage

销售端
├── salesPage (首页)
├── taskPage (任务页) — 与销售端共用
├── profilePage (我的页)
├── sales_basicInfoPage (基本信息)
├── sales_changePasswordPage (修改密码)
├── sales_notificationPage (消息通知)
├── sales_helpCenterPage (帮助中心)
└── sales_taskReminderPage (任务提醒)

调度端
├── dispatch_homePage (首页)
├── dispatch_taskPage (任务页)
├── dispatch_myPage (我的页)
├── dispatch_schedulePage (排班)
├── dispatch_publishTaskPage (发布任务)
├── dispatch_taskDetailPage (任务详情)
├── dispatch_vehicleListPage (车辆列表)
├── dispatch_availableVehiclesPage (可用车辆)
├── dispatch_personnelPage (人员管理)
├── dispatch_dutyPersonnelPage (执勤人员)
├── dispatch_onDutyStaffPage (当班人员)
├── dispatch_emergencyTeamPage (应急班组)
├── dispatch_emergencyStandbyPage (应急待命)
├── dispatch_visualizationPage (可视化)
├── dispatch_basicInfoPage (基本信息)
├── dispatch_changePasswordPage (修改密码)
├── dispatch_notificationPage (通知消息)
├── dispatch_noticeListPage (通知列表)
├── dispatch_noticeDetailPage (通知详情)
└── dispatch_helpCenterPage (帮助中心)

施工端
├── construction_homePage (首页)
├── construction_taskPage (任务页)
├── construction_myPage (我的页)
├── construction_dailyTaskPage (每日任务)
├── construction_historyTaskPage (历史任务)
├── construction_tomorrowTaskPage (明日任务)
├── construction_taskDetailPage (任务详情)
├── construction_noticeListPage (通知列表)
├── construction_noticeDetailPage (通知详情)
├── construction_notificationPage (通知消息)
├── construction_basicInfoPage (基本信息)
├── construction_changePasswordPage (修改密码)
└── construction_helpCenterPage (帮助中心)

公共页面
├── projectListPage (项目库)
├── projectDetailPage (项目详情)
├── addProjectPage (新增项目)
├── publishTaskPage (发布任务)
├── taskDetailPage (任务详情)
├── changePasswordPage (修改密码)
├── noticeListPage (通知公告)
├── noticeDetailPage (通知详情)
├── messageListPage (消息列表)
├── messageDetailPage (消息详情)
├── helpCenterPage (帮助中心)
├── knowledgeListPage (知识库)
└── knowledgeDetailPage (知识详情)
```

### 9.2 参考文件位置

- 原型文件：`D:\work\绿水青山\清道夫App\docs\原型\清道夫系统原型_完整版_V21_SOP.html`
- 现有代码：`D:\work\绿水青山\清道夫App\src\`

---

*文档生成时间：2026-07-09*
*分析人：AI Assistant*