jiapuapp/docs/superpowers/plans/2026-07-21-g10-all-states-responsive-visual.md

# G10 All-States Responsive Visual Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 修复 G10 列表卡框、双操作按钮和审核弹窗在 MuMu 中的拉伸、细条及标题正文连行问题，并覆盖全部审核状态。

**Architecture:** `AppButton` 提供默认关闭的紧凑九宫格变体，`AppDialog` 只在显式请求且存在双操作时消费该变体。G10 使用共享变体替换页面内直接图片按钮，并把列表、结果及状态卡全部迁移到真实素材九宫格边框。

**Tech Stack:** uni-app、Vue 3、SCSS、PowerShell 静态合同、MuMu Android 模拟器

## Global Constraints

- `AppButton.compact` 和 `AppDialog.compactActions` 默认值均为 `false`。
- 紧凑按钮切片固定为 `56 300 fill`，边框宽度固定为 `10rpx 26rpx`。
- G10 卡框切片固定为 `24 32`，边框宽度固定为 `18rpx 24rpx`。
- G10 双操作继续左右并排，按钮尺寸为 `148rpx × 68rpx`。
- G10 结果条尺寸为 `308rpx × 68rpx`。
- 不修改文案、模拟数据、路由、状态枚举、校验和审核逻辑。
- 视觉验收只使用 MuMu Android 原生画面。
- 不执行 Git 操作，不启用多代理。

---

### Task 1: AppButton 紧凑九宫格变体

**Files:**
- Create: `tests/app-button-compact-contract.ps1`
- Modify: `components/AppButton.vue`
- Test: `tests/shared-interaction-accessibility-contract.ps1`
- Test: `tests/shared-component-document-flow-contract.ps1`

**Interfaces:**
- Consumes: `type: "primary" | "secondary"`、现有点击和禁用接口。
- Produces: `compact: Boolean = false`；根类 `app-button--compact`。

- [ ] **Step 1: 写入失败合同**

合同读取 `components/AppButton.vue` 并要求以下标记：

```powershell
foreach ($token in @(
  'compact: { type: Boolean, default: false }',
  "'app-button--compact': compact",
  'border-image-slice: 56 300 fill;',
  'border-width: 10rpx 26rpx;',
  'a01-scroll-primary-v3.png',
  'a01-scroll-secondary-v3.png'
)) {
  if (-not $button.Contains($token)) { throw "AppButton compact contract missing: $token" }
}
```

并断言 `.app-button--compact .app-button__skin` 为 `display: none`。

- [ ] **Step 2: 运行合同并确认失败**

Run: `powershell -NoProfile -ExecutionPolicy Bypass -File tests/app-button-compact-contract.ps1`

Expected: FAIL，指出缺少 `compact`。

- [ ] **Step 3: 实现最小变体**

在属性中加入：

```js
compact: { type: Boolean, default: false },
```

在根类对象中加入：

```js
'app-button--compact': compact
```

为主／次紧凑按钮分别设置对应卷轴 `border-image-source`，共同使用：

```scss
border-width: 10rpx 26rpx;
border-style: solid;
border-color: transparent;
border-image-slice: 56 300 fill;
border-image-width: 10rpx 26rpx;
border-image-repeat: stretch;
```

隐藏紧凑模式中的原图片皮肤，保留标签和原有事件。

- [ ] **Step 4: 运行组件合同**

Run:

```powershell
powershell -NoProfile -ExecutionPolicy Bypass -File tests/app-button-compact-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/shared-interaction-accessibility-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/shared-component-document-flow-contract.ps1
```

Expected: 三项均输出 `PASS`。

### Task 2: AppDialog 标题分行与显式紧凑双操作

**Files:**
- Create: `tests/app-dialog-responsive-content-contract.ps1`
- Modify: `components/AppDialog.vue`

**Interfaces:**
- Consumes: Task 1 的 `AppButton.compact`。
- Produces: `compactActions: Boolean = false`；`.app-dialog__copy` 独立文本容器。

- [ ] **Step 1: 写入失败合同**

合同要求：

```powershell
foreach ($token in @(
  'compactActions: { type: Boolean, default: false }',
  'class="app-dialog__copy"',
  ':compact="compactActions && showCancel"'
)) {
  if (-not $dialog.Contains($token)) { throw "AppDialog responsive contract missing: $token" }
}
```

并要求 `.app-dialog__copy` 为纵向 flex、宽度 `100%`，标题和说明为 `display: block; width: 100%`。

- [ ] **Step 2: 运行合同并确认失败**

Run: `powershell -NoProfile -ExecutionPolicy Bypass -File tests/app-dialog-responsive-content-contract.ps1`

