157 lines
7.2 KiB
Markdown
157 lines
7.2 KiB
Markdown
# 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` 的添加家谱弹层样式断言中加入：
|
||
|
||
```powershell
|
||
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
|
||
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 当前动作组样式调整为：
|
||
|
||
```scss
|
||
.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
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1
|
||
```
|
||
|
||
Expected: `PASS G-01 visual contract`。
|
||
|
||
- [ ] **Step 5: 运行相邻 G01 状态合同**
|
||
|
||
Run each command independently:
|
||
|
||
```powershell
|
||
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:
|
||
|
||
```text
|
||
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`、三按钮、弹层打开、按钮等宽、无横向溢出。
|
||
|