# Story 007.002: 个人资料显示优化

## Status
Ready for Review

## Story
**As a** 小程序用户，
**I want** 在个人资料页面看到统一的默认头像和用户名显示，
**so that** 即使没有设置个性化头像和用户名也能获得一致的用户体验。

## Acceptance Criteria
1. 用户无头像时显示默认头像（mini/images/default_avatar.jpg）
2. 用户名统一暂时显示为"普通用户"
3. 保持现有的头像上传功能
4. 验证个人资料显示功能正常工作

## Tasks / Subtasks
- [x] 修改个人中心页面头像显示逻辑 (AC: 1)
  - [x] 实现条件渲染：用户无头像时显示默认头像
  - [x] 确保默认头像路径正确（mini/images/default_avatar.jpg）
  - [x] 验证头像显示在各种用户状态下的正确性
- [x] 修改个人中心页面用户名显示逻辑 (AC: 2)
  - [x] 实现用户名统一显示为"普通用户"
  - [x] 确保现有用户名显示逻辑被正确替换
  - [x] 验证用户名显示在各种用户状态下的正确性
- [x] 验证现有头像上传功能保持完整 (AC: 3)
  - [x] 测试头像上传功能在默认头像显示状态下正常工作
  - [x] 确保上传后的头像正确替换默认头像
  - [x] 验证上传错误处理机制
- [x] 编写和更新相关测试 (AC: 4)
  - [x] 更新个人中心页面测试文件
  - [x] 添加默认头像和用户名显示测试场景
  - [x] 验证头像上传功能测试
  - [x] 确保现有功能无回归

## Dev Notes

### 技术栈要求
- **前端框架**: Taro 4.x + React [Source: architecture/tech-stack.md#现有技术栈维护]
- **小程序平台**: 微信小程序 [Source: architecture/tech-stack.md#现有技术栈维护]
- **状态管理**: React Query (TanStack Query) [Source: architecture/tech-stack.md#现有技术栈维护]
- **UI组件**: 自定义组件 + Heroicons [Source: architecture/tech-stack.md#现有技术栈维护]

### 项目结构
- **个人中心页面**: `mini/src/pages/profile/index.tsx` [Source: architecture/source-tree.md#实际项目结构]
- **默认头像路径**: `mini/images/default_avatar.jpg` [Source: docs/prd/epic-007-mini-program-ux-optimization.md#enhancement-details]
- **测试文件位置**: `mini/tests/pages/profile.test.tsx` [Source: architecture/testing-strategy.md#taro小程序测试体系]

### 现有代码分析
基于对 `mini/src/pages/profile/index.tsx` 的分析：
- 当前头像显示：`userProfile.avatarFile?.fullUrl` (第231行)
- 当前用户名显示：`userProfile.username` (第241行)
- 头像上传组件：`AvatarUpload` 组件 (第230-237行)
- 用户认证：`useAuth` hook (第14行)

### 实现细节

#### 头像显示逻辑
需要修改第231行的头像显示逻辑：
```typescript
// 当前代码
currentAvatar={userProfile.avatarFile?.fullUrl}

// 修改后逻辑
currentAvatar={userProfile.avatarFile?.fullUrl || '/images/default_avatar.jpg'}
```

#### 用户名显示逻辑
需要修改第241行的用户名显示逻辑：
```typescript
// 当前代码
<Text className="text-[32rpx] font-bold text-white">{userProfile.username}</Text>

// 修改后逻辑
<Text className="text-[32rpx] font-bold text-white">{"普通用户"}</Text>
```

#### 兼容性考虑
- 保持现有的头像上传功能完整
- 确保用户数据获取失败时的降级处理
- 维持现有的错误处理机制

### 错误处理
- **头像加载失败**: 使用默认头像作为备选
- **用户数据为空**: 显示默认用户名
- **网络错误**: 保持现有错误提示机制

### 用户体验
- **加载状态**: 使用现有加载指示器
- **操作反馈**: 使用现有Toast提示系统
- **一致性**: 确保默认显示与现有设计风格一致

### 项目结构对齐
- **文件命名**: 保持现有kebab-case命名约定 [Source: architecture/source-tree.md#集成指南]
- **导入导出**: 使用ES模块和现有别名系统 [Source: architecture/source-tree.md#集成指南]
- **组件位置**: 符合现有的页面组织模式 [Source: architecture/source-tree.md#实际项目结构]

## Testing

### 测试标准
- **测试文件位置**: `mini/tests/pages/profile.test.tsx` [Source: architecture/testing-strategy.md#taro小程序测试体系]
- **测试框架**: Jest + @testing-library/react + React Query + Taro API mock [Source: architecture/testing-strategy.md#taro小程序测试体系]
- **覆盖率要求**: 页面级测试 ≥ 60% [Source: architecture/testing-strategy.md#taro小程序测试体系]

### 关键测试场景
- 用户无头像时显示默认头像
- 用户名统一显示为"普通用户"
- 头像上传功能在默认头像状态下正常工作
- 现有功能无回归
- 错误场景处理

### 测试数据管理
- **模拟用户数据**: 创建不同头像状态的测试用户
- **API模拟**: 模拟用户数据获取成功和失败场景
- **边界测试**: 测试用户数据为空或错误的情况

### 测试模式
基于最新的测试文件模式 [Source: architecture/testing-strategy.md#最新测试模式和最佳实践]：
```typescript
// 测试环境设置
const createTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: { retry: false },
  },
})

// 组件包装器
const Wrapper = ({ children }: { children: React.ReactNode }) => (
  <QueryClientProvider client={createTestQueryClient()}>
    {children}
  </QueryClientProvider>
)
```

## Risk and Compatibility Check

### 风险评估
- **主要风险**: 默认头像和用户名显示可能影响现有用户数据
- **缓解措施**: 仅在用户无头像时显示默认头像，用户名显示为临时方案
- **回滚方案**: 恢复原有的头像和用户名显示逻辑

### 兼容性验证
- [ ] 对现有API无破坏性变更
- [ ] 无数据库变更
- [ ] UI变更遵循现有设计模式
- [ ] 性能影响可忽略
- [ ] 现有功能无回归

## Change Log
| Date | Version | Description | Author |
|------|---------|-------------|---------|
| 2025-10-31 | 1.0 | 初始故事创建 | Bob (Scrum Master) |

## Dev Agent Record

### Agent Model Used
- Claude Sonnet 4.5

### Completion Notes List
- [x] 故事需求分析和范围定义
- [x] 技术方案设计
- [x] 风险评估和兼容性检查
- [x] 修改个人中心页面头像显示逻辑
- [x] 修改个人中心页面用户名显示逻辑
- [x] 验证现有头像上传功能
- [x] 更新相关测试文件
- [x] 验证现有功能无回归

### File List
- [docs/stories/007.002.story.md](docs/stories/007.002.story.md) - 用户故事文档
- [mini/src/pages/profile/index.tsx](mini/src/pages/profile/index.tsx) - 个人中心页面（已修改）
- [mini/tests/pages/profile.test.tsx](mini/tests/pages/profile.test.tsx) - 个人中心页面测试文件（已更新）
- [mini/images/default_avatar.jpg](mini/images/default_avatar.jpg) - 默认头像文件

### Debug Log References
- 待开发代理填充

### Status
Draft

## QA Results
*此部分将由QA代理在质量保证过程中填写*