🎨 Gate5 - UI 设计 ✅ 已完成

项目:配件管理项目 - 采购核销流程优化

阶段:Gate5 UI 设计

时间:2026-03-13 15:45 完成 | 修正时间:2026-03-14 09:30 | 更新时间:2026-03-19 14:05

负责人:designer Agent

IPD 版本:v6.8-真实执行增强版

产出物标准:v1.1-UI 图 + 真实代码增强版

📝 2026-03-14 修正内容(青青要求)

✅ 需求 1:普通网购不需要上传配件照片和物流支付截图

普通网购类型的采购核销,移除"配件照片"和"物流支付截图"上传要求,仅需上传:网购订单详情、支付记录(共 2 张)

✅ 需求 2:工单详情页与参考图片完全一致

工单详情页重新设计,包含:工单状态卡片、基本信息、SKU 列表(支持添加/编辑/删除),点击"添加"按钮进入添加 SKU 界面

📋 产出物清单(5 项)

🎨 UI 设计规范

色彩系统

类型颜色色值使用场景
主色科技蓝#0070FF主按钮、链接、选中状态
主色深蓝#005ACB主按钮悬停、标题
主色浅蓝#F0F1F2背景色、卡片背景
辅助色成功绿#00CC9C成功状态、通过标签
辅助色警告橙#FF9000警告提示、待处理
辅助色错误红#FF2F2B错误提示、驳回标签
辅助色信息青#33B4A6信息提示、标签

字体规范

用途字号字重行高示例
大标题24px700 Bold1.5页面标题
小标题18px600 SemiBold1.5模块标题
正文16px400 Regular1.75主要内容
辅助文字14px400 Regular1.5说明文字
次要文字12px400 Regular1.5时间、标签

组件规范

组件尺寸圆角状态
按钮高度 40px4px正常/悬停/点击/禁用
输入框高度 40px4px正常/焦点/错误/禁用
卡片自适应8px阴影 0 2px 8px rgba(0,0,0,0.1)
列表项高度 60px0正常/悬停/选中

🤖 AI 智能校验流程(2026-03-19 新增)

适用范围:任何采购渠道(线下门店/普通网购/新机),所有添加的 SKU 都需要按 SKU 拍摄配件照片

📋 校验流程(5 步):

  1. 拍摄配件图片 → 系统自动识别配件
  2. SKU 对比 → 与工程师选择的 SKU 进行对比
  3. 如果不符
    • 系统提醒:"SKU 选择错误"
    • 显示正确的 SKU 建议
    • 工程师可选择系统建议的 SKU
  4. 如果选择建议的 SKU
    • 系统自动更新为新 SKU
    • 重新校验购买的单价和数量
    • 根据新 SKU 的限价重新校验
  5. 如果坚持原 SKU
    • 记录选择(标记为"人工确认")
    • 进入后续流程(审核时会重点检查)

✅ 匹配成功

配件图片与 SKU 一致,自动通过校验

⚠️ 不匹配

显示正确 SKU 建议,工程师可选择或坚持原选择

📱 工程师端 APP UI(6 个页面)

1. 工单详情页(新增)

📋 设计说明:工单详情页新增配件管理功能,工程师可在此页面直接添加配件或使用库存配件

工单详情

✅ 服务已完成

工单号:GD202603180001

📋 基本信息

产品:空调 3 匹

故障:不制冷

地址:北京市朝阳区 XX 小区 3-2-101

💡 添加配件:从 SKU 库选择新配件
📦 使用配件:从我的库存选择

2. 选择 SKU 页面

📋 设计说明:根据工单产品自动过滤,只显示该工单产品能报销的配件(配件基础信息配置已按产品限制)

选择配件

当前工单产品:空调 3 匹(仅展示空调配件)

🔍 搜索配件名称/编码

空调压缩机

编码:KT-YSJ-001

适用:空调 3 匹

空调电容

编码:KT-DL-002

适用:空调 1.5 匹

空调支架

编码:KT-ZJ-003

适用:空调 3 匹

3. 填写采购信息页面

填写采购信息

配件:空调压缩机

编码:KT-YSJ-001

请输入数量

单位来自配件基础信息配置(个/台/套等)

¥
下一步

已采购的配件(3 个)

空调压缩机 KT-YSJ-001

购买数量:1 | 单价:¥580

待上传凭证

空调电容 KT-DL-002

购买数量:2 | 单价:¥45

待上传凭证

空调支架 KT-ZJ-003

购买数量:1 | 单价:¥80

待上传凭证

✅ 提示:以上配件在同一家店购买,只需上传一次凭证即可

🏪 线下门店

默认

📱 普通网购

🚴 工程师自提

默认

🚚 叫跑腿取货

⚠️ 温馨提示:选择叫跑腿取货,运费需单独报销,请保留好运费支付凭证

📦 线下门店采购(工程师自提)

需要上传 4 张凭证

凭证 1:门头照 *

📖 查看示例图
📷 点击拍摄门店门头

要求:清晰展示门店招牌、门头完整

凭证 2:购买单据照 *

📖 查看示例图
📷 点击拍摄购买单据

