# 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 下更新时间仍隐藏。