# 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.

## 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.
- 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.

## Open question

There is no user-approved A02 visual mockup at the same route and state. A01 and G01 establish the visual language, but they cannot prove that this exact A02 composition meets the user’s subjective standard.

## Final result

final result: blocked

Blocker: wait for the user’s visual approval of the captured A02 account-password state before treating it as the final authentication module sample or propagating it to A03–A05.