201 lines
8.9 KiB
Markdown
201 lines
8.9 KiB
Markdown
# F01 Family Feed Baseline 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, worktrees, staging, and commits.
|
||
|
||
**Goal:** Replace F01's application-status cards with a dedicated transparent family-letter content card and make all four shortcuts usable at every supported viewport.
|
||
|
||
**Architecture:** Keep F01 state and navigation logic unchanged. Add one F01-owned raster card skin under the family module, update only F01 markup/styles, and protect the asset, hierarchy, touch-target, and state contracts with a focused PowerShell test plus existing runtime coverage.
|
||
|
||
**Tech Stack:** uni-app, Vue 3 `<script setup>`, SCSS, built-in image editing/generation, PowerShell contract tests, Chrome DevTools Protocol runtime smoke.
|
||
|
||
## Global Constraints
|
||
|
||
- Modify only F01 and its directly related tests, candidate asset, specs, plan, and screenshots.
|
||
- Keep PageHeader, publish routing, family context, module background, AppTabbar, feed states, shortcut labels, and destination routes unchanged.
|
||
- Do not use `application-status-card.png` in F01.
|
||
- Use a real F01-owned transparent PNG for the family-letter card; do not draw the card with CSS, SVG, text symbols, or placeholders.
|
||
- Shortcut and primary-action touch heights must be at least 44 CSS px at 320, 360, and 412 widths.
|
||
- Do not run git add, commit, push, reset, or checkout.
|
||
- Reuse the existing Chrome project tab and debugging port 9222.
|
||
- H5 screenshots are candidate evidence only; Android/HBuilderX remains unverified.
|
||
|
||
---
|
||
|
||
### Task 1: Lock the F01 baseline contract
|
||
|
||
**Files:**
|
||
- Create: `tests/f01-module-baseline-contract.ps1`
|
||
- Test: `tests/f01-module-baseline-contract.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: UTF-8 source of `pages/family/f01-family-feed.vue`.
|
||
- Produces: assertions for the dedicated card asset, no application card, explicit content hierarchy, and 44px shortcut height.
|
||
|
||
- [ ] **Step 1: Write the failing contract**
|
||
|
||
Create a test that checks:
|
||
|
||
```powershell
|
||
$ErrorActionPreference = 'Stop'
|
||
$root = Split-Path -Parent $PSScriptRoot
|
||
$page = Get-Content -LiteralPath (Join-Path $root 'pages/family/f01-family-feed.vue') -Raw -Encoding utf8
|
||
|
||
function Assert-Match([string]$Pattern, [string]$Message) {
|
||
if ($page -notmatch $Pattern) { throw $Message }
|
||
}
|
||
|
||
Assert-Match 'modules/family/transparent/f01-family-letter-card\.png' 'F01 must use its dedicated transparent family-letter card.'
|
||
if ($page -match 'application-status-card\.png') { throw 'F01 must not reuse the application status card.' }
|
||
Assert-Match 'class="feed-card__title"' 'F01 must expose an explicit feed title hierarchy.'
|
||
Assert-Match 'class="feed-card__meta"' 'F01 must expose category and time as secondary metadata.'
|
||
Assert-Match 'class="feed-card__summary"' 'F01 must expose feed summary copy.'
|
||
Assert-Match 'class="feed-card__author"' 'F01 must expose the author as tertiary information.'
|
||
Assert-Match '(?s)\.feed-shortcut\s*\{[^}]*min-height:\s*44px;' 'F01 shortcuts must preserve a 44 CSS px touch height.'
|
||
|
||
Write-Output 'F01-MODULE-BASELINE-CONTRACT PASS'
|
||
```
|
||
|
||
- [ ] **Step 2: Run and verify RED**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -ExecutionPolicy Bypass -File tests/f01-module-baseline-contract.ps1
|
||
```
|
||
|
||
Expected: FAIL because F01 still uses `application-status-card.png` and has no dedicated class hierarchy.
|
||
|
||
### Task 2: Create the dedicated family-letter card asset
|
||
|
||
**Files:**
|
||
- Create: `static/assets/modules/family/transparent/f01-family-letter-card.png`
|
||
- Preserve: every existing asset under `static/assets/modules/family/` and `static/assets/modules/genealogy/`.
|
||
|
||
**Interfaces:**
|
||
- Consumes: the accepted F01 screenshot and `family-page-background-long.png` as palette/context references.
|
||
- Produces: one transparent PNG content-card skin used by list, empty, and error states.
|
||
|
||
- [ ] **Step 1: Generate one chroma-key candidate with built-in image generation**
|
||
|
||
Use this exact design intent:
|
||
|
||
```text
|
||
Use case: precise-object-edit / UI asset generation
|
||
Asset type: F01 family-feed content-card skin
|
||
Primary request: create a wide traditional Chinese family-letter card with a warm ivory rice-paper interior, one restrained thin antique-gold border, subtle family-letter corner details, and no content text.
|
||
Composition: wide horizontal card, approximately 3.1:1, designed for a 386×124 CSS px slot.
|
||
Palette: match the existing family module background and cinnabar header; keep the card quiet enough for feed text.
|
||
Background: perfectly flat #00ff00 chroma key only outside the card.
|
||
Constraints: no red vertical line, no top-right status ornament, no buttons, no labels, no icons, no shadows, no white rectangle outside the gold border, no watermark.
|
||
```
|
||
|
||
- [ ] **Step 2: Convert chroma key to alpha and crop transparent bounds**
|
||
|
||
Use the installed `remove_chroma_key.py` with the real Python launcher at `C:\Users\Rain\AppData\Local\Python\bin\python.exe`, validate transparent corners and visible-card bounds, then save the non-destructive final file at the path above.
|
||
|
||
### Task 3: Implement F01 content hierarchy and touch targets
|
||
|
||
**Files:**
|
||
- Modify: `pages/family/f01-family-feed.vue`
|
||
- Modify: `tests/root-pages-visual-contract.ps1`
|
||
- Test: `tests/f01-module-baseline-contract.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: existing `feedState`, `feeds`, `shortcuts`, `toPublish`, `openDetail`, and `openSection` without signature changes.
|
||
- Produces: dedicated card markup/classes and 44px shortcut controls.
|
||
|
||
- [ ] **Step 1: Replace list-card markup**
|
||
|
||
Each `feed-card` must use the new asset and explicit hierarchy:
|
||
|
||
```vue
|
||
<image class="feed-card__skin" src="/static/assets/modules/family/transparent/f01-family-letter-card.png" mode="scaleToFill" />
|
||
<view class="feed-card__copy">
|
||
<text class="feed-card__meta">{{ item.tag }} · {{ item.time }}</text>
|
||
<text class="feed-card__title">{{ item.title }}</text>
|
||
<text class="feed-card__summary">{{ item.content }}</text>
|
||
<text class="feed-card__author">发布人：{{ item.author }}</text>
|
||
</view>
|
||
```
|
||
|
||
- [ ] **Step 2: Replace empty/error panel skin**
|
||
|
||
Use the same F01 asset for `feed-state-card`, preserving current empty/error copy and retry behavior.
|
||
|
||
- [ ] **Step 3: Tighten styles**
|
||
|
||
Set `.feed-shortcut` to `min-height: 44px`, place one shared `a01-scroll-secondary-v3.png` skin behind a four-column equal-width shortcut grid, make the title the largest feed-card text, and keep two equal-height cards between 116 and 132 CSS px at 412px width. Do not add decorative CSS shapes.
|
||
|
||
- [ ] **Step 4: Update the root-page asset contract**
|
||
|
||
Replace only F01's required `application-status-card.png` entry with `f01-family-letter-card.png`; leave N01 and M01 requirements unchanged.
|
||
|
||
- [ ] **Step 5: Run and verify GREEN**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -ExecutionPolicy Bypass -File tests/f01-module-baseline-contract.ps1
|
||
```
|
||
|
||
Expected: `F01-MODULE-BASELINE-CONTRACT PASS`.
|
||
|
||
### Task 4: Regression and visual verification
|
||
|
||
**Files:**
|
||
- Verify: `pages/family/f01-family-feed.vue`
|
||
- Create evidence only under: `docs/design/screens/runtime/2026-07-19/f01-baseline-redesign/`
|
||
|
||
**Interfaces:**
|
||
- Consumes: running H5 service on 5173 and the unique existing Chrome project tab on 9222.
|
||
- Produces: regression output, responsive metrics, and accepted F01 screenshots.
|
||
|
||
- [ ] **Step 1: Run related contracts**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -ExecutionPolicy Bypass -File tests/f01-module-baseline-contract.ps1
|
||
powershell -ExecutionPolicy Bypass -File tests/f-series-all-states-visual-contract.ps1
|
||
powershell -ExecutionPolicy Bypass -File tests/root-pages-visual-contract.ps1
|
||
powershell -ExecutionPolicy Bypass -File tests/module-app-loading-contract.ps1
|
||
```
|
||
|
||
Expected: every command reports PASS.
|
||
|
||
- [ ] **Step 2: Run runtime coverage**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
node tests/root-pages-runtime-smoke.js
|
||
node tests/module-series-responsive-runtime-smoke.js
|
||
```
|
||
|
||
Expected: both commands report PASS and only one project tab is used.
|
||
|
||
- [ ] **Step 3: Capture and inspect F01 states**
|
||
|
||
Capture list, loading, empty, and error at 412×915. First present only the normal list state for user approval; keep later states hidden until requested.
|
||
|
||
- [ ] **Step 4: Self-audit responsive sizes**
|
||
|
||
Capture 320×568, 360×640, 360×800, and 412×915 list state. Verify no overflow, clipped text, card mismatch, shortcut below 44px, or Tab overlap. Restore the tab to 412×915.
|
||
|
||
- [ ] **Step 5: Run source hygiene checks**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
git diff --check
|
||
git status --short
|
||
```
|
||
|
||
Expected: no whitespace errors; all pre-existing modified and untracked files remain present. Do not stage or commit anything.
|
||
|
||
## Self-Review
|
||
|
||
- Spec coverage: dedicated family card, no white gutter/application semantics, hierarchy, states, 44px shortcuts, responsive sizes, interactions, and evidence limits are covered.
|
||
- Placeholder scan: no TBD, TODO, deferred asset decision, or unspecified command remains.
|
||
- Interface consistency: F01 state and navigation functions stay unchanged; new class names match the focused contract and implementation steps.
|