🎬 Gate4 - 产品设计 ✅ 已通过

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

阶段：Gate4 产品设计

时间：2026-03-12 至 2026-03-19

负责人：pm Agent

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

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

📋 产出物清单

✅ 页面流程设计（11 个页面）
已完成查看网页 →
位置：配件管理项目/Gate4-产品设计/页面流程设计.html - 2026-03-19 更新
✅ 功能 BDD（PRD）
已完成查看网页 →
位置：配件管理项目/Gate4-产品设计/功能 BDD-PRD.html - 2026-03-19 更新
✅ 页面 BDD（信息架构设计）
已完成查看网页 →
位置：配件管理项目/Gate4-产品设计/信息架构设计.html - 2026-03-19 更新
✅ 线框图设计
已完成查看网页 →
位置：配件管理项目/Gate4-产品设计/线框图设计.html - 2026-03-19 更新
✅ 交互原型设计
已完成查看网页 →
位置：配件管理项目/Gate4-产品设计/交互原型设计.html - 2026-03-19 创建
✅ UI 设计规范（工程师 APP）
已完成查看网页 →
位置：配件管理项目/Gate4-产品设计/UI 设计规范.html - 2026-03-19 更新
✅ 交互原型设计
已完成查看文档 →
位置：配件管理项目/交互原型设计.md（6.0 KB）
✅ 技术方案详细设计
已完成
- 系统架构：前后端分离（Vue3 + Spring Boot）
- 数据库：MySQL 8.0（主从复制）
- 缓存：Redis（会话管理、热点数据）
- 部署：Docker 容器化、Nginx 反向代理
✅ 风险评估报告
已完成
- 技术风险：系统开发延期（中）→ 敏捷开发、分期交付
- 运营风险：供应商配合度低（高）→ 建立合作机制、激励政策
- 财务风险：凭证造假风险（高）→ 水印相机 + 系统校验
- 数据风险：数据泄露（中）→ 权限管控、数据加密
✅ 验收标准
已完成
- 功能验收：9 个页面全部完成，功能测试通过率 100%
- 性能验收：接口响应 < 500ms，并发支持 1000+ QPS
- 质量验收：代码审查通过率 100%，Bug 率 < 1%
- 业务验收：报销单量↓60%，审核人力↓70%，自动化率↑80%

🔧 技术方案详细设计

系统架构

层级	技术选型	说明
前端	Vue3 + Vant UI	工程师端/审核员端 APP
后端	Spring Boot 2.7	RESTful API、业务逻辑
数据库	MySQL 8.0	主从复制、读写分离
缓存	Redis 6.0	会话管理、热点数据缓存
文件存储	本地存储/Nginx	凭证图片存储
部署	Docker + Nginx	容器化部署、反向代理

核心模块设计

采购模块：配件搜索、采购申请、价格校验（三级分类限价）
核销模块：凭证上传（4 张）、自动化审核（规则引擎）、核销确认
库存模块：库存查询、备件使用、库存流水记录
审核模块：审核列表、审核详情、系统校验、自动打款

数据库设计

配件基础信息表（parts_base）
采购申请表（purchase_apply）
凭证表（voucher）
核销记录表（write_off）
库存表（inventory）
库存流水表（inventory_log）

⚠️ 风险评估报告

风险类型	风险描述	等级	概率	应对措施
技术风险	系统开发延期	中	中	敏捷开发、分期交付
运营风险	供应商配合度低	高	低	建立合作机制、激励政策
财务风险	凭证造假风险	高	中	水印相机 + 系统校验 + 电话回访
数据风险	数据泄露	中	低	权限管控、数据加密、日志审计
价格风险	配件价格超标	中	中	三级分类限价控制、实时校验

✅ 验收标准

功能验收

验收项	标准	优先级
页面完整性	9 个页面全部完成（工程师 5 页 + 审核员 2 页 + 后台 2 页）	P0
功能测试	功能测试通过率 100%	P0
凭证上传	支持 4 张凭证上传、水印相机拍摄	P0
自动化审核	自动化审核率 ≥ 80%	P0
价格校验	三级分类限价实时校验，超标禁止提交	P0

性能验收

指标	目标值	优先级
接口响应时间	< 500ms	P0
并发支持	≥ 1000 QPS	P1
页面加载时间	< 2s	P1
系统可用性	≥ 99.9%	P0

质量验收

指标	目标值	优先级
代码审查通过率	100%	P0
Bug 率	< 1%	P0
严重 Bug 数	0	P0

业务验收

