# Prompt — Phase A4.1 NotificationPage sample transform

> **角色**：executor
> **范围**：把 [`playground/docs/pages/NotificationPage.vue`](../../../playground/docs/pages/NotificationPage.vue) 改造为消费 generator 输出 + 用 FigmaMembersGrid 渲染 Figma Coverage 段——T2 sample 范式应用第 1 个非样板 page，验证 A4 batch 范式。
>
> ⚠️ **不要 commit / 不要 git add**——dirty 累积到 Phase A4.1 通过后 commit。
> ⚠️ 完成后 **STOP**，按底部"完成报告"格式回报；**完成报告必须含§4.X 完整改动清单段**（让 silent 修改无法藏匿，新教训 9dc00ac）。
> ⚠️ **不扩范围**：只动 `playground/docs/pages/NotificationPage.vue` 一个文件 + 重跑 audit 产物。**不动** generator / canonical / types.ts / grid 组件 / prop-aliases.md / backlog.md / 任何其它 page。

---

## §0 — Plan owner 已定裁定

### NotificationPage 现状

- 总 387 行
- 5 个 docs-section：Figma Coverage / Development Usage / Dark Theme Members / Light Theme Members / Notification API
- ε audit 7 findings：figmaPage const / figmaNodeIds const / "variant count=14" / "nodeId=1408:17154" 等
- α audit fail（"Cannot statically resolve siteTheme passed to FigmaMembersGrid"——Notification 有 theme axis 但 page 未注入 site-theme）
- β audit 2 warn（v-for `item.status` dynamic 不可解）
- γ audit fail（无 grid usage）
- δ audit pass

### Notification figma 真源对照

- 14 variants = 2 themes × 7 statuses
- variant.theme 字段（commit c623544 修后）已派生：7 dark + 7 light
- axes: `theme` (`['dark', 'light']`) + `status` (`['warning', 'secondary warning', 'error', 'info', 'pop confirm', 'quick confirm', 'side pop']`)
- canonical Notification props: `status` / `theme` / `title` / `description` / `cancelText` / `confirmText` / `closable`

### 改造裁定

| 改 / 不改 | 内容 |
|---|---|
| **删** | `const figmaPage = ...` (line 6) |
| **删** | `const figmaNodeIds = ['1408:17154']` (line 7) |
| **删** | `const notificationStatuses = [...]` 手写数组（含 darkNodeId / lightNodeId 字面量，line 19-58 左右） |
| **删** | template 内 `'variant count=14'` / `'nodeId=1408:17154'` / `'变体数=14'` 等字面量 |
| **删** | 老的 Figma Coverage 内手写 chips / status cards 渲染（line 96-125 整个 section 内部内容替换） |
| **加 import** | `import { notificationFigmaMembers } from '@/figma-data/normalized/docs-figma-members/notification'` 和 type `NotificationFigmaProps` |
| **加 import** | `import FigmaMembersGrid from '../components/FigmaMembersGrid.vue'` |
| **替换 Figma Coverage 段内容** | `<FigmaMembersGrid :members="notificationFigmaMembers" :component="Notification" :site-theme="'dark'" />` |
| **保留** | Development Usage 段 (line 126) |
| **保留** | Dark Theme Members 段 (line 141) —— 手写 "developer view" 对照段（类似 Badge Tag/Type/Color 三段对照），**但 v-for 源改为 computed 派生自 generator** |
| **保留** | Light Theme Members 段 (line 156) —— 同上 |
| **保留** | Notification API 段 (line 207) —— API 表段，plan §1.3 排除项 |
| **保留** | i18n `t()` 包装 |
| **保留** | Try It / 交互 demo 区块（如有） |

### Dark/Light Theme Members 段 v-for 改造

当前 `v-for="item in notificationStatuses"` 接 hardcoded array。改造后：

- 加 computed `notificationStatusList` 派生自 `notificationFigmaMembers.axes.find(a => a.codeProp === 'status')?.values ?? []`（参考 BadgePage `badgeColorOptions` 模式）
- v-for 接 computed 输出
- 删 `notificationStatuses` 数组

预期效果：β audit 现有 `item.status` dynamic warn 修后消失（值能静态 resolve）。

### Site theme 注入

`<FigmaMembersGrid :site-theme="'dark'" />` 静态字面量（与 Badge / Tooltip 一致）。grid 自动 filter 7 dark variants（`hasThemeVariants=true` after commit c623544）。

