# A-01 Runtime Visual Calibration Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Make the A-01 unchecked entry page's real DOM match the approved 412 x 915 visual reference for its header, title, dividers, buttons, registration entry, and agreement row.

**Architecture:** `docs/design/A01_启动登录引导_设计记录.md` owns the calibrated A-01 layout contract. `pages/auth/entry.vue` consumes that contract through local scoped styles and named A-01 elements; it retains the existing local interaction handlers. `tests/a01-a02-ui-contract.ps1` guards the layout anchors and blocks the rejected registration side lines and button-corner construction.

**Tech Stack:** uni-app Vue 3, scoped SCSS, local PNG assets, PowerShell contract scripts.

## Global Constraints

- Use `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` as the sole visual reference for the unchecked state.
- Keep real DOM, local-only interaction, the existing route to A-02, and explicit agreement gating.
- Do not use the whole reference image as page content, call APIs, modify A-02, or alter the existing authentication backgrounds in this task.
- Preserve vertical scrolling and `env(safe-area-inset-bottom)` for 320 x 568.
- Use local transparent PNG assets for title cloud imagery; do not use text glyphs or emoji as ornaments.

---

### Task 1: Make the A-01 record the sole measured-layout owner and add a red visual contract

**Files:**
- Modify: `docs/design/A01_启动登录引导_设计记录.md:30-33`
- Modify: `docs/superpowers/specs/2026-07-13-a01-runtime-visual-calibration-design.md:7-31`
- Modify: `docs/superpowers/specs/2026-07-13-a01-a02-static-ui-implementation-design.md:19`
- Modify: `tests/a01-a02-ui-contract.ps1:74-87`

**Interfaces:**
- Consumes: approved `A01-启动登录引导-栅格验收-412x915.png` and the current local route/interaction contract.
- Produces: one permanent 750rpx coordinate table and a contract that rejects the old visual construction.

- [ ] **Step 1: Replace the old prose layout values in the A-01 design record with the calibrated table**

  Replace the current fixed-layout bullets with this table. It is the only owner of these values:

  ```markdown
  | 元素 | 412 × 915 像素基准 | 750rpx 实现基准 |
  | --- | --- | --- |
  | 朱砂家祠头图 | 高 139px | 高 253rpx |
  | 标题区起点 | 红头后约 82px | `padding-top: 150rpx` |
  | 标题分隔饰线 | 宽约 234px | 宽 426rpx；上、下间距独立 |
  | 两个按钮 | x=60px，宽约 291px，高约 65px | `margin: 95rpx 110rpx 0`，高 118rpx |
  | 两按钮间距 | 约 28px | `margin-top: 51rpx` |
  | 注册入口 | 微信按钮后约 56px；无左右短线 | `margin-top: 98rpx` |
  | 协议行 | 注册入口后约 70px | `margin-top: 128rpx` 加安全区 |
  ```

- [ ] **Step 2: Remove the superseded dimensions from the static UI implementation contract**

  In `2026-07-13-a01-runtime-visual-calibration-design.md`, replace its numeric coordinate table with this ownership statement so the design record remains the only permanent coordinate source:

  ```markdown
  ## Contract ownership

  `docs/design/A01_启动登录引导_设计记录.md` owns the calibrated 412 × 915 coordinate table and acceptance thresholds. This implementation specification records scope and component strategy only; it does not define duplicate layout values.
  ```

  Then replace the static UI implementation contract's layout sentence with:

  ```markdown
  - A-01 的运行时布局唯一遵循 `docs/design/A01_启动登录引导_设计记录.md` 中的“412 × 915 运行时校准表”；本文件不再重复或定义按钮与间距数值。
  ```

- [ ] **Step 3: Extend the PowerShell contract before changing the page**

  Add these assertions immediately after the existing A-01 DOM-structure assertions:

  ```powershell
  foreach ($requiredVisualAnchor in @(
    'brand-divider--top',
    'brand-divider--bottom',
    'entry-button--primary',
    'entry-button--secondary',
    'height: 253rpx',
    'padding: 150rpx 56rpx 0',
    'width: 426rpx',
    'margin: 95rpx 110rpx 0',
    'height: 118rpx',
    'margin-top: 51rpx',
    'margin-top: 98rpx',
    'margin-top: 128rpx'
  )) {
    Assert-Contains -Content $entry -Expected $requiredVisualAnchor -Message "Missing A-01 calibrated visual anchor: $requiredVisualAnchor"
  }
  foreach ($rejectedVisualConstruction in @('link-line', 'button-corner', 'class="auth-button primary-button"')) {
    Assert-NotContains -Content $entry -Unexpected $rejectedVisualConstruction -Message "A-01 retains rejected visual construction: $rejectedVisualConstruction"
  }
  ```

