Files
jiapuapp/docs/superpowers/plans/2026-07-16-a04-a01-visual-system-migration.md
T
2026-07-16 18:13:03 +08:00

4.6 KiB
Raw Blame History

A04 同步 A01 新视觉体系实施计划

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 将 A04 页面内旧认证视觉全部替换为 A01 已审核的新体系,并移除非最终的自定义滑动验证面板。

Architecture: A04 继续独立拥有注册字段和校验逻辑,只复用 A01 已生产的位图资产与全局字体合同。主按钮按固定比例等比显示,Toast 使用同一张可切片资产;真实滑动验证由后续接口组件负责,当前有效提交只显示待接入反馈。

Tech Stack: uni-app Vue 3、SCSS、PowerShell 静态契约、Chrome CDP 运行 smoke。

Global Constraints

  • A04 Logo 必须为 184×221rpxtop: 64rpx、水平居中。
  • 禁止 A04 引用 a01-primary-button.pnga01-secondary-button.pnga02-login-panel.png 或局部 STSong/SimSun
  • 注册主按钮使用 a01-scroll-primary-v3.pngaspectFitToast 使用 a01-scroll-toast-v3.pngborder-image
  • 协议图标、返回箭头、宗祠底板保留。
  • 不使用 worktree,不执行 Git 暂存、提交、推送、重置或清理。
  • 不修改 A01 或其他页面,不对接接口,不把 H5 写成 Android 或用户整页验收。

Task 1: 用契约锁定 A04 新视觉和验证边界

Files:

  • Modify: tests/a04-registration-contract.ps1
  • Modify: tests/a04-registration-runtime-smoke.js

Interfaces:

  • Consumes: A04 当前页面结构与 A01 v3 资产路径。

  • Produces: 旧资产禁止、Logo 精确尺寸、Toast 切片和有效提交反馈的回归合同。

  • Step 1: 写入失败静态契约

要求 A04 包含 a01-vnext-divider-v1.pnga01-scroll-primary-v3.pnga01-scroll-toast-v3.pngwidth: 184rpx;height: 221rpx;border-image-slice: 和“滑动验证待接口接入”;禁止三个旧资产、verificationVisibleverification-layerfeedback-toast__skinfont-family:

  • Step 2: 更新运行 smoke 的期望

有效表单提交后等待 .feedback-toast,断言文案为“滑动验证待接口接入”,并断言页面不存在 .verification-layer;四档尺寸改为 320×568360×640360×800412×915

  • Step 3: 运行测试确认 RED

运行:

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

预期:因 A04 仍引用旧主按钮和旧验证面板而失败。


Task 2: 最小迁移 A04 页面

Files:

  • Modify: pages/auth/a04-register.vue

Interfaces:

  • Consumes: a01-vnext-divider-v1.pnga01-scroll-primary-v3.pnga01-scroll-toast-v3.png 与全局字体。

  • Produces: A04 新默认态、错误态、协议态和滑动验证待接入反馈。

  • Step 1: 替换模板资产

将标题分隔和主按钮改为新资产与 aspectFit,删除验证弹层模板及 Toast 内部拉伸图片。

  • Step 2: 收敛脚本状态

删除 verificationVisiblecloseVerificationconfirmVerification;有效提交改为:

showFeedback('滑动验证待接口接入')
  • Step 3: 同步样式

.brand-seal 改为 184×221rpx;移除所有局部 font-family;主按钮保持现有点击槽但等比承载 v3 皮肤;Toast 使用:

border: 16rpx solid transparent;
border-width: 16rpx 74rpx;
border-image-source: url('/static/assets/foundation/transparent/a01-scroll-toast-v3.png');
border-image-slice: 58 280 fill;
border-image-width: 16rpx 74rpx;
border-image-repeat: stretch;
  • Step 4: 运行静态合同确认 GREEN

运行静态合同,预期输出 A04-REGISTRATION-CONTRACT PASS


Task 3: 真实运行验证与浏览器交付

Files:

  • Modify: design-qa.md

Interfaces:

  • Consumes: A04 已迁移页面与 CDP 调试页。

  • Produces: 四档响应式结果和浏览器中的 A04 默认态。

  • Step 1: 运行 A04 smoke

运行 node tests/a04-registration-runtime-smoke.js,预期输出 A04-REGISTRATION-RUNTIME-SMOKE PASS

  • Step 2: 捕获并检查 412×915

运行 capture-chrome-page.js 捕获 A04 默认态,人工检查 Logo、标题、字段、按钮、协议和底部留白。

  • Step 3: 更新 QA 边界

design-qa.md 的 A04 段记录新资产和真实滑动验证延期;不得写成用户已验收。

  • Step 4: 最终聚焦验证

重新运行静态合同、运行 smoke、截图合同和 git diff --check;将浏览器停在 A04 默认态供用户审核。

项目禁止 Git 操作,因此本计划不包含提交步骤。