# Task 9.5 视觉验证指南

## 如何测试订单取消功能

### 1. 启动应用

```bash
cd ecommerce-ai-assistant/business-operator-frontend
npm start
```

访问: http://localhost:4200

### 2. 导航到订单管理

1. 登录后台（如果需要）
2. 点击侧边栏"订单管理"菜单
3. 或直接访问: http://localhost:4200/orders/list

### 3. 查找可取消的订单

在订单列表中，查找以下状态的订单：
- **待付款** (PendingPayment) - 黄色标签
- **待发货** (PendingShipment) - 蓝色标签

这些订单会显示"取消订单"按钮。

### 4. 测试取消流程

#### 步骤 1: 点击取消订单按钮
- 找到一个待付款或待发货的订单
- 点击订单卡片底部的"取消订单"按钮（红色边框，带取消图标）

#### 步骤 2: 查看取消对话框
对话框应该显示：
- ✅ 标题："取消订单"
- ✅ 订单号
- ✅ 订单金额（红色显示）
- ✅ 警告提示（黄色背景，警告图标）
- ✅ 取消原因输入框
- ✅ 字符计数器（0/200）
- ✅ 取消和确认按钮

#### 步骤 3: 测试表单验证

**测试 1: 空输入**
- 不输入任何内容
- 确认按钮应该是禁用状态（灰色）
- 点击输入框后失焦，应显示错误："请输入取消原因"

**测试 2: 输入过短**
- 输入 "短" 或 "abc"（少于5个字符）
- 确认按钮应该是禁用状态
- 应显示错误："取消原因至少5个字符"

**测试 3: 输入过长**
- 输入超过 200 个字符
- 应显示错误："取消原因最多200个字符"
- 字符计数器应显示超出的数量

**测试 4: 有效输入**
- 输入 "库存不足，无法发货"（5-200字符）
- 确认按钮应该变为可用状态（红色）
- 字符计数器应显示正确的字符数

#### 步骤 4: 提交取消

**正常流程**:
1. 输入有效的取消原因
2. 点击"确认取消订单"按钮
3. 应该看到：
   - ✅ 对话框关闭
   - ✅ 显示成功提示："订单已取消"（绿色提示条）
   - ✅ 订单列表自动刷新
   - ✅ 该订单状态变为"已取消"（灰色标签）
   - ✅ 标签页计数更新

**取消流程**:
1. 点击"取消"按钮或关闭图标
2. 对话框应该关闭
3. 订单状态不变

### 5. 验证状态变化

#### 检查订单状态
1. 取消成功后，订单应该：
   - 状态显示为"已取消"
   - 不再显示"取消订单"按钮
   - 不再显示"发货"按钮

#### 检查标签页计数
1. 点击"已取消"标签
2. 应该能看到刚才取消的订单
3. 计数应该增加 1

#### 检查其他标签
1. 原来的标签（待付款或待发货）
2. 计数应该减少 1

### 6. 测试权限控制

#### 不可取消的订单
尝试查看以下状态的订单：
- **已发货** (Shipped)
- **已完成** (Completed)
- **已取消** (Cancelled)

这些订单应该：
- ✅ 不显示"取消订单"按钮
- ✅ 只显示"查看详情"按钮
- ✅ 已发货订单显示"查看物流"按钮

### 7. 测试错误处理

#### 模拟网络错误
（需要开发者工具）
1. 打开浏览器开发者工具
2. 切换到 Network 标签
3. 启用"Offline"模式
4. 尝试取消订单
5. 应该显示错误提示："取消订单失败，请重试"

### 8. 响应式测试

#### 桌面端（>1200px）
- 对话框宽度 600px
- 布局完整显示

#### 平板端（768-1200px）
- 对话框宽度 90vw
- 布局自适应

#### 移动端（<768px）
- 对话框宽度 90vw
- 输入框和按钮堆叠显示

## 预期结果截图说明

### 1. 订单列表 - 显示取消按钮
```
┌─────────────────────────────────────────┐
│ 订单号：ORD123456    [待发货]          │
│ 2024-01-15 10:30:00                     │
├─────────────────────────────────────────┤
│ [商品图片] 测试商品                     │
│            ¥99.99 × 1                   │
├─────────────────────────────────────────┤
│ 买家：张三                              │
│ 电话：13800138000                       │
│ 地址：北京市朝阳区...                   │
├─────────────────────────────────────────┤
│ 订单总额：¥109.99                       │
├─────────────────────────────────────────┤
│ [查看详情] [发货] [取消订单]           │
└─────────────────────────────────────────┘
```