- [ ] **Step 4: Run the focused contract to prove it is red**

  Run: `powershell -ExecutionPolicy Bypass -File tests\a01-a02-ui-contract.ps1`

  Expected: failure mentioning `Missing A-01 calibrated visual anchor` or `A-01 retains rejected visual construction`.

### Task 2: Rebuild A-01's measured DOM layout without changing its interaction contract

**Files:**
- Modify: `pages/auth/entry.vue:11-65,145-324`
- Test: `tests/a01-a02-ui-contract.ps1`

**Interfaces:**
- Consumes: the measured A-01 table from the design record and existing `openLogin`, `prepareWechatLogin`, `prepareRegister`, and `toggleAgreement` handlers.
- Produces: `brand-divider--top`, `brand-divider--bottom`, `entry-button--primary`, and `entry-button--secondary` rendered from real DOM.

- [ ] **Step 1: Replace the entry markup that creates the rejected decorations**

  Keep the existing cloud `image` source, but split the dividers by purpose, remove the registration side lines, remove the four corner views, and use A-01-specific button classes:

  ```vue
  <view class="brand-divider brand-divider--top">
    <view class="brand-divider__line" />
    <image class="brand-divider__ornament" src="/static/assets/icons/action/create-cloud-v2.png" mode="aspectFit" />
    <view class="brand-divider__line" />
  </view>

  <view class="entry-actions">
    <view class="entry-button entry-button--primary" hover-class="entry-button--pressed" @click="openLogin">
      <image class="entry-button__icon" src="/static/assets/icons/auth/login-outline-v1.png" mode="aspectFit" />
      <text>登录</text>
    </view>
    <view class="entry-button entry-button--secondary" hover-class="entry-button--pressed" @click="prepareWechatLogin">
      <image class="entry-button__icon entry-button__icon--wechat" src="/static/assets/icons/auth/wechat-licensed-v1.png" mode="aspectFit" />
      <text>微信登录</text>
    </view>
    <view class="register-link" hover-class="link-hover" @click="prepareRegister">
      <text>还没有账号？<text class="register-emphasis">注册账号</text></text>
    </view>
  </view>
  ```

  Render the second divider after `brand-subtitle` with the same child structure and class `brand-divider--bottom`.

- [ ] **Step 2: Replace the old generic layout selectors with these calibrated scoped rules**

  Keep the existing background and script blocks unchanged. Replace `.auth-header` through `.link-hover` with the following A-01 rules:

  ```scss
  .auth-header { position: relative; height: 253rpx; overflow: hidden; }

  .brand-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 150rpx 56rpx 0;
    color: #3f2c1d;
  }

  .brand-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 426rpx;
  }
  .brand-divider--top { margin: 47rpx 0 21rpx; }
  .brand-divider--bottom { margin: 34rpx 0 30rpx; }
  .brand-divider__line { flex: 1; height: 1rpx; background: #d5a34f; }
  .brand-divider__ornament { width: 44rpx; height: 24rpx; margin: 0 14rpx; }

  .entry-actions { margin: 95rpx 110rpx 0; }
  .entry-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 118rpx;
    border: 2rpx solid #d8ad63;
    border-radius: 6rpx;
    font-family: STKaiti, KaiTi, serif;
    font-size: 38rpx;
    letter-spacing: 4rpx;
  }
  .entry-button::after {
    position: absolute;
    inset: 10rpx;
    border: 1rpx solid rgba(225, 180, 105, 0.92);
    border-radius: 2rpx;
    content: '';
    pointer-events: none;
  }
  .entry-button--primary {
    border-color: #9e170e;
    background: #b7170d;
    color: #fffaf0;
  }
  .entry-button--primary::after { border-color: #edc67c; }
  .entry-button--secondary {
    margin-top: 51rpx;
    background: rgba(255, 252, 245, 0.82);
    color: #60442f;
  }
  .entry-button__icon { width: 46rpx; height: 46rpx; margin-right: 18rpx; }
  .entry-button__icon--wechat { width: 52rpx; }
  .entry-button--primary .entry-button__icon { filter: brightness(0) invert(1); }
  .entry-button > text { position: relative; z-index: 1; }
  .entry-button--pressed { opacity: 0.84; }

  .register-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 98rpx;
    color: #60442f;
    font-family: STKaiti, KaiTi, serif;
    font-size: 30rpx;
    letter-spacing: 2rpx;
    white-space: nowrap;
  }
  .agreement-row { margin-top: 128rpx; }
  ```

  Delete `.gold-divider`, `.divider-line`, `.divider-ornament`, `.auth-button`, `.primary-button`, `.secondary-button`, `.button-icon`, `.wechat-icon`, `.button-hover`, `.button-corner`, all `.corner-*` selectors, and `.link-line`. Do not change any handler or copy.

