rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4b338ebefc6fbba4a9d7dba821f9c6a223e7cd91
jiapuapp/docs/superpowers/plans/2026-07-13-a01-runtime-visual-calibration.md
T
rain bd50f15d5c docs: plan A01 runtime visual calibration
2026-07-13 15:28:16 +08:00

12 KiB
Raw Blame History

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:

    | 元素 | 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:

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

    - 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:

    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:

    <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:

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

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

    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.

Reference in New Issue View Git Blame Copy Permalink