A04 注册页视觉平衡修订实施计划

For agentic workers: 在当前工作区逐项执行；用户禁止子代理、worktree、Git 暂存、提交、推送与上传。

Goal: 修复 A04 窄屏中长标签与占位提示粘连、无目的引导文案挤压表单的问题，同时保持 A04 的注册行为和既有位图资产体系。

Architecture: 只改 pages/auth/a04-register.vue 的 A04 局部结构与布局。标题下采用现有透明位图 auth-divider-knot.png 作为分隔，移除 register-intro；输入标签列统一为 154rpx，使长标签与输入占位文字有稳定间距。所有面板、按钮、边框和装饰继续由既有位图提供。

Tech Stack: Vue 3 <script setup>、uni-app、SCSS、PowerShell 源码契约、Chrome DevTools 截图。

Global Constraints

仅修改 A04 与它的契约、设计记录、运行时截图；不修改已验收 A01、A02、G01。
不生成新资产；使用 static/assets/foundation/transparent/auth-divider-knot.png。
先让契约失败，再写最小实现；完成前重跑契约、截图、回归与 git diff --check。

Task 1: 固化并实现 A04 的窄屏信息层级

Files:

Modify: tests/a04-registration-contract.ps1
Modify: pages/auth/a04-register.vue
Modify: docs/design/A04_注册账号_设计记录.md
Create: docs/design/screens/runtime/2026-07-14/A04-after-balance-360x800.png
Create: docs/design/screens/runtime/2026-07-14/A04-after-balance-412x915.png

Interfaces:

Consumes: 已有 auth-divider-knot.png、A04 的 phone、password、confirmPassword、agreed 与 submitRegister、prepareLogin。
Produces: 无 register-intro 的 A04；标题后有 register-divider 位图；.input-label 宽度为 154rpx；A04 原有注册和回流行为不变。
Step 1: 写失败的视觉结构契约。

在 tests/a04-registration-contract.ps1 追加断言：A04 不含 register-intro；模板引用 auth-divider-knot.png 并有 register-divider；样式含 width: 154rpx；既有 register-submit、agreement-row、prepareLogin 与 /pages/auth/a02-login 保持存在。

Step 2: 运行红灯。

运行：

powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a04-registration-contract.ps1

预期：因旧版仍含 register-intro、没有 register-divider、标签宽度仍为 126rpx 而失败。

Step 3: 写最小实现。

在标题后放入：

<image class="register-divider" src="/static/assets/foundation/transparent/auth-divider-knot.png" mode="aspectFit" />

删除 register-intro，添加 .register-divider 的尺寸定位规则，将 .form-content 顶距改为与分隔位图相连的间距，并把 .input-label 的 width 改为 154rpx。不改脚本、路由、注册校验或其他页面。

Step 4: 运行绿灯与真实截图审视。

运行：

powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a04-registration-contract.ps1
node scripts/capture-chrome-page.js "http://localhost:5173/#/pages/auth/a04-register" ".auth-page" "docs/design/screens/runtime/2026-07-14/A04-after-balance-360x800.png" 360 800
node scripts/capture-chrome-page.js "http://localhost:5173/#/pages/auth/a04-register" ".auth-page" "docs/design/screens/runtime/2026-07-14/A04-after-balance-412x915.png" 412 915

逐张检查长标签与占位文字的间距、标题到表单的层级、底部协议与登录入口、窄屏横向裁切与黑块。

Step 5: 最终回归与记录。

运行 A04 契约、A03 路由移除、A01/A02 契约、编译审计、全页视觉契约与 git diff --check；在 A04 设计记录中标注本轮平衡修订的截图和结论。

3.7 KiB Raw Blame History Unescape Escape

A04 注册页视觉平衡修订实施计划

Global Constraints

Task 1: 固化并实现 A04 的窄屏信息层级

3.7 KiB

Raw Blame History