📝 docs(story): add order list UI refactoring story

- 创建订单列表页UI重构需求文档，明确与tcb-shop-demo设计一致性要求
- 定义用户故事：小程序用户需要订单列表页具有与tcb-shop-demo一致的设计和功能
- 制定验收标准：UI一致性、功能完整性、API集成、操作功能和TypeScript编译要求
- 分解开发任务：页面结构实现、订单状态筛选、卡片组件开发等子任务
- 提供技术栈、项目结构、订单模块等开发参考信息

docs/stories/001.013.order-list-ui-refactor.story.md

@@ -0,0 +1,123 @@
+# Story 001.013: 订单列表页UI重构
+
+## Status
+Draft
+
+## 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
+- [ ] **页面结构实现** (AC: 1, 2)
+  - [ ] 创建订单列表页面 `mini/src/pages/order-list/index.tsx` [对照: `tcb-shop-demo/pages/order/order-list/index.wxml`]
+  - [ ] 实现订单列表页整体布局，包含顶部Tab栏、订单卡片列表、下拉刷新、加载更多等功能
+  - [ ] 应用tcb-shop-demo订单列表页设计规范，创建专用CSS文件
+
+- [ ] **订单状态筛选功能** (AC: 1, 2)
+  - [ ] 实现订单状态筛选功能（全部、待付款、待发货、待收货、已完成）
+  - [ ] 集成顶部Tab栏组件，支持状态切换
+  - [ ] 实现订单列表根据状态筛选显示
+
+- [ ] **订单卡片组件开发** (AC: 1, 2)
+  - [ ] 创建订单卡片组件 `mini/src/components/order/OrderCard/index.tsx` [对照: `tcb-shop-demo/pages/order/components/order-card/*`]
+  - [ ] 实现订单卡片组件，显示订单号、订单状态、商品信息、总价等
+  - [ ] 应用tcb-shop-demo订单卡片设计规范
+
+- [ ] **订单按钮栏组件开发** (AC: 1, 4)
+  - [ ] 创建订单按钮栏组件 `mini/src/components/order/OrderButtonBar/index.tsx` [对照: `tcb-shop-demo/pages/order/components/order-button-bar/*`]
+  - [ ] 实现订单操作按钮栏，根据不同订单状态显示相应的操作按钮（取消订单、付款、确认收货等）
+  - [ ] 应用tcb-shop-demo订单按钮栏设计规范
+
+- [ ] **数据集成和API调用** (AC: 3)
+  - [ ] 集成订单API，获取真实订单数据
+  - [ ] 实现订单列表数据获取和状态管理
+  - [ ] 实现订单操作API调用（取消、付款、确认收货等）
+
+- [ ] **样式集成和设计规范** (AC: 1, 5)
+  - [ ] 应用tcb-shop-demo订单列表页设计规范
+  - [ ] 创建专用CSS文件 `mini/src/pages/order-list/index.css`
+  - [ ] 确保样式与现有tcb-theme.css系统兼容
+
+- [ ] **功能完整性和测试** (AC: 2, 4, 5)
+  - [ ] 验证订单列表、状态筛选、订单操作等所有功能正常工作
+  - [ ] 创建单元测试验证订单组件功能 `mini/tests/unit/pages/order-list/basic.test.tsx`
+  - [ ] 验证页面组件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客户端)
+
+### 订单管理模块信息 [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**: 待分配
+- **Model**: 待分配
+- **Date**: 待分配
+
+### Debug Log References
+
+### Completion Notes List
+
+### File List
+
+## QA Results
+*This section will be populated by the QA agent during review*