222 lines
12 KiB
Markdown
222 lines
12 KiB
Markdown
# G-01 Visual Shell 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:** Rebuild the Android “我的家谱” G-01 page as the approved 家祠卷轴 design with verified local PNG assets and stable mock presentation data.
|
||
|
||
**Architecture:** pages/genealogy/index.vue owns local visual states only. It composes a heritage header, paper-slip list items, and safe bottom navigation; it does not make remote API calls during this visual-construction phase.
|
||
|
||
**Tech Stack:** uni-app, Vue 3 script setup, SCSS/rpx, local RGBA PNG/JPG assets, PowerShell checks.
|
||
|
||
## Global Constraints
|
||
|
||
- Android only; verify 360 × 800 and 320 × 568 without overlap.
|
||
- No API, authentication, packaging, dependency, or unrelated-flow changes.
|
||
- Every functional icon is a local RGBA PNG under static/assets/icons/.
|
||
- Header uses the confirmed original brand/jiapu-seal-logo.png in the left safe area; title is centered; notification dot renders only for unread messages.
|
||
- Tabbar is fixed at the bottom, has 64dp content plus Android navigation inset, and keeps the icon and label clear of the lower edge.
|
||
- Do not mark G-01 design complete until assets, normal/empty/loading states, and small-screen checks have evidence.
|
||
|
||
## File Responsibilities
|
||
|
||
| File | Responsibility |
|
||
| --- | --- |
|
||
| static/assets/icons/genealogy/*-v2.png | Four compact antique-gold G-01 shortcut icons. |
|
||
| static/assets/icons/action/add-v2.png | The compact 新建家谱 icon. |
|
||
| static/assets/icons/common/chevron-right-v2.png | Compact right-arrow asset for the paper-slip list row. |
|
||
| static/assets/icons/tab/*-v4.png | Default and active 24dp tab icon pairs. |
|
||
| components/PageHeader.vue | Heritage header, original Logo, notification PNG and optional dot. |
|
||
| components/AppTabbar.vue | Fixed Android-safe three-tab navigation. |
|
||
| components/GenealogyCard.vue | Compact paper-slip genealogy list row. |
|
||
| pages/genealogy/index.vue | G-01 content, local state and route actions. |
|
||
| tests/g01-visual-contract.ps1 | Asset and static page-contract checks. |
|
||
|
||
## Task 1: Produce and register G-01 visual assets
|
||
|
||
**Files:**
|
||
- Create: static/assets/icons/genealogy/tree-v2.png
|
||
- Create: static/assets/icons/genealogy/members-v2.png
|
||
- Create: static/assets/icons/genealogy/generation-poem-v2.png
|
||
- Create: static/assets/icons/genealogy/application-v2.png
|
||
- Create: static/assets/icons/action/add-v2.png
|
||
- Create: static/assets/icons/common/chevron-right-v2.png
|
||
- Create: static/assets/icons/tab/{genealogy,family,profile}-v4.png
|
||
- Create: static/assets/icons/tab/{genealogy,family,profile}-active-v4.png
|
||
- Create: tests/g01-visual-contract.ps1
|
||
- Modify: docs/design/G01_我的家谱_设计记录.md
|
||
|
||
**Interfaces:**
|
||
- Consumes: D1 icon rules and the G-01 asset table.
|
||
- Produces: the listed asset paths; no legacy static/icons/tab-*.png consumer remains.
|
||
|
||
- [x] **Step 1: Write the failing asset contract**
|
||
|
||
$root = Split-Path -Parent $PSScriptRoot
|
||
$requiredAssets = @(
|
||
'static/assets/icons/brand/jiapu-seal-logo.png',
|
||
'static/assets/icons/common/notice-v3.png',
|
||
'static/assets/icons/genealogy/tree-v2.png',
|
||
'static/assets/icons/genealogy/members-v2.png',
|
||
'static/assets/icons/genealogy/generation-poem-v2.png',
|
||
'static/assets/icons/genealogy/application-v2.png',
|
||
'static/assets/icons/action/add-v2.png',
|
||
'static/assets/icons/common/chevron-right-v2.png',
|
||
'static/assets/icons/tab/genealogy-v4.png',
|
||
'static/assets/icons/tab/genealogy-active-v4.png',
|
||
'static/assets/icons/tab/family-v4.png',
|
||
'static/assets/icons/tab/family-active-v4.png',
|
||
'static/assets/icons/tab/profile-v4.png',
|
||
'static/assets/icons/tab/profile-active-v4.png'
|
||
)
|
||
foreach ($asset in $requiredAssets) {
|
||
if (-not (Test-Path -LiteralPath (Join-Path $root $asset))) {
|
||
throw "Missing G-01 visual asset: $asset"
|
||
}
|
||
}
|
||
Write-Output 'PASS G-01 visual contract'
|
||
|
||
- [x] **Step 2: Run the contract and confirm it fails**
|
||
|
||
Run: powershell -ExecutionPolicy Bypass -File C:\Users\Rain\Desktop\job\jiapuapp\tests\g01-visual-contract.ps1
|
||
|
||
Expected: an error that names tree-v2.png as missing.
|
||
|
||
- [x] **Step 3: Generate and validate every icon**
|
||
|
||
Generate each asset separately as a tight 96 × 96px transparent PNG. Shortcut and add icons use antique-gold #B58A4B with the approved restrained double-line style. Tab pairs use the same 24dp silhouette in default ink #342A24 and selected cinnabar #A33B2B; no text, clouds, leaves, shadows, or excess transparent padding.
|
||
|
||
- [x] **Step 4: Inspect and register accepted assets**
|
||
|
||
Inspect Tabs at 46rpx and shortcuts at 48rpx. Reject opaque corners, excess canvas padding, unrecognizable semantics, and any default/selected silhouette mismatch. Update the G-01 asset table with actual path, 96 × 96px, transparency result, and display-size result. Do not tick page-completion boxes yet.
|
||
|
||
- [x] **Step 5: Re-run the asset contract**
|
||
|
||
Expected: PASS G-01 visual contract.
|
||
|
||
## Task 2: Rebuild header and Android-safe Tabbar
|
||
|
||
**Files:**
|
||
- Modify: components/PageHeader.vue
|
||
- Modify: components/AppTabbar.vue
|
||
- Modify: tests/g01-visual-contract.ps1
|
||
|
||
**Interfaces:**
|
||
- Produces: PageHeader title=我的家谱 with unreadCount, and AppTabbar active=genealogy.
|
||
|
||
- [x] **Step 1: Extend the failing static contract**
|
||
|
||
$header = Get-Content -Raw -Encoding UTF8 (Join-Path $root 'components/PageHeader.vue')
|
||
$tabbar = Get-Content -Raw -Encoding UTF8 (Join-Path $root 'components/AppTabbar.vue')
|
||
if ($header -notmatch 'jiapu-seal-logo\.png') { throw 'Header does not use the approved brand PNG.' }
|
||
if ($header -notmatch 'notice-v3\.png') { throw 'Header does not use the approved notice PNG.' }
|
||
if ($header -notmatch 'unreadCount\s*>\s*0') { throw 'Header badge is not conditional on unread count.' }
|
||
if ($tabbar -match '/static/icons/tab-') { throw 'Tabbar still references rejected legacy tab assets.' }
|
||
if ($tabbar -notmatch 'safe-area-inset-bottom') { throw 'Tabbar has no Android safe-area padding.' }
|
||
if ($tabbar -notmatch 'font-size:\s*24rpx') { throw 'Tabbar label size is below the approved G-01 size.' }
|
||
|
||
- [x] **Step 2: Confirm the contract fails before components change**
|
||
|
||
Run the focused contract.
|
||
|
||
Expected: failure describing the legacy header or Tabbar implementation.
|
||
|
||
- [x] **Step 3: Implement the header**
|
||
|
||
Use image-only controls: an 88rpx Logo touch area, centered title, and equal-width 88rpx notice touch area using notice-v3.png. Add v-if unreadCount > 0 for the cinnabar dot. Use the header line-art PNG over a cinnabar base. Do not render text labels for Logo or notification action.
|
||
|
||
- [x] **Step 4: Implement the Tabbar**
|
||
|
||
Map every item to its v4 default/active PNG paths and choose by active === item.key. Keep a paper-white fixed bar, visible content height 128rpx, padding-bottom env(safe-area-inset-bottom), icon 48rpx, label 24rpx, and each touch target at least 96rpx. Do not use gap.
|
||
|
||
- [x] **Step 5: Re-run the contract**
|
||
|
||
Expected: PASS G-01 visual contract.
|
||
|
||
## Task 3: Rebuild G-01 content and presentation states
|
||
|
||
**Files:**
|
||
- Modify: components/GenealogyCard.vue
|
||
- Modify: pages/genealogy/index.vue
|
||
- Modify: tests/g01-visual-contract.ps1
|
||
|
||
**Interfaces:**
|
||
- Consumes: genealogies and notifications from @/data/mock.js.
|
||
- Produces: isLoading, hasGenealogies, createdGenealogies, and joinedGenealogies visual branches.
|
||
|
||
- [x] **Step 1: Add the failing local-state contract**
|
||
|
||
$page = Get-Content -Raw -Encoding UTF8 (Join-Path $root 'pages/genealogy/index.vue')
|
||
if ($page -match "from '@/utils/api\.js'") { throw 'G-01 visual phase must not call the remote API.' }
|
||
foreach ($state in @('isLoading', 'hasGenealogies', 'createdGenealogies', 'joinedGenealogies')) {
|
||
if ($page -notmatch $state) { throw "G-01 is missing presentation state: $state" }
|
||
}
|
||
foreach ($asset in @('tree-v2.png', 'members-v2.png', 'generation-poem-v2.png', 'application-v2.png', 'add-v2.png')) {
|
||
if ($page -notmatch [regex]::Escape($asset)) { throw "G-01 does not consume $asset" }
|
||
}
|
||
|
||
- [x] **Step 2: Confirm the contract fails on the legacy page**
|
||
|
||
Expected: failure for the API import or missing visual state.
|
||
|
||
- [x] **Step 3: Implement the page state owner**
|
||
|
||
Remove appApi, genealogyContext, and the mounted API call. Import genealogies and notifications from @/data/mock.js, then define:
|
||
|
||
const isLoading = ref(false)
|
||
const list = ref(genealogies)
|
||
const hasGenealogies = computed(() => list.value.length > 0)
|
||
const createdGenealogies = computed(() => list.value.filter((item, index) => index === 0))
|
||
const joinedGenealogies = computed(() => list.value.filter((item, index) => index > 0))
|
||
|
||
Retain only route navigation: tree /pages/tree/index, members /pages/genealogy/detail, generation poem /pages/content/list?type=poem, applications /pages/genealogy/applications, create /pages/genealogy/create, search /pages/genealogy/search, and notifications /pages/notification/index.
|
||
|
||
- [x] **Step 4: Implement approved compact layout**
|
||
|
||
Compose heritage header, current-genealogy paper slip, four equal shortcut entries with v2 assets, separate 我创建的 / 我加入的 groups, compact paper-slip rows, and the add button. Implement a distinct loading state and an empty paper/scroll state with 新建家谱 and 搜索并申请加入. Apply paper texture to the page and mountain/bamboo only to the lower content region. Add bottom content padding that clears the fixed Tabbar.
|
||
|
||
- [x] **Step 5: Simplify GenealogyCard.vue**
|
||
|
||
Use a seal-style surname block, title, short location/member metadata, identity label, and common/chevron-right-v2.png. Remove the legacy navy cover, motto, and active-member count. Ensure long copy uses min-width: 0, overflow: hidden, and text-overflow: ellipsis.
|
||
|
||
- [x] **Step 6: Re-run the focused contract**
|
||
|
||
Expected: PASS G-01 visual contract.
|
||
|
||
## Task 4: Verify and update the project record
|
||
|
||
**Files:**
|
||
- Modify: docs/design/G01_我的家谱_设计记录.md
|
||
- Modify: docs/规划.md
|
||
- Test: tests/g01-visual-contract.ps1
|
||
- Test: tests/compile-audit.ps1
|
||
- Test: tests/uni-scss-injection.ps1
|
||
|
||
- [x] **Step 1: Run the automated checks**
|
||
|
||
Run:
|
||
|
||
powershell -ExecutionPolicy Bypass -File C:\Users\Rain\Desktop\job\jiapuapp\tests\g01-visual-contract.ps1
|
||
powershell -ExecutionPolicy Bypass -File C:\Users\Rain\Desktop\job\jiapuapp\tests\compile-audit.ps1
|
||
powershell -ExecutionPolicy Bypass -File C:\Users\Rain\Desktop\job\jiapuapp\tests\uni-scss-injection.ps1
|
||
|
||
Expected: each command prints its PASS result.
|
||
|
||
- [ ] **Step 2: Verify at Android reference sizes**
|
||
|
||
Inspect 360 × 800 and 320 × 568. Confirm no overlap among Logo, title, and bell; notice dot only appears with unread entries; shortcut labels remain one line; list text truncates instead of overlaps; create action clears the Tabbar; all three Tab labels remain fully visible above system navigation.
|
||
|
||
- [ ] **Step 3: Update only verified design state**
|
||
|
||
In the G-01 record, tick only conditions backed by Tasks 1–2 and the two viewport checks. In the overall planning document, leave G-01 unchecked if even one state, asset, or viewport condition remains incomplete; otherwise record visual shell implemented and verified.
|
||
|
||
- [ ] **Step 4: Commit only when Git becomes available**
|
||
|
||
If a Git worktree exists, commit changed visual-shell files with message: feat: build G01 genealogy visual shell. If Git remains unavailable, report that no commit was created and do not initialize a repository.
|
||
|
||
## Plan Self-Review
|
||
|
||
- Task 1 covers local assets and transparency checks.
|
||
- Task 2 covers the Logo, conditional notification dot, and safe Tabbar.
|
||
- Task 3 covers G-01 normal, loading, and empty states plus approved compact layout.
|
||
- Task 4 requires automated and small-screen verification before any completion status changes.
|