jiapuapp/design-qa.md

# A02 账号登录 Design QA

## Comparison target

- Source visual truth: `docs/design/screens/runtime/2026-07-13/A01-360x800.png` and `docs/design/screens/runtime/2026-07-13/G01-360x800.png` are the user-approved brand references. They are not a user-approved A02 mockup.
- Earlier A02 implementation: `docs/design/screens/runtime/2026-07-13/A02-before-360x800.png`.
- Current implementation: `docs/design/screens/runtime/2026-07-13/A02-after-360x800.png`.
- Full-view comparison evidence: `docs/design/screens/runtime/2026-07-13/A02-before-after-360x800.png` at 360 × 800.
- Focused region review: full-view comparison is sufficient for this iteration because the corrected areas are the whole panel proportion, complete frame, button ratio and background treatment; no text or icon asset is too small to identify in the captured images.

## Comparison history

### Iteration 1: Before refactor

**Findings**

- [P1] The login form was a thin CSS rectangle rather than a complete genealogy panel.
  Location: `pages/auth/a02-login.vue`, `.login-panel`.
  Evidence: the left half of `A02-before-after-360x800.png` has a narrow plain outline, unlike A01’s complete buttons and G01’s complete title slips.
  Fix: introduced `static/assets/modules/auth/opaque/a02-login-panel.png` as the full opaque paper, double-gold-frame and corner-ornament surface.

- [P1] The A01 primary button skin was vertically compressed.
  Location: `pages/auth/a02-login.vue`, `.login-submit`.
  Evidence: the earlier button had a noticeably flatter appearance than the A01 reference.
  Fix: set the A02 display slot to 128rpx high and preserved the complete skin as the only button surface.

- [P2] The main task was visually weaker than the scenery below it.
  Location: the A02 above-the-fold layout.
  Evidence: the earlier card ended high in the viewport and left more visual weight to the empty mountain background.
  Fix: aligned the header with A01 and expanded the panel so its lower paper landscape becomes a deliberate task-ending surface.

### Iteration 2: Current implementation

**Findings**

- [P3] The page uses one existing cloud asset at the heading while the new panel supplies additional pale clouds. This is visually coherent at 360 × 800, but user review should decide whether the heading cloud is one layer too many.
  Location: A02 heading, right side.
  Evidence: `A02-after-360x800.png`.
  Follow-up: remove only the heading cloud if the user finds the top-right decoration busy; do not alter the panel frame or input structure.

### Iteration 3: A02 本页协议确认

**Findings**

- [P1] 直接进入 A02 时，协议确认以前只是一句“请先在登录引导页阅读并确认协议”，用户无法在当前任务页修正状态。
  Location: `pages/auth/a02-login.vue`，原 `.agreement-reminder`。
  Evidence: `docs/design/screens/runtime/2026-07-14/A02-without-agreement-360x800.png`。
  Fix: 以 A02 卷轴面板内的可点击协议行替换提示；未选中与选中状态分别使用两枚 96×96 透明 PNG，文字和链接保留在 Vue 文字层。

- [P2] Chrome 捕获脚本在选择器出现 300ms 后就截图，A02 图层尚未加载时会产生黑块或过渡状态，不能作为视觉证据。
  Location: `scripts/capture-chrome-page.js`。
  Evidence: 本轮已拒绝的半渲染截图；修复后截图均由 `tests/capture-chrome-page-contract.ps1` 约束为“图片资源加载完成且额外稳定等待后再采集”。
  Fix: 截图脚本等待全部 `document.images` 加载完成，再等待 900ms；新截图逐张打开检查。

### Iteration 4: A02 注册入口与证据隔离

**Findings**

- [P2] 直接进入 A02 的新用户在账号密码与验证码登录之外没有注册路径，页面功能感不完整。
  Location: `pages/auth/a02-login.vue`，协议行下方。
  Evidence: 用户审视的 412×915 运行截图与本轮 `A02-register-entry-412x915.png`。
  Fix: 在协议行下方的既有留白内增加“还没有账号？ 注册账号”；仅朱砂色“注册账号”可点，真实跳转到既有 A04 路由，不新增按钮资产或重做 A04。

- [P1] Chrome 对同一路由的 hash 导航会复用 Vue 实例；直接进入 URL 的截图可能继承上一次勾选协议的状态，不能证明初始态。
  Location: `scripts/capture-chrome-page.js`。
  Evidence: 导航后 URL 已是无参数 A02，但实际图标仍为 `a02-agreement-checked.png`；整页刷新后才回到未选中图标。
  Fix: 截图脚本在到达目标 URL 后刷新，并等待 `performance.timeOrigin` 变化，再检查选择器、图片和稳定时间。该顺序由 `tests/capture-chrome-page-contract.ps1` 约束。

## Required fidelity surfaces

- Fonts and typography: A02 uses the project’s existing STKaiti/KaiTi hierarchy; current capture keeps the title above form labels and retains readable body copy.
- Spacing and layout rhythm: the larger panel establishes a clear header → title → tab → form → action cadence; 320 × 568 and 360 × 640 intentionally scroll rather than clip the action.
- Colors and visual tokens: cinnabar remains limited to the header, selected Tab, helper action and primary button; antique gold frames and ink-brown body text follow A01/G01.
- Image quality and asset fidelity: the panel is a complete opaque PNG with no generated text, placeholder controls, or CSS-drawn frame; the button remains the approved complete A01 asset.
- Agreement control: the 96×96 unchecked and checked icons are separate transparent PNGs with transparent corners; A02 does not draw the circle, fill, or checkmark with CSS.
- Registration entry: the low-emphasis text path follows the agreement row and uses only the existing panel whitespace; it does not compete with the full-surface cinnabar login button or invent a second button asset.
- Copy and content: account and SMS flows retain their original Chinese copy and real input controls; no visible workflow was invented.

## Primary interactions checked

- Account/password state captured at 320 × 568, 360 × 640, 360 × 800 and 412 × 915.
- SMS Tab was clicked through the Chrome debugging session and captured at 360 × 800: `docs/design/screens/runtime/2026-07-13/A02-sms-360x800.png`.
- Form submission behavior is covered by the existing A01/A02 contract and was not changed in this visual pass.
- Direct A02 now opens unchecked at 320×568, 360×640, 360×800 and 412×915; `?agreed=1` opens checked at 360×800. A real Chrome click changed the checked icon back to the unchecked PNG, and an unchecked submit displayed the current-page agreement message.
- Registration entry was captured at 360×800 and 412×915 after a fresh-document reload; a real Chrome click reached `http://localhost:5173/#/pages/auth/a04-register`.
- A03 重复验证码页已删除；删除后重新捕获 A02 的手机验证码 Tab（360×800），手机号、验证码、获取验证码、登录、协议和注册入口均完整显示，作为唯一验证码登录入口的运行证据。

## Acceptance

用户已于 2026-07-14 确认 A02 账号密码登录、协议确认和注册入口的视觉结果。本页从待验收样板转为冻结的认证模块参考；后续页面可继承其视觉语言，但不能改动 A02 可见效果。

## Final result

final result: accepted