📝 docs(story): update user center UI refactor story details

- refine acceptance criteria to clarify UI structure and style requirements
- update tasks to include TDesign component creation and integration
- add technical stack and project structure information
- detail TDesign component transcription strategy and style architecture
- update test requirements and coverage targets
- add对照文件路径for implementation reference

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

@@ -9,64 +9,103 @@ Draft
 **so that** 获得统一的用户体验和现代化的界面设计
 
 ## Acceptance Criteria
-1. 重构用户信息卡片布局，添加背景图片
-2. 集成订单状态卡片（待付款、待发货、待收货、待评价）
-3. 添加功能菜单（收货地址、联系客服等）
-4. 应用tcb-shop-demo用户中心设计规范
-5. 保持现有用户认证和头像上传功能
-6. 集成客服弹窗功能
+1. 用户中心UI结构与tcb-shop-demo一致，包含用户信息卡片、订单状态卡片、功能菜单区域
+2. 样式遵循tcb-shop-demo的设计规范，包括背景图片、圆角设计、1px边框处理等
+3. 订单状态卡片布局与tcb-shop-demo一致，包含待付款、待发货、待收货、待评价四个状态
+4. 功能菜单包含收货地址、联系客服等选项，支持点击跳转
+5. 使用已集成的tcb-theme.css主题变量和样式系统
+6. 保持现有用户认证、头像上传、退出登录功能
+7. 集成客服弹窗功能，支持电话客服和在线客服
 
 ## 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)
-  - [ ] 添加收货地址菜单项
-  - [ ] 添加联系客服菜单项
+- [ ] 创建TDesign用户中心组件 (AC: 1, 5)
+  - [ ] 创建 `mini/src/components/tdesign/user-center-card/index.tsx` - 用户中心卡片组件
+  - [ ] 创建 `mini/src/components/tdesign/order-group/index.tsx` - 订单状态卡片组件
+  - [ ] 创建 `mini/src/components/tdesign/cell-group/index.tsx` - 单元格组组件
+  - [ ] 创建 `mini/src/components/tdesign/cell/index.tsx` - 单元格组件
+  - [ ] 创建 `mini/src/components/tdesign/popup/index.tsx` - 弹窗组件
+
+- [ ] 实现用户中心卡片组件 (AC: 1, 2)
+  - [ ] 创建 `mini/src/components/tdesign/user-center-card/index.tsx` 用户中心卡片组件
+  - [ ] 参照 `tcb-shop-demo/components/user-center-card/` 实现用户信息布局
+  - [ ] 实现背景图片：`https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/user-center-bg.png`
+  - [ ] 实现用户头像、昵称、手机号显示
+  - [ ] 应用tcb-shop-demo的用户中心卡片样式
+
+- [ ] 实现订单状态卡片组件 (AC: 3)
+  - [ ] 创建 `mini/src/components/tdesign/order-group/index.tsx` 订单状态卡片组件
+  - [ ] 参照 `tcb-shop-demo/components/order-group/` 实现订单状态布局
+  - [ ] 实现4个状态：待付款、待发货、待收货、待评价
+  - [ ] 实现订单数量显示和点击跳转功能
+  - [ ] 应用tcb-shop-demo的订单卡片样式
+
+- [ ] 实现单元格组件 (AC: 4)
+  - [ ] 创建 `mini/src/components/tdesign/cell-group/index.tsx` 单元格组组件
+  - [ ] 创建 `mini/src/components/tdesign/cell/index.tsx` 单元格组件
+  - [ ] 参照 `tcb-shop-demo/components/cell/` 实现单元格布局
+  - [ ] 实现标题、图标、箭头显示
   - [ ] 应用1px边框处理方案
-  - [ ] 保持现有其他菜单项功能
 
-- [ ] 集成客服弹窗功能 (AC: 6)
-  - [ ] 创建客服弹窗组件
-  - [ ] 实现电话客服功能
-  - [ ] 实现在线客服功能
-  - [ ] 添加服务时间显示
+- [ ] 实现客服弹窗组件 (AC: 7)
+  - [ ] 创建 `mini/src/components/tdesign/popup/index.tsx` 弹窗组件
+  - [ ] 参照 `tcb-shop-demo/components/popup/` 实现弹窗布局
+  - [ ] 实现电话客服功能（wx.makePhoneCall）
+  - [ ] 实现在线客服功能（open-type="contact"）
+  - [ ] 实现服务时间显示
+
+- [ ] 重构用户中心页面 (AC: 1, 2, 5, 6)
+  - [ ] 重构 `mini/src/pages/profile/index.tsx` 用户中心页面
+  - [ ] 参照 `tcb-shop-demo/pages/usercenter/index.wxml` 实现页面结构
+  - [ ] 集成TDesign user-center-card组件实现用户信息卡片（带背景图片）
+  - [ ] 集成TDesign order-group组件实现订单状态卡片
+  - [ ] 集成TDesign cell-group和cell组件实现功能菜单
+  - [ ] 集成TDesign popup组件实现客服弹窗
+  - [ ] 集成TDesign toast组件实现提示功能
+  - [ ] 应用背景图片和内容区域定位（`margin-top: 340rpx`）
+  - [ ] 应用圆角设计（`border-radius: 10rpx`）
+  - [ ] 应用1px边框处理方案
+  - [ ] 应用主色调和图标颜色
+  - [ ] 保持现有用户认证和头像上传功能
 
-- [ ] 测试和验证 (AC: 1-6)
-  - [ ] 验证所有功能正常工作
-  - [ ] 验证样式与tcb-shop-demo一致
+- [ ] 测试和验证 (AC: 6)
+  - [ ] 创建测试页面验证所有组件功能
+  - [ ] 验证与现有TabBarLayout的兼容性
+  - [ ] 验证样式系统正确应用
   - [ ] 验证现有功能无回归
