Преглед изворни кода

📝 docs(stories): update Taro version and add profile optimization story

- update Taro version from 3.x to 4.x in 007.001.story.md
- add new story 007.002 for personal profile display optimization
- define requirements for default avatar and username display
- outline implementation tasks and technical details
- specify testing criteria and risk assessment
yourname пре 3 месеци
родитељ
комит
16fc948164
2 измењених фајлова са 182 додато и 1 уклоњено
  1. 1 1
      docs/stories/007.001.story.md
  2. 181 0
      docs/stories/007.002.story.md

+ 1 - 1
docs/stories/007.001.story.md

@@ -31,7 +31,7 @@ Draft
 ## Dev Notes
 
 ### 技术栈要求
-- **前端框架**: Taro 3.x + React
+- **前端框架**: Taro 4.x + React
 - **小程序平台**: 微信小程序
 - **API调用**: 微信小程序官方API
 - **状态管理**: React Query (TanStack Query)

+ 181 - 0
docs/stories/007.002.story.md

@@ -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代理在质量保证过程中填写*