G01 Empty Frame Transparency 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-empty-panel.png 精确提取原双金线和四角纹样，输出透明 g01-empty-panel-frame.png。空状态只渲染该透明框；错误状态继续使用原不透明资产。

Tech Stack: uni-app、Vue 3、SCSS、PowerShell 合同测试、Chrome H5。

Global Constraints

不生成或覆盖现有资产。
不改变空状态按钮、文案和跳转行为。
不使用多代理、worktree 或 Git 写操作。
H5 证据不表示 Android/HBuilderX 或 G01 整页正式验收。

Task 1: 空状态透明框

Files:

Modify: tests/g01-empty-state-contract.ps1
Modify: pages/genealogy/g01-my-genealogies.vue

Interfaces:

Consumes: list-slip-frame.png、.empty-panel、.empty-panel__content。
Produces: 可重建的 g01-empty-panel-frame.png、.empty-panel__frame 透明框层和 26rpx .empty-create-note。
Produces: 1120rpx 空状态框、垂直居中的内容组、放大的谱印/标题/说明/操作按钮，以及更明显的纵向节奏。
Step 1: 写入失败契约

锁定空状态模板不再引用不透明面板、使用 empty-panel__frame，并设置 1120rpx 框高、垂直居中、560×124rpx 主操作与 26rpx 提示文字。

Step 2: 验证合同失败

Run: powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-empty-state-contract.ps1

Expected: FAIL，指出空状态仍使用不透明面板或缺少透明框。

Step 3: 实施最小模板与样式修改

.empty-panel__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.empty-create-note { font-size: 26rpx; line-height: 38rpx; }

Step 4: 验证

Run:

powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-empty-state-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1
powershell -NoProfile -ExecutionPolicy Bypass -File tests/compile-audit.ps1
node tests/g01-empty-state-runtime-smoke.js http://localhost:5173

Expected: 全部 PASS。

2.4 KiB Raw Blame History Unescape Escape

G01 Empty Frame Transparency Implementation Plan

Global Constraints

Task 1: 空状态透明框

2.4 KiB

Raw Blame History