217 lines
9.0 KiB
Markdown
217 lines
9.0 KiB
Markdown
# N01 消息中心基准页 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:** 将 N01 重做为 N 系列消息中心视觉基准，并完成列表、已读、全部已读、加载、空、失败和审核跳转的 H5 审批状态。
|
||
|
||
**Architecture:** `pages/notification/n01-message-center.vue` 单独拥有本地演示数据、状态与交互；项目现有 `PageHeader`、`AppButton`、`AppLoading`、`AppToast` 和 `ModulePageBackground` 继续作为公共组件。N01 使用本模块独立的透明位图线框，不再引用家谱申请业务卡片。
|
||
|
||
**Tech Stack:** uni-app、Vue 3 `<script setup>`、SCSS、PowerShell 契约测试、Node CDP 运行时冒烟。
|
||
|
||
## Global Constraints
|
||
|
||
- 只处理 N01，不对接接口，不修改 N02 或其他模块页面。
|
||
- 不使用子代理或 worktree。
|
||
- 不执行 `git add`、`commit`、`push`、`reset` 或 `checkout`。
|
||
- 保留当前全部已修改、未跟踪和忽略文件。
|
||
- 所有 Toast、Loading 和按钮使用项目自定义组件。
|
||
- 每次只向用户展示一个状态；用户全部明确“通过”后才标记 N01 为 `[x]`。
|
||
- Android/HBuilderX 仍未验证，H5 截图只作为内部候选证据。
|
||
|
||
---
|
||
|
||
### Task 1: 锁定 N01 独立页面契约
|
||
|
||
**Files:**
|
||
- Create: `tests/n01-module-baseline-contract.ps1`
|
||
- Modify: `pages/notification/n01-message-center.vue`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `AppButton`、`AppLoading`、`AppToast`、`ModulePageBackground`、`PageHeader`。
|
||
- Produces: 可由 `?state=loading|empty|error` 复现的 N01 页面，以及 `.notice-state--list`、`.notice-state--loading`、`.notice-state--empty`、`.notice-state--error` DOM 状态类。
|
||
|
||
- [ ] **Step 1: 写入失败契约**
|
||
|
||
```powershell
|
||
$source = Get-Content 'pages/notification/n01-message-center.vue' -Raw -Encoding UTF8
|
||
$required = @(
|
||
'n01-notice-card.png', 'AppLoading', 'AppToast',
|
||
'notice-state--loading', 'notice-state--list',
|
||
'notice-state--empty', 'notice-state--error',
|
||
'未读', '已读', '全部已读', '前往入谱审核'
|
||
)
|
||
foreach ($token in $required) {
|
||
if (-not $source.Contains($token)) { throw "N01 missing contract token: $token" }
|
||
}
|
||
if ($source.Contains('application-status-card.png')) {
|
||
throw 'N01 must not reuse the genealogy application card'
|
||
}
|
||
Write-Output 'N01-MODULE-BASELINE-CONTRACT PASS'
|
||
```
|
||
|
||
- [ ] **Step 2: 运行契约并确认 RED**
|
||
|
||
Run: `powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/n01-module-baseline-contract.ps1`
|
||
|
||
Expected: FAIL，至少指出缺少 `n01-notice-card.png` 或仍引用 `application-status-card.png`。
|
||
|
||
- [ ] **Step 3: 只添加后续实现所需状态类和资产引用，保持测试继续驱动页面实现**
|
||
|
||
将根节点状态类补齐为：
|
||
|
||
```vue
|
||
<view class="notice-page" :class="`notice-state--${noticeState}`">
|
||
```
|
||
|
||
资产引用统一为：
|
||
|
||
```vue
|
||
<image src="/static/assets/modules/notification/transparent/n01-notice-card.png" mode="scaleToFill" />
|
||
```
|
||
|
||
### Task 2: 制作 N01 透明消息线框资产
|
||
|
||
**Files:**
|
||
- Create: `static/assets/modules/notification/transparent/n01-notice-card.png`
|
||
- Preserve: `tmp/imagegen/` 下的生成源图与后处理证据。
|
||
|
||
**Interfaces:**
|
||
- Produces: 约 3:1 比例、四角透明、无文字无底色的古金色消息卡线框 PNG。
|
||
|
||
- [ ] **Step 1: 用内置 ImageGen 生成可抠色源图**
|
||
|
||
Prompt:
|
||
|
||
```text
|
||
Use case: ui-mockup
|
||
Asset type: scalable message-list card frame for a Chinese genealogy mobile app
|
||
Primary request: a restrained traditional Chinese archival card border made only from thin antique-gold linework
|
||
Style/medium: refined Song/Yuan inspired ornamental line art, visually consistent with the existing R01 transparent person card
|
||
Composition/framing: wide horizontal 3:1 frame, symmetrical corners, quiet center, generous inner text area
|
||
Scene/backdrop: perfectly flat solid #00ff00 chroma-key background inside and outside the border
|
||
Constraints: no fill panel, no paper texture, no white background, no red marks, no bell icon, no text, no badge, no shadow, no watermark; do not use #00ff00 in the ornament
|
||
```
|
||
|
||
- [ ] **Step 2: 使用 imagegen 技能自带抠色脚本输出透明 PNG**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
& 'C:\Users\Rain\AppData\Local\Python\bin\python.exe' 'C:\Users\Rain\.codex\skills\.system\imagegen\scripts\remove_chroma_key.py' --input 'tmp/imagegen/n01-notice-card-chroma.png' --out 'static/assets/modules/notification/transparent/n01-notice-card.png' --auto-key border --soft-matte --transparent-threshold 12 --opaque-threshold 220 --despill
|
||
```
|
||
|
||
- [ ] **Step 3: 检查资产透明度和边缘**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
& 'C:\Users\Rain\AppData\Local\Python\bin\python.exe' -c "from PIL import Image; p='static/assets/modules/notification/transparent/n01-notice-card.png'; im=Image.open(p); assert im.mode=='RGBA'; a=im.getchannel('A'); assert a.getpixel((0,0))==0; assert a.getbbox(); print('N01-ASSET-ALPHA PASS', im.size)"
|
||
```
|
||
|
||
Expected: `N01-ASSET-ALPHA PASS`。
|
||
|
||
### Task 3: 实现 N01 列表与审批状态
|
||
|
||
**Files:**
|
||
- Modify: `pages/notification/n01-message-center.vue`
|
||
- Test: `tests/n01-module-baseline-contract.ps1`
|
||
|
||
**Interfaces:**
|
||
- `readNotice(item)`：把单条 `item.unread` 设为 `false`。
|
||
- `markAllRead()`：把全部消息设为已读，并显示“已全部标记为已读”自定义 Toast。
|
||
- `restoreList()`：把错误态恢复为列表态。
|
||
- `toReview()`：保留 `/pages/genealogy/g10-application-review?genealogyId=...` 路由。
|
||
|
||
- [ ] **Step 1: 将模板整理为四个明确分支**
|
||
|
||
```vue
|
||
<AppLoading v-if="noticeState === 'loading'" text="正在整理消息" description="请稍候，正在同步家谱申请与家族提醒。" />
|
||
<view v-else-if="noticeState === 'list'" class="notice-list">...</view>
|
||
<view v-else class="notice-state-card">...</view>
|
||
```
|
||
|
||
列表卡片需使用以下文字层级：
|
||
|
||
```vue
|
||
<text class="notice-card__status" :class="{'is-unread': item.unread}">{{ item.unread ? '未读提醒' : '已读' }} · {{ item.time }}</text>
|
||
<text class="notice-card__title">{{ item.title }}</text>
|
||
<text class="notice-card__summary">{{ item.content }}</text>
|
||
```
|
||
|
||
- [ ] **Step 2: 统一空态与失败态操作**
|
||
|
||
```vue
|
||
<AppButton
|
||
block
|
||
:type="noticeState === 'error' ? 'secondary' : 'primary'"
|
||
:label="noticeState === 'error' ? '重新查看' : '前往入谱审核'"
|
||
@click="noticeState === 'error' ? restoreList() : toReview()"
|
||
/>
|
||
```
|
||
|
||
- [ ] **Step 3: 让卡片自适应内容并移除白底来源**
|
||
|
||
```scss
|
||
.notice-content { padding: 24rpx 28rpx 100rpx; }
|
||
.notice-list { display: flex; flex-direction: column; gap: 18rpx; }
|
||
.notice-card { position: relative; min-height: 220rpx; }
|
||
.notice-card__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||
.notice-card__copy { position: relative; z-index: 1; padding: 34rpx 44rpx; }
|
||
.notice-card__status { color: $ink-muted; }
|
||
.notice-card__status.is-unread { color: $brand-red; font-weight: 700; }
|
||
.notice-card__title { margin-top: 8rpx; color: $ink; font-family: STKaiti, KaiTi, serif; font-weight: 700; }
|
||
.notice-review-action { margin: 30rpx auto 0; }
|
||
```
|
||
|
||
- [ ] **Step 4: 运行聚焦契约并确认 GREEN**
|
||
|
||
Run: `powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/n01-module-baseline-contract.ps1`
|
||
|
||
Expected: `N01-MODULE-BASELINE-CONTRACT PASS`。
|
||
|
||
### Task 4: 运行时验证并进入逐状态审批
|
||
|
||
**Files:**
|
||
- Create: `docs/design/screens/runtime/2026-07-19/n01-review/*.png`
|
||
- Modify only after all explicit approvals: `docs/验收规划.md`
|
||
|
||
**Interfaces:**
|
||
- Consumes: 单个现有 Chrome 项目标签页和调试端口 9222。
|
||
- Produces: 412×915 的逐状态审批画面，以及四档响应式内部证据。
|
||
|
||
- [ ] **Step 1: 运行静态和运行时检查**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/n01-module-baseline-contract.ps1
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/root-pages-visual-contract.ps1
|
||
node tests/root-pages-runtime-smoke.js
|
||
node tests/module-series-responsive-runtime-smoke.js
|
||
git diff --check
|
||
```
|
||
|
||
Expected: 所有测试输出 `PASS`；`git diff --check` 退出码为 0，允许已有行尾提示。
|
||
|
||
- [ ] **Step 2: 复用同一标签页显示 412×915 正常列表态**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
node scripts/capture-chrome-page.js 'http://localhost:5173/#/pages/notification/n01-message-center' '.notice-state--list' 'docs/design/screens/runtime/2026-07-19/n01-review/01-list-412x915.png' 412 915
|
||
```
|
||
|
||
Inspect: 打开保存的截图，确认没有白底块、裁切、错误页面或半加载内容，再等待用户审批。
|
||
|
||
- [ ] **Step 3: 按顺序展示其余状态**
|
||
|
||
顺序：单条已读 → 全部已读 Toast → 加载 → 空 → 失败 → 审核跳转。每次只显示一个状态并等待用户确认。
|
||
|
||
- [ ] **Step 4: 内部检查四档尺寸**
|
||
|
||
尺寸：`320×568`、`360×640`、`360×800`、`412×915`。发现问题只返工 N01；未发现问题不逐档打断用户。
|
||
|
||
- [ ] **Step 5: 所有状态明确通过后更新审批记录**
|
||
|
||
仅把 `docs/验收规划.md` 的 N01 行从 `[~]` 改为 `[x]`，随后重新运行 Task 4 Step 1 的全部验证。
|