# Story 001.013: 订单列表页UI重构

## Status
Ready for Review

## Story
**As a** 小程序用户，
**I want** 订单列表页具有与tcb-shop-demo一致的设计和功能，
**so that** 我可以方便地查看和管理我的订单

## Acceptance Criteria
1. 订单列表页UI与tcb-shop-demo设计完全一致
2. 所有功能模块正常工作（订单列表、状态筛选、订单操作等）
3. 数据API集成完整，显示真实订单数据
4. 订单操作功能正常（取消、付款、确认收货等）
5. 页面组件TypeScript编译正常，无错误

## Tasks / Subtasks
- [x] **页面结构重构** (AC: 1, 2)
  - [x] 更新订单列表页面 `mini/src/pages/order-list/index.tsx` [对照: `tcb-shop-demo/pages/order/order-list/index.wxml`]
  - [x] 重构订单列表页整体布局，包含顶部Tab栏、订单卡片列表、下拉刷新、加载更多等功能
  - [x] 应用tcb-shop-demo订单列表页设计规范，创建专用CSS文件

- [x] **订单状态筛选功能** (AC: 1, 2)
  - [x] 实现订单状态筛选功能（全部、待付款、待发货、待收货、已完成）
  - [x] 集成顶部Tab栏组件，支持状态切换
  - [x] 实现订单列表根据状态筛选显示

- [x] **订单卡片组件开发** (AC: 1, 2)
  - [x] 创建订单卡片组件 `mini/src/components/order/OrderCard/index.tsx` [对照: `tcb-shop-demo/pages/order/components/order-card/*`]
  - [x] 实现订单卡片组件，显示订单号、订单状态、商品信息、总价等
  - [x] 应用tcb-shop-demo订单卡片设计规范

- [x] **订单按钮栏组件开发** (AC: 1, 4)
  - [x] 创建订单按钮栏组件 `mini/src/components/order/OrderButtonBar/index.tsx` [对照: `tcb-shop-demo/pages/order/components/order-button-bar/*`]
  - [x] 实现订单操作按钮栏，根据不同订单状态显示相应的操作按钮（取消订单、付款、确认收货等）
  - [x] 应用tcb-shop-demo订单按钮栏设计规范

- [x] **数据集成和API调用** (AC: 3)
  - [x] 集成订单API，获取真实订单数据
  - [x] 实现订单列表数据获取和状态管理
  - [x] 实现订单操作API调用（取消、付款、确认收货等）

- [x] **样式集成和设计规范** (AC: 1, 5)
  - [x] 应用tcb-shop-demo订单列表页设计规范
  - [x] 创建专用CSS文件 `mini/src/pages/order-list/index.css`
  - [x] 确保样式与现有tcb-theme.css系统兼容

- [x] **功能完整性和测试** (AC: 2, 4, 5)
  - [x] 验证订单列表、状态筛选、订单操作等所有功能正常工作
  - [x] 创建单元测试验证订单组件功能 `mini/tests/unit/pages/order-list/basic.test.tsx`
  - [x] 验证页面组件TypeScript编译正常，无错误

## Dev Notes

### 技术栈信息 [Source: architecture/tech-stack.md]
- **前端框架**: React 19.1.0
- **构建工具**: Vite 7.0.0
- **样式**: Tailwind CSS 4.1.11 + 自定义CSS
- **状态管理**: React Query 5.83.0
- **小程序框架**: Taro

### 项目结构信息 [Source: architecture/source-tree.md]
- **目标文件**:
  - `mini/src/pages/order-list/index.tsx` - 现有订单列表页面（需要重构）
  - `mini/src/components/order/OrderCard/index.tsx` - 订单卡片组件
  - `mini/src/components/order/OrderButtonBar/index.tsx` - 订单按钮栏组件
- **组件位置**: `mini/src/components/order/`
- **样式文件**: `mini/src/pages/order-list/index.css` (专用CSS文件)
- **API客户端**: `mini/src/api.ts` (现有API客户端)

