feat: unify project responsive layouts
This commit is contained in:
rain
@@ -0,0 +1,265 @@
|
||||
# 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 状态。
|
||||
Reference in New Issue
Block a user