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

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