|
|
@@ -0,0 +1,181 @@
|
|
|
+# Story 007.002: 个人资料显示优化
|
|
|
+
|
|
|
+## Status
|
|
|
+Draft
|
|
|
+
|
|
|
+## 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行的头像显示逻辑:
|
|
|
+```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
|
|
|
+- [ ] 故事需求分析和范围定义
|
|
|
+- [ ] 技术方案设计
|
|
|
+- [ ] 风险评估和兼容性检查
|
|
|
+- [ ] 修改个人中心页面头像显示逻辑
|
|
|
+- [ ] 修改个人中心页面用户名显示逻辑
|
|
|
+- [ ] 验证现有头像上传功能
|
|
|
+- [ ] 更新相关测试文件
|
|
|
+- [ ] 验证现有功能无回归
|
|
|
+
|
|
|
+### 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) - 个人中心页面测试文件
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+- 待开发代理填充
|
|
|
+
|
|
|
+### Status
|
|
|
+Draft
|
|
|
+
|
|
|
+## QA Results
|
|
|
+*此部分将由QA代理在质量保证过程中填写*
|