rain
74 lines
6.9 KiB
Markdown
74 lines
6.9 KiB
Markdown
# A02 账号登录设计记录
|
||
|
||
> 状态：已于 2026-07-14 获用户视觉验收，A02 可见效果冻结。
|
||
> 路由：`pages/auth/a02-login`；A01 已确认协议进入时附带 `?agreed=1`。
|
||
> 视觉来源：已验收的 A01 启动／登录引导与 G01 我的家谱。
|
||
|
||
## 1. 页面任务
|
||
|
||
让用户在“账号密码登录”与“手机验证码登录”之间切换并进入家谱。A02 自己提供协议确认：直接进入默认未同意，A01 已确认协议进入时默认已同意；没有账号的新用户可从协议行下方进入既有 A04 注册路由。页面只保留本地字段校验、A04 注册跳转、A05 忘记密码跳转与待接入 toast；不新增真实账号、短信、微信或后端逻辑。
|
||
|
||
手机号验证码登录只由 A02 的“手机验证码登录”Tab 承接；重复的 A03 页面已于 2026-07-14 删除。绑定手机号以后属于个人中心安全设置，微信授权取消、失败与受限状态以后属于 A06。
|
||
|
||
## 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 圆框。 |
|
||
| `static/assets/modules/auth/transparent/a02-agreement-unchecked.png` | transparent / 96×96 | A02 本页未同意协议图标；四角透明，不以 CSS 圆环代替。 |
|
||
| `static/assets/modules/auth/transparent/a02-agreement-checked.png` | transparent / 96×96 | A02 本页已同意协议图标；四角透明，不以文字勾号或 CSS 底色代替。 |
|
||
|
||
认证面板由内置 ImageGen 根据 A01、G01 的已验收截图生成；提示词约束为“完整不透明暖宣纸、双古金线、角纹、边缘淡云竹、中央留给真实控件、无文字无按钮无图标”。生成源保留在 Codex 生成目录，项目运行时只引用上表中的最终资产。
|
||
|
||
## 4. 交互与可读性
|
||
|
||
- 两个 Tab 仍由 `activeTab` 切换；已验证手机验证码 Tab 的真实页面状态。
|
||
- 账号、密码、手机号、验证码继续使用原生 `input`，不烘焙到图片。
|
||
- A02 不绘制面板或主按钮的 CSS `border`／`background`；对应完整外观由图片资产承担。
|
||
- A02 的 `agreed` 是本页登录提交的唯一协议状态；H5 从当前 `location.hash` 读取 `agreed=1`，Android 从当前 uni 页面选项读取，直接进入默认未同意。
|
||
- 协议行点击可切换两枚透明图标；未同意提交时在本页提示“请先阅读并同意相关协议”，不再要求返回 A01。协议名称仍沿用“协议页面准备中”提示，不新增协议正文路由。
|
||
- 协议行下方显示“还没有账号？ 注册账号”；只有朱砂色“注册账号”具有 88rpx 高的文字触点，点击进入既有 `/pages/auth/a04-register`。该入口不依赖协议状态，也不在本轮重做 A04。
|
||
- 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` |
|
||
| 本页协议未同意，320×568 | `screens/runtime/2026-07-14/A02-agreement-unchecked-320x568.png` |
|
||
| 本页协议未同意，360×640 | `screens/runtime/2026-07-14/A02-agreement-unchecked-360x640.png` |
|
||
| 本页协议未同意，360×800 | `screens/runtime/2026-07-14/A02-agreement-unchecked-360x800.png` |
|
||
| 本页协议未同意，412×915 | `screens/runtime/2026-07-14/A02-agreement-unchecked-412x915.png` |
|
||
| A01 已确认协议进入，360×800 | `screens/runtime/2026-07-14/A02-agreement-checked-360x800.png` |
|
||
| 含注册入口、本页协议未同意，360×800 | `screens/runtime/2026-07-14/A02-register-entry-360x800.png` |
|
||
| 含注册入口、本页协议未同意，412×915 | `screens/runtime/2026-07-14/A02-register-entry-412x915.png` |
|
||
| A03 删除后，手机验证码 Tab，360×800 | `screens/runtime/2026-07-14/A02-sms-tab-after-a03-removal-360x800.png` |
|
||
|
||
## 6. 自动检查
|
||
|
||
- `tests/a02-asset-alpha-audit.ps1`：A02 卷轴面板稳定；两枚协议图标均为 96×96、带 Alpha、四角透明且包含不透明图形。
|
||
- `tests/a01-a02-ui-contract.ps1`：A02 使用完整卷轴面板与完整主按钮；协议行、双状态图标、H5/Android 路由初始化和本页提交门禁可审计；保留 Tab、原生输入、A05 跳转；拒绝 CSS 面板、主按钮和协议图标外观。
|
||
- `tests/a02-register-entry-contract.ps1`：A02 注册入口的文案、阅读顺序、88rpx 触点、A04 跳转与目标路由均可审计。
|
||
- `tests/a03-route-removal-contract.ps1`：A03 页面、路由和临时目录条目均不存在；G02/G04 合并后，56 条最终路由与 A02 的唯一短信入口职责同步收敛。
|
||
- `tests/compile-audit.ps1`：Vue 结构可编译。
|
||
- `tests/capture-chrome-page-contract.ps1`：Chrome 截图在目标 URL、新文档、页面选择器和全部图片资源就绪后再采集，防止复用状态、黑块或半渲染证据。
|
||
|
||
用户已确认本页视觉结果。后续认证页可参考其已验收的品牌层级与完整位图面板规则，但不得直接复制其登录表单或改变 A02 的可见效果。
|