jiapuapp/docs/superpowers/plans/2026-07-21-g09-nine-slice-cards.md

# G09 Nine-Slice Application Cards 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:** 修复 G09“我的申请”列表卡片装饰边框被纵向拉伸的问题，并收紧卡片内部及卡片之间的间距。

**Architecture:** 保留现有 `list-slip-frame.png` 真实素材和卡片 DOM 结构，将 `.application-card` 从整图背景拉伸改为 CSS `border-image` 九宫格切片。视觉合同负责固定切片值、边框宽度和紧凑布局，并禁止旧的 `100% 100%` 背景方案回归。

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

## Global Constraints

- 仅修改 G09 列表卡片，不修改空数据、加载和错误状态卡片。
- 使用 `/static/assets/modules/genealogy/transparent/list-slip-frame.png`，切片为 `24 32`。
- 卡片边框宽度为 `18rpx 24rpx`，卡片最小高度为 `210rpx`，卡片间距为 `12rpx`。
- 正文最小高度为 `174rpx`，网格间距为 `8rpx 14rpx`，内距为 `26rpx 28rpx 22rpx 40rpx`。
- 保留 `.application-card__action` 的 `white-space: nowrap`。
- 不修改文案、业务状态、模拟数据、路由和交互。
- 视觉验收只使用 MuMu Android 原生画面，不使用浏览器。
- 不执行 Git 操作，不启用多代理。

---

### Task 1: 固定 G09 九宫格卡片视觉合同

**Files:**
- Modify: `tests/g09-all-states-visual-contract.ps1`
- Test: `tests/g09-all-states-visual-contract.ps1`

**Interfaces:**
- Consumes: `pages/genealogy/g09-my-applications.vue` 中 `<style scoped lang="scss">` 的卡片样式。
- Produces: 对九宫格素材、切片值、边框宽度、紧凑尺寸及旧拉伸背景禁用规则的静态合同。

- [ ] **Step 1: 写入九宫格和紧凑间距断言**

在现有 `$rules` 中加入以下规则：

```powershell
'(?s)\.application-card\s*\{[^}]*min-height:\s*210rpx;[^}]*margin-bottom:\s*12rpx;[^}]*border-width:\s*18rpx 24rpx;[^}]*border-style:\s*solid;[^}]*border-color:\s*transparent;[^}]*border-image-source:\s*url\("/static/assets/modules/genealogy/transparent/list-slip-frame\.png"\);[^}]*border-image-slice:\s*24 32;[^}]*border-image-width:\s*18rpx 24rpx;[^}]*border-image-repeat:\s*stretch;[^}]*box-sizing:\s*border-box;',
'(?s)\.application-card__body\s*\{[^}]*min-height:\s*174rpx;[^}]*gap:\s*8rpx 14rpx;[^}]*padding:\s*26rpx 28rpx 22rpx 40rpx;'
```

在循环前加入旧方案禁用断言：

```powershell
if ($page -match '(?s)\.application-card\s*\{[^}]*background:\s*url\("/static/assets/modules/genealogy/transparent/list-slip-frame\.png"\)[^}]*100%\s+100%') {
  throw 'G09 application card must not stretch the complete frame asset to 100% 100%'
}
```

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

Run:

```powershell
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g09-all-states-visual-contract.ps1
```

Expected: FAIL，错误指出缺少 `210rpx`、`border-image-source` 或相关九宫格规则。

### Task 2: 将列表卡片改为九宫格边框

**Files:**
- Modify: `pages/genealogy/g09-my-applications.vue`
- Test: `tests/g09-all-states-visual-contract.ps1`
- Test: `tests/g09-document-flow-contract.ps1`

**Interfaces:**
- Consumes: Task 1 固定的样式合同及现有 `list-slip-frame.png`。
- Produces: 不拉伸四角、保持文档流并缩短内部间隔的 G09 列表卡片。

- [ ] **Step 1: 替换 `.application-card` 样式**

将 `.application-card` 精确改为：

```scss
.application-card {
  display: grid;
  width: 100%;
  min-height: 210rpx;
  margin-bottom: 12rpx;
  border-width: 18rpx 24rpx;
  border-style: solid;
  border-color: transparent;
  border-image-source: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png");
  border-image-slice: 24 32;
  border-image-width: 18rpx 24rpx;
  border-image-repeat: stretch;
  box-sizing: border-box;
}
```

- [ ] **Step 2: 收紧 `.application-card__body` 布局**

保留现有网格列定义和 `box-sizing`，将尺寸精确改为：

```scss
min-height: 174rpx;
gap: 8rpx 14rpx;
padding: 26rpx 28rpx 22rpx 40rpx;
```

- [ ] **Step 3: 运行 G09 视觉和文档流合同**

Run:

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

Expected:

```text
G09-ALL-STATES-VISUAL-CONTRACT PASS
G09-DOCUMENT-FLOW-CONTRACT PASS
```

如文档流合同仍只接受 `background` 素材引用，将该合同的 G09 列表素材要求改为接受 `border-image-source`；主操作按钮素材要求保持不变。

### Task 3: 回归验证与 MuMu 原生验收

**Files:**
- Verify: `pages/genealogy/g09-my-applications.vue`
- Verify: `tests/g09-all-states-visual-contract.ps1`
- Verify: `tests/g09-document-flow-contract.ps1`
- Verify: `tests/g09-g10-business-state-contract.ps1`

**Interfaces:**
- Consumes: Task 2 的最终样式。
- Produces: 合同输出与 MuMu 原生截图证据，供用户决定当前页面是否通过。

- [ ] **Step 1: 运行三项聚焦合同**

Run:

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

Expected: 三项均输出 `PASS`。

- [ ] **Step 2: 在 MuMu 中刷新 G09 并截图**

使用当前已连接的 `emulator-5554`，刷新 `/pages/genealogy/g09-my-applications`，通过 Android `screencap` 保存新截图到 `tmp/G09-nine-slice-native.png`。

Expected: 三张列表卡片四角比例正常，边线不显得纵向膨胀；卡片之间和卡片内部更紧凑；“修改后重新提交”保持单行且没有越界。

- [ ] **Step 3: 对照用户上一张截图检查**

只检查以下视觉差异：

```text
1. 金色装饰角不再纵向拉长。
2. 每张卡片的上下留白减少，但文字不压线。
3. 三张卡片之间的距离缩短。
4. 时间、状态、操作文字没有重叠或溢出。
```

若任一项失败，仅调整本计划中 `.application-card` 或 `.application-card__body` 的边框/间距值，再重复三项合同和 MuMu 截图；不改其他页面或业务逻辑。