Files

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

1. 新增甲方客户CRUD接口、前端页面与权限控制
2. 新增发货单管理模块，包含订单状态流转
3. 修复系统菜单名称乱码问题
4. 新增项目启动脚本与数据库初始化脚本
5. 新增相关实体类、Mapper、Service实现
6. 补充项目设计文档与忽略配置

2026-06-09 21:44:31 +08:00

21 KiB

Raw Permalink Blame History

甲方客户界面及订单相关页面设计流程文档

一、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 主色调（工业暗黑风）

: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 字体系统

: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 按钮规范

/* 基础按钮 */
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 表格规范

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)

.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 工作内容

业务需求梳理
- 甲方客户管理流程梳理
- 订单生命周期定义
- 状态流转规则确认
- 权限角色划分
现有系统分析
- 当前项目架构调研
- 数据模型分析
- API接口梳理
- 复用组件盘点
竞品/参考分析
- shipping_system demo深度体验
- 行业最佳实践研究
- 用户痛点收集

3.1.2 交付物

交付物	标准	负责人
需求规格说明书	功能点清单、业务流程图	产品经理
数据模型设计	ER图、字段定义	后端开发
接口文档初稿	API列表、字段定义	后端开发
竞品分析报告	优缺点对比、借鉴点	设计师

3.1.3 质量验收标准

所有功能点已明确优先级（P0/P1/P2）
业务流程图通过评审
数据模型覆盖所有业务场景
技术可行性已确认

3.2 阶段二：信息架构设计（2-3天）

3.2.1 工作内容

站点地图设计

甲方客户管理
├── 客户列表
│   ├── 搜索/筛选
│   ├── 新增客户
│   ├── 编辑客户
│   └── 查看详情
├── 客户详情
│   ├── 基本信息
│   ├── 历史订单
│   └── 联系记录
└── 客户统计

订单管理
├── 待发订单
├── 在途订单
├── 历史订单
└── 订单详情
    ├── 基本信息
    ├── 物料明细
    ├── 状态流转
    └── 操作日志

导航结构设计
- 主导航菜单规划
- 面包屑导航规则
- 快捷入口设计
页面层级规划
- 一级页面：列表页
- 二级页面：详情页/编辑页
- 三级页面：关联信息

3.2.2 交付物

交付物	标准	工具
站点地图	完整页面层级	XMind/ProcessOn
用户流程图	关键任务流程	Figma/Draw.io
信息架构图	模块关系图	架构图工具

3.2.3 质量验收标准

所有页面层级不超过3级
核心任务完成路径≤3步
导航结构符合用户心智模型
与现有系统导航风格一致

3.3 阶段三：线框图绘制（3-5天）

3.3.1 工作内容

页面布局线框
- 列表页布局（参考shipping_system）
- 详情页布局
- 表单页布局
- Modal弹窗布局
组件布局规划
- 表格列宽分配
- 表单字段排列
- 按钮位置规划
- 响应式断点设计
交互流程标注
- 点击热区标注
- 状态变化说明
- 转场动画示意

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 工作内容

色彩系统定义
- 提取shipping_system配色
- 适配当前项目品牌色
- 定义状态色规范
- 输出CSS变量
字体系统定义
- 中文字体选择（建议：思源黑体/微软雅黑）
- 字号层级定义
- 行高/字间距规范
组件视觉规范
- 按钮样式（主/次/危险/成功）
- 输入框样式
- 表格样式
- 卡片/面板样式
- 标签/Badge样式
- Modal弹窗样式
图标系统
- 图标风格统一（线性/面性）
- 图标尺寸规范
- 常用图标清单

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 工作内容

高保真页面设计
- 基于线框图添加视觉细节
- 应用设计规范
- 填充真实数据示例
交互原型制作
- 页面跳转链接
- 交互动效定义
- 状态变化演示
响应式设计
- 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 工作内容

微交互设计
- 按钮悬停效果（边框变色+文字变色）
- 表格行悬停效果（背景色变化）
- 加载状态设计
- 空状态设计
动效规范
- 页面切换过渡（建议：淡入淡出 200ms）
- Modal弹窗动画（建议：缩放+淡入 150ms）
- 数据刷新动画
- 状态变化动画
反馈机制
- 成功提示（绿色Toast）
- 错误提示（红色Toast）
- 警告提示（橙色Alert）
- 加载提示（Loading Spinner）
键盘快捷键
- 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 工作内容

可用性测试
- 测试对象：目标用户5-8人
- 测试任务：
  - 创建新客户
  - 创建新订单
  - 查询客户历史订单
  - 变更订单状态
- 测试指标：
  - 任务完成率
  - 完成时间
  - 错误率
  - 满意度评分
A/B测试（可选）
- 表格视图 vs 卡片视图
- 不同按钮位置
- 不同颜色方案
反馈收集与优化
- 整理测试问题
- 优先级排序
- 设计调整
- 二次验证

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 样式实现策略

// 主题变量文件：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

文档结束

21 KiB Raw Permalink Blame History Unescape Escape

甲方客户界面及订单相关页面设计流程文档

一、Shipping_System Demo 全面分析

1.1 交互模式分析

1.1.1 页面导航结构

1.1.2 核心交互模式

1.1.3 关键交互细节

1.2 布局结构分析

1.2.1 整体布局框架

1.2.2 响应式断点设计

1.2.3 页面类型模板

1.3 功能模块划分

1.3.1 模块结构图

1.3.2 功能对照表

二、视觉设计规范提取

2.1 色彩系统

2.1.1 主色调（工业暗黑风）

2.1.2 色彩应用场景

2.2 字体系统

2.3 间距系统

2.4 组件样式

2.4.1 按钮规范

2.4.2 表格规范

2.4.3 状态标签(Badge)

三、设计流程规划

3.1 阶段一：需求分析与确认（3-5天）

3.1.1 工作内容

3.1.2 交付物

3.1.3 质量验收标准

3.2 阶段二：信息架构设计（2-3天）

3.2.1 工作内容

3.2.2 交付物

3.2.3 质量验收标准

3.3 阶段三：线框图绘制（3-5天）

3.3.1 工作内容

3.3.2 页面线框清单

3.3.3 交付物

3.3.4 质量验收标准

3.4 阶段四：视觉设计规范制定（2-3天）

3.4.1 工作内容

3.4.2 设计规范输出

3.4.3 交付物

3.4.4 质量验收标准

3.5 阶段五：高保真原型制作（5-7天）

3.5.1 工作内容

3.5.2 关键页面设计要点

3.5.3 交付物

3.5.4 质量验收标准

3.6 阶段六：交互细节设计（2-3天）

3.6.1 工作内容

3.6.2 交互规范文档

3.6.3 交付物

3.6.4 质量验收标准

3.7 阶段七：用户测试与反馈优化（3-5天）

3.7.1 工作内容

3.7.2 测试检查清单

3.7.3 交付物

3.7.4 质量验收标准

四、实施建议

4.1 技术实现建议

4.1.1 前端技术栈

4.1.2 样式实现策略

4.2 组件复用建议

4.3 开发排期建议

五、附录

5.1 参考资源

5.2 术语表

5.3 版本记录

21 KiB

Raw Permalink Blame History