|
|
@@ -0,0 +1,110 @@
|
|
|
+# Story 001.12: 购物车页面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)
|
|
|
+ - [ ] 参照tcb-shop-demo购物车页面结构重新组织页面布局
|
|
|
+ - [ ] 实现分层购物车结构，支持按店铺分组显示商品
|
|
|
+ - [ ] 添加广告区域在购物车页面底部
|
|
|
+
|
|
|
+- [ ] **商品卡片重构** (AC: 1, 2)
|
|
|
+ - [ ] 重新设计购物车商品卡片，包含商品图片、名称、规格、价格、数量选择器
|
|
|
+ - [ ] 应用tcb-shop-demo数量选择器样式（灰色背景，44rpx高度，加减按钮样式）
|
|
|
+ - [ ] 实现侧滑删除功能，支持左滑显示删除按钮
|
|
|
+
|
|
|
+- [ ] **底部结算栏重构** (AC: 1, 4)
|
|
|
+ - [ ] 重构底部结算栏，包含全选功能、总价计算、去结算按钮
|
|
|
+ - [ ] 应用tcb-shop-demo结算栏设计规范
|
|
|
+ - [ ] 实现全选/取消全选功能
|
|
|
+
|
|
|
+- [ ] **购物车空态实现** (AC: 1, 2)
|
|
|
+ - [ ] 实现购物车空态页面，包含空购物车图标和去首页按钮
|
|
|
+ - [ ] 应用tcb-shop-demo空态设计规范
|
|
|
+
|
|
|
+- [ ] **数据集成和样式集成** (AC: 3, 5)
|
|
|
+ - [ ] 保持现有购物车数据API集成，应用tcb-shop-demo购物车数据结构
|
|
|
+ - [ ] 应用tcb-shop-demo购物车页面设计规范，创建专用CSS文件
|
|
|
+ - [ ] 验证全选、删除、数量调整、结算等所有功能正常工作
|
|
|
+
|
|
|
+- [ ] **测试和验证** (AC: 2, 3, 4, 5)
|
|
|
+ - [ ] 创建单元测试验证购物车组件功能
|
|
|
+ - [ ] 验证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/cart/index.tsx`
|
|
|
+- **组件位置**: `mini/src/components/`
|
|
|
+- **样式文件**: `mini/src/tcb-theme.css` (现有主题系统)
|
|
|
+- **工具函数**: `mini/src/utils/cart.ts` (现有购物车逻辑)
|
|
|
+
|
|
|
+### 现有购物车实现分析
|
|
|
+- **当前实现**: 使用本地存储的购物车系统，包含基本的选择、数量调整、删除功能
|
|
|
+- **数据结构**: `CartItem` 接口包含 id, name, price, image, stock, quantity, spec
|
|
|
+- **状态管理**: `useCart` hook 提供完整的购物车操作API
|
|
|
+- **UI组件**: 使用TDesign组件和自定义组件
|
|
|
+
|
|
|
+### tcb-shop-demo购物车设计规范
|
|
|
+- **页面结构**: 分层购物车设计，支持店铺分组
|
|
|
+- **商品卡片**: 水平布局，包含选择框、商品图片、信息、数量选择器
|
|
|
+- **数量选择器**: 灰色背景，44rpx高度，加减按钮样式
|
|
|
+- **侧滑删除**: 左滑显示删除按钮
|
|
|
+- **底部结算栏**: 固定底部，包含全选、总计、去结算按钮
|
|
|
+- **空态页面**: 空购物车图标和去首页按钮
|
|
|
+
|
|
|
+### 样式集成要求
|
|
|
+- 应用tcb-shop-demo购物车页面设计规范
|
|
|
+- 创建专用CSS文件或扩展现有主题系统
|
|
|
+- 保持与现有Tailwind CSS的兼容性
|
|
|
+
|
|
|
+### 测试要求 [Source: architecture/testing-strategy.md]
|
|
|
+- **测试位置**: `mini/tests/unit/pages/cart/`
|
|
|
+- **测试框架**: Vitest + Testing Library
|
|
|
+- **覆盖率目标**: ≥ 80%
|
|
|
+- **测试类型**: 单元测试验证组件功能
|
|
|
+- **测试内容**: 购物车操作、状态管理、UI交互
|
|
|
+
|
|
|
+## Change Log
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-11-21 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
|
|
|
+
|
|
|
+## Dev Agent Record
|
|
|
+*This section will be populated by the development agent during implementation*
|
|
|
+
|
|
|
+### Agent Model Used
|
|
|
+*To be filled by dev agent*
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+*To be filled by dev agent*
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+*To be filled by dev agent*
|
|
|
+
|
|
|
+### File List
|
|
|
+*To be filled by dev agent*
|
|
|
+
|
|
|
+## QA Results
|
|
|
+*This section will be populated by the QA agent during review*
|
yourname