### 预期 audit 5+1 verdict（修后）

| Audit | Verdict | Findings |
|---|---|---|
| α theme isolation | **pass** | 0 (site-theme 静态可解 + variant.theme 字段已存在 + filter 工作) |
| β figma axis coverage | **pass** | 0 (notificationStatuses 删除 → 无 dynamic warn) |
| γ runtime fabrication | **pass** | 0 (grid usage + 无 marker leak) |
| δ token purity | **pass** | 0 (NotificationPage 现状 δ 就是 pass) |
| ε handwritten figma | **pass** | 0 (无手写 figma 字面量 + 含 generator import) |

### 17 其他 audit reports baseline regression

跑完 audit 全量后，17 个非 NotificationPage 报告必须**byte-identical 除 timestamps**。任一其它 page 4+1 verdict 偏离 → STOP 报告。

### 不动

- `figma-sync/generate-docs-figma-members.mjs`（A4.0 已 commit c623544）
- `figma-data/normalized/docs-figma-members/types.ts` / `*.ts`（generator 输出不变，本轮 audit 重跑会覆盖 timestamps 但内容不变）
- `figma-sync/audit-page-t2-sample.mjs`（audit 算法不动）
- `playground/docs/pages/*.vue` 除 NotificationPage（其它 page A4.2+ 范围）
- `playground/docs/components/FigmaMembersGrid.vue`
- `src/canonical/Notification.vue` / 其他 canonical
- `src/design-system/translation/prop-aliases.md`
- `docs/internal/backlog.md`

---

## §1 — 必读输入

按顺序：

1. [`AGENTS.md`](../../../AGENTS.md) — 硬规则
2. [`docs/meta-rules.md`](../../meta-rules.md) — 反模式 + 触发器 G
3. [`docs/internal/backlog.md`](../../backlog.md) — 看 backlog 是否影响
4. [`docs/internal/retrospection/2026-05-06-t2-sample-extension-and-phase-a-bootstrap.md`](../../retrospection/2026-05-06-t2-sample-extension-and-phase-a-bootstrap.md) — 复盘"复盘后续发现"段：scope creep / silent 修改约束
5. [`playground/docs/pages/NotificationPage.vue`](../../../playground/docs/pages/NotificationPage.vue) — 待改造，387 行
6. [`playground/docs/pages/BadgePage.vue`](../../../playground/docs/pages/BadgePage.vue) — Badge 已改造范式参考
7. [`playground/docs/pages/TooltipPage.vue`](../../../playground/docs/pages/TooltipPage.vue) — Tooltip 已改造范式参考（含 theme axis case）
8. [`figma-data/normalized/docs-figma-members/notification.ts`](../../../figma-data/normalized/docs-figma-members/notification.ts) — generator 输出（含 14 个 variant.theme 字段，commit c623544）
9. [`playground/docs/components/FigmaMembersGrid.vue`](../../../playground/docs/components/FigmaMembersGrid.vue) — grid 组件 API
10. [`docs/internal/t2-sample-audit-report.NotificationPage.md`](../../t2-sample-audit-report.NotificationPage.md) — 改造前 baseline (commit c623544 时 ε=fail / α=fail / β=pass with warn / γ=fail / δ=pass)
11. [`figma-data/normalized/docs-figma-members/types.ts`](../../../figma-data/normalized/docs-figma-members/types.ts) — DocsFigmaMembers schema

---

## §2 — 任务清单

### 任务 2.1 — NotificationPage.vue 改造

按 §0 改造裁定执行。

### 任务 2.2 — typecheck

```bash
pnpm exec vue-tsc --noEmit
```

预期 0 错误。

### 任务 2.3 — 跑 audit 全量

```bash
node figma-sync/audit-page-t2-sample.mjs
```

### 任务 2.4 — 验 NotificationPage 5+1 verdict 全 pass

```bash
grep "^| " docs/internal/t2-sample-audit-report.NotificationPage.md | head -8
# 期望: α/β/γ/δ/ε 全 pass · findings=0
```

### 任务 2.5 — 17 其他 audit reports baseline regression

```bash
git diff --stat docs/internal/t2-sample-audit-report.*.md
# 期望: NotificationPage 实质 diff（verdict 转 + findings 清空）
#       其他 17 个仅 timestamps 变化
```

任一其它 page 出现非 timestamp 行 diff → STOP 报告。

### 任务 2.6 — 视觉验收（**`pnpm dev` 跑后等 plan owner 截图确认，不要自行判断 OK**）

