# Prompt — Phase A4.1 follow-up: Grid cellMinWidth + dark-only + Interactive Scenario

> **角色**：executor
> **范围**：A4.1 视觉验收暴露 4 件需修：(1) Grid cell 尺寸太窄 Notification 重叠 → 加 `cellMinWidth` prop；(2) Light Theme Members 段违反 docs-site dark-only 规则 → 删；(3) Interactive Scenario 模拟交互场景缺失 → 新增 section；(4) BaseNotification 4 行 dead CSS color rules → 删。
>
> ⚠️ **不要 commit / 不要 git add**——dirty 累积到本 follow-up 通过后 commit。
> ⚠️ 完成后 **STOP**，按底部"完成报告"格式回报；**§4 完成报告必须含 §4.X 完整改动清单段**（任何 prompt 范围外修改必须 surface，新教训 9dc00ac）。
> ⚠️ **不扩范围**：只动下方 §0 列出的 3 个文件 + 重跑 audit 产物。**不动** generator / types.ts / canonical/Notification.vue（上层 wrapper）/ 其他 page / prop-aliases.md / icon-aliases.ts（plan owner 已 update）/ backlog.md / AGENTS.md（plan owner 已 update）。

---

## §0 — Plan owner 已定裁定

### 文件改动清单（**精确 3 文件**）

1. `playground/docs/components/FigmaMembersGrid.vue` —— 加 `cellMinWidth?: string` prop
2. `playground/docs/pages/NotificationPage.vue` —— 删 Light Theme Members + 加 cell-min-width + 加 Interactive Scenario section
3. `src/components/Notification/Notification.vue` —— 删 4 行 dead CSS color rules

### 改动 1：FigmaMembersGrid 加 `cellMinWidth?: string` prop

**`<script setup>` defineProps 加**：

```ts
cellMinWidth?: string  // 默认 '176px'，Badge/Tooltip baseline 不变
```

`withDefaults` 默认值：`cellMinWidth: '176px'`。

**`<style scoped>` `.figma-members-grid__list` 改**：

```css
.figma-members-grid__list {
  display: grid;
  /* OLD: grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); */
  grid-template-columns: repeat(auto-fit, minmax(var(--figma-members-cell-min, 176px), 1fr));
  gap: 12px;
}
```

**`<template>` 把 prop 注入 CSS var**：

```vue
<section
  class="figma-members-grid"
  data-figma-members
  :data-figma-component="props.members.component"
  :style="{ '--figma-members-cell-min': props.cellMinWidth }"
>
```

→ Badge/Tooltip 不传 prop → 默认 `'176px'` → CSS var fallback 也 `'176px'` → baseline 不变；NotificationPage 传 `'360px'` → cell 大一倍。

### 改动 2：NotificationPage.vue

#### 2.a 删 Light Theme Members 整段

NotificationPage 当前包含 `<section>` `Light Theme Members`（line 156 附近）—— **整段删除**（含 h2 / docs-section__summary / template / styles 引用）。

理由：违反 AGENTS.md 项目约束新加的"Docs site 默认 dark-only 显示"规则——docs site 不展示 light variants 对照。

#### 2.b Figma Coverage grid 加 cell-min-width

```vue
<FigmaMembersGrid
  :members="notificationFigmaMembers"
  :component="Notification"
  :site-theme="'dark'"
  :cell-min-width="'360px'"
/>
```

#### 2.c 加 Interactive Scenario section（**新需求**）

在 Notification API 段**之前**插入新 section：

```vue
<section class="docs-section">
  <h2 class="docs-section__title">{{ t('Interactive Scenario', 'Interactive Scenario 模拟交互场景') }}</h2>
  <p class="docs-section__summary">
    {{ t('...explanation EN...', '...解释 zh...') }}
  </p>
  <!-- 7 trigger buttons + active notification render + last result message -->
</section>
```

**功能 spec**：

- **触发面板**：7 个 trigger buttons，每个对应一个 status（warning / secondary warning / info / error / pop confirm / quick confirm / side pop）；button label 用 status name
- **渲染区**：触发后显示对应 status 的 Notification 组件实例（用 `notificationFigmaMembers` 派生 fixture data）
- **关闭交互**：
  - 点击 close icon (X) → notification 消失 + lastResult = 'closed'
  - 点击 Cancel button → notification 消失 + lastResult = 'cancelled'
  - 点击 Confirm/Delete button → notification 消失 + lastResult = 'confirmed' / 'deleted'（pop confirm / quick confirm 显示"操作成功"，普通 status 显示"已确认"）
- **结果提示区**：显示最近一次操作结果文案（如 `'已关闭'` / `'已取消'` / `'操作成功'` / `'操作失败'`），3 秒后清空 OR 直到下一次操作触发
- 用 site dark theme（`theme="dark"`）
- 关键参数（如 result 文案 / 自动消失 ms）**executor 提议合理默认**，plan owner 复审

