📝 docs(mini): add mini program payment frontend integration story

- create story documentation for mini program payment frontend integration
- define acceptance criteria for payment page and order cancellation
- outline tasks for payment page creation and order flow integration
- document technical specifications and testing requirements
- add file locations and component specifications for implementation

docs/stories/011.004.mini-payment-frontend-integration.story.md

@@ -0,0 +1,149 @@
+# Story 011.004: Mini小程序前端支付页面和流程集成
+
+## Status
+Draft
+
+## Story
+**As a** 小程序用户,
+**I want** 在前端页面中完成支付流程和订单取消操作,
+**so that** 我可以在小程序中顺畅地完成订单支付和退款流程
+
+## Acceptance Criteria
+1. 创建完整的支付页面，支持微信支付调用
+2. 订单提交页面成功跳转到支付页面
+3. 订单列表页面的"去支付"按钮正常工作
+4. 订单详情页面支持取消订单操作
+5. 支付成功/失败有相应的页面跳转和提示
+6. 复用现有的支付工具函数库
+7. 实现完整的订单状态机流转
+8. 支持退款失败的重试机制
+
+## Tasks / Subtasks
+- [ ] 创建支付页面 `mini/src/pages/payment/index.tsx` (AC: 1, 5, 6)
+  - [ ] 实现支付页面UI布局
+  - [ ] 集成支付工具函数调用
+  - [ ] 处理支付结果和页面跳转
+  - [ ] 添加支付状态管理
+- [ ] 集成订单提交页面支付跳转 (AC: 2)
+  - [ ] 修改订单提交页面跳转逻辑 `mini/src/pages/order-submit/index.tsx:85-87`
+  - [ ] 添加支付页面跳转参数传递
+- [ ] 集成订单列表页面支付功能 (AC: 3)
+  - [ ] 修复订单列表页面"去支付"按钮跳转 `mini/src/pages/order-list/index.tsx:248-252`
+  - [ ] 确保支付页面路径正确
+- [ ] 完善订单详情页面取消订单功能 (AC: 4, 7)
+  - [ ] 验证取消订单API调用 `mini/src/pages/order-detail/index.tsx:224-260`
+  - [ ] 添加取消订单状态反馈
+  - [ ] 集成退款流程状态显示
+- [ ] 实现支付状态流转逻辑 (AC: 7, 8)
+  - [ ] 集成支付状态管理类
+  - [ ] 实现支付重试机制
+  - [ ] 添加支付超时处理
+
+## Dev Notes
+
+### Previous Story Insights
+- Story 1-3: 后端支付、订单取消、退款功能已完全实现并通过测试
+- 多租户数据隔离已验证通过
+- 支付回调、订单取消、退款API已可用
+- 所有后端集成测试通过
+
+### Data Models
+**订单状态枚举** [Source: mini/src/pages/order-list/index.tsx:24-31]
+- `0`: 未支付
+- `1`: 支付中
+- `2`: 已支付
+- `3`: 已退款
+- `4`: 支付失败
+- `5`: 已关闭
+
+**支付状态枚举** [Source: mini/src/utils/payment.ts:383-390]
+- `PENDING`: 待支付
+- `PROCESSING`: 支付中
+- `SUCCESS`: 支付成功
+- `FAILED`: 支付失败
+- `REFUNDED`: 已退款
+- `CLOSED`: 已关闭
+
+### API Specifications
+**订单API客户端** [Source: mini/src/api.ts:26]
+- `orderClient`: RPC客户端实例
+- 可用方法：
+  - `create-order`: 创建订单
+  - `cancel-order`: 取消订单
+  - `:id`: 获取订单详情
+
+**支付工具函数** [Source: mini/src/utils/payment.ts]
+- `requestWechatPayment()`: 调用微信支付
+- `PaymentStateManager`: 支付状态管理
+- `retryPayment()`: 支付重试逻辑
+- `PaymentRateLimiter`: 支付频率限制
+
+### Component Specifications
+**现有页面组件**
+- `OrderSubmitPage`: 订单提交页面，需要添加支付跳转
+- `OrderListPage`: 订单列表页面，需要修复"去支付"按钮
+- `OrderDetailPage`: 订单详情页面，需要完善取消订单功能
+
+**需要创建的组件**
+- `PaymentPage`: 支付页面，需要创建新页面
+
+### File Locations
+- **支付页面**: `mini/src/pages/payment/index.tsx` (需要创建)
+- **订单提交页面**: `mini/src/pages/order-submit/index.tsx:85-87` (需要修改跳转逻辑)
+- **订单列表页面**: `mini/src/pages/order-list/index.tsx:248-252` (需要修复支付跳转)
+- **订单详情页面**: `mini/src/pages/order-detail/index.tsx:224-260` (需要完善取消订单)
+- **支付工具函数**: `mini/src/utils/payment.ts` (已存在，需要集成)
+
+### Testing Requirements
+**测试框架**
+- **单元测试**: Vitest
+- **组件测试**: Testing Library
+- **E2E测试**: Playwright
+
+**测试位置**
+- `mini/tests/` 文件夹与源码并列
+
+**测试场景**
+- 支付页面渲染测试
+- 支付流程集成测试
+- 订单取消功能测试
+- 支付状态流转测试
+- 错误处理和重试测试
+
+### Technical Constraints
+**技术栈**
+- **前端框架**: Taro + React + TypeScript
+- **状态管理**: TanStack Query
+- **UI组件**: Heroicons + Tailwind CSS
+- **API调用**: Hono RPC客户端
+
+**小程序限制**
+- 使用 `Taro.requestPayment` 调用微信支付
+- 页面跳转使用 `Taro.navigateTo` / `Taro.redirectTo`
+- 支付结果通过回调处理
+
+### Project Structure Notes
+项目结构完全对齐，所有需要的包和模块都已存在：
+- `mini/src/pages/`: 页面组件目录
+- `mini/src/utils/`: 工具函数目录
+- `mini/src/api.ts`: API客户端配置
+- 现有支付工具函数库功能完整，可直接复用
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-11-21 | 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*