```bash
pnpm dev
# 浏览器开 NotificationPage 验：
#   - Figma Coverage 段渲染 7 个 dark theme variants（不是 14——theme isolation 工作）
#   - 每个 cell 含 Notification 实例 + label "theme=dark, status=..."
#   - Dark Theme Members 段（手写对照）保留 + 用 computed 派生 status list
#   - Light Theme Members 段同上
#   - Notification API 表完好
#   - i18n / Try It / 其他 page 内容无 regression
```

executor 启动 dev server 后等用户截图，**不要自行判断"视觉 OK"**。

---

## §3 — 验收清单

- [ ] NotificationPage.vue 删手写 figma 字面量（figmaPage / figmaNodeIds / notificationStatuses array / "variant count=14" / "nodeId=1408:17154"）
- [ ] 加 generator import（notificationFigmaMembers + NotificationFigmaProps）
- [ ] 加 FigmaMembersGrid import + Figma Coverage 段用 grid
- [ ] Dark/Light Theme Members 段 v-for 改 computed 派生 generator
- [ ] `:site-theme="'dark'"` 静态字面量
- [ ] 5+1 audit verdict 全 pass · findings=0（NotificationPage）
- [ ] 17 其他 audit reports 一致除 timestamps（regression check）
- [ ] `pnpm exec vue-tsc --noEmit` 0 错误
- [ ] dev 视觉**等 plan owner 截图确认**，不自行判断
- [ ] generator / types.ts / canonical / 其他 page / prop-aliases / backlog 没动
- [ ] 没 commit / 没 git add

---

## §4 — 完成报告

```
## Phase A4.1 NotificationPage Sample 完成报告

### 改动文件 (按 prompt 任务的预期 scope)
- playground/docs/pages/NotificationPage.vue (改 +X/-Y 行)
- docs/internal/t2-sample-audit-report.NotificationPage.md (重生, 实质 diff)
- docs/internal/t2-sample-audit-report.<其他 17 page>.md (重生, 仅 timestamps)

### §4.X 完整改动清单 (All M / A / D, 含 prompt 范围外)
[执行 git status --short 后贴出全部 M/A/D 文件，每个 ≤ 1 行 描述]
[如有 prompt 范围外的修改，标注 ⚠️ 并解释（避免 silent scope creep）]

### NotificationPage 5+1 verdict
- α theme isolation: <verdict>
- β figma axis coverage: <verdict>
- γ runtime fabrication: <verdict>
- δ token purity: <verdict>
- ε handwritten figma: <verdict>

### 17 其他 audit reports baseline regression
- byte-identical 除 timestamps: <list of 17 page names if all pass>
- 偏离描述: <如有 / 无>

### typecheck
- vue-tsc: 0 错误

### dev 视觉验收
- pnpm dev 启动: <OK / 失败描述>
- 等 plan owner 截图确认（executor 不自行判断 OK）

### 验收 self-check
- [ ] 删手写 figma 字面量
- [ ] generator import + grid usage
- [ ] computed 派生 status list
- [ ] site-theme 静态注入
- [ ] 5+1 全 pass
- [ ] 17 baseline 一致
- [ ] vue-tsc 0 错
- [ ] 视觉等 plan owner 拍
- [ ] 不动 generator / canonical / 其他 page / 真源 .md
- [ ] 没 commit
- [ ] §4.X 完整改动清单已列

### 未解决项 / blocker
[如有，列出；无则写"无"]

STOP — 等 plan owner 复审 + 截图确认 → commit Phase A4.1 → 进 A4.2 (机械批 9 page)。
```

---

## §5 — 严守约束总览

- ⚠️ **不要 commit / 不要 git add**
- ⚠️ §0 裁定**最终**（改造范围 / Dark/Light Members 段保留 + computed 派生 / site-theme 静态）
- ⚠️ 仅动 NotificationPage.vue 1 文件 + 重跑 audit 产物
- ⚠️ 不动 generator / canonical / 其他 page / 真源 .md
- ⚠️ 17 其他 baseline regression 必须 pass
- ⚠️ 视觉验收**不自行判断**——`pnpm dev` 启动后等 plan owner 截图
- ⚠️ §4 完成报告**必须含 §4.X 完整改动清单段**——任何 prompt 范围外修改必须 surface 不能藏（新教训 9dc00ac）
- ⚠️ 完成 STOP，按 §4 格式回报