rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1da4d8cf1f2ee0a1b8e4873c8c16845274067b00
jiapuapp/docs/superpowers/plans/2026-07-12-g01-information-hierarchy.md
T

11 KiB
Raw Blame History

G01 信息层级与谱印校正 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: 让“我的家谱”内容区按已确认的 v5 参考稿呈现谱印、元信息、快捷入口、列表和新建按钮的视觉层级。

Architecture: 视觉资产只放在 static/assets/icons/，页面和卡片组件只引用资产与渲染动态数据。pages/genealogy/index.vue 负责当前家谱、快捷入口和新建按钮；components/GenealogyCard.vue 负责每条列表的谱印、两层元信息和右侧操作列。

Tech Stack: uni-app Vue 3、SCSS、项目本地 RGBA PNG、PowerShell 契约审计。

Global Constraints

  • 视觉基准：docs/design/screens/G01-我的家谱-紧凑版设计稿-v5-Tabbar安全区.png。
  • Android only；继续使用 rpx、flex、小屏 max-width: 340px 规则，不使用 clip-path 或 CSS 绘图。
  • 所有新增可见图标、谱印框、云纹均为项目内透明 PNG；动态姓名/数字使用 Vue 文本，不嵌死在图片中。
  • 不改接口、路由、页头、背景、Tabbar 或其他页面；仅为现有展示用 data/mock.js 家谱条目补充 updatedAt 日期字段。
  • 工作目录不是 Git 仓库，本轮不初始化仓库、不创建提交。

Task 1: 谱印与元信息 PNG 资产

Files:

  • Create: static/assets/icons/common/location-v1.png
  • Create: static/assets/icons/common/member-meta-v1.png
  • Create: static/assets/icons/common/admin-v1.png
  • Create: static/assets/icons/genealogy/seal-current-frame-v1.png
  • Create: static/assets/icons/genealogy/seal-row-frame-v1.png
  • Create: static/assets/icons/action/create-cloud-v1.png
  • Modify: tests/g01-visual-contract.ps1

Interfaces:

  • Produces 96×96 RGBA metadata icons, separate transparent current/list seal-frame PNGs, and a transparent cloud ornament consumed by Tasks 2–3.

  • Each asset corner alpha must be 0; the current seal frame must have taller visible bounds than the row seal frame.

  • Step 1: Write the failing asset contract

Add the six paths to $requiredAssets, then add these assertions to tests/g01-visual-contract.ps1:

foreach ($asset in @('location-v1.png', 'member-meta-v1.png', 'admin-v1.png', 'seal-current-frame-v1.png', 'seal-row-frame-v1.png', 'create-cloud-v1.png')) {
  if ($page -notmatch [regex]::Escape($asset) -and $card -notmatch [regex]::Escape($asset)) {
    throw "G-01 does not consume $asset"
  }
}
  • Step 2: Run the contract and verify it fails

Run: powershell -ExecutionPolicy Bypass -File tests\g01-visual-contract.ps1
Expected: FAIL because the asset files and component references do not exist.

  • Step 3: Generate and inspect the assets

Generate one asset at a time on a flat chroma-key background, remove the chroma key to alpha, and inspect the selected PNG before adding it. Use this visual language: antique-gold single/double outline, Chinese genealogy motif, no text, no shadow, transparent canvas. For the seal frames, generate only the red-and-gold frame; do not include surname or “家谱” text.

  • Step 4: Verify transparent corners

Run a PowerShell System.Drawing.Bitmap alpha audit that checks the four canvas corners of every new PNG are 0.

Expected: all six assets report PASS ... transparent corners.

Task 2: 当前家谱题签、快捷入口与新建按钮

Files:

  • Modify: pages/genealogy/index.vue
  • Modify: tests/g01-visual-contract.ps1

Interfaces:

  • Consumes the Task 1 metadata icons, seal-current-frame-v1.png, and create-cloud-v1.png.

  • Keeps currentGenealogy as the data owner; does not add API calls.

  • Step 1: Write the failing page-layout contract

Require the current title block to render three .current-meta-item entries and the current seal to include a .current-seal-frame image. Require the shortcut display size and create cloud image:

foreach ($token in @('current-meta-item', 'current-seal-frame', 'location-v1.png', 'member-meta-v1.png', 'admin-v1.png', 'create-cloud-v1.png')) {
  if ($page -notmatch $token) { throw "G-01 current panel is missing $token" }
}
if ($page -notmatch 'width:\s*82rpx') { throw 'G-01 shortcut icons remain below the reference visual size.' }
  • Step 2: Run the contract and verify it fails

Run: powershell -ExecutionPolicy Bypass -File tests\g01-visual-contract.ps1
Expected: FAIL because current content is still a pure text metadata row and has no seal/cloud image references.

  • Step 3: Implement the minimum current-panel markup

Replace the pure red current-seal block with an image layer and dynamic text overlay:

<view class="current-seal">
  <image class="current-seal-frame" src="/static/assets/icons/genealogy/seal-current-frame-v1.png" mode="scaleToFill" />
  <text class="current-seal-title">家谱</text>
</view>

Render three icon/text metadata groups using the created location-v1.png, member-meta-v1.png, and admin-v1.png; retain currentGenealogy.location and currentGenealogy.memberCount as the text values.

  • Step 4: Implement the spacing-only CSS changes

Set shortcut image box to 82rpx; increase label size and give the shortcut grid the reference-like vertical space. Use flex wrapping for current metadata and keep the existing @media screen and (max-width: 340px) behavior so no item overlaps.

  • Step 5: Implement the create-button ornament

