# P14 一键/验证码登录 · 设计说明（login.vue）

> 单元：`login` ｜ group=account ｜ P14 ｜ 依据：pages.json unit#24 + 规格表 P14 + 执行方案 §5.24
> 实现：`vue/src/pages/login.vue` ｜ 组状态帧 fixtures：`design/fixtures/account.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 品牌头图：logo 字标+slogan【占位】 | `.hero`：樱粉渐变 gavel 徽标 + brand.name/slogan（语义文字，无角色图——banner-character 槽位白名单=home-banner-art，不含本页） | — | ✓ |
| ② 主按钮「一键登录」 | `.acts` AppButton lg；协议勾选前置：未勾→toast「请先阅读并勾选《用户协议》」+ agree 区 shake 高亮（agree-missing 帧） | 按钮 2 | ✓ |
| ③ 次按钮「验证码登录」 | 切 sms 表单：手机号（number，回车跳验证码框）+验证码（4-6位，回车=登录）+获取验证码（60s 重发） | — | ✓ |
| ④ 协议链接半屏 | Sheet《用户协议》《隐私政策》（示意占位条款文本，正式以法务版本为准） | 区块 4 | ✓ |

## 2. 状态帧

| 帧 | 渲染 |
|---|---|
| normal | 一键登录态（品牌头图+主按钮+协议行） |
| sms | 验证码表单帧（手机号+验证码+获取按钮+登录） |
| countdown | 获取按钮禁用「47s后重发」（演示样值；交互重发走 ref 计时） |
| error | 「验证码错误，还剩 2 次」红字实帧（FormField error） |
| agree-missing | 未勾协议拦截：toast 实帧+checkbox 红圈+shake，停留本页无惩罚 |
| guest/empty/extreme | N/A（na_reason 见 pages.json：本页即登录页/无列表/手机号位数校验归 error 帧） |

## 3. 九维 A–I

- **A**：授权拒绝/取消→停留本页无惩罚，验证码兜底（hint 文案+notify 语义）。
- **B**：按钮防连点（AppButton loading/disabled）；重发按钮 60s 禁用。
- **C**：手机号 number 键盘（inputmode=numeric，maxlength 11），回车=跳验证码框；验证码 4-6 位，回车=登录；60s 倒计时重发。
- **D**：N/A（无数据位；按钮/提示文案遵循字阶）。
- **E**：协议=半屏 Sheet；登录成功回跳发起页（notify 语义，原型回跳由外壳承担）。
- **F**：双端链路 §0.5——小程序=手机号快捷填充、公众号=网页授权后绑定手机号，界面统一「一键登录」（hint 行明示）；授权拒绝补偿=验证码兜底。
- **G**：N/A（轻页面，pages.json na_reason）。
- **H**：主按钮 48pt 高；协议小字 11px 为标注档且可点链接用深蓝 6.28:1。
- **I**：`POST /auth/phone`；`POST /auth/sms`（占位，不接真实通道）。

## 4. 决策点

| 决策触点 | 对应 |
|---|---|
| 最低成本登录（一键优先，验证码兜底） | 主/次按钮层级+hint「授权拒绝可改用验证码登录」 |
| 协议前置合规 | 勾选框拦截→定位条款名 toast+半屏协议 |

## 5. 占位

- 品牌 logo/slogan【占位】（brand mock）；协议条款文本示意占位；「47s/还剩2次」为演示样值（登记 fixtures）。
- 界面零平台品牌词：一键登录/手机号快捷填充口径。