mini-starter/docs/stories/001.007.user-center-ui-refactor.story.md

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