DeXun/erp-next
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增甲方客户管理模块及配套功能

Browse Source 
1. 新增甲方客户CRUD接口、前端页面与权限控制
2. 新增发货单管理模块，包含订单状态流转
3. 修复系统菜单名称乱码问题
4. 新增项目启动脚本与数据库初始化脚本
5. 新增相关实体类、Mapper、Service实现
6. 补充项目设计文档与忽略配置
This commit is contained in:
王文昊
2026-06-09 21:44:31 +08:00
parent ef9584cdb9
commit bbddcb494d
26 changed files with 2084 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
doc/zz_start_and_check.sh Normal file
View File

@@ -0,0 +1,8 @@
#!/bin/bash
cd D:/DeXun_workspace/projects/erp-next
mvn spring-boot:run -pl ruoyi-admin -q &
PID=$!
echo "App PID: $PID"
sleep 40
curl -s http://localhost:8080/v3/api-docs > D:/DeXun_workspace/projects/erp-next/doc/zz_api_result.json 2>&1
echo "Done, check zz_api_result.json"

797
doc/甲方客户界面及订单页面设计流程.md Normal file
View File

@@ -0,0 +1,797 @@
# 甲方客户界面及订单相关页面设计流程文档
## 一、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 |
---
**文档结束**