- [ ] **Step 3: Run the focused contract and relevant compilation audits**

  Run:

  ```powershell
  powershell -ExecutionPolicy Bypass -File tests\a01-a02-ui-contract.ps1
  powershell -ExecutionPolicy Bypass -File tests\vue3-entry.ps1
  powershell -ExecutionPolicy Bypass -File tests\compile-audit.ps1
  ```

  Expected: all three scripts print `PASS`; the focused contract prints `A01-A02-UI-CONTRACT PASS`.

### Task 3: Record the completed static change and request runtime evidence

**Files:**
- Modify: `docs/design/A01_启动登录引导_设计记录.md:51-57`
- Modify: `design-qa.md:1-31`
- Test: `tests/a01-a02-ui-contract.ps1`, `tests/vue3-entry.ps1`, `tests/compile-audit.ps1`

**Interfaces:**
- Consumes: passing static contract and a page that still needs HBuilderX/Android visual evidence.
- Produces: an honest handoff that separates static verification from runtime screenshot acceptance.

- [ ] **Step 1: Update the design record's verification state**

  Add this sentence under the runtime-verification gap:

  ```markdown
  - 2026-07-13 已按 412 × 915 参考图重新校准真实 DOM 的标题区、分隔饰线、双按钮、注册入口与协议行；静态合同通过，但仍须由同尺寸 HBuilderX 或 Android 截图叠图确认，未确认前不得标记 A-01 完成。
  ```

- [ ] **Step 2: Replace the stale QA finding with the exact next capture**

  Set `design-qa.md` to state that the source remains `A01-启动登录引导-栅格验收-412x915.png`, static calibration has passed, and the sole remaining evidence is an unchecked `412 x 915` HBuilderX/Android capture without browser chrome plus a `320 x 568` safety/scroll capture.

- [ ] **Step 3: Run the final static verification and inspect the scoped diff**

  Run:

  ```powershell
  powershell -ExecutionPolicy Bypass -File tests\a01-a02-ui-contract.ps1
  powershell -ExecutionPolicy Bypass -File tests\vue3-entry.ps1
  powershell -ExecutionPolicy Bypass -File tests\compile-audit.ps1
  git diff --check
  git diff -- pages/auth/entry.vue tests/a01-a02-ui-contract.ps1 docs/design/A01_启动登录引导_设计记录.md docs/superpowers/specs/2026-07-13-a01-runtime-visual-calibration-design.md docs/superpowers/specs/2026-07-13-a01-a02-static-ui-implementation-design.md design-qa.md
  ```

  Expected: all scripts pass, `git diff --check` is silent, and no interaction, route, or API code is changed.

- [ ] **Step 4: Commit only the A-01 calibration work**

  ```powershell
  git add -- pages/auth/entry.vue tests/a01-a02-ui-contract.ps1 docs/design/A01_启动登录引导_设计记录.md docs/superpowers/specs/2026-07-13-a01-runtime-visual-calibration-design.md docs/superpowers/specs/2026-07-13-a01-a02-static-ui-implementation-design.md design-qa.md
  git commit -m "fix: calibrate A01 entry visual layout"
  ```

  Expected: the commit includes only the listed A-01 files; it must not include `components/GenealogyCard.vue` or Vite cache files.