王文昊
bbddcb494d
1. 新增甲方客户CRUD接口、前端页面与权限控制 2. 新增发货单管理模块，包含订单状态流转 3. 修复系统菜单名称乱码问题 4. 新增项目启动脚本与数据库初始化脚本 5. 新增相关实体类、Mapper、Service实现 6. 补充项目设计文档与忽略配置
798 lines
21 KiB
Markdown
798 lines
21 KiB
Markdown
# 甲方客户界面及订单相关页面设计流程文档
|
||
|
||
## 一、Shipping_System Demo 全面分析
|
||
|
||
### 1.1 交互模式分析
|
||
|
||
#### 1.1.1 页面导航结构
|
||
```
|
||
顶部导航栏（固定）
|
||
├── Logo区域（品牌标识）
|
||
├── 主导航菜单（水平排列）
|
||
│ ├── 总览（Dashboard）
|
||
│ ├── 物料管理
|
||
│ ├── 客户管理
|
||
│ ├── 待发订单
|
||
│ ├── 在途订单
|
||
│ ├── 历史订单
|
||
│ ├── 结单时间
|
||
│ ├── 数据报表
|
||
│ └── 操作记录
|
||
└── 系统状态指示器
|
||
|
||
内容区域（单页应用模式）
|
||
├── 页面标题区（Section Header）
|
||
├── 工具栏（搜索/筛选/操作按钮）
|
||
├── 数据表格/卡片区域
|
||
└── 分页/统计信息
|
||
```
|
||
|
||
#### 1.1.2 核心交互模式
|
||
|
||
| 交互类型 | 实现方式 | 用户体验特点 |
|
||
|---------|---------|-------------|
|
||
| 页面切换 | 单页应用(SPA)，无刷新切换 | 快速、流畅 |
|
||
| 数据加载 | 异步fetch API，loading状态 | 非阻塞、有反馈 |
|
||
| 表单提交 | Modal弹窗，实时验证 | 沉浸式、不打断 |
|
||
| 搜索筛选 | 防抖输入(300ms)，即时响应 | 高效、省资源 |
|
||
| 状态流转 | 按钮操作+状态标签变色 | 直观、可追踪 |
|
||
| 数据展示 | 表格+卡片+图表混合 | 信息层次清晰 |
|
||
|
||
#### 1.1.3 关键交互细节
|
||
|
||
**订单状态流转：**
|
||
```
|
||
待发(PENDING) → 在途(TRANSIT) → 历史(HISTORY)
|
||
↓ ↓
|
||
编辑/删除 完成/撤回
|
||
```
|
||
|
||
**预警提示机制：**
|
||
- 交货期预警：红色边框+逾期天数标签
|
||
- 状态标识：彩色Badge标签
|
||
- 操作反馈：Toast消息提示
|
||
|
||
### 1.2 布局结构分析
|
||
|
||
#### 1.2.1 整体布局框架
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ [Logo] 总览 物料管理 客户管理 待发...在途...历史... │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 页面标题 [状态标签] │
|
||
│ ───────────────────────────────────────────────────────── │
|
||
│ │
|
||
│ [搜索框] [筛选器] [新增按钮] │
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────┐ │
|
||
│ │ 数据表格 │ │
|
||
│ │ ───────────────────────────────────────────────── │ │
|
||
│ │ 订单号 客户 金额 交货期 状态 操作 │ │
|
||
│ │ ORD-001 XXX ¥100 2026-06 PENDING [详][编][发] │ │
|
||
│ └─────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 1.2.2 响应式断点设计
|
||
|
||
| 断点 | 宽度 | 布局调整 |
|
||
|-----|------|---------|
|
||
| Desktop | ≥1200px | 完整布局，多列展示 |
|
||
| Tablet | 768-1199px | 简化表格，隐藏次要列 |
|
||
| Mobile | <768px | 卡片式布局，垂直堆叠 |
|
||
|
||
#### 1.2.3 页面类型模板
|
||
|
||
**列表页模板：**
|
||
- 顶部：标题 + 状态说明
|
||
- 工具栏：搜索 + 筛选 + 主要操作
|
||
- 内容区：数据表格
|
||
- 底部：分页器
|
||
|
||
**详情/编辑页模板：**
|
||
- Modal弹窗形式
|
||
- 分区块表单（2列布局）
|
||
- 底部操作按钮组
|
||
|
||
**报表页模板：**
|
||
- KPI指标卡片行
|
||
- 图表网格（2列）
|
||
- 详细数据表格
|
||
|
||
### 1.3 功能模块划分
|
||
|
||
#### 1.3.1 模块结构图
|
||
|
||
```
|
||
shipping_system
|
||
├── 核心数据模块
|
||
│ ├── 物料管理（SKU级）
|
||
│ ├── 客户管理（企业/个人）
|
||
│ └── 订单管理（生命周期）
|
||
├── 业务流程模块
|
||
│ ├── 订单状态流转
|
||
│ ├── 结单时间管理
|
||
│ └── 发货记录追踪
|
||
├── 分析报表模块
|
||
│ ├── 统计概览
|
||
│ ├── 趋势分析
|
||
│ └── 排名报表
|
||
└── 系统管理模块
|
||
├── 操作日志
|
||
└── 数据审计
|
||
```
|
||
|
||
#### 1.3.2 功能对照表
|
||
|
||
| 功能模块 | 当前项目对应 | 复用建议 |
|
||
|---------|-------------|---------|
|
||
| 客户管理 | 甲方客户管理 | 高度复用界面结构 |
|
||
| 订单管理 | 销售订单/发货单 | 复用状态流转逻辑 |
|
||
| 物料管理 | 产品/物料库 | 复用表格布局 |
|
||
| 数据报表 | 统计分析 | 复用图表组件 |
|
||
| 操作记录 | 系统日志 | 复用表格+筛选 |
|
||
|
||
---
|
||
|
||
## 二、视觉设计规范提取
|
||
|
||
### 2.1 色彩系统
|
||
|
||
#### 2.1.1 主色调（工业暗黑风）
|
||
|
||
```css
|
||
:root {
|
||
/* 背景层级 */
|
||
--bg: #1a1c1e; /* 主背景 - 深灰黑 */
|
||
--bg2: #222426; /* 卡片背景 */
|
||
--bg3: #2a2d30; /* 表头/输入框背景 */
|
||
--bg4: #333639; /* 悬停背景 */
|
||
|
||
/* 边框层级 */
|
||
--border: #3a3d41; /* 普通边框 */
|
||
--border2: #4a4d52; /* 高亮边框 */
|
||
|
||
/* 文字层级 */
|
||
--text: #c8ccd0; /* 主文字 - 浅灰 */
|
||
--text2: #8a8f96; /* 次要文字 */
|
||
--text3: #5a5f66; /* 禁用/提示文字 */
|
||
|
||
/* 强调色 */
|
||
--yellow: #e8b400; /* 主强调色 - 琥珀金 */
|
||
--yellow2: #ffcc00; /* 高亮 */
|
||
|
||
/* 状态色 */
|
||
--red: #c0392b; /* 危险/逾期 */
|
||
--red2: #e74c3c; /* 警告高亮 */
|
||
--green: #27ae60; /* 成功/完成 */
|
||
--green2: #2ecc71; /* 成功高亮 */
|
||
--blue: #2980b9; /* 信息/在途 */
|
||
--blue2: #3498db; /* 信息高亮 */
|
||
--orange: #d35400; /* 警告/待发 */
|
||
--orange2: #e67e22; /* 警告高亮 */
|
||
}
|
||
```
|
||
|
||
#### 2.1.2 色彩应用场景
|
||
|
||
| 场景 | 颜色 | 用途 |
|
||
|-----|------|------|
|
||
| 品牌标识 | #e8b400 | Logo、主按钮、强调线 |
|
||
| 成功状态 | #27ae60 | 完成、通过、正常 |
|
||
| 警告状态 | #e67e22 | 待发、待处理 |
|
||
| 危险状态 | #e74c3c | 逾期、删除、异常 |
|
||
| 信息状态 | #3498db | 在途、进行中 |
|
||
| 中性状态 | #8a8f96 | 草稿、默认 |
|
||
|
||
### 2.2 字体系统
|
||
|
||
```css
|
||
:root {
|
||
--font: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
|
||
}
|
||
```
|
||
|
||
| 元素 | 字号 | 字重 | 样式 |
|
||
|-----|------|------|------|
|
||
| Logo | 14px | 700 | 大写，字间距2px |
|
||
| 导航 | 12px | 700 | 大写，字间距0.5px |
|
||
| 页面标题 | 11px | 700 | 大写，字间距1.5px |
|
||
| 表格表头 | 11px | 700 | 大写，字间距0.5px |
|
||
| 表格内容 | 13px | 400 | 正常 |
|
||
| 按钮 | 12px | 400 | 字间距0.5px |
|
||
| 统计数字 | 28px | 700 | 字间距-1px |
|
||
|
||
### 2.3 间距系统
|
||
|
||
| 元素 | 间距值 |
|
||
|-----|-------|
|
||
| 页面内边距 | 20px |
|
||
| 卡片内边距 | 16px 20px |
|
||
| 表格单元格 | 8px 12px |
|
||
| 按钮内边距 | 5px 14px |
|
||
| 表单行间距 | 12px |
|
||
| 组件间隙 | 12-16px |
|
||
|
||
### 2.4 组件样式
|
||
|
||
#### 2.4.1 按钮规范
|
||
|
||
```css
|
||
/* 基础按钮 */
|
||
button {
|
||
padding: 5px 14px;
|
||
font-size: 12px;
|
||
border: 1px solid var(--border2);
|
||
background: var(--bg3);
|
||
transition: all .15s;
|
||
}
|
||
|
||
/* 主要按钮 */
|
||
.btn-primary {
|
||
background: var(--yellow);
|
||
color: #000;
|
||
border-color: var(--yellow);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* 危险按钮 */
|
||
.btn-danger {
|
||
border-color: var(--red);
|
||
color: var(--red);
|
||
}
|
||
|
||
/* 成功按钮 */
|
||
.btn-success {
|
||
border-color: var(--green);
|
||
color: var(--green);
|
||
}
|
||
```
|
||
|
||
#### 2.4.2 表格规范
|
||
|
||
```css
|
||
th {
|
||
background: var(--bg3);
|
||
color: var(--text2);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
border-bottom: 2px solid var(--yellow);
|
||
padding: 8px 12px;
|
||
}
|
||
|
||
td {
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
tr:hover td {
|
||
background: var(--bg3);
|
||
}
|
||
```
|
||
|
||
#### 2.4.3 状态标签(Badge)
|
||
|
||
```css
|
||
.badge-pending { /* 待发 */
|
||
color: #e67e22;
|
||
border-color: #e67e22;
|
||
background: rgba(230,126,34,.1);
|
||
}
|
||
|
||
.badge-transit { /* 在途 */
|
||
color: #3498db;
|
||
border-color: #3498db;
|
||
background: rgba(52,152,219,.1);
|
||
}
|
||
|
||
.badge-history { /* 历史 */
|
||
color: #27ae60;
|
||
border-color: #27ae60;
|
||
background: rgba(39,174,96,.1);
|
||
}
|
||
|
||
.badge-warn { /* 警告/逾期 */
|
||
color: var(--red2);
|
||
border-color: var(--red2);
|
||
background: rgba(231,76,60,.1);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 三、设计流程规划
|
||
|
||
### 3.1 阶段一：需求分析与确认（3-5天）
|
||
|
||
#### 3.1.1 工作内容
|
||
|
||
1. **业务需求梳理**
|
||
- 甲方客户管理流程梳理
|
||
- 订单生命周期定义
|
||
- 状态流转规则确认
|
||
- 权限角色划分
|
||
|
||
2. **现有系统分析**
|
||
- 当前项目架构调研
|
||
- 数据模型分析
|
||
- API接口梳理
|
||
- 复用组件盘点
|
||
|
||
3. **竞品/参考分析**
|
||
- shipping_system demo深度体验
|
||
- 行业最佳实践研究
|
||
- 用户痛点收集
|
||
|
||
#### 3.1.2 交付物
|
||
|
||
| 交付物 | 标准 | 负责人 |
|
||
|-------|------|-------|
|
||
| 需求规格说明书 | 功能点清单、业务流程图 | 产品经理 |
|
||
| 数据模型设计 | ER图、字段定义 | 后端开发 |
|
||
| 接口文档初稿 | API列表、字段定义 | 后端开发 |
|
||
| 竞品分析报告 | 优缺点对比、借鉴点 | 设计师 |
|
||
|
||
#### 3.1.3 质量验收标准
|
||
|
||
- [ ] 所有功能点已明确优先级（P0/P1/P2）
|
||
- [ ] 业务流程图通过评审
|
||
- [ ] 数据模型覆盖所有业务场景
|
||
- [ ] 技术可行性已确认
|
||
|
||
---
|
||
|
||
### 3.2 阶段二：信息架构设计（2-3天）
|
||
|
||
#### 3.2.1 工作内容
|
||
|
||
1. **站点地图设计**
|
||
```
|
||
甲方客户管理
|
||
├── 客户列表
|
||
│ ├── 搜索/筛选
|
||
│ ├── 新增客户
|
||
│ ├── 编辑客户
|
||
│ └── 查看详情
|
||
├── 客户详情
|
||
│ ├── 基本信息
|
||
│ ├── 历史订单
|
||
│ └── 联系记录
|
||
└── 客户统计
|
||
|
||
订单管理
|
||
├── 待发订单
|
||
├── 在途订单
|
||
├── 历史订单
|
||
└── 订单详情
|
||
├── 基本信息
|
||
├── 物料明细
|
||
├── 状态流转
|
||
└── 操作日志
|
||
```
|
||
|
||
2. **导航结构设计**
|
||
- 主导航菜单规划
|
||
- 面包屑导航规则
|
||
- 快捷入口设计
|
||
|
||
3. **页面层级规划**
|
||
- 一级页面：列表页
|
||
- 二级页面：详情页/编辑页
|
||
- 三级页面：关联信息
|
||
|
||
#### 3.2.2 交付物
|
||
|
||
| 交付物 | 标准 | 工具 |
|
||
|-------|------|------|
|
||
| 站点地图 | 完整页面层级 | XMind/ProcessOn |
|
||
| 用户流程图 | 关键任务流程 | Figma/Draw.io |
|
||
| 信息架构图 | 模块关系图 | 架构图工具 |
|
||
|
||
#### 3.2.3 质量验收标准
|
||
|
||
- [ ] 所有页面层级不超过3级
|
||
- [ ] 核心任务完成路径≤3步
|
||
- [ ] 导航结构符合用户心智模型
|
||
- [ ] 与现有系统导航风格一致
|
||
|
||
---
|
||
|
||
### 3.3 阶段三：线框图绘制（3-5天）
|
||
|
||
#### 3.3.1 工作内容
|
||
|
||
1. **页面布局线框**
|
||
- 列表页布局（参考shipping_system）
|
||
- 详情页布局
|
||
- 表单页布局
|
||
- Modal弹窗布局
|
||
|
||
2. **组件布局规划**
|
||
- 表格列宽分配
|
||
- 表单字段排列
|
||
- 按钮位置规划
|
||
- 响应式断点设计
|
||
|
||
3. **交互流程标注**
|
||
- 点击热区标注
|
||
- 状态变化说明
|
||
- 转场动画示意
|
||
|
||
#### 3.3.2 页面线框清单
|
||
|
||
| 页面 | 优先级 | 复杂度 |
|
||
|-----|-------|-------|
|
||
| 甲方客户列表页 | P0 | 中 |
|
||
| 甲方客户详情页 | P0 | 中 |
|
||
| 客户编辑/新增页 | P0 | 低 |
|
||
| 待发订单列表页 | P0 | 中 |
|
||
| 在途订单列表页 | P0 | 中 |
|
||
| 历史订单列表页 | P0 | 中 |
|
||
| 订单详情页 | P0 | 高 |
|
||
| 订单编辑/新增页 | P0 | 高 |
|
||
| 订单统计报表 | P1 | 中 |
|
||
| 客户统计报表 | P1 | 中 |
|
||
|
||
#### 3.3.3 交付物
|
||
|
||
| 交付物 | 标准 | 工具 |
|
||
|-------|------|------|
|
||
| 低保真线框图 | 灰度，无色彩 | Figma/Axure |
|
||
| 交互说明文档 | 标注交互细节 | 文档工具 |
|
||
| 页面流程图 | 页面跳转关系 | 流程图工具 |
|
||
|
||
#### 3.3.4 质量验收标准
|
||
|
||
- [ ] 所有P0页面线框已完成
|
||
- [ ] 布局符合shipping_system风格
|
||
- [ ] 核心交互路径已标注
|
||
- [ ] 开发团队已评审通过
|
||
|
||
---
|
||
|
||
### 3.4 阶段四：视觉设计规范制定（2-3天）
|
||
|
||
#### 3.4.1 工作内容
|
||
|
||
1. **色彩系统定义**
|
||
- 提取shipping_system配色
|
||
- 适配当前项目品牌色
|
||
- 定义状态色规范
|
||
- 输出CSS变量
|
||
|
||
2. **字体系统定义**
|
||
- 中文字体选择（建议：思源黑体/微软雅黑）
|
||
- 字号层级定义
|
||
- 行高/字间距规范
|
||
|
||
3. **组件视觉规范**
|
||
- 按钮样式（主/次/危险/成功）
|
||
- 输入框样式
|
||
- 表格样式
|
||
- 卡片/面板样式
|
||
- 标签/Badge样式
|
||
- Modal弹窗样式
|
||
|
||
4. **图标系统**
|
||
- 图标风格统一（线性/面性）
|
||
- 图标尺寸规范
|
||
- 常用图标清单
|
||
|
||
#### 3.4.2 设计规范输出
|
||
|
||
```
|
||
design-system/
|
||
├── colors/
|
||
│ ├── palette.scss # 色板定义
|
||
│ ├── semantic.scss # 语义化颜色
|
||
│ └── dark-theme.scss # 暗黑主题
|
||
├── typography/
|
||
│ ├── fonts.scss # 字体定义
|
||
│ ├── scale.scss # 字号层级
|
||
│ └── styles.scss # 文字样式
|
||
├── components/
|
||
│ ├── buttons.scss # 按钮规范
|
||
│ ├── forms.scss # 表单规范
|
||
│ ├── tables.scss # 表格规范
|
||
│ ├── cards.scss # 卡片规范
|
||
│ └── modals.scss # 弹窗规范
|
||
└── spacing/
|
||
├── grid.scss # 栅格系统
|
||
└── spacing.scss # 间距系统
|
||
```
|
||
|
||
#### 3.4.3 交付物
|
||
|
||
| 交付物 | 标准 | 工具 |
|
||
|-------|------|------|
|
||
| 视觉设计规范文档 | 完整Design Token | Figma/文档 |
|
||
| 组件样式库 | SCSS/CSS代码 | 代码仓库 |
|
||
| 图标资源包 | SVG格式 | 设计工具 |
|
||
|
||
#### 3.4.4 质量验收标准
|
||
|
||
- [ ] 色彩对比度符合WCAG 2.1 AA标准
|
||
- [ ] 所有组件有对应的代码实现
|
||
- [ ] 与shipping_system视觉风格一致
|
||
- [ ] 开发团队可无障碍使用
|
||
|
||
---
|
||
|
||
### 3.5 阶段五：高保真原型制作（5-7天）
|
||
|
||
#### 3.5.1 工作内容
|
||
|
||
1. **高保真页面设计**
|
||
- 基于线框图添加视觉细节
|
||
- 应用设计规范
|
||
- 填充真实数据示例
|
||
|
||
2. **交互原型制作**
|
||
- 页面跳转链接
|
||
- 交互动效定义
|
||
- 状态变化演示
|
||
|
||
3. **响应式设计**
|
||
- Desktop端（≥1200px）
|
||
- Tablet端（768-1199px）
|
||
- Mobile端（<768px）
|
||
|
||
#### 3.5.2 关键页面设计要点
|
||
|
||
**甲方客户列表页：**
|
||
- 顶部：标题 + 客户统计
|
||
- 工具栏：搜索框 + 客户类型筛选 + 新增按钮
|
||
- 表格：编号/名称/联系人/电话/城市/订单数/状态/操作
|
||
- 操作列：详情/编辑/删除
|
||
|
||
**订单详情页：**
|
||
- 左侧：订单基本信息卡片
|
||
- 右侧：状态流转时间线
|
||
- 下方：物料明细表格
|
||
- 底部：操作按钮组（发货/完成/撤回）
|
||
|
||
**订单编辑页：**
|
||
- 分步表单或标签页
|
||
- 基本信息区
|
||
- 物料明细区（可增删改）
|
||
- 实时金额计算
|
||
|
||
#### 3.5.3 交付物
|
||
|
||
| 交付物 | 标准 | 工具 |
|
||
|-------|------|------|
|
||
| 高保真设计稿 | 所有P0页面 | Figma |
|
||
| 交互原型 | 可点击演示 | Figma/Axure |
|
||
| 设计标注 | 尺寸/颜色/字体 | Figma Dev Mode |
|
||
| 切图资源 | 1x/2x/3x | Figma Export |
|
||
|
||
#### 3.5.4 质量验收标准
|
||
|
||
- [ ] 所有P0页面高保真设计完成
|
||
- [ ] 交互原型可完整演示核心流程
|
||
- [ ] 视觉还原度与shipping_system≥90%
|
||
- [ ] 设计稿已通过产品/开发评审
|
||
|
||
---
|
||
|
||
### 3.6 阶段六：交互细节设计（2-3天）
|
||
|
||
#### 3.6.1 工作内容
|
||
|
||
1. **微交互设计**
|
||
- 按钮悬停效果（边框变色+文字变色）
|
||
- 表格行悬停效果（背景色变化）
|
||
- 加载状态设计
|
||
- 空状态设计
|
||
|
||
2. **动效规范**
|
||
- 页面切换过渡（建议：淡入淡出 200ms）
|
||
- Modal弹窗动画（建议：缩放+淡入 150ms）
|
||
- 数据刷新动画
|
||
- 状态变化动画
|
||
|
||
3. **反馈机制**
|
||
- 成功提示（绿色Toast）
|
||
- 错误提示（红色Toast）
|
||
- 警告提示（橙色Alert）
|
||
- 加载提示（Loading Spinner）
|
||
|
||
4. **键盘快捷键**
|
||
- Ctrl+S 保存
|
||
- ESC 关闭弹窗
|
||
- Enter 确认
|
||
- / 聚焦搜索框
|
||
|
||
#### 3.6.2 交互规范文档
|
||
|
||
```
|
||
interactions/
|
||
├── hover-states.md # 悬停状态规范
|
||
├── transitions.md # 转场动画规范
|
||
├── feedback.md # 反馈机制规范
|
||
├── keyboard-shortcuts.md # 快捷键规范
|
||
└── accessibility.md # 无障碍规范
|
||
```
|
||
|
||
#### 3.6.3 交付物
|
||
|
||
| 交付物 | 标准 | 工具 |
|
||
|-------|------|------|
|
||
| 交互规范文档 | 详细交互说明 | 文档工具 |
|
||
| 动效参数表 | 时长/缓动函数 | 表格 |
|
||
| 交互Demo | 关键交互演示 | Figma/视频 |
|
||
|
||
#### 3.6.4 质量验收标准
|
||
|
||
- [ ] 所有交互有明确的触发条件和反馈
|
||
- [ ] 动效时长符合人体工程学（150-300ms）
|
||
- [ ] 无障碍访问支持（键盘/屏幕阅读器）
|
||
- [ ] 性能影响已评估（避免重绘/重排）
|
||
|
||
---
|
||
|
||
### 3.7 阶段七：用户测试与反馈优化（3-5天）
|
||
|
||
#### 3.7.1 工作内容
|
||
|
||
1. **可用性测试**
|
||
- 测试对象：目标用户5-8人
|
||
- 测试任务：
|
||
- 创建新客户
|
||
- 创建新订单
|
||
- 查询客户历史订单
|
||
- 变更订单状态
|
||
- 测试指标：
|
||
- 任务完成率
|
||
- 完成时间
|
||
- 错误率
|
||
- 满意度评分
|
||
|
||
2. **A/B测试（可选）**
|
||
- 表格视图 vs 卡片视图
|
||
- 不同按钮位置
|
||
- 不同颜色方案
|
||
|
||
3. **反馈收集与优化**
|
||
- 整理测试问题
|
||
- 优先级排序
|
||
- 设计调整
|
||
- 二次验证
|
||
|
||
#### 3.7.2 测试检查清单
|
||
|
||
| 检查项 | 测试方法 | 通过标准 |
|
||
|-------|---------|---------|
|
||
| 核心任务完成率 | 用户测试 | ≥90% |
|
||
| 首次使用无帮助完成 | 用户测试 | ≥70% |
|
||
| 页面加载时间 | 性能测试 | ≤2s |
|
||
| 交互响应时间 | 性能测试 | ≤100ms |
|
||
| 视觉一致性 | 设计走查 | 无偏差 |
|
||
| 代码实现一致性 | 开发走查 | 还原度≥95% |
|
||
|
||
#### 3.7.3 交付物
|
||
|
||
| 交付物 | 标准 | 工具 |
|
||
|-------|------|------|
|
||
| 测试报告 | 问题清单+改进建议 | 文档工具 |
|
||
| 优化后的设计稿 | 修改后的高保真 | Figma |
|
||
| 设计走查记录 | 开发还原度检查 | 表格 |
|
||
|
||
#### 3.7.4 质量验收标准
|
||
|
||
- [ ] 核心任务完成率≥90%
|
||
- [ ] 严重问题已修复
|
||
- [ ] 开发还原度≥95%
|
||
- [ ] 产品/业务方验收通过
|
||
|
||
---
|
||
|
||
## 四、实施建议
|
||
|
||
### 4.1 技术实现建议
|
||
|
||
#### 4.1.1 前端技术栈
|
||
|
||
| 技术 | 用途 | 说明 |
|
||
|-----|------|------|
|
||
| Vue 2 | 框架 | 与现有项目保持一致 |
|
||
| Element UI | 组件库 | 基于shipping_system风格定制主题 |
|
||
| SCSS | 样式 | 使用CSS变量实现主题 |
|
||
| ECharts | 图表 | 统一图表风格 |
|
||
|
||
#### 4.1.2 样式实现策略
|
||
|
||
```scss
|
||
// 主题变量文件：styles/theme.scss
|
||
:root {
|
||
// 提取shipping_system配色
|
||
--smg-bg: #1a1c1e;
|
||
--smg-bg-card: #222426;
|
||
--smg-bg-input: #2a2d30;
|
||
--smg-border: #3a3d41;
|
||
--smg-text: #c8ccd0;
|
||
--smg-text-secondary: #8a8f96;
|
||
--smg-primary: #e8b400;
|
||
--smg-success: #27ae60;
|
||
--smg-warning: #e67e22;
|
||
--smg-danger: #e74c3c;
|
||
--smg-info: #3498db;
|
||
}
|
||
|
||
// Element UI主题覆盖
|
||
.el-button--primary {
|
||
background-color: var(--smg-primary);
|
||
border-color: var(--smg-primary);
|
||
color: #000;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.el-table {
|
||
background-color: var(--smg-bg-card);
|
||
th {
|
||
background-color: var(--smg-bg-input);
|
||
border-bottom: 2px solid var(--smg-primary);
|
||
text-transform: uppercase;
|
||
font-size: 11px;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
}
|
||
```
|
||
|
||
### 4.2 组件复用建议
|
||
|
||
| shipping_system组件 | 当前项目对应 | 复用方式 |
|
||
|-------------------|-------------|---------|
|
||
| 顶部导航栏 | 现有侧边栏+顶部 | 提取配色方案 |
|
||
| 数据表格 | Element Table | 定制主题样式 |
|
||
| Modal弹窗 | Element Dialog | 定制暗黑主题 |
|
||
| 状态Badge | Element Tag | 定制颜色方案 |
|
||
| 统计卡片 | 自定义组件 | 复用布局结构 |
|
||
| 搜索框 | Element Input | 添加搜索图标 |
|
||
| 表单布局 | Element Form | 复用2列布局 |
|
||
|
||
### 4.3 开发排期建议
|
||
|
||
| 阶段 | 工期 | 并行任务 |
|
||
|-----|------|---------|
|
||
| 需求分析 | 3-5天 | 技术预研 |
|
||
| 信息架构 | 2-3天 | - |
|
||
| 线框图 | 3-5天 | 接口开发 |
|
||
| 视觉规范 | 2-3天 | 组件开发 |
|
||
| 高保真原型 | 5-7天 | 后端开发 |
|
||
| 交互细节 | 2-3天 | 前端开发 |
|
||
| 测试优化 | 3-5天 | 联调测试 |
|
||
|
||
**总计：20-30天**
|
||
|
||
---
|
||
|
||
## 五、附录
|
||
|
||
### 5.1 参考资源
|
||
|
||
- shipping_system demo路径：`/shipping_system/static/index.html`
|
||
- 当前项目前端路径：`/ruoyi-ui/src/views/bid/`
|
||
- 设计规范文档：`/doc/design-system/`
|
||
|
||
### 5.2 术语表
|
||
|
||
| 术语 | 说明 |
|
||
|-----|------|
|
||
| SMG | Shipping Management System 发货管理系统 |
|
||
| RFQ | Request for Quotation 询价单 |
|
||
| SKU | Stock Keeping Unit 库存单位 |
|
||
| P0/P1/P2 | 优先级：高/中/低 |
|
||
|
||
### 5.3 版本记录
|
||
|
||
| 版本 | 日期 | 修改内容 | 作者 |
|
||
|-----|------|---------|------|
|
||
| v1.0 | 2026-06-03 | 初始版本 | AI Assistant |
|
||
|
||
---
|
||
|
||
**文档结束**
|