160 lines
6.8 KiB
Markdown
160 lines
6.8 KiB
Markdown
# 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:
|
||
|
||
```powershell
|
||
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
|
||
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:
|
||
|
||
```vue
|
||
<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:
|
||
|
||
```vue
|
||
<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
|
||
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
|
||
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:
|
||
|
||
```powershell
|
||
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.
|