清道夫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 阴影规范

卡片阴影: 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）：

<view class="rounded-xl p-4 text-center text-white" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6);">

原型要求：

<!-- 卡片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）：

.uni-card {
  border: 1px solid #e5e7eb;  /* 有边框 */
}

原型要求：

.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  /* 无边框 */
}

4.2.3 任务卡片

原型特有样式需新增：

/* 应急/加急 - 左侧红色边框 */
.task-card.emergency {
  border-left: 4px solid #ef4444;
}

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

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

4.2.4 按钮样式

现有（global.scss）：

.btn-primary {
  background-color: $primary;  /* 纯色 */
}

原型要求：

.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）：

"tabBar": {
  "list": [
    { "pagePath": "pages/home/home", "text": "首页" },
    { "pagePath": "pages/schedule/schedule", "text": "排班" },
    { "pagePath": "pages/task/task", "text": "任务" },
    { "pagePath": "pages/my/my", "text": "我的" }
  ]
}

原型底部导航（3个Tab）：

首页
任务
我的

❓ 待确认：

排班页面是否作为TabBar独立存在？还是仅调度端显示？

不同角色是否显示不同的TabBar？（小程序custom-tab-bar支持动态设置但有限制）

原型中调度端有"排班"功能，但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 颜色使用规范

// 主题色（保持现有变量，值与原型一致）
$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 组件开发规范

命名：PascalCase，语义化
样式：优先使用Tailwind工具类，复杂样式用scoped <style>
图标：统一使用uni-icons，FontAwesome图标需映射到uni-icons对应图标
颜色：禁止硬编码颜色值，使用Tailwind配置变量或SCSS变量
间距：统一使用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可能没有完全对应的图标，是否允许使用相近替代？	图标还原
Q9	原型的交互动画：如页面切换、按钮点击等动画效果，是否全部还原？	体验优化
Q10	响应式适配：原型设计宽度430px，小程序需适配各种屏幕，是否按原型max-width限制？	适配策略

八、开发计划建议

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

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

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

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

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

重构 TaskCard 系列组件
重构 ProjectCard
新增 GradientStatCard 组件
新增 QuickEntry 组件

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

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

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

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

九、附录

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

UI还原开发文档.md 26 KB História Raw

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

一、项目现状概述

1.1 现有技术栈

1.2 现有目录结构

1.3 现有自定义组件清单

二、原型UI分析

2.1 原型技术特征

2.2 三大角色端

2.3 原型核心UI特征

2.3.1 色彩体系

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

2.3.3 调度端统计卡片渐变

2.3.4 施工端统计卡片渐变

2.3.5 圆角规范

2.3.6 阴影规范

三、UI库需求清单

3.1 已有UI库（无需新增）

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

3.3 需要自定义开发的组件

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

4.1 冲突汇总表

4.2 详细样式差异

4.2.1 统计卡片

4.2.2 卡片边框

4.2.3 任务卡片

4.2.4 按钮样式

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

5.1 页面结构差异

5.2 底部导航栏差异

5.3 页面路由映射

5.4 数据流和状态管理

5.5 交互逻辑差异

六、开发规范

6.1 样式优先级规则

6.2 颜色使用规范

6.3 组件开发规范

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

6.5 文件修改清单

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

7.1 高优先级

7.2 中优先级

7.3 低优先级

八、开发计划建议

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

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

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

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

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

九、附录

9.1 原型页面完整清单

9.2 参考文件位置

UI还原开发文档.md 26 KB

História Raw