开发计划.md 9.2 KB
清道夫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