### 2. 取消对话框 - 初始状态
```
┌─────────────────────────────────────────┐
│ 取消订单                          [×]   │
├─────────────────────────────────────────┤
│ ┌─────────────────────────────────────┐ │
│ │ 订单号：ORD123456                   │ │
│ │ 订单金额：¥109.99                   │ │
│ └─────────────────────────────────────┘ │
│                                         │
│ ⚠ 取消订单后将无法恢复，请谨慎操作      │
│                                         │
│ 取消原因 *                              │
│ ┌─────────────────────────────────────┐ │
│ │ 请输入取消订单的原因（5-200字）     │ │
│ │                                     │ │
│ │                                     │ │
│ └─────────────────────────────────────┘ │
│                                   0/200 │
├─────────────────────────────────────────┤
│                    [取消] [确认取消订单]│
└─────────────────────────────────────────┘
```

### 3. 取消对话框 - 输入有效原因
```
┌─────────────────────────────────────────┐
│ 取消订单                          [×]   │
├─────────────────────────────────────────┤
│ ┌─────────────────────────────────────┐ │
│ │ 订单号：ORD123456                   │ │
│ │ 订单金额：¥109.99                   │ │
│ └─────────────────────────────────────┘ │
│                                         │
│ ⚠ 取消订单后将无法恢复，请谨慎操作      │
│                                         │
│ 取消原因 *                              │
│ ┌─────────────────────────────────────┐ │
│ │ 库存不足，无法发货                  │ │
│ │                                     │ │
│ │                                     │ │
│ └─────────────────────────────────────┘ │
│                                   9/200 │
├─────────────────────────────────────────┤
│                    [取消] [确认取消订单]│
│                            ↑ 红色可点击  │
└─────────────────────────────────────────┘
```

### 4. 成功提示
```
┌─────────────────────────────────────────┐
│ ✓ 订单已取消                      [×]   │
└─────────────────────────────────────────┘
```

### 5. 订单列表 - 取消后
```
┌─────────────────────────────────────────┐
│ 订单号：ORD123456    [已取消]          │
│ 2024-01-15 10:30:00                     │
├─────────────────────────────────────────┤
│ [商品图片] 测试商品                     │
│            ¥99.99 × 1                   │
├─────────────────────────────────────────┤
│ 买家：张三                              │
│ 电话：13800138000                       │
│ 地址：北京市朝阳区...                   │
├─────────────────────────────────────────┤
│ 订单总额：¥109.99                       │
├─────────────────────────────────────────┤
│ [查看详情]                              │
│ ↑ 只显示查看详情按钮                    │
└─────────────────────────────────────────┘
```

## 常见问题

### Q1: 找不到可取消的订单？
**A**: 切换到"待付款"或"待发货"标签页，这些状态的订单才能取消。

### Q2: 确认按钮一直是灰色的？
**A**: 检查输入的取消原因是否至少 5 个字符。

### Q3: 点击确认后没有反应？
**A**: 检查浏览器控制台是否有错误，确保 Mock 服务正常运行。

### Q4: 取消后订单还在原标签页？
**A**: 刷新页面或切换标签页，订单应该移动到"已取消"标签。

### Q5: 字符计数不准确？
**A**: 字符计数是实时的，包括中文、英文、数字和标点符号。

## 测试检查清单

- [ ] 可以打开取消对话框
- [ ] 对话框显示订单信息
- [ ] 对话框显示警告提示
- [ ] 输入框有字符计数
- [ ] 空输入时禁用提交按钮
- [ ] 输入过短时显示错误
- [ ] 输入过长时显示错误
- [ ] 有效输入时启用提交按钮
- [ ] 点击取消关闭对话框
- [ ] 点击确认提交取消
- [ ] 显示成功提示
- [ ] 订单列表自动刷新
- [ ] 订单状态变为已取消
- [ ] 标签页计数更新
- [ ] 已取消订单不显示取消按钮
- [ ] 已发货订单不显示取消按钮
- [ ] 已完成订单不显示取消按钮

## 总结

通过以上测试步骤，您可以全面验证订单取消功能的正确性和用户体验。如果所有测试项都通过，说明功能实现完整且符合需求。