# 新增/编辑收货地址 · 设计说明（address-edit.vue）

> 单元：`address-edit` ｜ group=account ｜ P 依据：addresses「新增/编辑」落地图
> 实现：`vue/src/pages/address-edit.vue` ｜ 组状态帧 fixtures：`design/fixtures/account.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 收货人 | FormField 必填（validation 帧「请输入收货人」） | 字段 5+ | ✓ |
| ② 手机号 | number 键盘（inputmode=numeric，maxlength 11）+失焦「手机号格式不正确」 | — | ✓ |
| ③ 省市区级联 | 行按钮→Sheet 三列抽屉（省/市/区县示意选项取自 mock 地址地域；E 维「级联全屏抽屉」） | — | ✓ |
| ④ 详细地址 | textarea 20-60 字+计数 n/60（validation 帧「请输入 20-60 字详细地址」） | — | ✓ |
| ⑤ 设为默认 | 自绘开关（46×28 滑块+aria-checked；双通道=滑块位置+底色） | — | ✓ |
| ⑥ 保存/删除 | 保存=AppButton（saving loading 锁/error 重试）；编辑态出现「删除该地址」danger 行 | — | ✓ |

## 2. 状态帧

| 帧 | 渲染 |
|---|---|
| normal | 编辑态（预填 addresses[0]：姓名/省市区/详情/默认开关；手机号留空，缺口见 §5） |
| saving | 按钮 loading 锁 |
| error | 「保存失败，网络异常。已保留当前内容，请重试」红字+重试 |
| validation | 三字段红字实帧（请输入收货人/手机号格式不正确/请输入 20-60 字详细地址） |
| guest | EmptyState→login（必登录） |
| empty/extreme | N/A（na_reason：表单页；60 字顶格并入 validation 计数） |

## 3. 九维 A–I

- **A**：提交状态机+编辑态删除入口。
- **B**：保存防连点；删除=danger 行（正式接删除确认，同 addresses）。
- **C**：手机号 number 键盘+失焦校验；详细地址 20-60 字+计数；必填星标（FormField）。
- **D**：计数器显隐；省市区选中值回填行按钮。
- **E**：省市区级联=Sheet 抽屉（三列 demo）。
- **F**：按 §0.5。
- **G**：N/A（轻表单，pages.json na_reason）。
- **H**：校验红字 price-deep 6.32:1+「!」图标双通道（FormField 内建）。
- **I**：`POST /address`；`PUT /address/{id}`（占位）。

## 4. 决策点

| 决策触点 | 对应 |
|---|---|
| 完整准确收货信息（担保交易发货依据） | 五字段+级联+默认开关；逐字段红字反馈 |

## 5. 占位与缺口

- **mock 仅存脱敏手机号**（138\*\*\*\*5678）：编辑态手机号留空（不虚构全号）；正式由接口回显后编辑——登记 fixtures placeholderEntries。
- 省市区选项为三列示意（正式接地区级联数据）；normal 帧即编辑态，新增态=空表单（由 addresses 空态/新增按钮进入，复用本页）。