|
|
@@ -0,0 +1,125 @@
|
|
|
+# Story 001.007: 用户中心UI重构
|
|
|
+
|
|
|
+## Status
|
|
|
+Draft
|
|
|
+
|
|
|
+## Story
|
|
|
+**As a** 小程序用户，
|
|
|
+**I want** 拥有与tcb-shop-demo一致的用户中心界面设计，
|
|
|
+**so that** 获得统一的用户体验和现代化的界面设计
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+1. 重构用户信息卡片布局，添加背景图片
|
|
|
+2. 集成订单状态卡片（待付款、待发货、待收货、待评价）
|
|
|
+3. 添加功能菜单（收货地址、联系客服等）
|
|
|
+4. 应用tcb-shop-demo用户中心设计规范
|
|
|
+5. 保持现有用户认证和头像上传功能
|
|
|
+6. 集成客服弹窗功能
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+- [ ] 重构用户信息卡片布局 (AC: 1, 4)
|
|
|
+ - [ ] 添加背景图片：`https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/user-center-bg.png`
|
|
|
+ - [ ] 调整内容区域位置：`margin-top: 340rpx`
|
|
|
+ - [ ] 应用圆角设计：`border-radius: 10rpx`
|
|
|
+ - [ ] 保持现有用户认证和头像上传功能
|
|
|
+
|
|
|
+- [ ] 集成订单状态卡片组件 (AC: 2, 4)
|
|
|
+ - [ ] 创建订单状态卡片组件，包含4个状态：待付款、待发货、待收货、待评价
|
|
|
+ - [ ] 实现订单数量显示功能
|
|
|
+ - [ ] 添加点击跳转到对应订单列表功能
|
|
|
+ - [ ] 应用tcb-shop-demo订单卡片设计规范
|
|
|
+
|
|
|
+- [ ] 重构功能菜单区域 (AC: 3, 4)
|
|
|
+ - [ ] 添加收货地址菜单项
|
|
|
+ - [ ] 添加联系客服菜单项
|
|
|
+ - [ ] 应用1px边框处理方案
|
|
|
+ - [ ] 保持现有其他菜单项功能
|
|
|
+
|
|
|
+- [ ] 集成客服弹窗功能 (AC: 6)
|
|
|
+ - [ ] 创建客服弹窗组件
|
|
|
+ - [ ] 实现电话客服功能
|
|
|
+ - [ ] 实现在线客服功能
|
|
|
+ - [ ] 添加服务时间显示
|
|
|
+
|
|
|
+- [ ] 测试和验证 (AC: 1-6)
|
|
|
+ - [ ] 验证所有功能正常工作
|
|
|
+ - [ ] 验证样式与tcb-shop-demo一致
|
|
|
+ - [ ] 验证现有功能无回归
|
|
|
+ - [ ] 添加单元测试
|
|
|
+
|
|
|
+## Dev Notes
|
|
|
+
|
|
|
+### 技术栈信息
|
|
|
+- **前端框架**: React 19.1.0 [Source: architecture/tech-stack.md#L13]
|
|
|
+- **样式系统**: Tailwind CSS 4.1.11 + tcb-theme.css [Source: architecture/tech-stack.md#L17]
|
|
|
+- **构建工具**: Vite 7.0.0 [Source: architecture/tech-stack.md#L14]
|
|
|
+- **状态管理**: React Query 5.83.0 [Source: architecture/tech-stack.md#L18]
|
|
|
+
|
|
|
+### 项目结构信息
|
|
|
+- **目标文件**: `mini/src/pages/profile/index.tsx` [Source: architecture/source-tree.md#L46-L48]
|
|
|
+- **组件位置**: `mini/src/components/ui/` [Source: architecture/source-tree.md#L22-L32]
|
|
|
+- **布局组件**: `mini/src/layouts/tab-bar-layout.tsx` [Source: architecture/source-tree.md#L34]
|
|
|
+
|
|
|
+### 现有用户中心状态
|
|
|
+- 当前用户中心使用基础布局，包含用户信息、统计信息和功能菜单
|
|
|
+- 已集成用户认证、头像上传、退出登录功能
|
|
|
+- 需要重构为tcb-shop-demo设计规范
|
|
|
+
|
|
|
+### tcb-shop-demo设计规范
|
|
|
+- **背景图片**: 使用固定URL的背景图片
|
|
|
+- **内容区域**: `margin-top: 340rpx` 定位
|
|
|
+- **圆角设计**: `border-radius: 10rpx`
|
|
|
+- **边框处理**: 1px边框使用scale缩放方案
|
|
|
+- **订单卡片**: 4个状态卡片，显示订单数量
|
|
|
+- **功能菜单**: 收货地址、联系客服等
|
|
|
+
|
|
|
+### 组件依赖
|
|
|
+- **TDesign组件**: 需要集成TDesign的Cell、CellGroup、Popup、Toast等组件
|
|
|
+- **现有组件**: 保持AvatarUpload、Button、Navbar等现有组件
|
|
|
+- **新组件**: 需要创建订单状态卡片组件和客服弹窗组件
|
|
|
+
|
|
|
+### 文件命名约定
|
|
|
+- 保持kebab-case命名约定 [Source: architecture/source-tree.md#L442]
|
|
|
+- 新组件文件：`mini/src/components/ui/order-status-cards.tsx`
|
|
|
+- 新组件文件：`mini/src/components/ui/customer-service-popup.tsx`
|
|
|
+
|
|
|
+### 测试要求
|
|
|
+- **测试位置**: `mini/tests/unit/pages/profile/` [Source: architecture/testing-strategy.md#L42]
|
|
|
+- **测试框架**: Vitest + Testing Library [Source: architecture/testing-strategy.md#L43]
|
|
|
+- **覆盖率目标**: ≥ 80% [Source: architecture/testing-strategy.md#L44]
|
|
|
+- **测试类型**: 单元测试验证组件渲染和交互 [Source: architecture/testing-strategy.md#L35-L37]
|
|
|
+
|
|
|
+### 技术约束
|
|
|
+- 必须保持与现有TabBarLayout的兼容性
|
|
|
+- 必须保持现有用户认证和头像上传功能
|
|
|
+- 必须应用tcb-shop-demo设计规范
|
|
|
+- 必须支持订单状态数据动态更新
|
|
|
+
|
|
|
+### Testing
|
|
|
+**测试标准**:
|
|
|
+- **测试文件位置**: `mini/tests/unit/pages/profile/index.test.tsx`
|
|
|
+- **测试框架**: Vitest + Testing Library
|
|
|
+- **测试模式**: 单元测试验证组件渲染和交互
|
|
|
+- **覆盖率要求**: ≥ 80%
|
|
|
+
|
|
|
+**具体测试要求**:
|
|
|
+- 验证用户信息卡片正确渲染
|
|
|
+- 验证订单状态卡片正确显示订单数量
|
|
|
+- 验证功能菜单点击事件正常工作
|
|
|
+- 验证客服弹窗显示和交互
|
|
|
+- 验证现有功能无回归
|
|
|
+
|
|
|
+## Change Log
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|---------|
|
|
|
+| 2025-11-21 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
|
|
|
+
|
|
|
+## Dev Agent Record
|
|
|
+
|
|
|
+### Agent Model Used
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+
|
|
|
+### File List
|
yourname