101 lines
3.7 KiB
Markdown
101 lines
3.7 KiB
Markdown
# G01 Meta Legibility Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** 让 G01 列表地区与成员图标清楚，并将更新时间放在第二行、地区与成员放在第三行。
|
||
|
||
**Architecture:** 保持现有模板和资产不变，只修改 `g01-my-genealogies.vue` 的当前卡样式和 `GenealogyCard.vue` 的共享列表卡样式。由 G01 静态合同锁定精确数值，再用同一 Chrome 页面复核 412×915 与 320×568。
|
||
|
||
**Tech Stack:** uni-app、Vue 3、SCSS、PowerShell 合同测试、Chrome H5。
|
||
|
||
## Global Constraints
|
||
|
||
- 不改变卡框、卡高、谱印、背景、快捷入口和业务行为。
|
||
- 320px 小屏继续隐藏更新时间。
|
||
- 不使用多代理、worktree 或任何 Git 写操作。
|
||
- H5 证据不表示 Android/HBuilderX 或 G01 整页正式验收。
|
||
|
||
---
|
||
|
||
### Task 1: 锁定并实现元信息可读性
|
||
|
||
**Files:**
|
||
- Modify: `tests/g01-visual-contract.ps1`
|
||
- Modify: `pages/genealogy/g01-my-genealogies.vue`
|
||
- Modify: `components/GenealogyCard.vue`
|
||
|
||
**Interfaces:**
|
||
- Consumes: G01 当前卡 `.current-meta`、`.current-meta-icon`；列表卡 `.card-meta`、`.card-meta-icon`、`.card-role`、`.card-updated`。
|
||
- Produces: 列表地区与成员小图标 `46rpx`、增强赭金对比；更新时间在右对齐第二行，元信息占满第三行，常规卡高 `178rpx`，320px 卡高仍为 `148rpx`。
|
||
|
||
- [ ] **Step 1: 写入失败合同**
|
||
|
||
在 `tests/g01-visual-contract.ps1` 增加精确断言：更新时间在 DOM 与视觉顺序中先于元信息并占第二行；元信息占第三行；常规卡高 `178rpx`，小屏卡高 `148rpx`。
|
||
|
||
- [ ] **Step 2: 验证合同因旧数值失败**
|
||
|
||
Run: `powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1`
|
||
|
||
Expected: FAIL，指出至少一个新字号或透明度不存在。
|
||
|
||
- [ ] **Step 3: 实施最小样式调整**
|
||
|
||
在 `pages/genealogy/g01-my-genealogies.vue` 设置：
|
||
|
||
```scss
|
||
.current-switch-copy { font-size: 28rpx; }
|
||
.current-meta { font-size: 27rpx; }
|
||
.current-meta-icon { width: 36rpx; height: 36rpx; opacity: 1; }
|
||
@media (max-width: 340px) {
|
||
.current-meta-icon { width: 32rpx; height: 32rpx; }
|
||
}
|
||
```
|
||
|
||
在 `components/GenealogyCard.vue` 设置：
|
||
|
||
```scss
|
||
.card-meta-icon {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
flex: 0 0 auto;
|
||
opacity: 1;
|
||
filter: saturate(1.35) brightness(0.82) contrast(1.15);
|
||
}
|
||
.card-meta-item { margin-right: 0; }
|
||
.card-meta-item + .card-meta-item { margin-left: 18rpx; }
|
||
.genealogy-card { min-height: 178rpx; }
|
||
.card-detail-row { flex-wrap: wrap; }
|
||
.card-metas { width: 100%; margin-top: 2rpx; }
|
||
.card-updated {
|
||
width: 100%;
|
||
justify-content: flex-end;
|
||
margin-top: 0;
|
||
margin-left: 0;
|
||
}
|
||
.card-meta { font-size: 26rpx; }
|
||
.card-updated { font-size: 24rpx; }
|
||
.card-role { font-size: 26rpx; }
|
||
```
|
||
|
||
- [ ] **Step 4: 验证合同与编译**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/compile-audit.ps1
|
||
```
|
||
|
||
Expected: 两项均 PASS。
|
||
|
||
- [ ] **Step 5: 复核真实页面**
|
||
|
||
在当前 Chrome 中捕获：
|
||
|
||
```powershell
|
||
node scripts/capture-chrome-page.js 'http://localhost:5173/#/pages/genealogy/g01-my-genealogies' '.genealogy-index' 'docs/design/screens/runtime/2026-07-17/G01-meta-legibility-412x915.png' 412 915
|
||
node scripts/capture-chrome-page.js 'http://localhost:5173/#/pages/genealogy/g01-my-genealogies' '.genealogy-index' 'docs/design/screens/runtime/2026-07-17/G01-meta-legibility-320x568.png' 320 568
|
||
```
|
||
|
||
Expected: 元信息更清晰，图标更实；无横向溢出，320px 下更新时间仍隐藏。
|