-  - [ ] 添加单元测试
 
 ## 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的背景图片
+### 技术栈信息 [Source: architecture/tech-stack.md]
+- **前端框架**: React 19.1.0
+- **小程序框架**: Taro 4.1.4
+- **样式系统**: Tailwind CSS 4.1.11 + 自定义CSS (tcb-theme.css)
+- **组件库**: 自定义Taro React组件 (基于TDesign设计规范)
+- **集成方式**: 直接使用Taro React组件，无需原生组件集成
+
+### 项目结构信息 [Source: architecture/source-tree.md]
+- **用户中心位置**: `mini/src/pages/profile/index.tsx`
+- **组件位置**: `mini/src/components/tdesign/` (自定义React组件)
+- **TDesign源文件**: `mini/tdesign/` (原生小程序组件，供参考)
+- **样式文件**: `mini/src/tcb-theme.css`
+- **布局组件**: `mini/src/layouts/tab-bar-layout.tsx`
+
+### 对照文件路径
+- **页面结构**: `tcb-shop-demo/pages/usercenter/index.wxml`
+- **页面样式**: `tcb-shop-demo/pages/usercenter/index.wxss`
+- **页面逻辑**: `tcb-shop-demo/pages/usercenter/index.js`
+- **用户中心卡片**: `tcb-shop-demo/components/user-center-card/`
+- **订单状态卡片**: `tcb-shop-demo/components/order-group/`
+- **单元格组件**: `tcb-shop-demo/components/cell/`
+- **弹窗组件**: `tcb-shop-demo/components/popup/`
+
+### 已集成的样式系统
+- **主题变量**: 已在 `mini/src/tcb-theme.css` 中完整集成
+- **颜色系统**: 语义化颜色类、层级颜色、背景色、边框色
+- **字体系统**: 完整字体大小和字重系统
+- **布局工具类**: Flex布局、间距系统、边框处理
+
+### 设计规范
+- **背景图片**: `https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/user-center-bg.png`
 - **内容区域**: `margin-top: 340rpx` 定位
 - **圆角设计**: `border-radius: 10rpx`
 - **边框处理**: 1px边框使用scale缩放方案
@@ -74,47 +113,59 @@ Draft
 - **功能菜单**: 收货地址、联系客服等
 
 ### 组件依赖
-- **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设计规范
-- 必须支持订单状态数据动态更新
+- **自定义Taro React组件**: TDesignUserCenterCard, TDesignOrderGroup, TDesignCellGroup, TDesignCell, TDesignPopup
+- **现有组件**: AvatarUpload, Button, Navbar, TabBarLayout
+- **TDesign基础组件**: TDesignIcon, TDesignToast (已从001.004创建)
+
+### TDesign组件转写说明
+
+#### 1. 组件创建策略
+- 基于TDesign原生组件源码转写成Taro React组件
+- 保持TDesign的设计规范和交互体验
+- 使用React Hooks和Taro API实现功能
+- 应用tcb-shop-demo的主题样式
+
+#### 2. 组件样式架构
+- **样式位置**: 组件样式放在组件目录下的 `index.css` 文件中
+- **命名规范**: 使用 `tdesign-` 前缀避免与 Tailwind CSS 类名冲突
+- **设计规范**: 严格遵循 tcb-shop-demo 的设计规范
+- **架构模式**: 沿用001.004成功的组件样式架构
+
+#### 3. 组件实现要点
+- **TypeScript**: 完整的接口定义和类型安全
+- **React Hooks**: 使用 useState 管理组件状态
+- **事件处理**: 完整的回调函数支持
+- **属性设计**: 支持常用属性和配置选项
 
 ### Testing
-**测试标准**:
-- **测试文件位置**: `mini/tests/unit/pages/profile/index.test.tsx`
-- **测试框架**: Vitest + Testing Library
-- **测试模式**: 单元测试验证组件渲染和交互
-- **覆盖率要求**: ≥ 80%
 
-**具体测试要求**:
-- 验证用户信息卡片正确渲染
-- 验证订单状态卡片正确显示订单数量
-- 验证功能菜单点击事件正常工作
-- 验证客服弹窗显示和交互
-- 验证现有功能无回归
+#### 测试标准 [基于mini项目配置]
+- **测试框架**: Vitest + Testing Library
+- **测试位置**: `mini/tests/` 文件夹，按组件和页面组织
+- **测试命令**:
+  - `pnpm test` - 运行所有测试
+  - `pnpm test:components` - 运行组件测试
+  - `pnpm test:pages` - 运行页面测试
+  - `pnpm test:coverage` - 运行覆盖率测试
+- **覆盖率目标**: 核心业务逻辑 > 80%
+- **测试类型**: 单元测试、集成测试
+
+#### 测试要求
+- 为所有新组件在 `tests/components/tdesign/` 中创建单元测试
+- 为用户中心页面在 `tests/pages/profile/` 中创建集成测试
+- 验证组件渲染和交互功能
+- 测试样式类正确应用
+- 验证与现有TabBarLayout的兼容性
+- 使用Taro Mock模拟小程序API
 
 ## Change Log
 | Date | Version | Description | Author |
 |------|---------|-------------|---------|
 | 2025-11-21 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
+| 2025-11-21 | 2.0 | 重写故事，借鉴001.004成功经验 | Bob (Scrum Master) |
 
 ## Dev Agent Record
+*This section is populated by the development agent during implementation*
 
 ### Agent Model Used
 
@@ -122,4 +173,4 @@ Draft
 
 ### Completion Notes List
 
-### File List
+### File List