家谱APP首页样式设计完成，落地80%
This commit is contained in:
@@ -0,0 +1,230 @@
|
||||
# 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.
|
||||
|
||||
- [x] **Step 1: Write the failing asset contract**
|
||||
|
||||
Add the six paths to `$requiredAssets`, then add these assertions to `tests/g01-visual-contract.ps1`:
|
||||
|
||||
```powershell
|
||||
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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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:
|
||||
|
||||
```powershell
|
||||
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.' }
|
||||
```
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **Step 3: Implement the minimum current-panel markup**
|
||||
|
||||
Replace the pure red `current-seal` block with an image layer and dynamic text overlay:
|
||||
|
||||
```vue
|
||||
<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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **Step 1: Write the failing card-layout contract**
|
||||
|
||||
Require `seal-row-frame-v1.png` and an explicit `.card-detail-row`:
|
||||
|
||||
```powershell
|
||||
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.' }
|
||||
```
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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:
|
||||
|
||||
```vue
|
||||
<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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **Step 2: Run focused verification**
|
||||
|
||||
Run:
|
||||
|
||||
```powershell
|
||||
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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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.
|
||||
|
||||
- [x] **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
Block a user