rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
eced3d1e6ed92648ce353e8dac38c31e04045e8e
jiapuapp/docs/superpowers/plans/2026-07-21-g10-all-states-responsive-visual.md
T
rain 5d99bae3f2 feat: unify project responsive layouts
2026-07-21 20:59:10 +08:00

8.7 KiB
Raw Blame History

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 并要求以下标记：

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: 实现最小变体

在属性中加入：

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

在根类对象中加入：

'app-button--compact': compact

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

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 -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: 写入失败合同

合同要求：

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；在属性中加入：

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

两个 AppButton 都传入：

:compact="compactActions && showCancel"

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

  • Step 4: 运行弹窗及共享合同

Run:

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 对以下旧值的要求：

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

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

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

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

Reference in New Issue View Git Blame Copy Permalink