# Prompt — Phase A4.2 sample: ProgressPage transform
> **角色**：executor
> **范围**：第 2 个非样板 page（ProgressPage）改造为消费 generator 输出 + 用 FigmaMembersGrid。验证 A4 batch 范式在 visual primitive component 上的稳定性（与 NotificationPage 大型卡片不同形态）。
>
> ⚠️ **不要 commit / 不要 git add**——dirty 累积到本 sample 通过后 commit。
> ⚠️ 完成后 **STOP**，按底部"完成报告"格式回报；**§4 完成报告必须含 §4.X 完整改动清单段**。
> ⚠️ **不扩范围**：只动 `playground/docs/pages/ProgressPage.vue` 一个文件 + 重跑 audit 产物。
---
## §0 — Plan owner 已定裁定
### ProgressPage 现状
- 总 ~250 行
- 5 个 docs-section：Figma Coverage / Figma Members / Runtime Value / Development Usage / Progress API
- ε audit 7 findings（figmaPage / figmaNodeIds / "variant count=16" / "nodeId=4915:7287" 等）
- α audit fail（A4.0 follow-up commit e966d41 后 progress.ts 含 16 variant.theme，page 未 grid → α=fail）
- γ audit fail（无 grid usage）
- β / δ audit pass
### Progress figma 真源对照
- 16 variants = 2 themes × 4 status × 2 sizes
- variant.theme 字段已派生（commit e966d41 fix）：8 dark + 8 light
- axes: `theme` (`['dark','light']`) + `status` (`['default','success','warning','error']`) + `size` (`['M','S']`)
- canonical Progress props: `theme` / `status` / `size` / `value` (default 60) / `showLabel`
### 改造裁定
| 改 / 不改 | 内容 |
|---|---|
| **删** | `const figmaPage = ...` / `const figmaNodeIds = ['4915:7287']` |
| **删** | `const progressAxes = [...]` 手写 axes 数组 |
| **删** | `const progressThemes = ['dark', 'light']` (违反 dark-only 显示规则) |
| **删** | `const progressStatuses = [...]` / `const progressSizes = [...]` |
| **删** | `const familyGroups = ...` 计算（基于 themes 派生 dark+light 双 group，违反 dark-only） |
| **删** | template 内 `'variant count=16'` / `'nodeId=4915:7287'` 字面量 |
| **加 import** | `import { progressFigmaMembers } from '@/figma-data/normalized/docs-figma-members/progress'` 和 type `ProgressFigmaProps` |
| **加 import** | `import FigmaMembersGrid from '../components/FigmaMembersGrid.vue'` |
| **加 computed** | `progressDarkVariants` 派生 `progressFigmaMembers.variants.filter(v => v.theme === 'dark')` —— 用于 Dark Theme Members 段 v-for |
| **加 computed**（推荐） | `progressStatusList` / `progressSizeList` 派生自 `progressFigmaMembers.axes` —— 用于 family-matrix table headers |
| **替换 Figma Coverage 段** | 用 ``（**默认 cellMinWidth 176px 不传**，Progress 是横条小组件 fit 默认） |
| **改 Figma Members 段 → 改名 "Dark Theme Members"** | 删原 `familyGroups` 双 theme outer iteration（违反 dark-only），改为单 dark group with family-matrix 子布局；v-for 用 `progressDarkVariants` + computed status/size 列表 |
| **保留** | Runtime Value 段（含 progressValue ref / slider 交互 / Try It）—— 不动 |
| **保留** | Development Usage 段 |
| **保留** | Progress API 段 |
| **保留** | i18n `t()` 包装 |
### Dark Theme Members 段 family-matrix 改造细节
原来：`familyGroups` 双 group (dark + light)，每 group 内 family-matrix 渲染 4 status × 2 size。
改后：单一 dark group + family-matrix 渲染：
- v-for 行：`progressStatusList` (`['default','success','warning','error']`)
- v-for 列：`progressSizeList` (`['M','S']`)
- cell 渲染：``（保 60% baseline，不传 light theme）
效果：8 个 cell（4 row × 2 col）排成 family-matrix。
CSS `.docs-demo-card--dark` 类保留（Progress 在 dark cell 内显示更准）。
### Site theme 注入 + cellMinWidth
``（静态字面量，与 Badge/Tooltip/Notification 一致）。
**cellMinWidth 默认 `'176px'`**（不传 prop）—— Progress 是横条小组件，176px 应足够 fit `