mini-starter/docs/stories/007.002.story.md

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

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

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行的头像显示逻辑：

// 当前代码
currentAvatar={userProfile.avatarFile?.fullUrl}

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

用户名显示逻辑

需要修改第241行的用户名显示逻辑：

// 当前代码
<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#最新测试模式和最佳实践]：

// 测试环境设置
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

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

File List

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

Debug Log References

• 待开发代理填充

Status

Draft

QA Results

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