Place two instances of create-cloud-v1.png inside .create-action; mirror only the right PNG with transform: scaleX(-1). Keep the existing add PNG and navigation handler.

  • Step 6: Run the contract and verify it passes

Run: powershell -ExecutionPolicy Bypass -File tests\g01-visual-contract.ps1
Expected: PASS G-01 visual contract.

Task 3: 家谱列表谱印与信息层级

Files:

  • Modify: components/GenealogyCard.vue
  • Modify: data/mock.js
  • Modify: tests/g01-visual-contract.ps1

Interfaces:

  • Consumes genealogy (surname, name, location, memberCount, updatedAt), role, and the Task 1 row seal asset.

  • Emits the unchanged select event.

  • Step 1: Write the failing card-layout contract

Require seal-row-frame-v1.png and an explicit .card-detail-row:

foreach ($token in @('seal-row-frame-v1.png', 'card-detail-row', 'card-updated')) {
  if ($card -notmatch $token) { throw "G-01 list card is missing $token" }
}
if ($card -match 'background:\s*#b93b2e') { throw 'G-01 list seal is still a plain CSS red block.' }
  • Step 2: Run the contract and verify it fails

Run: powershell -ExecutionPolicy Bypass -File tests\g01-visual-contract.ps1
Expected: FAIL because the current list card has no frame asset or two-level detail markup.

  • Step 3: Implement the minimal list-card markup

Use a .surname-seal image frame with text overlay, then split metadata into title/detail/update rows:

<view class="card-detail-row">
  <text class="card-meta">{{ genealogy.location }} · {{ genealogy.memberCount }} 位成员</text>
  <view class="card-updated"><text>更新于 {{ genealogy.updatedAt }}</text></view>
</view>

On narrow screens, hide .card-updated; preserve the role and chevron column.

  • Step 3a: Add the visual fixture dates

Add updatedAt: '2024-05-12' to genealogy 1001 and updatedAt: '2024-04-28' to genealogy 1002 in data/mock.js. These fields are display-only fixtures and do not change the API contract.

  • Step 4: Implement CSS sizing and small-screen fallback

Increase card name/title prominence, keep row-frame as the only paper frame, set right-side role/chevron to a centered fixed column, and make .card-updated disappear at max-width: 340px before text can collide.

  • Step 5: Run the contract and verify it passes

Run: powershell -ExecutionPolicy Bypass -File tests\g01-visual-contract.ps1
Expected: PASS G-01 visual contract.

Task 4: Documentation and full verification

Files:

  • Modify: docs/design/G01_我的家谱_设计记录.md
  • Modify: docs/规划.md

Interfaces:

  • Records only completed implementation and verification; leaves G01 unchecked until an HBuilderX comparison screenshot is accepted.

  • Step 1: Record the completed implementation scope

Append the new asset paths, the explicit visual reference, and the small-screen fallback to the G01 design record. Mark the implementation subtask complete in docs/规划.md; do not mark the full G01 design complete.

  • Step 2: Run focused verification

Run:

powershell -ExecutionPolicy Bypass -File tests\g01-visual-contract.ps1
powershell -ExecutionPolicy Bypass -File tests\compile-audit.ps1
powershell -ExecutionPolicy Bypass -File tests\uni-scss-injection.ps1

Expected: three PASS lines and no warnings.

  • Step 3: Capture visual evidence in HBuilderX

At the same phone viewport as the supplied comparison, capture G01 and compare it side-by-side with the v5 reference. Confirm the current title/meta row, all three seals, four shortcut icon sizes, list row hierarchy, and cloud button ornament. If a mismatch remains, record it rather than marking G01 complete.

Plan self-review

  • Spec coverage: Tasks 1–3 implement every asset, layout, small-screen, and visual hierarchy requirement; Task 4 records and verifies it.
  • No placeholders: all new paths, CSS tokens, component classes, commands, and expected outputs are named.
  • Consistency: page uses current panel assets; card uses row seal and metadata assets; both are enforced by one G01 visual contract.

Task 5: 参考稿字段与列表基线校正

Files:

  • Modify: data/mock.js
  • Modify: pages/genealogy/index.vue
  • Modify: components/GenealogyCard.vue
  • Modify: tests/g01-visual-contract.ps1

Interfaces:

  • Produces reference-matched visual fixture fields without changing any remote API contract.

  • Keeps the existing navigation and card select event unchanged.

  • Step 1: Write the failing visual-fixture contract

Require the four reference names/locations/counts, .current-info-divider, a row-direction .card-side, and no calendar-v1.png use in the list component.

  • Step 2: Run the contract and verify it fails

Run: powershell -ExecutionPolicy Bypass -File tests\g01-visual-contract.ps1
Expected: FAIL because the old demonstration fields, missing current divider, vertical role/arrow, and calendar icon are still present.

  • Step 3: Apply the smallest source correction

Replace only G01 mock fixture fields with the strings in the approved reference. Add the current-panel divider; render fixed vertical “家谱” list seal text; remove the list calendar icon; align .card-role and .card-chevron horizontally.

  • Step 4: Run focused verification

Run the G01 visual contract, PNG alpha audit, compile audit, SCSS injection audit, and Vue 3 entry audit. Keep Task 4 visual capture unchecked until the user accepts a new HBuilderX screenshot.

Reference in New Issue View Git Blame Copy Permalink