# Prompt — Phase A4.2-safe sample: PaginationPage transform (non-theme-axis 范式 sample)

> **角色**：executor
> **范围**：第 1 个 non-theme-axis page sample (PaginationPage)。验证 grid 对 non-theme-axis 组件 + interactive demo 段保留范式。后续 A4.2-safe batch 3 page (Breadcrumb / PromptMessage / Table) 复用本 sample 范式。
>
> ⚠️ **不要 commit / 不要 git add**——dirty 累积到本 sample 通过后 commit。
> ⚠️ 完成后 **STOP**，按底部"完成报告"格式回报；**§4 完成报告必须含 §4.X 完整改动清单段**。
> ⚠️ **不扩范围**：只动 `playground/docs/pages/PaginationPage.vue` 一个文件 + 重跑 audit 产物。

---

## §0 — Plan owner 已定裁定

### PaginationPage 现状

- 总 ~256 行
- 4 个 docs-section：Figma Coverage / Development Usage / Figma Members / Pagination API
- ε audit 7 findings（figmaPage / figmaNodeIds / "variant count=3" / "nodeId=4894:7210" 等）
- γ audit fail（无 grid usage）
- α / β / δ pass

### Pagination figma 真源对照

- 3 variants = 1 axis Type ('Classic' | 'Small' | 'Simple')
- **non-theme-axis**：variants 不含 `theme` 字段
- canonical Pagination props: `type` / `modelValue` / `total` / `pageSize`

### Non-theme-axis 范式（plan owner 决策 — 本 sample 验证关键点）

