Genarrative/docs/prd/MY_TAB_PROFILE_IDENTITY_CARD_PRD_2026-04-16.md

“我的”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. 页面不出现冗长规则说明文案