jiapuapp/docs/superpowers/plans/2026-07-19-t07-search-member-card-redesign.md

T07 Search and Member Card Redesign 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. This project explicitly forbids subagents and git commits.

Goal: Remove T07 search/card white gutters and rebuild the member list with approved transparent project assets and clearer information hierarchy.

Architecture: Keep all route state and interaction logic inside the existing T07 page. Replace only the two incorrect opaque skins with existing transparent G01-approved assets, then tighten T07-scoped markup and styles. Protect the asset and layout contract with the existing PowerShell contract test and verify behavior in the already-open Chrome tab.

Tech Stack: uni-app, Vue 3 <script setup>, SCSS, PowerShell contract tests, Chrome DevTools Protocol runtime smoke.

Global Constraints

• Modify only T07 and its directly related test/evidence files.
• Do not modify page header, current-genealogy context, route states, search behavior, or member navigation behavior.
• Use t07-search-input-frame.png for search and list-slip-frame.png for cards; do not add a generation seal or draw replacements in CSS/SVG.
• Do not use g06-search-input-wide.png or application-status-card.png in T07.
• Do not run git add, commit, push, reset, or checkout.
• Reuse the existing Chrome project tab; do not open another browser or project tab.
• H5 evidence is only candidate evidence; Android/HBuilderX remains unverified.

---

Task 1: Lock the transparent-asset contract

Files:

• Modify: tests/t07-module-baseline-contract.ps1
• Test: tests/t07-module-baseline-contract.ps1

Interfaces:

• Consumes: raw source of pages/tree/t07-member-directory.vue.

• Produces: assertions that T07 uses the approved transparent skins and no longer references the two opaque skins.

• Step 1: Write the failing assertions

Add assertions equivalent to:

Assert-Match 'transparent/list-slip-frame\.png' 'T07 search and cards must use the approved transparent frame.'
if ($page -match 'g06-search-input-wide\.png|application-status-card\.png') {
  throw 'T07 must not reuse opaque search or application-status skins.'
}
if ($page -match 'row-seal-frame\.png|directory-card__seal') {
  throw 'T07 member cards must not repeat generation information in decorative seals.'
}
Assert-Match 'class="directory-card__status"' 'T07 member identity or profile state must use a dedicated status label.'

• Step 2: Run the contract and verify RED

Run:

powershell -ExecutionPolicy Bypass -File tests/t07-module-baseline-contract.ps1

Expected: FAIL because the current page still references g06-search-input-wide.png and application-status-card.png and has no seal/status structure.

Task 2: Implement the approved T07 visual structure

Files:

• Modify: pages/tree/t07-member-directory.vue
• Test: tests/t07-module-baseline-contract.ps1

Interfaces:

• Consumes: existing members, filteredMembers, searchMembers, openMember, and route-state behavior without signature changes.

• Produces: transparent framed search field and compact transparent member cards.

• Step 1: Replace the search skin

Use the approved transparent frame while retaining the existing input/action bindings:

<image class="directory-search__frame" src="/static/assets/modules/genealogy/transparent/list-slip-frame.png" mode="scaleToFill" />

Set the search field to a 44px-or-greater touch height, strengthen placeholder contrast, and keep the page background visible through the frame.

• Step 2: Replace member-card markup

Each directory-card must contain:

<image class="directory-card__frame" src="/static/assets/modules/genealogy/transparent/list-slip-frame.png" mode="scaleToFill" />
<view class="directory-card__copy">
  <text class="directory-card__name">{{ item.name }}</text>
  <text class="directory-card__meta">第 {{ item.generation }} 世 · {{ item.generationName }} · {{ item.branch }}</text>
  <text class="directory-card__status">{{ item.note }}</text>
</view>

• Step 3: Tighten card layout

Use one consistent card height between 192rpx and 216rpx at 412px width, vertically center the seal/copy, keep the status visually subordinate, and add a max-width 340px media rule that reduces seal size and spacing without hiding the member name or metadata.

• Step 4: Run the focused contract and verify GREEN

Run:

powershell -ExecutionPolicy Bypass -File tests/t07-module-baseline-contract.ps1

Expected: T07-MODULE-BASELINE-CONTRACT PASS.

Task 3: Regression and runtime visual verification

Files:

• Verify: pages/tree/t07-member-directory.vue
• Verify: tests/t07-module-baseline-runtime-smoke.js
• Create evidence only under: docs/design/screens/runtime/2026-07-19/t07-redesign/

Interfaces:

• Consumes: already-running H5 service on 5173 and existing Chrome CDP endpoint on 9222.

• Produces: focused regression output, one-tab runtime results, and current-state screenshots.

• Step 1: Run focused and related regression tests

Run:

powershell -ExecutionPolicy Bypass -File tests/t07-module-baseline-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/t07-t08-all-states-visual-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/module-app-loading-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/t03-t08-member-flow-contract.ps1
node tests/t07-module-baseline-runtime-smoke.js

Expected: every command reports PASS.

• Step 2: Inspect the existing 412×915 tab

Verify all of the following in the same project tab:

• Search frame has no white band outside its border.

• Member cards have no white rectangle or texture break.

• No red application-status line or top-right status ornament remains.

• Three cards have equal width/height and the name is the primary focus.

• Search restores results and each card retains its click target.

• Step 3: Verify responsive sizes

In the same tab, check 320×568, 360×640, 360×800, and 412×915. Expected: no horizontal overflow, no clipped name/metadata, and natural vertical scrolling.

• Step 4: Run source hygiene checks

Run:

git diff --check
git status --short

Expected: no whitespace errors; all pre-existing modified/untracked files remain present. Do not stage or commit anything.

Self-Review

• Spec coverage: transparent search, compact member cards, information hierarchy, responsive sizes, behavior preservation, and evidence limits are covered.
• Placeholder scan: no TBD, TODO, deferred implementation, or unspecified asset choice remains.
• Interface consistency: existing state/search/navigation functions remain unchanged; all new class names are defined in Task 2 and asserted in Task 1.