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 设置：

.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 设置：

.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 -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/compile-audit.ps1

Expected: 两项均 PASS。

Step 5: 复核真实页面

在当前 Chrome 中捕获：

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

3.7 KiB Raw Blame History Unescape Escape

G01 Meta Legibility Implementation Plan

Global Constraints

Task 1: 锁定并实现元信息可读性

3.7 KiB

Raw Blame History