📝 docs(stories): 创建故事001.014订单详情页UI重构

- 添加订单详情页UI重构故事文档
- 包含完整的任务分解和文件路径
- 添加tcb-shop-demo对照文件参考
- 包含技术栈和测试指导

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

docs/stories/001.014.order-detail-ui-refactor.story.md

@@ -0,0 +1,164 @@
+# Story 001.014: 订单详情页UI重构
+
+## Status
+Draft
+
+## Story
+**As a** 用户，
+**I want** 查看与tcb-shop-demo设计一致的订单详情页面，
+**so that** 我可以获得统一的视觉体验和完整的订单管理功能
+
+## Acceptance Criteria
+1. 页面结构重构：参照demo页面结构，重新组织页面布局，包含顶部状态卡片、收货地址区域、订单商品列表、支付详情、订单信息等区域
+2. 顶部状态卡片：实现带背景图片的订单状态卡片，显示订单状态描述，应用圆角设计和白色文字
+3. 收货地址区域：实现定位图标、收货人信息、地址信息布局，支持地址修改功能
+4. 订单商品卡片：使用现有的OrderCard组件，集成OrderGoodsCard组件显示商品信息
+5. 支付详情区域：重新设计支付详情布局，显示商品总额、实付金额等
+6. 订单信息区域：实现订单编号、下单时间等信息显示，支持订单编号复制功能
+7. 底部操作栏：重构底部操作栏，使用OrderButtonBar组件，根据不同订单状态显示相应操作按钮
+8. 下拉刷新功能：使用Taro原生下拉刷新功能，支持下拉刷新订单数据
+9. 配置文件更新：更新页面配置文件，启用Taro原生下拉刷新功能
+10. 样式集成：应用tcb-shop-demo订单详情页设计规范，创建专用CSS文件
+11. 功能完整性：验证所有订单操作功能正常工作（取消订单、立即支付、确认收货、申请退款等）
+
+## Tasks / Subtasks
+- [ ] **重构订单详情页整体布局结构** (AC: 1)
+  - [ ] 更新订单详情页面 `mini/src/pages/order-detail/index.tsx` [对照: `tcb-shop-demo/pages/order/order-detail/index.wxml`]
+  - [ ] 分析tcb-shop-demo订单详情页结构
+  - [ ] 重新组织页面布局，包含顶部状态卡片、收货地址、订单商品、支付详情、订单信息区域
+  - [ ] 应用tcb-shop-demo页面容器类名和结构
+- [ ] **实现顶部状态卡片组件** (AC: 2)
+  - [ ] 在订单详情页中实现顶部状态卡片 `mini/src/pages/order-detail/index.tsx` [对照: `tcb-shop-demo/pages/order/order-detail/index.wxml` 中的header部分]
+  - [ ] 创建带背景图片的订单状态卡片
+  - [ ] 应用圆角设计和白色文字样式
+  - [ ] 根据订单状态显示不同的状态描述
+- [ ] **重构收货地址区域** (AC: 3)
+  - [ ] 重构收货地址区域 `mini/src/pages/order-detail/index.tsx` [对照: `tcb-shop-demo/pages/order/order-detail/index.wxml` 中的order-logistics部分]
+  - [ ] 实现定位图标、收货人信息、地址信息布局
+  - [ ] 支持地址修改功能（可选）
+  - [ ] 应用tcb-shop-demo收货地址区域设计规范
+- [ ] **集成订单商品卡片组件** (AC: 4)
+  - [ ] 使用现有的OrderCard组件 `mini/src/components/order/OrderCard/index.tsx` [对照: `tcb-shop-demo/pages/order/components/order-card/*`]
+  - [ ] 集成OrderGoodsCard组件显示商品信息 [对照: `tcb-shop-demo/pages/order/components/order-goods-card/*`]
+  - [ ] 应用商品卡片样式和布局
+- [ ] **重构支付详情区域** (AC: 5)
+  - [ ] 重构支付详情区域 `mini/src/pages/order-detail/index.tsx` [对照: `tcb-shop-demo/pages/order/order-detail/index.wxml` 中的pay-detail部分]
+  - [ ] 重新设计支付详情布局
+  - [ ] 显示商品总额、实付金额等详细信息
+  - [ ] 应用tcb-shop-demo支付详情设计规范
+- [ ] **实现订单信息区域** (AC: 6)
+  - [ ] 实现订单信息区域 `mini/src/pages/order-detail/index.tsx` [对照: `tcb-shop-demo/pages/order/order-detail/index.wxml` 中的订单编号部分]
+  - [ ] 实现订单编号、下单时间等信息显示
+  - [ ] 支持订单编号复制功能
+  - [ ] 应用订单信息区域样式
+- [ ] **重构底部操作栏** (AC: 7)
+  - [ ] 使用OrderButtonBar组件 `mini/src/components/order/OrderButtonBar/index.tsx` [对照: `tcb-shop-demo/pages/order/components/order-button-bar/*`]
+  - [ ] 根据不同订单状态显示相应操作按钮
+  - [ ] 应用底部操作栏固定定位
+- [ ] **实现下拉刷新功能** (AC: 8, 9)
+  - [ ] 更新页面配置文件 `mini/src/pages/order-detail/index.config.ts` 启用下拉刷新
+  - [ ] 使用Taro原生下拉刷新功能
+  - [ ] 实现下拉刷新订单数据逻辑
+- [ ] **创建专用CSS样式文件** (AC: 10)
+  - [ ] 创建专用CSS文件 `mini/src/pages/order-detail/index.css` [对照: `tcb-shop-demo/pages/order/order-detail/index.wxss`]
+  - [ ] 应用tcb-shop-demo订单详情页设计规范
+  - [ ] 集成tcb-theme.css主题样式
+- [ ] **功能完整性测试** (AC: 11)
+  - [ ] 验证取消订单功能正常工作
+  - [ ] 验证立即支付功能正常工作
+  - [ ] 验证确认收货功能正常工作
+  - [ ] 验证申请退款功能正常工作
+- [ ] **单元测试编写**
+  - [ ] 创建单元测试文件 `mini/tests/unit/pages/order-detail/basic.test.tsx`
+  - [ ] 测试页面渲染和基本功能
+  - [ ] 测试订单状态显示
+  - [ ] 测试操作按钮功能
+
+## Dev Notes
+
+### 技术栈信息 [Source: architecture/tech-stack.md]
+- **前端框架**: React 19.1.0
+- **小程序框架**: Taro
+- **样式系统**: Tailwind CSS 4.1.11 + tcb-theme.css
+- **状态管理**: React Query 5.83.0
+- **API客户端**: Hono RPC客户端
+
+### 项目结构信息 [Source: architecture/source-tree.md]
+- **目标文件**: `mini/src/pages/order-detail/index.tsx`
+- **配置文件**: `mini/src/pages/order-detail/index.config.ts`
+- **样式文件**: `mini/src/pages/order-detail/index.css`
+- **测试文件**: `mini/tests/unit/pages/order-detail/basic.test.tsx`
+- **组件位置**: `mini/src/components/order/` 目录
+
+### 现有订单详情页分析
+当前订单详情页 (`mini/src/pages/order-detail/index.tsx`) 已实现：
+- 基本的订单信息获取和显示
+- 订单状态显示（待付款、待发货、待收货、已完成、已取消）
+- 收货信息显示
+- 商品列表显示
+- 订单金额计算
+- 订单信息显示
+- 底部操作栏（取消订单、立即支付、确认收货、申请退款）
+
+### tcb-shop-demo订单详情页设计规范
+基于 `tcb-shop-demo/pages/order/order-detail/index.wxml` 分析：
+- **页面结构**: 使用下拉刷新容器，包含header、order-card、pay-detail等区域
+- **顶部状态卡片**: 带背景图片的订单状态显示
+- **收货地址区域**: 定位图标 + 收货人信息 + 地址信息 + 修改按钮
+- **订单商品卡片**: 使用order-card和order-goods-card组件
+- **支付详情区域**: 商品总额、实付金额显示
+- **订单信息区域**: 订单编号（支持复制）、下单时间
+- **底部操作栏**: 使用order-button-bar组件
+
+### 组件依赖
+- **OrderCard组件**: `mini/src/components/order/OrderCard/index.tsx` (已存在) [对照: `tcb-shop-demo/pages/order/components/order-card/*`]
+- **OrderButtonBar组件**: `mini/src/components/order/OrderButtonBar/index.tsx` (已存在) [对照: `tcb-shop-demo/pages/order/components/order-button-bar/*`]
+- **OrderGoodsCard组件**: 需要创建 `mini/src/components/order/OrderGoodsCard/index.tsx` [对照: `tcb-shop-demo/pages/order/components/order-goods-card/*`]
+
+### 样式集成要求
+- 创建专用CSS文件 `mini/src/pages/order-detail/index.css`
+- 应用tcb-shop-demo订单详情页设计规范
+- 集成tcb-theme.css主题样式
+- 保持与现有Tailwind CSS的兼容性
+
+### 功能保持要求
+- 保持现有订单数据API集成
+- 保持现有订单操作功能（取消、支付、确认收货、退款）
+- 保持现有错误处理和加载状态
+
+### Testing
+
+#### 测试标准 [Source: architecture/testing-strategy.md]
+- **测试框架**: Vitest + Testing Library
+- **测试位置**: `mini/tests/unit/pages/order-detail/basic.test.tsx`
+- **覆盖率目标**: ≥ 80%
+- **测试类型**: 单元测试
+
+#### 测试要求
+- 测试页面渲染和基本功能
+- 测试订单状态显示
+- 测试操作按钮功能
+- 测试下拉刷新功能
+- 测试样式应用
+
+#### 测试文件位置
+- `mini/tests/unit/pages/order-detail/basic.test.tsx`
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-11-22 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
+
+## Dev Agent Record
+*This section is populated by the development agent during implementation*
+
+### Agent Model Used
+
+### Debug Log References
+
+### Completion Notes List
+
+### File List
+
+## QA Results
+*Results from QA Agent QA review of the completed story implementation*