56 lines
3.9 KiB
Markdown
56 lines
3.9 KiB
Markdown
# A02 账号登录设计记录
|
||
|
||
> 状态：实现与运行时截图已完成，等待用户视觉验收。
|
||
> 路由：`pages/auth/a02-login?agreed=1`
|
||
> 视觉来源：已验收的 A01 启动／登录引导与 G01 我的家谱。
|
||
|
||
## 1. 页面任务
|
||
|
||
让已确认协议的用户在“账号密码登录”与“手机验证码登录”之间切换并进入家谱。页面只保留本地字段校验、A05 忘记密码跳转与待接入 toast；不新增真实账号、短信、微信或后端逻辑。
|
||
|
||
## 2. 视觉结构
|
||
|
||
1. 使用与 A01 同高度的朱砂祠堂头和居中谱印，保证认证入口属于同一品牌场景。
|
||
2. 头部下方放置一张完整不透明的卷轴认证面板，而不是普通 CSS 矩形卡；标题、双 Tab、输入、辅助链接和按钮文字都是可编辑的 Vue 内容层。
|
||
3. 面板上部承载任务标题和双 Tab，中部承载两行输入与辅助操作，下部留给原比例朱砂按钮、协议提示与淡墨山水收束。
|
||
4. 主按钮继续复用 A01 的 `a01-primary-button.png`，显示槽高度为 128rpx；不把约 4.49:1 的皮肤压进旧的 100rpx 矮按钮。
|
||
5. 背景山水只出现在认证面板之外和面板底部，保证输入、标签与占位文本的对比度。
|
||
|
||
## 3. 资产合同
|
||
|
||
| 路径 | 属性／原图尺寸 | 页面显示与职责 |
|
||
| --- | --- | --- |
|
||
| `static/assets/foundation/opaque/auth-header.png` | opaque / 750×196 | 认证祠堂头，A01 与 A02 共用。 |
|
||
| `static/assets/foundation/transparent/brand-seal.png` | transparent / 240×288 | 头部谱印。 |
|
||
| `static/assets/modules/auth/opaque/a02-login-panel.png` | opaque / 940×1672 | 完整卷轴登录面板，承载纸纹、双金线、角纹、云纹与底部山水；A02 容器 666rpx × 1184rpx。 |
|
||
| `static/assets/foundation/opaque/a01-primary-button.png` | opaque / 1877×418 | A02 唯一主操作按钮皮肤，显示槽 128rpx 高。 |
|
||
| `static/assets/foundation/transparent/chevron-right.png` | transparent / 96×96 | 返回图标，水平翻转后使用，不再用文字符号或 CSS 圆框。 |
|
||
|
||
认证面板由内置 ImageGen 根据 A01、G01 的已验收截图生成；提示词约束为“完整不透明暖宣纸、双古金线、角纹、边缘淡云竹、中央留给真实控件、无文字无按钮无图标”。生成源保留在 Codex 生成目录，项目运行时只引用上表中的最终资产。
|
||
|
||
## 4. 交互与可读性
|
||
|
||
- 两个 Tab 仍由 `activeTab` 切换；已验证手机验证码 Tab 的真实页面状态。
|
||
- 账号、密码、手机号、验证码继续使用原生 `input`，不烘焙到图片。
|
||
- A02 不绘制面板或主按钮的 CSS `border`／`background`；对应完整外观由图片资产承担。
|
||
- 320 × 568 下可纵向滚动，主按钮位于首屏可达区域；360 × 640、360 × 800、412 × 915 均无横向裁切。
|
||
|
||
## 5. 运行时证据
|
||
|
||
| 状态 | 截图 |
|
||
| --- | --- |
|
||
| 改造前，账号密码 Tab，360×800 | `screens/runtime/2026-07-13/A02-before-360x800.png` |
|
||
| 改造后，账号密码 Tab，320×568 | `screens/runtime/2026-07-13/A02-after-320x568.png` |
|
||
| 改造后，账号密码 Tab，360×640 | `screens/runtime/2026-07-13/A02-after-360x640.png` |
|
||
| 改造后，账号密码 Tab，360×800 | `screens/runtime/2026-07-13/A02-after-360x800.png` |
|
||
| 改造后，账号密码 Tab，412×915 | `screens/runtime/2026-07-13/A02-after-412x915.png` |
|
||
| 改造后，手机验证码 Tab，360×800 | `screens/runtime/2026-07-13/A02-sms-360x800.png` |
|
||
|
||
## 6. 自动检查
|
||
|
||
- `tests/a02-asset-alpha-audit.ps1`：A02 卷轴面板存在、尺寸稳定、比例稳定、四角不透明。
|
||
- `tests/a01-a02-ui-contract.ps1`：A02 使用完整卷轴面板与完整主按钮；保留 Tab、原生输入、A05 跳转；拒绝 CSS 面板和 CSS 主按钮外观。
|
||
- `tests/compile-audit.ps1`：Vue 结构可编译。
|
||
|
||
用户未确认前，A02 不得在规划中标记为视觉验收完成，也不得作为其他认证页的最终样板直接复制。
|