# Prompt — Phase A4.2-safe PaginationPage follow-up: 改回 single `<Pagination>` instance (反模式 #2 fix)

> **角色**：executor
> **范围**：精确 1 hunk fix — `playground/docs/pages/PaginationPage.vue` Figma Members 段的 v-if / v-else-if / v-else 3 分支硬编码 `type` 改回 single `<Pagination :type="item.type">` instance
>
> ⚠️ **不要 commit / 不要 git add**——与 PaginationPage sample 累积同一 commit
> ⚠️ 完成后 **STOP**，按 §4 完成报告格式回报；§4 必须含 §4.X 完整改动清单段
> ⚠️ **不扩范围**：只动 1 文件 1 hunk + 重跑 audit / typecheck

---

## §0 — Plan owner 已定裁定

### 现状（实证）

[`PaginationPage.vue:102-125`](../../../playground/docs/pages/PaginationPage.vue#L102) 当前用 v-if / v-else-if / v-else 拆 3 个 `<Pagination>` 块，每个块硬编码 `type="Classic"` / `type="Small"` / `type="Simple"`。

### 问题

1. **silent scope creep**：违反上一轮 sample prompt §0 明文 "template 内 v-for paginationMembers 数组的 item.type ... 全保留——只改数据来源"
2. **反模式 #2**（打补丁不抽象）：3 分支硬编码不可扩展。如果 figma Pagination 增加第 4 个 type variant，要再加 v-else-if——应该是 `<Pagination :type="item.type">` 单 instance 让 type 是机制的 input
3. **Type 系统验证已通过**：`paginationMembers.value[i].type` 类型是 `PaginationFigmaProps['type']` = `'Classic' | 'Small' | 'Simple'`，与 canonical Pagination `Type = 'Classic' | 'Simple' | 'Small'` ([`src/canonical/Pagination.vue:5`](../../../src/canonical/Pagination.vue#L5)) **完全 compatible** —— v-if 拆是不必要的过度防御

### Fix

把 [`PaginationPage.vue:102-125`](../../../playground/docs/pages/PaginationPage.vue#L102) 3 个 conditional `<Pagination>` 块替换为 single instance：

```vue
<Pagination
  :model-value="pageValueFor(item.type).value"
  :type="item.type"
  :total="item.total"
  :page-size="item.pageSize"
  @update:model-value="pageValueFor(item.type).value = $event"
/>
```

删除 v-if / v-else-if / v-else 三个块的所有 conditional 渲染。

### 不动

- `playground/docs/pages/PaginationPage.vue` 除 Figma Members 段那 1 hunk 外
- 任何其他 file（generator / canonical / 其他 page / 真源 .md / AGENTS / backlog）
- 不增加 type cast / type assertion（type 已 narrow，不需要）

### 预期 typecheck

- `pnpm exec vue-tsc --noEmit` **0 错误**（实证 v-if 拆分是 unnecessary）
- 如果 typecheck 失败 → STOP 报告，**不要**自由发挥加 type assertion 或保留 v-if 折中——blocker 报给 plan owner

### 预期 audit verdict

- 18 page audit reports：**全部仅 timestamps 改动**（template restructure 不影响 verdict）
- PaginationPage 5+1: α=N/A · β/γ/δ/ε=pass · findings=0 保持

### 预期 dev 视觉

- Figma Members 段视觉**完全一致**（3 cards Classic / Small / Simple interactive demo）
- 唯一差别：HTML 渲染从 3 个 conditional Pagination 实例（同时只渲染 1 个 active）变成 v-for 内 1 个动态实例（每 iteration 渲染 1 个）—— 用户视觉看不出差别

---

## §1 — 必读输入

按顺序：

1. [`AGENTS.md`](../../../AGENTS.md) — 项目约束 + 硬规则
2. [`docs/meta-rules.md`](../../meta-rules.md) — 反模式 #2 (打补丁) 真源
3. [`playground/docs/pages/PaginationPage.vue`](../../../playground/docs/pages/PaginationPage.vue) — 待 fix
4. [`src/canonical/Pagination.vue`](../../../src/canonical/Pagination.vue) — type signature 验证

---

## §2 — 任务清单

### 任务 2.1 — 改 1 hunk

按 §0 替换 [`PaginationPage.vue:102-125`](../../../playground/docs/pages/PaginationPage.vue#L102) v-if / v-else-if / v-else 3 块为 single instance。

### 任务 2.2 — typecheck

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

期望：0 错误。如果失败 → STOP 报告（**不要**自由发挥 fix）。

### 任务 2.3 — 跑 audit 全量

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

### 任务 2.4 — Verify 18 reports timestamp-only

```bash
git diff --stat docs/internal/t2-sample-audit-report.*.md
```

期望：每个 ~12 行 timestamps，无 verdict / findings 改动。

### 任务 2.5 — dev 启动等 plan owner 截图

```bash
pnpm dev
```

启动后 STOP 等 plan owner 截图确认。

---

## §3 — 验收清单

- [ ] [`PaginationPage.vue:102-125`](../../../playground/docs/pages/PaginationPage.vue#L102) v-if / v-else-if / v-else 3 块 → single `<Pagination :type="item.type">` instance
- [ ] 不加 type cast / assertion（type 已 narrow）
- [ ] 不动其他 file / 其他 hunk
- [ ] vue-tsc 0 错（实证）
- [ ] 18 audit reports 仅 timestamps 改动
- [ ] PaginationPage 5+1 verdict 保持
- [ ] dev 启动等 plan owner 截图（不自评）
- [ ] 没 commit / 没 git add

---

## §4 — 完成报告

```
## PaginationPage follow-up single-instance fix 完成报告

### 改动文件 (按 prompt 任务的预期 scope)
- playground/docs/pages/PaginationPage.vue (1 hunk Figma Members 段)
- docs/internal/t2-sample-audit-report.<18>.md (重生, 仅 timestamps)

### §4.X 完整改动清单 (All M / A / D, 含 prompt 范围外)
[git status --short 全列表]
[如有范围外改动，标 ⚠️ 解释]

### 改动 hunk
[贴 PaginationPage.vue Figma Members 段 diff]

### typecheck
- vue-tsc: 0 错误 / X 错误（如有 STOP 报告）

### audit verdict
- 18 reports: 仅 timestamps OK / 偏离

### dev 视觉
- pnpm dev 启动: OK
- 等 plan owner 截图（executor 不自评）

### 验收 self-check
- [ ] 1 hunk single instance
- [ ] 不加 type cast
- [ ] 不动其他文件
- [ ] vue-tsc 0 错
- [ ] 18 baseline 仅 timestamps
- [ ] dev 启动等 plan owner
- [ ] 没 commit
- [ ] §4.X 完整改动清单已列

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

STOP — 等 plan owner 复审 + 截图确认 → A4.2-safe PaginationPage sample (含本 follow-up) 一并 commit → 进 A4.2-safe batch (3 page Breadcrumb / PromptMessage / Table)。
```

---

## §5 — 严守约束总览

- ⚠️ **不要 commit / 不要 git add**
- ⚠️ §0 文件改动**精确 1 文件 1 hunk** + audit 重跑 + typecheck
- ⚠️ §4 完成报告**必须含 §4.X 完整改动清单段**
- ⚠️ dev 视觉**不自评**——启动 dev 后 STOP 等 plan owner 截图
- ⚠️ **typecheck 失败 → STOP 报告**，不要自由发挥加 type assertion / 保留 v-if 折中
- ⚠️ 完成 STOP，按 §4 格式回报