rain
71 lines
3.7 KiB
Markdown
71 lines
3.7 KiB
Markdown
# 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 原有注册和回流行为不变。
|
||
|
||
- [x] **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` 保持存在。
|
||
|
||
- [x] **Step 2: 运行红灯。**
|
||
|
||
运行：
|
||
|
||
```powershell
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a04-registration-contract.ps1
|
||
```
|
||
|
||
预期：因旧版仍含 `register-intro`、没有 `register-divider`、标签宽度仍为 `126rpx` 而失败。
|
||
|
||
- [x] **Step 3: 写最小实现。**
|
||
|
||
在标题后放入：
|
||
|
||
```vue
|
||
<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`。不改脚本、路由、注册校验或其他页面。
|
||
|
||
- [x] **Step 4: 运行绿灯与真实截图审视。**
|
||
|
||
运行：
|
||
|
||
```powershell
|
||
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
|
||
```
|
||
|
||
逐张检查长标签与占位文字的间距、标题到表单的层级、底部协议与登录入口、窄屏横向裁切与黑块。
|
||
|
||
- [x] **Step 5: 最终回归与记录。**
|
||
|
||
运行 A04 契约、A03 路由移除、A01/A02 契约、编译审计、全页视觉契约与 `git diff --check`；在 A04 设计记录中标注本轮平衡修订的截图和结论。
|