---
title: 设计文档
order: 2
category: plus
---

# OrderList 订单列表 - 设计文档

## 设计理念

OrderList 组件是一个面向电商业务的订单管理界面，设计目标是为商家提供高效、直观的订单管理体验。

### 核心设计原则

1. **信息层级清晰**：通过视觉层级区分主要信息和次要信息
2. **高效筛选**：提供快捷筛选和详细筛选两种方式，满足不同场景需求
3. **状态可视化**：通过颜色和标签直观展示订单状态
4. **响应式交互**：提供即时反馈，优化用户操作体验

## 布局结构

```
┌─────────────────────────────────────────────────────────────┐
│ Header: 订单列表                                            │
├─────────────────────────────────────────────────────────────┤
│ ToolBar                                                      │
│ ┌─────────────────────────────┬─────────────────────────┐  │
│ │ QuickFilter                │ Reset                   │  │
│ │ (搜索框 + 时间选择器)       │                         │  │
│ └─────────────────────────────┴─────────────────────────┘  │
│ ┌─────────────────────────────┬─────────────────────────┐  │
│ │ FilterList                 │ HandleActions           │  │
│ │ (快捷筛选按钮组)            │ (列设置/排序/筛选)       │  │
│ └─────────────────────────────┴─────────────────────────┘  │
├─────────────────────────────────────────────────────────────┤
│ GridView: Table                                             │
│ ┌─────┬──────────┬──────────┬──────┬──────┬──────────┐   │
│ │订单号│ 客户信息 │ 联系人信息│ 标签 │配送...│ 支付... │   │
│ ├─────┼──────────┼──────────┼──────┼──────┼──────────┤   │
│ │ ... │   ...    │   ...    │ ...  │ ...  │   ...    │   │
│ └─────┴──────────┴──────────┴──────┴──────┴──────────┘   │
├─────────────────────────────────────────────────────────────┤
│ Footer: Pagination                                          │
└─────────────────────────────────────────────────────────────┘
```

## 视觉设计

### 颜色系统

组件使用系统化的颜色方案来表达不同的状态和信息层级：

#### 订单状态颜色

- **未完成 (Open)**
  - 边框色: `#1570EF` (Blue/600)
  - 文字色: `#175CD3` (Blue/700)
  
- **已完成 (Completed)**
  - 边框色: `#079455` (Success/600)
  - 文字色: `#067647` (Success/700)
  
- **已取消 (Cancelled)**
  - 边框色: `#D92D20` (Error/600)
  - 文字色: `#B42318` (Error/700)

#### 处理状态颜色

- **处理中 (Fulfilling)**
  - 边框色: `#DC6803` (Warning/600)
  - 文字色: `#B54708` (Warning/700)

- **未处理 (Unfulfilled)**
  - 边框色: `#DC6803` (Warning/600)
  - 文字色: `#B54708` (Warning/700)

- **部分处理 (Partial Fulfilled)**
  - 边框色: `#088AB2` (Cyan/600)
  - 文字色: `#0E7090` (Cyan/700)

- **已处理 (Fulfilled)**
  - 边框色: `#475467` (Gray/600)
  - 文字色: `#344054` (Gray/700)

#### 支付状态颜色（背景色）

- **未付款 (Unpaid)**: `#B2DDFF` (Blue/200)
- **待支付 (Payment Processing)**: `#FEDF89` (Warning/200)
- **等待付款 (Payment Pending)**: `#FEDF89` (Warning/200)
- **已授权 (Authorized)**: `#ABEFC6` (Success/200)
- **已付款 (Paid)**: `#ABEFC6` (Success/200)
- **部分付款 (Partially Paid)**: `#CEEAB0` (Moss/200)
- **已退款 (Refunded)**: `#FECDCA` (Error/200)
- **部分退款 (Partially Refunded)**: `#FCCEEE` (Pink/200)
- **已作废 (Voided)**: `#D0D5DD` (Gray/300)

### 交互状态

- **悬停状态**: 表格行悬停时显示浅灰色背景
- **点击状态**: 按钮点击时显示按压效果
- **激活状态**: 快捷筛选按钮被激活时显示为实心按钮（`type="primary"`）

## 功能模块设计

### 1. 快速筛选区域（QuickFilter）

**设计目的**: 提供最常用的筛选条件，让用户快速定位订单

**组成元素**:
- 关键字搜索框：支持订单号等关键字搜索
- 时间范围选择器：筛选特定时间段的订单

**交互行为**:
- 搜索框支持实时搜索（onChange 触发）
- 时间选择器选择后自动触发筛选

### 2. 快捷筛选按钮组（FilterList）

**设计目的**: 提供预设的常用筛选场景，一键切换

**预设场景**:
1. **今日订单**: 显示当天的所有订单
2. **今日待支付**: 显示当天未付款的订单
3. **今日退款订单**: 显示当天已退款的订单
4. **近7天全部订单**: 显示最近7天的所有订单

**视觉状态**:
- 未选中: `ghost` 样式（空心按钮）
- 已选中: `primary` 样式（实心按钮）

### 3. 操作按钮组（HandleActions）

**设计目的**: 提供高级功能入口

**组成元素**:
- **列设置**: 自定义显示哪些列
- **排序**: 选择排序字段和排序方向
- **筛选**: 打开高级筛选面板

### 4. 表格区域（Table）

**设计目的**: 展示订单的核心信息

**列设计原则**:
- **主要列**（默认显示）: 订单号、客户信息、联系人信息、标签、配送方式、支付信息、下单渠道
- **次要列**（默认隐藏）: 商品数量、业务代码、订单状态、处理状态、创建信息、更多信息

**特殊列处理**:
- **订单号列**: 支持显示备注标签，点击显示详细备注内容
- **客户信息列**: 采用复合单元格设计，上方显示客户名称，下方显示电话和邮箱
- **联系人信息列**: 同样采用复合单元格设计
- **标签列**: 支持显示多个标签，每个标签独立渲染
- **支付信息列**: 带有 Tooltip，悬停显示详细金额信息
  - 等待付款/待支付/未付款：显示「总金额 + 未付金额」
  - 部分付款：显示「总金额 + 已付金额 + 待付金额」
  - 已付款：显示「总金额 + 已付金额」
  - 部分退款/已退款：显示「总金额 + 已付金额 + 已退金额」

### 5. 分页区域（Pagination）

**设计目的**: 支持大量订单数据的浏览

**功能**:
- 显示当前页码和总页数
- 支持快速跳转到指定页
- 支持修改每页显示数量

## 响应式设计

组件采用固定宽度表格设计，适配大屏幕桌面端场景。

**建议最小宽度**: 1280px

## 多语言设计

组件支持三种语言：
- 简体中文 (`zh-CN`)
- 繁体中文 (`zh-HK`)
- 英文 (`en`)

所有文案都通过多语言配置文件管理，确保一致性和可维护性。

## 无障碍设计

- 使用语义化的 HTML 结构
- 提供合适的 ARIA 标签
- 确保键盘可访问性
- 颜色对比度符合 WCAG AA 标准

## 性能优化

1. **按需加载**: 只加载当前页的数据
2. **虚拟滚动**: 大量数据时采用虚拟滚动技术
3. **防抖搜索**: 搜索框输入时使用防抖，减少请求次数
4. **缓存优化**: 对筛选条件和下拉选项进行适当缓存

## 设计规范参考

- 颜色系统参考: Figma 设计稿
- 间距规范: 遵循 8px 网格系统
- 字体规范: 
  - 标题: 16px / 500 weight
  - 正文: 14px / 400 weight
  - 辅助文字: 12px / 400 weight