diff --git a/Doc/mine_tab_architecture.md b/Doc/mine_tab_architecture.md index e1e8d8d..d86a98b 100644 --- a/Doc/mine_tab_architecture.md +++ b/Doc/mine_tab_architecture.md @@ -1,6 +1,6 @@ # 我的(Mine)Tab — 架构文档 -> 对应 Gitea issues #5–#13,#39–#41(UI 重设计) +> 对应 Gitea issues #5–#13,#39–#41(UI 重设计),#49–#50(编辑资料完整实现) > 参考实现:`im-client-ios-swift-demo` Features/Settings + Features/Profile --- @@ -10,7 +10,7 @@ | Issue | 功能 | 状态 | |-------|------|------| | #5 | Tab 重命名 & 个人资料卡片 | ✅ 已实现 | -| #6 | 编辑个人资料(昵称/bio/头像) | ✅ 框架已建(CDN 上传待 #6 后续) | +| #6 | 编辑个人资料(昵称/bio/头像) | ✅ 全量实现(#49/#50 补全头像上传) | | #7 | 退出登录 | ✅ 已实现 | | #8 | 主题持久化 | ⏳ TODO(解开 ThemeModeNotifier 注释) | | #9 | 语言设置 | ✅ UI 框架(l10n_sdk 待接入) | @@ -84,15 +84,31 @@ SettingsPage._confirmLogout() └─ AuthNotifier.logout() → go_router 重定向 /login ``` -### 3.3 编辑资料保存 +### 3.3 编辑资料 — 头像上传(#49) ``` -EditProfilePage → 保存按钮 +EditProfilePage._showAvatarSourceSheet() + └─ BottomSheet → 相册 / 拍照 + └─ EditProfileViewModel.pickAndUploadAvatar(ImageSource) + ├─ ImagePicker.pickImage(source, maxWidth:900, maxHeight:900, quality:85) + ├─ ImageCropper.cropImage(1:1, IOSUiSettings / AndroidUiSettings) + ├─ state.isUploadingAvatar = true + ├─ NetworksSdkApi.executeRequest(UploadFileRequest(filePath)) + │ └─ POST /app/api/upload/file (FormData multipart) + │ └─ UploadResult.url + └─ state.avatarUrl = url (UI 实时预览更新) +``` + +### 3.4 编辑资料保存(#50) + +``` +EditProfilePage → 保存按钮(nickname.isNotEmpty && !isUploadingAvatar) └─ EditProfileViewModel.save() └─ UpdateProfileUseCase.execute(nickname, bio, profilePicUrl) └─ NetworksSdkApi.executeRequest(UpdateProfileRequest) └─ POST /app/api/user/update-profile └─ SettingsViewModel.loadProfile() (刷新资料卡) + └─ Navigator.pop() ``` --- @@ -202,13 +218,22 @@ settingsViewModelProvider --- -## 8. 待完成事项 +## 8. 编辑资料 UI 设计(#49 / #50) + +| 元素 | 规格 | +|------|------| +| 头像 | 88pt 圆形;无头像时 8 色渐变占位;右下 28pt 相机角标(primary色) | +| 上传进度 | CircularProgressIndicator 环绕头像,isUploadingAvatar=true 时显示 | +| 选图 Sheet | BottomSheet(从相册选取 / 拍照),16pt 圆角,拖动条 | +| 昵称字段 | Card 分组,`x/50` 右侧计数,maxLength:50 | +| 简介字段 | Card 分组,`x/200` 右侧计数,maxLines:null(自动展开),maxLength:200 | +| 保存按钮 | AppBar 右侧 TextButton;昵称为空或上传中时 disabled | +| 错误 Banner | errorContainer 色圆角卡片,⚠️ 图标 + 文本 | + +--- + +## 9. 待完成事项 -- **#6 头像上传**:接入 CDN upload(参考 iOS CDN 流程) - **#8 主题持久化**:解开 `ThemeModeNotifier.build()` 和 `setMode()` 中的 TODO - **#10 黑名单 API**:实现 `FetchBlocklistUseCase` + `UnblockUseCase` - **#11 聊天文件夹**:`ChatCategoryViewModel` + `account/store` API -- **build_runner**:`UpdateProfileRequest` 使用 `@ApiRequest`,需执行: - ```bash - cd apps/im_app && dart run build_runner build --delete-conflicting-outputs - ```