Expected: FAIL，指出缺少 `compactActions`。

- [ ] **Step 3: 实现弹窗布局**

使用 `.app-dialog__copy` 包裹 eyebrow、title 和 message；在属性中加入：

```js
compactActions: { type: Boolean, default: false },
```

两个 `AppButton` 都传入：

```vue
:compact="compactActions && showCancel"
```

单按钮因 `showCancel === false` 保持默认宽卷轴。

- [ ] **Step 4: 运行弹窗及共享合同**

Run:

```powershell
powershell -NoProfile -ExecutionPolicy Bypass -File tests/app-dialog-responsive-content-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/shared-interaction-accessibility-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/shared-component-document-flow-contract.ps1
```

Expected: 三项均输出 `PASS`。

### Task 3: G10 列表、结果与状态卡迁移

**Files:**
- Modify: `pages/genealogy/g10-application-review.vue`
- Modify: `tests/g10-all-states-visual-contract.ps1`
- Modify: `tests/g10-document-flow-contract.ps1`
- Test: `tests/g08-g10-application-flow-contract.ps1`
- Test: `tests/g09-g10-business-state-contract.ps1`

**Interfaces:**
- Consumes: `AppButton compact`、`AppDialog compact-actions`。
- Produces: G10 九宫格卡框、左右紧凑操作、九宫格结果条和完整状态卡。

- [ ] **Step 1: 将 G10 合同切换到新契约**

删除 `g10-document-flow-contract.ps1` 对以下旧值的要求：

```text
background ... list-slip-frame.png ... 100% 100%
padding: 44rpx 52rpx 29rpx 64rpx
```

在视觉／文档流合同中要求：

```text
border-image-source: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png")
border-image-slice: 24 32
border-width: 18rpx 24rpx
min-height: 218rpx
margin-bottom: 12rpx
body min-height: 182rpx
gap: 8rpx 0
padding: 28rpx 28rpx 22rpx 40rpx
<AppButton compact type="secondary"
<AppButton compact
<AppDialog compact-actions
```

并禁止 `.application-card`、`.review-state-card` 继续使用 `100% 100%` 的完整背景拉伸。

- [ ] **Step 2: 运行 G10 合同并确认失败**

Run:

```powershell
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g10-all-states-visual-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g10-document-flow-contract.ps1
```

Expected: FAIL，指出缺少九宫格卡框或紧凑按钮。

- [ ] **Step 3: 修改 G10 模板和样式**

- 导入 `AppButton`。
- 用两个 `AppButton compact` 替换 `.review-action` 内的直接图片。
- 给 `AppDialog` 增加 `compact-actions`。
- `.application-card` 使用 `24 32` 九宫格切片和规格中的 `218rpx` 尺寸。
- `.application-card__body` 使用 `182rpx`、`8rpx 0` 和 `28rpx 28rpx 22rpx 40rpx`。
- `.review-result` 根据 approved/rejected 类使用对应卷轴九宫格并移除直接图片。
- `.review-state-card` 使用同一卡框九宫格，保留其文案布局。

- [ ] **Step 4: 运行页面合同**

Run:

```powershell
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g10-all-states-visual-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g10-document-flow-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g08-g10-application-flow-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g09-g10-business-state-contract.ps1
```

Expected: 四项均输出 `PASS`。

### Task 4: MuMu 全状态验证

**Files:**
- Verify: `components/AppButton.vue`
- Verify: `components/AppDialog.vue`
- Verify: `pages/genealogy/g10-application-review.vue`
- Save screenshots: `tmp/G10-responsive-*.png`

**Interfaces:**
- Consumes: Task 1–3 的最终实现。
- Produces: 11 个 G10 状态的 MuMu 原生视觉证据。

- [ ] **Step 1: 运行全部聚焦合同**

运行 Task 1–3 的九项唯一合同，任何一项失败即停止视觉验收。

- [ ] **Step 2: 捕获 11 个 MuMu 状态**

依次捕获列表、说明、通过确认、通过完成、拒绝确认、拒绝空校验、拒绝完成、空、加载、错误、无权限。

- [ ] **Step 3: 逐项检查**

```text
1. 卡框四角不拉伸，卡片上下留白收紧。
2. 左右双按钮皮肤完整，文字居中，不重叠、不越界。
3. 标题和说明独立成行。
4. 结果条完整且不可点击。
5. 空／错／无权限卡框不变形。
6. 加载、重试、拒绝校验和审核业务行为不回退。
```

若任一状态不满足，只调整本规格定义的紧凑切片、G10 卡片间距或弹窗文本布局，并重新运行全部聚焦合同与对应 MuMu 状态。