- `<FigmaMembersGrid>` **不传** `:site-theme` —— grid 内 `hasThemeVariants` 检测后直接返回 variants 全集（不 filter）
  - 实证：[`FigmaMembersGrid.vue:20-30`](../../../playground/docs/components/FigmaMembersGrid.vue#L20)
- non-theme-axis 组件没有 light variants 自然 dark-only，无需 explicit dark filter
- 这是 PaginationPage sample 验证的关键 sample value——后续 Breadcrumb / PromptMessage / Table 复用

### 改造裁定

| 改 / 不改 | 内容 |
|---|---|
| **删** | `const figmaPage = ...` / `const figmaNodeIds = ['4894:7210']` (line 6-7) |
| **删** | `const paginationMembers = [...]` 手写数组 (line 15-19) |
| **删** | template 内 `'variant count=3'` / `'nodeId=4894:7210'` 字面量 (line 72) + Figma Coverage 段 coverage-grid 整段 (line 73-80) |
| **加 import** | `import { paginationFigmaMembers } from '@/figma-data/normalized/docs-figma-members/pagination'` 和 type `PaginationFigmaProps` |
| **加 import** | `import FigmaMembersGrid from '../components/FigmaMembersGrid.vue'` |
| **加 computed** | `paginationMembers` 改 computed 派生 from generator + runtime extras (total: 1299, pageSize: 20) |
| **替换 Figma Coverage 段** | `<article class="docs-demo-card docs-demo-card--wide">` 内换为 `<FigmaMembersGrid :members="paginationFigmaMembers" :component="Pagination" />` (**不传 :site-theme** — non-theme-axis 范式) |
| **保留 Figma Members 段** | runtime interactive demo (每 type 独立 page ref state) + 标题 + 结构不变 |
| **保留** | classicPage / smallPage / simplePage refs + pageValueFor 函数 |
| **保留** | Development Usage 段 / Pagination API 段 |
| **保留** | i18n `t()` 包装 |
| **删 CSS** | `.coverage-grid` / `.coverage-grid__item` / `.coverage-grid__axis` / `.coverage-grid__chips` / `.coverage-chip` (line 196-227 不再用) |

### Figma Members 段 paginationMembers computed 派生

```ts
const paginationMembers = computed(() =>
  paginationFigmaMembers.variants.map((variant) => ({
    type: variant.props.type,
    nodeId: variant.variantId,
    total: 1299,  // runtime extra (page 提供，非 figma 真源)
    pageSize: 20, // runtime extra
  })),
)
```

template 内 v-for `paginationMembers` 数组的 `item.type / item.nodeId / item.total / item.pageSize` 与 `pageValueFor(item.type)` 调用全保留——**只改数据来源**（手写数组 → computed 派生）。

### Site theme 注入

- **不传** `:site-theme` —— grid 默认 `'dark'` 但 grid 内 `hasThemeVariants=false` 时直接返回全部 variants 不 filter
- 这是 non-theme-axis 范式的 sample value（plan owner 后续 review 时主要验这点）

### 不动

- `figma-sync/generate-docs-figma-members.mjs`
- `figma-sync/audit-page-t2-sample.mjs`
- `figma-data/normalized/docs-figma-members/types.ts` / `pagination.ts`
- `playground/docs/components/FigmaMembersGrid.vue`
- `src/canonical/Pagination.vue` / `src/components/Pagination/*` / 其他 canonical
- 其他 `playground/docs/pages/*.vue`
- `src/design-system/translation/*` / `docs/internal/backlog.md` / `AGENTS.md`

### 预期 audit verdict

- **PaginationPage**：α=pass · β=pass · γ=pass · δ=pass · ε=pass · findings=0
- **17 其他 audit reports**：与当前 HEAD (commit fae0c04) 一致除 timestamps (baseline regression)

### 预期 dev 视觉

- **Figma Coverage 段**：grid 渲染 3 cells (Classic / Small / Simple)，每 cell 内一个 Pagination 实例（静态展示状态）+ axes chips 列出 Type 真源 3 values
- **Figma Members 段**：3 cards interactive demo（与改造前一致——每个 type 独立 page state，用户能 click navigation 切页）
- **Development Usage / Pagination API**：不变
- **顺序**：Figma Coverage → Development Usage → Figma Members → Pagination API（保持当前顺序）

---

## §1 — 必读输入

按顺序：

1. [`AGENTS.md`](../../../AGENTS.md) — 项目约束 + 硬规则
2. [`docs/meta-rules.md`](../../meta-rules.md) — 反模式 + 触发器
3. [`docs/internal/backlog.md`](../../backlog.md)
4. [`playground/docs/pages/PaginationPage.vue`](../../../playground/docs/pages/PaginationPage.vue) — 待改造，~256 行
5. [`playground/docs/pages/ProgressPage.vue`](../../../playground/docs/pages/ProgressPage.vue) — A4.2 已改造范式参考（theme-axis 范式）
6. [`playground/docs/components/FigmaMembersGrid.vue`](../../../playground/docs/components/FigmaMembersGrid.vue) — grid prop API + `hasThemeVariants` 逻辑（line 20-30 必读）
7. [`figma-data/normalized/docs-figma-members/pagination.ts`](../../../figma-data/normalized/docs-figma-members/pagination.ts) — generator 输出 (3 variant, no theme)

---

## §2 — 任务清单

### 任务 2.1 — PaginationPage.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 — Verify PaginationPage 5+1 verdict 全 pass

```bash
grep "^| " docs/internal/t2-sample-audit-report.PaginationPage.md | head -8
```

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

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

期望：PaginationPage 实质 diff（γ/ε 转 pass + findings 清空）；17 其他仅 timestamps（每个 12 行）。

### 任务 2.6 — dev 视觉（**等 plan owner 截图**，不自评）

```bash
pnpm dev
```

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

---

## §3 — 验收清单

- [ ] PaginationPage.vue 删手写 figma 字面量（figmaPage / figmaNodeIds / paginationMembers 数组 / "variant count=3" / "nodeId=4894:7210" / coverage-grid template）
- [ ] 加 generator import (paginationFigmaMembers + PaginationFigmaProps)
- [ ] 加 FigmaMembersGrid import
- [ ] Figma Coverage 段用 grid（**不传 :site-theme**）
- [ ] Figma Members 段保留 interactive demo（paginationMembers 改 computed 派生 from generator + runtime extras）
- [ ] classicPage / smallPage / simplePage refs + pageValueFor 函数保留
- [ ] Development Usage / Pagination API 不动
- [ ] CSS 删 `.coverage-grid*` / `.coverage-chip` 不再用类
- [ ] vue-tsc 0 错误
- [ ] PaginationPage 5+1 verdict 全 pass · findings=0
- [ ] 17 其他 audit reports 一致除 timestamps
- [ ] dev 启动等 plan owner 视觉确认（不自评）
- [ ] generator / canonical / 其他 page / 真源 .md / AGENTS / backlog 没动
- [ ] 没 commit / 没 git add

---

## §4 — 完成报告

```
## Phase A4.2-safe PaginationPage Sample 完成报告

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

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

### Figma Coverage 段 grid 用法
[贴 <FigmaMembersGrid> 用法 hunk]

### Figma Members 段 paginationMembers computed 派生
[贴 computed 派生 hunk]

### Audit verdict
- PaginationPage: α/β/γ/δ/ε = <list>
- 17 其他 baseline 一致除 timestamps: <OK / 偏离>

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

### dev 视觉验收
- pnpm dev 启动: <OK / 失败>
- 等 plan owner 截图（executor 不自评）

### 验收 self-check
- [ ] 删手写 figma 字面量 + paginationMembers 数组
- [ ] generator import + grid usage (不传 :site-theme)
- [ ] computed 派生 paginationMembers from generator
- [ ] interactive page refs 保留
- [ ] Development Usage / API 不动
- [ ] vue-tsc 0 错
- [ ] PaginationPage 5+1 全 pass
- [ ] 17 baseline 一致
- [ ] dev 启动等 plan owner
- [ ] 不动其它文件
- [ ] 没 commit
- [ ] §4.X 完整改动清单已列

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

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

---

## §5 — 严守约束总览

- ⚠️ **不要 commit / 不要 git add**
- ⚠️ §0 文件改动**精确 1 文件**（PaginationPage.vue）+ audit 重跑产物
- ⚠️ §4 完成报告**必须含 §4.X 完整改动清单段**
- ⚠️ dev 视觉**不自评**——启动 dev 后 STOP 等 plan owner 截图
- ⚠️ Audit baseline regression（17 其他 page）必须 pass
- ⚠️ **Non-theme-axis 范式：不传 `:site-theme`** —— sample 验证 grid 默认行为，本 sample 关键决策点
- ⚠️ 完成 STOP，按 §4 格式回报