jiapuapp/docs/superpowers/plans/2026-07-19-g01-equal-width-action-buttons.md

G01 添加家谱弹层按钮等宽 Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. The user explicitly forbids subagents and worktrees, so execution must remain inline in the current workspace. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 仅在 G01“添加家谱”底部弹层内，让三个现有卷轴按钮以当前红色主按钮的可见宽度为基准左右对齐。

Architecture: 保留公共 AppButton 及两张现有按钮皮肤不变，在 G01 页面作用域内统一三个按钮根容器的响应式宽高并居中。容器比例按次按钮资产比例设置，使主、次两种 aspectFit 皮肤都由宽度约束，从而端点对齐且不横向拉伸。

Tech Stack: uni-app、Vue 3 <script setup>、SCSS、PowerShell 合同测试、Chrome DevTools Protocol 9222。

Global Constraints

• 只修改 G01 当前“添加家谱”弹层，不修改公共 AppButton、按钮 PNG、其他状态或其他页面。
• 三个按钮使用 595rpx × 96rpx 响应式基准，max-width: 100%，水平居中。
• 相邻按钮间距保持 24rpx；弹层 780rpx 最低高度、内容安全居中和最大高度滚动合同保持不变。
• 继续复用 a01-scroll-primary-v3.png 与 a01-scroll-secondary-v3.png，保持 aspectFit，不得拉伸、重绘或生成替代资产。
• 复用 9222 上唯一的 localhost:5173 项目标签页，不打开第二个浏览器或第二个项目标签页。
• 不使用多代理、worktree；不执行 git add、commit、push、reset 或 checkout；不删除或清理任何现有文件。
• H5 证据仅为内部候选；Android/HBuilderX 仍为未验证项；未经用户明确“通过”不得标记或冻结 G01。

---

Task 1: 为 G01 局部等宽规则建立合同并最小实现

Files:

• Modify: tests/g01-visual-contract.ps1
• Modify: pages/genealogy/g01-my-genealogies.vue

Interfaces:

• Consumes: AppButton 根节点已有 .app-button、.app-button--block 类；G01 已有 .add-dialog__actions 容器。

• Produces: 仅由 .add-dialog__actions > .app-button 消费的 595rpx × 96rpx 局部尺寸合同。

• Step 1: 写入失败合同

在 tests/g01-visual-contract.ps1 的添加家谱弹层样式断言中加入：

if ($page -notmatch '(?s)\.add-dialog__actions\s*>\s*\.app-button\s*\{[^}]*width:\s*595rpx;[^}]*max-width:\s*100%;[^}]*min-height:\s*96rpx;') {
  throw 'G-01 add sheet buttons do not keep the approved equal-width geometry.'
}
if ($page -notmatch '(?s)\.add-dialog__actions\s*\{[^}]*align-items:\s*center;') {
  throw 'G-01 add sheet buttons are not centered after equal-width sizing.'
}

• Step 2: 运行合同并确认 RED

Run:

powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1

Expected: FAIL，输出包含 G-01 add sheet buttons do not keep the approved equal-width geometry.。

• Step 3: 写入最小页面级实现

将 G01 当前动作组样式调整为：

.add-dialog__actions { display: flex; flex-direction: column; align-items: center; margin: 62rpx -32rpx 0; }
.add-dialog__actions > .app-button { width: 595rpx; max-width: 100%; min-height: 96rpx; }
.add-dialog__actions > .app-button + .app-button { margin-top: 24rpx; }

不得修改 components/AppButton.vue，不得修改两个按钮 PNG。

• Step 4: 运行聚焦合同并确认 GREEN

Run:

powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1

Expected: PASS G-01 visual contract。

• Step 5: 运行相邻 G01 状态合同

Run each command independently:

powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-empty-state-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-loading-state-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-error-state-contract.ps1
git diff --check

Expected: 三个状态合同均输出 PASS；git diff --check 退出码为 0，允许仅出现工作区既有的 LF/CRLF 警告。

Task 2: 在唯一 Chrome 标签页验证等宽、响应式与压力状态

Files:

• Modify: design-qa.md
• Create: docs/design/screens/runtime/2026-07-19/g01-approval/05-add-dialog-equal-width-412x915.png
• Create: docs/design/screens/runtime/2026-07-19/g01-approval/05-add-dialog-equal-width-320x568.png
• Create: docs/design/screens/runtime/2026-07-19/g01-approval/05-add-dialog-equal-width-six-buttons-412x915.png

Interfaces:

• Consumes: 9222 上唯一的 localhost:5173 页面及 G01 已打开的三按钮弹层。

• Produces: 用户可在原标签页审批的 412×915 三按钮状态，以及等宽、响应式和长内容内部证据。

• Step 1: 确认服务和唯一项目标签页

读取 http://127.0.0.1:9222/json/list，只选择 URL 以 http://localhost:5173 开头且 type 为 page 的项目页。

Expected: 项目页数量严格为 1；若不是 1，停止，不创建新浏览器或标签页。

• Step 2: 验证 412×915 正常三按钮状态

通过当前 CDP 会话将视口保持为 412×915，读取三个 .add-dialog__actions .app-button 的矩形和相邻间距，并捕获实现截图。

Expected:

buttonCount = 3
每个按钮根容器宽度约 326.8px
三个按钮 left/right 偏差不超过 0.5px
相邻外层间距约 13.17px
dialogHeight 仍约 430.47px
body topSpace 与 bottomSpace 偏差不超过 1px
horizontalOverflow = false

同时目视确认红色与米色皮肤左右卷轴端点对齐、图案未横向变形、文字仍居中。

• Step 3: 验证 320×568 响应式状态

在同一标签页临时切换至 320×568，保持三个按钮和当前弹层打开。

Expected: 三个按钮左右端点对齐、完整可见、无横向溢出；标题、说明、关闭入口与按钮互不遮挡。

• Step 4: 验证六按钮与超高滚动压力状态

只通过当前页面运行时临时克隆按钮验证布局，不写入生产数据；先检查六按钮自然增高，再检查 18 按钮最大高度滚动。

Expected: 六按钮左右端点一致且间距稳定；18 按钮初始 scrollTop = 0、标题可达，滚动到底后末项可见；无横向溢出。验证后移除所有临时克隆。

• Step 5: 恢复用户审批状态

将同一标签页恢复为 412×915、三按钮、弹层打开，确认不存在临时克隆或注入样式。

Expected: 项目标签页数量仍为 1，用户只看到本轮等宽候选。

• Step 6: 更新设计质检证据

在 design-qa.md 当前 G01 添加家谱小节记录：源规格、三档截图、同尺寸对比、计算宽度、端点偏差、间距、居中、压力滚动、交互、控制台与证据限制。

Expected: H5 内部候选不存在可执行 P0/P1/P2 时写 final result: passed；同时明确“用户尚未通过”和“Android/HBuilderX 未验证”。

• Step 7: 运行最终新鲜验证

重新运行 Task 1 Step 4-5 的四个合同和 git diff --check，并重新读取当前浏览器最终状态。

Expected: 所有合同退出码为 0；唯一项目标签页为 412×915、三按钮、弹层打开、按钮等宽、无横向溢出。