212
docs/prd/MY_TAB_PROFILE_IDENTITY_CARD_PRD_2026-04-16.md
Normal file
212
docs/prd/MY_TAB_PROFILE_IDENTITY_CARD_PRD_2026-04-16.md
Normal file
@@ -0,0 +1,212 @@
|
||||
# “我的”Tab 账号资料与身份卡 PRD
|
||||
|
||||
更新时间：`2026-04-16`
|
||||
|
||||
## 0. 目标
|
||||
|
||||
把“我的”页顶部资料卡从一个静态展示块升级成正式的用户身份入口，承载：
|
||||
|
||||
1. 头像编辑
|
||||
2. 昵称编辑
|
||||
3. 叙世号展示与复制
|
||||
4. 登录方式与绑定状态展示
|
||||
5. 进入资料编辑抽屉
|
||||
|
||||
这个模块的作用不是做安全设置总入口，而是把“我是谁”展示清楚，并提供最轻量的资料编辑。
|
||||
|
||||
---
|
||||
|
||||
## 1. 当前现状与问题
|
||||
|
||||
当前页面已经展示：
|
||||
|
||||
- 头像占位
|
||||
- 昵称
|
||||
- 叙世号
|
||||
- 登录方式
|
||||
- 绑定状态
|
||||
|
||||
但存在几个问题：
|
||||
|
||||
1. 头像按钮和昵称编辑按钮都直接打开账号弹窗，信息架构混在一起
|
||||
2. 头像当前只是视觉壳，没有真正的上传与裁剪能力
|
||||
3. 昵称缺少明确的编辑规则与唯一性策略
|
||||
4. 叙世号只是前端拼接值，不适合长期作为正式公开识别码
|
||||
|
||||
---
|
||||
|
||||
## 2. 产品范围
|
||||
|
||||
## 2.1 本期要做
|
||||
|
||||
1. 用户身份卡展示
|
||||
2. 资料编辑抽屉
|
||||
3. 头像上传、裁切、保存
|
||||
4. 昵称编辑、校验、保存
|
||||
5. 叙世号固定生成与复制
|
||||
6. 登录方式与账号状态标签展示
|
||||
|
||||
## 2.2 本期不做
|
||||
|
||||
1. 个性签名
|
||||
2. 主页装扮
|
||||
3. 自定义头像框
|
||||
4. 社交主页公开页
|
||||
|
||||
---
|
||||
|
||||
## 3. 信息架构
|
||||
|
||||
## 3.1 首屏卡片内容
|
||||
|
||||
资料卡固定展示：
|
||||
|
||||
- 用户头像
|
||||
- 用户昵称
|
||||
- `叙世号`
|
||||
- 登录方式标签
|
||||
- 账号状态标签
|
||||
- 资料编辑入口
|
||||
|
||||
资料卡不展示：
|
||||
|
||||
- 大段规则说明
|
||||
- 安全告警明细
|
||||
- 设备管理
|
||||
- 审计日志
|
||||
|
||||
这些内容统一放到“设置与账号安全”。
|
||||
|
||||
## 3.2 交互结构
|
||||
|
||||
点击区域行为如下：
|
||||
|
||||
1. 点击头像
|
||||
- 打开“编辑资料”抽屉，并默认聚焦头像编辑区域
|
||||
2. 点击昵称右侧编辑按钮
|
||||
- 打开“编辑资料”抽屉，并默认聚焦昵称输入框
|
||||
3. 点击叙世号复制按钮
|
||||
- 直接复制，并给出轻提示
|
||||
4. 点击登录方式/状态标签
|
||||
- 不跳页，不弹复杂说明
|
||||
|
||||
---
|
||||
|
||||
## 4. 详细设计
|
||||
|
||||
## 4.1 头像
|
||||
|
||||
头像规则：
|
||||
|
||||
1. 默认使用系统首字头像
|
||||
2. 用户上传后替换为正式头像
|
||||
3. 上传后进入正方形裁切
|
||||
4. 服务端生成 `256x256` 主图和 `96x96` 缩略图
|
||||
5. 超过大小或格式限制时直接拦截
|
||||
|
||||
支持格式：
|
||||
|
||||
- `jpg`
|
||||
- `png`
|
||||
- `webp`
|
||||
|
||||
限制：
|
||||
|
||||
- 单文件最大 `5MB`
|
||||
- 裁切结果统一为正方形
|
||||
|
||||
## 4.2 昵称
|
||||
|
||||
昵称规则：
|
||||
|
||||
1. 长度 `2-20` 个字符
|
||||
2. 允许中文、英文、数字、下划线
|
||||
3. 不允许空白昵称
|
||||
4. 不要求全站唯一，但要允许后端做敏感词审核
|
||||
5. 审核失败时返回明确错误
|
||||
|
||||
## 4.3 叙世号
|
||||
|
||||
叙世号规则：
|
||||
|
||||
1. 作为公开可复制识别码
|
||||
2. 用户创建后固定生成，不允许用户修改
|
||||
3. 格式统一，例如：`SY-8F29A13C`
|
||||
4. 后端生成并返回，不再由前端临时拼接
|
||||
|
||||
## 4.4 账号状态标签
|
||||
|
||||
状态只显示短标签：
|
||||
|
||||
- `手机号登录`
|
||||
- `微信登录`
|
||||
- `待绑定手机号`
|
||||
- `已激活`
|
||||
|
||||
不在资料卡里展开规则说明。
|
||||
|
||||
---
|
||||
|
||||
## 5. 后端设计
|
||||
|
||||
## 5.1 数据模型
|
||||
|
||||
建议扩展 `users` 或新增 `user_profiles`：
|
||||
|
||||
- `user_id`
|
||||
- `public_user_code`
|
||||
- `display_name`
|
||||
- `avatar_asset_id`
|
||||
- `avatar_url`
|
||||
- `avatar_thumb_url`
|
||||
- `updated_at`
|
||||
|
||||
## 5.2 接口
|
||||
|
||||
### `GET /api/profile/me`
|
||||
|
||||
返回：
|
||||
|
||||
- `displayName`
|
||||
- `avatarUrl`
|
||||
- `avatarThumbUrl`
|
||||
- `publicUserCode`
|
||||
- `loginMethod`
|
||||
- `bindingStatus`
|
||||
|
||||
### `PATCH /api/profile/me`
|
||||
|
||||
入参：
|
||||
|
||||
- `displayName`
|
||||
- `avatarAssetId`
|
||||
|
||||
出参：
|
||||
|
||||
- 更新后的资料对象
|
||||
|
||||
### `POST /api/profile/avatar/upload-token`
|
||||
|
||||
用途：
|
||||
|
||||
- 获取头像上传凭证或上传地址
|
||||
|
||||
---
|
||||
|
||||
## 6. 前端实现要求
|
||||
|
||||
1. 资料编辑优先做成底部抽屉或轻量弹窗，不新开独立页面
|
||||
2. 移动端头像、昵称、复制按钮必须单手可操作
|
||||
3. 保存按钮固定在抽屉底部
|
||||
4. 保存中展示明确 loading 态
|
||||
5. 成功后即时回写顶部资料卡
|
||||
|
||||
---
|
||||
|
||||
## 7. 验收标准
|
||||
|
||||
1. 用户可以上传并保存头像
|
||||
2. 用户可以修改昵称并实时看到更新
|
||||
3. 叙世号由后端返回，复制后可正常使用
|
||||
4. 未登录或待绑定状态下，不出现无效编辑入口
|
||||
5. 页面不出现冗长规则说明文案
|
||||
Reference in New Issue
Block a user