3.9 KiB
3.9 KiB
A02 账号登录设计记录
状态：实现与运行时截图已完成，等待用户视觉验收。
路由：pages/auth/a02-login?agreed=1
视觉来源：已验收的 A01 启动／登录引导与 G01 我的家谱。
1. 页面任务
让已确认协议的用户在“账号密码登录”与“手机验证码登录”之间切换并进入家谱。页面只保留本地字段校验、A05 忘记密码跳转与待接入 toast；不新增真实账号、短信、微信或后端逻辑。
2. 视觉结构
- 使用与 A01 同高度的朱砂祠堂头和居中谱印，保证认证入口属于同一品牌场景。
- 头部下方放置一张完整不透明的卷轴认证面板，而不是普通 CSS 矩形卡；标题、双 Tab、输入、辅助链接和按钮文字都是可编辑的 Vue 内容层。
- 面板上部承载任务标题和双 Tab，中部承载两行输入与辅助操作，下部留给原比例朱砂按钮、协议提示与淡墨山水收束。
- 主按钮继续复用 A01 的
a01-primary-button.png，显示槽高度为 128rpx；不把约 4.49:1 的皮肤压进旧的 100rpx 矮按钮。 - 背景山水只出现在认证面板之外和面板底部，保证输入、标签与占位文本的对比度。
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 不得在规划中标记为视觉验收完成，也不得作为其他认证页的最终样板直接复制。