# 编辑资料 · 设计说明（profile-edit.vue）

> 单元：`profile-edit` ｜ group=account ｜ P 依据：P13 用户卡「编辑资料」+ 需求卡通用行「头像昵称」
> 实现：`vue/src/pages/profile-edit.vue` ｜ 组状态帧 fixtures：`design/fixtures/account.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 头像 | AvatarUser(me 64)+「更换头像」；点击→授权链路示意：拒绝→首字符默认头像+「点击设置头像」补偿（dims E/F） | 字段 3 | ✓ |
| ② 昵称 | FormField 必填+计数 n/12+失焦非空校验「请输入昵称」；初值=users.me.nickname | — | ✓ |
| ③ 简介 | FormField 可选 textarea+计数 n/60+占位提示 | — | ✓ |
| ④ 保存 | AppButton block lg：saving=loading 锁帧；saved=toast「已保存」实帧；error=失败红字保留内容+「重试保存」 | — | ✓ |

## 2. 状态帧

| 帧 | 渲染 |
|---|---|
| normal | 头像+两字段+保存 |
| saving | 按钮 loading 锁（禁连点） |
| saved | toast 实帧「已保存」（随帧停留供验收）+内容保留 |
| error | 「保存失败，网络异常。已保留当前编辑内容，请重试」红字+重试按钮 |
| guest | EmptyState「登录后编辑个人资料」→login（必登录） |
| empty/extreme | N/A（na_reason：表单页无列表空态；12 字顶格并入 normal 校验计数） |

## 3. 九维 A–I

- **A**：提交状态机 normal→saving→saved/error。
- **B**：保存防连点（loading 锁）；头像更换授权链路 toast 语义。
- **C**：昵称 12 字计数+必填校验；简介 60 字计数；校验时机=失焦。
- **D**：计数器显隐（有值/聚焦语义）；空值占位提示不留白。
- **E**：头像更换=授权弹层语义（原型以 toast 呈现链路）；保存成功→mine（saved 语义）。
- **F**：授权拒绝补偿路径（默认首字符头像+「点击设置」，dims F）。
- **G**：头像压缩上传语义（原型不实际上传）。
- **H**：错误红字 price-deep 6.32:1；「已保存」成功态绿色+文字双通道。
- **I**：`POST /user/profile`（占位）。

## 4. 决策点

| 决策触点 | 对应 |
|---|---|
| 展示个性化身份 | 头像+昵称+简介三件套；授权拒绝补偿可恢复 |

## 5. 占位与缺口

- **mock.js 无 users.intro 字段=数据缺口**：简介初值留空+占位提示（登记 fixtures placeholderEntries）；提请底座在 mock 扩展 `me.intro` 后改引数据源。
- 头像授权拒绝为链路示意（原型 toast+首字符头像切换，不接平台授权 API）。