rain
6.9 KiB
6.9 KiB
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. 视觉结构
- 使用与 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 圆框。 |
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 的可见效果。