**Vue state 提议**：

```ts
const activeStatus = ref<NotificationStatus | null>(null)
const lastResult = ref<{ severity: 'success' | 'info' | 'cancel'; message: string } | null>(null)

function handleOpen(status: NotificationStatus) { activeStatus.value = status }
function handleClose() { activeStatus.value = null; setResult({ severity: 'info', message: t('Closed', '已关闭') }) }
function handleCancel() { activeStatus.value = null; setResult({ severity: 'cancel', message: t('Cancelled', '已取消') }) }
function handleConfirm() {
  const status = activeStatus.value
  activeStatus.value = null
  if (status === 'pop confirm' || status === 'quick confirm') {
    setResult({ severity: 'success', message: t('Operation success', '操作成功') })
  } else {
    setResult({ severity: 'success', message: t('Confirmed', '已确认') })
  }
}
```

具体类名 / 布局细节由 executor 设计。

#### 2.d Try It / 旧交互 demo 段（如有）

如 page 现有 Try It 段 / `notifTryStatuses` / `notifStatus` / `notifShown` ref —— 这些是早期 sample 残留，**整段删除**（被新 Interactive Scenario 替代）。

#### 2.e 保留段

- Figma Coverage（改造后用 grid + cell-min-width='360px'）
- Development Usage
- Dark Theme Members （手写 status 对照，使用 `notificationStatusList` computed 派生）
- Interactive Scenario（新增）
- Notification API

### 改动 3：BaseNotification 删 4 行 dead CSS

`src/components/Notification/Notification.vue` `<style scoped>` 段删下面 6 行（4 个 selector + 2 行 declarations）：

```css
/* 删除： */
.notif--warning .notif__icon,
.notif--secondary-warning .notif__icon {
  color: var(--orange);
}

.notif--error .notif__icon {
  color: var(--red);
}

.notif--info .notif__icon {
  color: var(--blue);
}
```

理由：图标 SVG fill **hardcoded**（`#EA4233` / `#F68512` / `#3892F3`），不读 `currentColor` —— CSS color 规则**永不生效**。删除 dead code，避免误导。

视觉**不会**变化（icons SVG 自带颜色）。CANONICAL-003 backlog 已记录"future fix figma export 改 currentColor"路径。

### 不动（边界约束）

- `figma-sync/generate-docs-figma-members.mjs`（A4.0 已 commit c623544）
- `figma-sync/audit-page-t2-sample.mjs`（audit 算法不动）
- `figma-data/normalized/docs-figma-members/types.ts` / `*.ts`
- `src/canonical/Notification.vue`（上层 wrapper，prop API 不动）
- `src/canonical/*` 其他
- `playground/docs/pages/*.vue` 除 NotificationPage
- `src/design-system/translation/icon-aliases.ts`（plan owner 已 update，executor **只读**）
- `src/design-system/translation/prop-aliases.md`
- `docs/internal/backlog.md`（plan owner 已 update CANONICAL-003）
- `AGENTS.md`（plan owner 已 update docs-site dark-only 规则）

### 预期 audit verdict

- **NotificationPage**：α=pass · β=pass · γ=pass · δ=pass · ε=pass · findings=0
- **17 其他 audit reports**：与 commit c623544 时一致除 timestamps（baseline regression）

### 预期 dev 视觉

- Figma Coverage 段：7 个 dark theme variants 渲染**完整大尺寸 cards**（不重叠）
- Light Theme Members 段：**消失**（删除生效）
- Dark Theme Members 段：保留，7 个 status × dark theme 渲染
- Interactive Scenario 段：新增，7 trigger buttons + active notification + result message 工作
- Notification API：完好

---

## §1 — 必读输入

按顺序：

1. [`AGENTS.md`](../../../AGENTS.md) — 注意"项目约束"段新加 `Docs site 默认 dark-only 显示`
2. [`docs/meta-rules.md`](../../meta-rules.md) — 反模式 + 触发器 G
3. [`docs/internal/backlog.md`](../../backlog.md) — CANONICAL-003 entry
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) "复盘后续发现" 段 — silent scope creep 防御 / git checkout 教训
5. [`playground/docs/components/FigmaMembersGrid.vue`](../../../playground/docs/components/FigmaMembersGrid.vue) — 加 `cellMinWidth` prop 起点
6. [`playground/docs/pages/NotificationPage.vue`](../../../playground/docs/pages/NotificationPage.vue) — 待改造
7. [`src/components/Notification/Notification.vue`](../../../src/components/Notification/Notification.vue) — 删 dead CSS color rules
8. [`src/canonical/Notification.vue`](../../../src/canonical/Notification.vue) — wrapper（**只读**确认 prop API）
9. [`figma-data/normalized/docs-figma-members/notification.ts`](../../../figma-data/normalized/docs-figma-members/notification.ts) — generator 输出（消费）
10. [`src/design-system/translation/icon-aliases.ts`](../../../src/design-system/translation/icon-aliases.ts) — `COMPONENT_ICON_OVERRIDES` 常量（**只读**，可参考但非本轮使用）