要求:单据内容完整、金额清晰、日期可见

凭证 3:支付截图 *

📖 查看示例图
📷 点击上传支付截图

要求:微信/支付宝支付详情页,显示收款方、金额、时间

凭证 4:配件照(每个配件都需要) *

📖 查看示例图

空调压缩机 KT-YSJ-001

📷 点击拍摄配件

空调电容 KT-DL-002

📷 点击拍摄配件

空调支架 KT-ZJ-003

📷 点击拍摄配件

要求:每个配件都需要单独拍摄,清晰展示配件外观、标签、型号

🚚 线下门店采购(叫跑腿取货)

需要上传 4 张凭证

凭证 1:配件支付截图 *

📖 查看示例图
📷 点击上传配件支付截图

要求:微信/支付宝支付详情页,显示收款方、金额、时间

凭证 2:物流订单详情 *

📖 查看示例图
📷 点击上传物流订单详情

要求:跑腿订单详情页,显示取货地址、送货地址

凭证 3:购买收据 *

📖 查看示例图
📷 点击上传购买收据

要求:门店开具的收据/小票,内容完整

凭证 4:收货照/包裹照/装车照 *

📖 查看示例图
📷 点击上传收货照片

要求:收到配件的照片,包裹或装车场景

📦 普通网购

需要上传 1 张凭证

凭证:网购订单详情 *

📖 查看示例图
📷 点击上传订单详情(支持上传 2 张图片)

要求:电商平台订单详情页,显示商品、金额、下单时间

📝 说明:如果是新机,需要上传发票和网购订单详情,工程师可以自行上传两张图片

2026-03-14 修正:普通网购类型工单不需要上传配件照片和支付记录,仅需上传网购订单详情即可

提交采购

5. 核销操作页面

核销操作

配件:空调压缩机

使用数量

新旧配件合照

📷 点击拍摄
提交核销

6. 库存管理页面(新增)

我的库存

12

库存配件数

¥2,340

库存总金额

3

待核销配件

库存配件列表

空调压缩机

编码:KT-YSJ-001 | 类别:空调配件

2 个渠道

📦 选择使用渠道:

🏪

线下门店

入库:2026-03-15

¥350/个

库存:3 个

📱

普通网购

入库:2026-03-14

¥280/个

库存:5 个

空调电容

编码:KT-DL-002 | 类别:空调配件

1 个渠道

📦 选择使用渠道:

🏪

线下门店

入库:2026-03-16

¥45/个

库存:5 个

7. 配件使用页面(新增)

配件使用

📦 已选配件

空调压缩机

编码:KT-YSJ-001

当前库存

8 个

💡 从库存管理页面选择,无需重复选择

请输入使用数量

本次在用户家中实际使用的数量

📷 点击拍摄新旧配件合照

📦 使用后库存变化

当前库存:9 个

使用数量:1 个

剩余库存:8 个

提交核销

8. 超标处理页面(新增)

📋 UI 设计说明(以下内容仅给青青和开发看,不展示给师傅)

超标类型配置判断处理方式
备件数量超标-❌ 不允许提交,无需报备
使用数量超标超量可提交=是✅ 允许提交,需要报备截图
使用数量超标超量可提交=否❌ 不允许提交
单价超标超额可提交=是✅ 允许提交,需要报备截图
单价超标超额可提交=否❌ 不允许提交

📱 工程师 APP 实际展示内容(5 个场景)

场景 1:备件数量超标

⚠️ 备件数量超标

配件:空调压缩机

该配件一次性只能备 10 个,请减少配件数量

场景 2:使用数量超标(允许提交)

⚠️ 使用数量超标

配件:空调电容

该配件的使用数量超过常规值,请上传领导审批钉钉截图

📷 点击上传钉钉审批截图

场景 3:使用数量超标(不允许提交)

⚠️ 使用数量超标

配件:空调电容

该配件的使用数量超过常规值,不允许提交,请减少数量。

场景 4:单价超标(允许提交)

⚠️ 单价超标

配件:空调压缩机

该配件的单价超过市场价,请上传领导审批钉钉截图。

📷 点击上传钉钉审批截图

场景 5:单价超标(不允许提交)

⚠️ 单价超标

配件:空调压缩机

该配件的单价超过市场价,不允许提交。

💻 PC 端审核后台 UI(2 个页面)

1. 线下门店采购审核页面

配件管理后台 - 采购审核

工单号

GD20260313001

工程师

张三

提交时间

2026-03-13 15:30

采购渠道

线下门店

配件名称

空调压缩机

金额

¥580

凭证预览(4 张)

配件照片

配件照片

发票照片

发票照片

支付记录

支付记录

新旧合照

新旧合照

审核操作

驳回
通过

2. 普通网购审核页面

配件管理后台 - 采购审核

工单号

GD20260313002

工程师

李四

提交时间

2026-03-13 14:20

采购渠道

普通网购

配件名称

空调电容

金额

¥45

凭证预览(4 张)

配件照片

配件照片

发票照片

发票照片

支付记录

支付记录

新旧合照

新旧合照

审核操作

驳回
通过

💻 PC 端后台管理 UI(2 个页面)

