Task 9.5 视觉验证指南

如何测试订单取消功能

1. 启动应用

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

访问: http://localhost:4200

2. 导航到订单管理

登录后台（如果需要）
点击侧边栏"订单管理"菜单
或直接访问: 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: 提交取消

正常流程:

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

取消流程:

点击"取消"按钮或关闭图标
对话框应该关闭
订单状态不变

5. 验证状态变化

检查订单状态

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

检查标签页计数

点击"已取消"标签
应该能看到刚才取消的订单
计数应该增加 1

检查其他标签

原来的标签（待付款或待发货）
计数应该减少 1

6. 测试权限控制

不可取消的订单

尝试查看以下状态的订单：

已发货 (Shipped)
已完成 (Completed)
已取消 (Cancelled)

这些订单应该：

✅ 不显示"取消订单"按钮
✅ 只显示"查看详情"按钮
✅ 已发货订单显示"查看物流"按钮

7. 测试错误处理

模拟网络错误

（需要开发者工具）

打开浏览器开发者工具
切换到 Network 标签
启用"Offline"模式
尝试取消订单
应该显示错误提示："取消订单失败，请重试"

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: 字符计数是实时的，包括中文、英文、数字和标点符号。

测试检查清单

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

总结

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

TASK_9.5_VISUAL_GUIDE.md 11 KB Bezpośredni odnośnik Historia Czysty