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 中加入以下规则：

'(?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;'

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

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 -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 精确改为：

.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，将尺寸精确改为：

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

• Step 3: 运行 G09 视觉和文档流合同

Run:

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

Expected:

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 -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: 对照用户上一张截图检查

只检查以下视觉差异：

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

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