feat(mine): 我的 Tab UI 重设计(#39~#41)

- ProfileHeroCard:72pt 渐变头像(8色 uid%8 主题)、@J{uid} handle、bio 简介、掩码手机号
- AppBar:compact,右侧 QR 图标 + 编辑铅笔
- 彩色图标行(_IconBox 36pt 圆角)+ 4 卡片组对齐 iOS SettingsView
  - 账户:我的钱包 / 账户安全
  - 工具:收藏 / 最近呼叫 / 链接设备 / 聊天文件夹
  - 偏好设置:通知和声音 / 隐私设置 / 黑名单 / 语言 / 主题
  - 关于:用户协议 / 隐私政策 / 版本号
- SettingsState 增加 bio 字段(#41),loadProfile 同步赋值
- Doc/mine_tab_architecture.md 补充 UI 重设计章节(§7)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
pp-bot
2026-03-24 20:14:34 +09:00
parent 2eb2299709
commit db10d1fcd2
3 changed files with 327 additions and 85 deletions

View File

@@ -1,6 +1,6 @@
# 我的MineTab — 架构文档
> 对应 Gitea issues #5#13
> 对应 Gitea issues #5#13#39#41UI 重设计)
> 参考实现:`im-client-ios-swift-demo` Features/Settings + Features/Profile
---
@@ -152,7 +152,57 @@ settingsViewModelProvider
---
## 7. 待完成事项
## 7. UI 重设计(#39 / #40 / #41
### 7.1 ProfileHeroCard (#39 / #41)
| 元素 | 规格 |
|------|------|
| 头像 | 72pt 圆形;无头像时 8 色渐变占位uid%8 |
| 昵称 | fontWeight w700titleMedium |
| Handle | `@J{uid}`bodySmall onSurfaceVariant |
| 手机号 | 掩码 `+CC ***XXXX`bodySmall |
| Bio | 非空显示,为空显示「添加一句话简介」(斜体,半透明) |
| AppBar | compact右侧QR 图标 + 编辑铅笔 |
渐变色方案(`_ProfileHeroCard._gradients[uid.abs() % 8]`
```
0: [#4776E6, #8E54E9] 1: [#11998E, #38EF7D]
2: [#FC466B, #3F5EFB] 3: [#F7971E, #FFD200]
4: [#56CCF2, #2F80ED] 5: [#EB3349, #F45C43]
6: [#1FA2FF, #12D8FA] 7: [#9D50BB, #6E48AA]
```
### 7.2 彩色图标行与分组卡片 (#40)
`_IconBox`36pt 圆角正方形8pt白色图标iOS Settings 风格。
| 卡片组 | 菜单项 | 颜色 |
|--------|--------|------|
| 账户 | 我的钱包 | #FFAA5B |
| | 账户安全 | #8A5CF6 |
| 工具 | 收藏 | #FFAF45 |
| | 最近呼叫 | #4CB050 |
| | 链接设备 | #5667FF |
| | 聊天文件夹 | #F2994A |
| 偏好设置 | 通知和声音 | #FF8B5E |
| | 隐私设置 | #0BB8A9 |
| | 黑名单 | #FF4B4B |
| | 语言 | #5667FF |
| | 主题 | #8A5CF6 |
| 关于 | 用户协议 | gray |
| | 隐私政策 | gray |
| | 版本号(静态)| gray无 chevron |
### 7.3 SettingsState bio 字段 (#41)
- `SettingsState.bio: String`(默认 `''`
- `SettingsViewModel.loadProfile()` 赋值 `bio: profile.bio`
- 数据来源:`ProfileResponse.bio``GET /app/api/user/profile`
---
## 8. 待完成事项
- **#6 头像上传**:接入 CDN upload参考 iOS CDN 流程)
- **#8 主题持久化**:解开 `ThemeModeNotifier.build()``setMode()` 中的 TODO