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

## 一、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 |

---

**文档结束**