feat: unify project responsive layouts
This commit is contained in:
rain
@@ -0,0 +1,162 @@
|
||||
# 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 截图；不改其他页面或业务逻辑。
|
||||
Reference in New Issue
Block a user