指标	当前值	目标值	验收标准
备件超标拦截率	0%	80%	月度拦截 500 单+
数量超标拦截率	0%	85%	月度拦截 800 单+
单价超标拦截率	0%	90%	月度拦截 30 万元+
系统前置校验拦截总额	0 元	50 万元+	月度拦截总额

📊 页面设计概览

工程师端 APP（6 个页面）- 2026-03-19 更新

序号	页面名称	状态	说明
1	工单详情页	已完成	已有页面，新增采购入口
2	选择 SKU 页面	已完成	搜索、筛选、配件列表（不展示限价，仅校验）
3	填写采购信息页面	已完成	单价/数量/使用量、实时校验（不展示限价）
4	上传凭证页面	已完成	4 张凭证、查看示例图
5	我的库存页面	已完成	分购买渠道选择配件
6	核销操作页面	已完成	使用数量、新旧合照

审核员端 PC 端（2 个页面）- 2026-03-19 修正

序号	页面名称	状态	说明
1	审核列表页面	已完成	状态筛选、时效标签（PC 端）
2	审核详情页面	已完成	凭证查看、系统校验（PC 端）

后台管理端（3 个页面）- 2026-03-19 更新

序号	页面名称	状态	说明
1	配件基础信息配置	已完成	搜索、批量操作
2	示例图管理	已完成	凭证类型管理
3	工程师库存管理页面	已完成	多维度查看（子公司/产品组/业务线/服务商/工程师/工程师 ID）、配件信息（数量/单价/出库记录/购买单据）、配件禁用

🎨 UI 设计规范（2026-03-19 更新）

颜色规范

核心品牌色（主色）：#0070FF（专业、信赖、稳重）
辅助色：#00CC9C（奖励/成功）、#FF2F2B（警示）、#FF9000（警告）
中立色：#1F2123（主标题）、#606162（副标题）、#999A9B（辅助文字）、#F0F1F2（浅灰背景）

文字规范

字体：汉字默认方字体、特殊数字默认 Din 字体
行高：所有文字行高默认 150%
间距：左右间距统一 12px、上下间距需减除行高留白

UI 组件规范（6 大类）

基础操作组件：勾选框、按钮（吸底高度 8px/24px）、步进器、上传
输入类组件：自定义键盘、输入框、选择器
展示类组件：标签、表格、价格、图片、选项卡、公告栏
流程/导航组件：步骤条、引导（文案≤20 字）
弹窗/层组件：弹出层、对话框（最高 384px）
反馈类组件：角标、轻提示（3s 消失）、缺省页、提交反馈

规范来源

由啄木鸟 UED、交互设计组制定，适用于 APP 全端界面设计与开发落地

🎬 交互流程

采购流程（工程师端）- 2026-03-19 更新

工单详情页 → 点击"采购"按钮
选择 SKU 页面 → 选择配件（不展示限价，仅校验）
选择采购渠道 → 线下门店/普通网购
填写采购信息页面 → 输入单价/数量/使用量（不展示限价，仅校验）
上传凭证页面 → 上传 4 张凭证
核销操作页面 → 拍摄新旧合照
提交报销 → 进入审核流程

使用库存流程（工程师端）- 2026-03-19 新增

工单详情页 → 点击"使用"按钮
我的库存页面 → 分渠道选择配件
输入使用数量 → 系统校验
拍摄新旧合照 → 提交核销

审核流程（审核员 PC 端）- 2026-03-19 修正

审核列表页面（PC 端） → 点击"开始审核"
审核详情页面（PC 端） → 查看凭证/系统校验
填写审核意见
审核通过/驳回 → 自动打款/退回修改

✅ 验收检查清单

页面流程设计完整（11 个页面 - 工程师端 6 个 + 审核员端 2 个 + 后台管理 3 个）
功能 BDD 清晰（PRD 文档）
页面 BDD 详细（信息架构设计）
线框图设计完成（11 个页面 ASCII 线框图）
UI 设计规范完整（色彩/字体/组件/交互）
交互原型设计完成（9 个页面交互说明）
技术方案详细设计
风险评估报告
验收标准

📅 下一步计划

阶段	时间	交付物	状态
Gate4 收尾	03-17	技术方案、风险评估、验收标准	已完成
Gate5 UI 设计	03-16~17	UI 图、交互原型	待开始
Gate6 研发编码	03-18	真实代码、API 文档	待开始
Gate7 测试验收	03-19	测试报告、验收评分	待开始
Gate8 发布上线	03-19 18:00	部署计划、监控配置	待开始