### 现有订单列表页面分析
- **当前实现**: 使用Taro组件和React Query进行数据获取
- **现有功能**: 订单列表显示、基本状态映射、导航栏
- **需要改进**: 应用tcb-shop-demo设计规范、添加状态筛选、重构订单卡片、添加操作按钮栏
- **数据集成**: 已集成orderClient API，使用useInfiniteQuery进行分页加载

### 订单管理模块信息 [Source: architecture/source-tree.md]
- **订单模块包**: `packages/orders-module` (@d8d/orders-module)
- **订单实体**: `packages/orders-module/src/entities/order.entity.ts`
- **订单服务**: `packages/orders-module/src/services/order.service.ts`
- **用户订单路由**: `packages/orders-module/src/routes/user/orders.ts`
- **订单类型定义**: `packages/orders-module/src/types/order.types.ts`

### tcb-shop-demo订单列表设计规范
- **页面结构**: 顶部Tab栏 + 订单卡片列表 + 下拉刷新 + 加载更多 [对照: `tcb-shop-demo/pages/order/order-list/index.wxml`]
- **订单状态筛选**: 全部、待付款、待发货、待收货、已完成 [对照: `tcb-shop-demo/pages/order/order-list/index.js`]
- **订单卡片**: 显示订单号、状态、商品信息、总价、操作按钮 [对照: `tcb-shop-demo/pages/order/components/order-card/*`]
- **订单按钮栏**: 根据不同状态显示相应操作按钮 [对照: `tcb-shop-demo/pages/order/components/order-button-bar/*`]

### 订单数据结构 [Source: architecture/source-tree.md]
- **订单实体**: 包含订单号、状态、商品列表、总价、创建时间等字段
- **订单状态**: 待付款、待发货、待收货、已完成、已取消等
- **订单商品**: 商品信息、数量、价格、规格等
- **订单操作**: 取消订单、付款、确认收货、申请退款等

### 样式集成要求
- 应用tcb-shop-demo订单列表页设计规范
- 创建专用CSS文件或扩展现有主题系统
- 保持与现有Tailwind CSS的兼容性
- 使用tcb-theme.css中的颜色和字体系统

### 测试要求 [Source: architecture/testing-strategy.md]
- **测试位置**: `mini/tests/unit/pages/order-list/`
- **测试框架**: Vitest + Testing Library
- **覆盖率目标**: ≥ 80%
- **测试类型**: 单元测试验证组件功能
- **测试内容**: 订单列表显示、状态筛选、订单操作、API调用

## Change Log
| Date | Version | Description | Author |
|------|---------|-------------|--------|
| 2025-11-22 | 1.0 | 初始故事创建 | Bob (Scrum Master) |

## Dev Agent Record

### Agent Model Used
- **Agent**: James (Developer)
- **Model**: Claude Sonnet 4.5
- **Date**: 2025-11-22

### Debug Log References
- 修复了OrderButtonBar组件中的TypeScript类型错误
- 优化了订单列表页面的布局结构
- 移除了未使用的函数和导入

### Completion Notes List
- ✅ 成功重构订单列表页面，应用tcb-shop-demo设计规范
- ✅ 创建了订单卡片组件(OrderCard)和订单按钮栏组件(OrderButtonBar)
- ✅ 实现了订单状态筛选功能，支持全部、待付款、待发货、待收货、已完成
- ✅ 集成了订单API，支持分页加载、下拉刷新、加载更多
- ✅ 应用了专用CSS样式文件，确保与tcb-shop-demo设计一致
- ✅ 创建了单元测试验证组件功能
- ✅ 修复了TypeScript编译错误，确保代码质量

### File List
- **新增文件**:
  - `mini/src/components/order/OrderCard/index.tsx` - 订单卡片组件
  - `mini/src/components/order/OrderButtonBar/index.tsx` - 订单按钮栏组件
  - `mini/src/pages/order-list/index.css` - 专用样式文件
  - `mini/tests/unit/pages/order-list/basic.test.tsx` - 单元测试

- **修改文件**:
  - `mini/src/pages/order-list/index.tsx` - 重构订单列表页面

## QA Results
*This section will be populated by the QA agent during review*