1. 配件基础信息配置

配件管理后台 - 配件基础信息配置
🔍 搜索配件名称
🔍 搜索配件编码
批量导入
+ 新增
配件编码 配件名称 产品 一级分类 二级分类 三级分类 标准用量 最大用量 超量可提交 标准价 (元) 最大单价 超额可提交 是否可备件 最大备件数 操作
KT-YSJ-001 空调压缩机 空调 3 匹 空调配件 核心部件 压缩机 1 2 580 650 5 编辑 删除
KT-DL-002 空调电容 空调 1.5 匹 空调配件 电气部件 电容 2 3 45 50 - 编辑 删除
BX-WDK-003 冰箱温控器 双门冰箱 冰箱配件 控制部件 温控器 1 1 120 120 3 编辑 删除

已选择 0 项,共 3

每页显示 1 页,共 1

2. 示例图管理

凭证示例图管理
+ 上传示例图
配件照示例

配件照片

编辑
发票示例

发票照片

编辑
支付记录示例

支付记录

编辑
旧件照示例

旧配件照

编辑

🎬 交互原型设计

采购流程(第一次上门前 - 线下门店)

流程步骤:

  1. 工单详情页 → 点击"🛒 采购配件"按钮
  2. 选择 SKU 页面 → 搜索/选择配件
  3. 填写采购信息页面 → 输入购买数量/单价 → 系统实时校验
  4. 上传凭证页面 → 根据采购渠道上传对应凭证(门头照/购买单据/支付截图等)
  5. 提交采购 → 配件进入个人库存
  6. 库存更新 → 购入数量 +1,待使用状态

使用流程(第二次上门后 - 用户家中)

流程步骤:

  1. 工单详情页 → 点击"🔧 使用配件"按钮
  2. 配件使用页面 → 从个人库存选择配件
  3. 填写使用数量 → 输入实际使用数量
  4. 拍摄新旧配件合照 → 在用户家中拍摄
  5. 提交使用记录 → 库存扣减,进入核销流程
  6. 系统检查 → 如有超标,进入超标处理页面

审核流程

流程步骤:

  1. 审核列表页面 → 查看待审核单据
  2. 审核详情页面 → 查看工单信息、配件信息、4 张凭证
  3. 系统自动校验:价格是否超标、凭证是否完整
  4. 审核员决策:通过(自动打款)/ 驳回(填写驳回原因)
  5. 审核完成 → 通知工程师

交互细节

9. 工程师外报库存管理页面(PC 端后台 - 新增)

📋 功能说明:

💡 使用场景:

📦 工程师外报库存管理

管理所有工程师的外报配件库存数据

156

工程师总数

2,340

库存配件总数

¥458,920

库存总金额

12

已禁用配件

工程师信息 配件名称 采购渠道 购入数量 已使用 当前库存 库存金额 状态 操作

张三

GS2024001

空调压缩机

KT-YSJ-001

🏪 线下门店 10 个 1 个 9 个 ¥2,700 ✓ 正常

📋 功能说明

✅ 验收检查清单

验收项标准状态
UI 设计规范色彩/字体/组件规范完整✅ 通过
工程师端 UI5 个页面 UI 图完整✅ 通过
审核员端 UI2 个页面 UI 图完整✅ 通过
后台管理 UI2 个页面 UI 图完整✅ 通过
交互原型采购/审核/核销流程完整✅ 通过
设计一致性9 个页面风格统一✅ 通过

📎 文档链接

X. SKU 选择错误提示页面(2026-03-19 新增)

📋 设计说明:当 AI 识别配件与工程师选择的 SKU 不符时,显示此提示页面

⚠️ SKU 选择错误
⚠️

您选择的 SKU 与配件不符

AI 识别结果显示这是另一个配件

❌ 您选择的 SKU:

空调压缩机

编码:KT-YSJ-001

适配:空调 3 匹

¥580

限价:¥600

✅ AI 识别结果:

空调电容

编码:KT-DL-002

适配:空调 1.5 匹

¥45

限价:¥50

📸 配件对比

📷

您拍摄的配件

📷

SKU 库中的配件

💡 提示:
• 选择"使用建议 SKU":系统自动更新,重新校验单价和数量
• 选择"坚持原选择":记录为"人工确认",审核时会重点检查

💰 报销单状态和库存管理(2026-03-19 新增)

📋 设计说明:报销单状态变化会自动触发库存状态变化,确保库存数据准确

报销单状态和库存管理
报销单状态 库存状态 说明 UI 标识
X 级待审批 🧊 冻结 工程师提交后,库存冻结 X 级待审批
待报销 🧊 冻结 审批通过,等待报销 待报销
结算 ✅ 扣减 报销完成,库存扣减 结算
X 级审批驳回 ↩️ 还原 审批驳回,库存还原 已驳回

📋 提交流程说明

  1. 工程师提交核销 → 生成报销单,状态为"X 级待审批",库存冻结
  2. 审批通过 → 状态变为"待报销",库存继续冻结
  3. 报销完成 → 状态变为"结算",库存自动扣减
  4. 审批驳回 → 状态变为"X 级审批驳回",库存自动还原