Home Esplora Aiuto
Registrati Accedi
186-template-175
/
mini-starter
forkato da 155-template-138/mini-starter
2
0
Forka 0
File
Albero (Tree): 842e8a828b
Rami (Branch) Tag
mini-starter
/
docs
/
stories
/
001.013.order-list-ui-refactor.story.md

001.013.order-list-ui-refactor.story.md 7.1 KB
Cronologia Originale

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)

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

  • [x] 订单状态筛选功能 (AC: 1, 2)

    • 实现订单状态筛选功能（全部、待付款、待发货、待收货、已完成）
    • 集成顶部Tab栏组件，支持状态切换
    • 实现订单列表根据状态筛选显示

  • [x] 订单卡片组件开发 (AC: 1, 2)

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

  • [x] 订单按钮栏组件开发 (AC: 1, 4)

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

  • [x] 数据集成和API调用 (AC: 3)

    • 集成订单API，获取真实订单数据
    • 实现订单列表数据获取和状态管理
    • 实现订单操作API调用（取消、付款、确认收货等）

  • [x] 样式集成和设计规范 (AC: 1, 5)

    • 应用tcb-shop-demo订单列表页设计规范
    • 创建专用CSS文件 mini/src/pages/order-list/index.css
    • 确保样式与现有tcb-theme.css系统兼容

  • [x] 功能完整性和测试 (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客户端)

现有订单列表页面分析

  • 当前实现: 使用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