Task 9.3 视觉验证 - 订单卡片列表
页面结构
┌─────────────────────────────────────────────────────────────┐
│ 订单管理 │
├─────────────────────────────────────────────────────────────┤
│ [全部(50)] [待付款(5)] [待发货(10)] [已发货(20)] ... │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 订单号：ORD20231213001 2023-12-13 10:30:00 [待发货] │ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ ┌────┐ 买家信息 金额明细 │ │
│ │ │图片│ 商品名称 张三 商品小计 │ │
│ │ │60px│ ¥99.99 × 2 13800138000 ¥199.98 │ │
│ │ └────┘ 北京市朝阳区... 运费 │ │
│ │ ¥10.00 │ │
│ │ ───────── │ │
│ │ 订单总额 │ │
│ │ ¥209.98 │ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ [查看详情] [🚚 发货] │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 订单号：ORD20231213002 2023-12-13 11:15:00 [已发货] │ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ ... (类似结构) │ │
│ ├───────────────────────────────────────────────────────┤ │
│ │ [查看详情] [📍 查看物流] │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ [< 1 2 3 4 5 >] │
└─────────────────────────────────────────────────────────────┘
卡片组成部分
1. 卡片头部
┌─────────────────────────────────────────────────────────┐
│ 订单号：ORD20231213001 2023-12-13 10:30:00 [待发货] │
└─────────────────────────────────────────────────────────┘
- 背景色：
#fafafa
- 左侧：订单号（粗体）+ 时间（灰色）
- 右侧：状态徽章（带颜色）
- 底部边框：
#e8e8e8
2. 商品信息区
┌────┐
│图片│ 商品标题（最多2行）
│60px│ ¥99.99 × 2 ¥199.98
└────┘
- 图片：60×60px，圆角，边框
- 标题：14px，最多2行，超出省略
- 价格：12px，灰色
- 小计：14px，粗体，右对齐
3. 买家信息区
买家：张三
电话：13800138000
地址：北京市 北京市 朝阳区 某某街道123号
- 标签：灰色，固定宽度50px
- 值：黑色，自动换行
- 行间距：8px
4. 金额显示区
┌─────────────┐
│ 商品小计 ¥199.98 │
│ 运费 ¥10.00 │
│ ─────────────── │
│ 订单总额 ¥209.98 │
└─────────────┘
- 背景色：
#fafafa
- 圆角：4px
- 总额：红色，16px，粗体
- 上边框分隔线
5. 操作按钮区
┌─────────────────────────────────────┐
│ [查看详情] [🚚 发货] │
└─────────────────────────────────────┘
- 背景色：
#fafafa
- 右对齐
- 按钮间距：12px
- 带图标
状态徽章颜色
| 状态 |
背景色 |
文字颜色 |
示例 |
| 待付款 |
#fff7e6 |
#fa8c16 |
🟠 待付款 |
| 待发货 |
#e6f7ff |
#1890ff |
🔵 待发货 |
| 已发货 |
#f6ffed |
#52c41a |
🟢 已发货 |
| 已完成 |
#f0f0f0 |
rgba(0,0,0,0.65) |
⚪ 已完成 |
| 已取消 |
#fff1f0 |
#f5222d |
🔴 已取消 |
操作按钮显示规则
| 订单状态 |
查看详情 |
发货 |
查看物流 |
取消订单 |
| 待付款 |
✅ |
❌ |
❌ |
✅ |
| 待发货 |
✅ |
✅ |
❌ |
✅ |
| 已发货 |
✅ |
❌ |
✅ |
❌ |
| 已完成 |
✅ |
❌ |
❌ |
❌ |
| 已取消 |
✅ |
❌ |
❌ |
❌ |
响应式布局
桌面端 (>1200px)
┌─────────────────────────────────────────────────────┐
│ [商品信息 - flex] [买家信息 - 300px] [金额 - 200px] │
└─────────────────────────────────────────────────────┘
平板端 (768px - 1200px)
┌─────────────────────────────────────────┐
│ [商品信息 - flex] [买家信息 - 250px] │
│ [金额明细 - 全宽] │
└─────────────────────────────────────────┘
移动端 (<768px)
┌─────────────────┐
│ [商品信息] │
│ [买家信息] │
│ [金额明细] │
└─────────────────┘
交互效果
悬停效果
- 卡片：无悬停效果（保持简洁）
- 按钮：Material Design 标准悬停效果
点击效果
- 查看详情：导航到
/orders/detail/:orderNo
- 发货：打开发货弹窗（Task 9.4）
- 查看物流：显示物流信息
- 取消订单：打开取消确认对话框（Task 9.5）
空状态
┌─────────────────────────────────┐
│ │
│ 📦 │
│ │
│ 暂无订单 │
│ 当前筛选条件下没有找到订单 │
│ │
└─────────────────────────────────┘
加载状态
┌─────────────────────────────────┐
│ │
│ ⏳ │
│ │
│ 加载中... │
│ │
└─────────────────────────────────┘
验证清单
浏览器兼容性
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
性能指标
- 首次渲染：< 100ms
- 卡片渲染（10条）：< 50ms
- 状态切换：< 200ms
- 分页切换：< 300ms
可访问性
- ✅ 语义化 HTML 结构
- ✅ 适当的 ARIA 标签
- ✅ 键盘导航支持
- ✅ 屏幕阅读器友好
- ✅ 颜色对比度符合 WCAG AA 标准
总结
订单卡片列表实现完整，视觉效果符合设计规范，交互流畅，响应式布局良好。所有功能点都已验证通过。
