# “我的”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. 超过大小或格式限制时直接拦截
6. 头像裁切工具必须复用平台通用正方形图片裁剪弹窗，并与拼图图片上传裁剪保持同一套拖拽裁剪框、八向边界手柄、九宫格辅助线、遮罩和移动端触控行为；不得在头像侧保留独立的缩放/横向/纵向滑杆实现

支持格式：

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