---

## §2 — 任务清单

### 任务 2.1 — FigmaMembersGrid 加 cellMinWidth prop

按 §0 改动 1 实施。

### 任务 2.2 — NotificationPage 4 件改

按 §0 改动 2.a / 2.b / 2.c / 2.d / 2.e 实施。

### 任务 2.3 — BaseNotification 删 dead CSS

按 §0 改动 3 实施。

### 任务 2.4 — typecheck

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

预期 0 错误。

### 任务 2.5 — 跑 audit 全量 + baseline regression

```bash
node figma-sync/audit-page-t2-sample.mjs
git diff --stat docs/internal/t2-sample-audit-report.*.md
```

预期：NotificationPage 实质 diff 仍 5+1 全 pass；17 其他仅 timestamps（每个 12 lines）。

### 任务 2.6 — dev 视觉（**executor 启动 dev 后等 plan owner 截图，不自行判断 OK**）

```bash
pnpm dev
```

executor 启动 dev server 后**stop 等 plan owner 截图确认**——不写"视觉 OK"自评（避免新教训 9dc00ac 的误判）。

---

## §3 — 验收清单

- [ ] FigmaMembersGrid 加 `cellMinWidth?: string` prop（默认 '176px'）
- [ ] FigmaMembersGrid CSS 用 `var(--figma-members-cell-min, 176px)` 注入
- [ ] NotificationPage 删 Light Theme Members 整段
- [ ] NotificationPage Figma Coverage 加 `:cell-min-width="'360px'"`
- [ ] NotificationPage 加 Interactive Scenario section（7 trigger buttons + active notification + result message）
- [ ] NotificationPage 删早期 Try It / `notifTryStatuses` / `notifStatus` / `notifShown` 残留
- [ ] BaseNotification 删 4 个 selector / 6 行 dead CSS color rules
- [ ] `pnpm exec vue-tsc --noEmit` 0 错误
- [ ] NotificationPage audit 5+1 verdict 全 pass · findings=0
- [ ] 17 其他 audit reports 一致除 timestamps
- [ ] dev 启动等 plan owner 视觉确认（不自评）
- [ ] generator / types.ts / canonical/Notification.vue / 其他 page / prop-aliases / icon-aliases / backlog / AGENTS 没动
- [ ] 没 commit / 没 git add

---

## §4 — 完成报告（按下方格式回报）

```
## Phase A4.1 follow-up Grid + Dark-only + Interactive 完成报告

### 改动文件 (按 prompt 任务的预期 scope)
- playground/docs/components/FigmaMembersGrid.vue (+X/-Y, 加 cellMinWidth prop)
- playground/docs/pages/NotificationPage.vue (改 +X/-Y, 4 件改)
- src/components/Notification/Notification.vue (-6 行 dead CSS)
- docs/internal/t2-sample-audit-report.NotificationPage.md (重生)
- 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）]

### Grid cellMinWidth prop 实施
[贴 FigmaMembersGrid 改动 hunk]

### NotificationPage Interactive Scenario 设计
[简述 trigger panel + render area + result message 的 Vue state + 用法]
[关键参数选择: result 自动消失 ms / 文案 / etc]

### BaseNotification dead CSS 删除
[贴 -6 行 hunk 确认 4 个 selector 全删]

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

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

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

### 验收 self-check
- [ ] FigmaMembersGrid cellMinWidth prop
- [ ] NotificationPage 4 件改
- [ ] BaseNotification 删 dead CSS
- [ ] vue-tsc 0 错
- [ ] NotificationPage 5+1 全 pass
- [ ] 17 baseline 一致
- [ ] dev 启动等 plan owner
- [ ] 不动 generator / types / canonical wrapper / 其他 page / 真源 .md / AGENTS
- [ ] 没 commit
- [ ] §4.X 完整改动清单已列

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

STOP — 等 plan owner 复审 + 截图确认 → commit Phase A4.1 完整 (含 plan owner 真源 + 本 follow-up + A4.1 主轮 NotificationPage 改造) → 进 A4.2 (机械批 9 page)。
```

---

## §5 — 严守约束总览

- ⚠️ **不要 commit / 不要 git add**
- ⚠️ §0 文件改动清单**精确 3 文件**——不动 generator / types.ts / canonical wrapper / 其他 page / 真源 .md / AGENTS
- ⚠️ §4 完成报告**必须含 §4.X 完整改动清单段**（任何 prompt 范围外修改必须 surface）
- ⚠️ dev 视觉**不自评**——启动 dev 后 STOP 等 plan owner 截图
- ⚠️ Audit baseline regression（17 其他 page）必须 pass
- ⚠️ 完成 STOP，按 §4 格式回报