# Prompt — Phase A4.1 follow-up-2: 恢复 error/info icon CSS color + NotificationPage 1 column

> **角色**：executor
> **范围**：A4.1 follow-up 视觉 reverify 暴露 2 件需精修：(1) BaseNotification 错把 4 行 CSS color rules 全删——但 status-error / status-info 图标用 `currentColor`，删了导致白色，需 restore 2 行；(2) NotificationPage Figma Coverage cell 内容仍溢出，需改 cell-min-width=`'100%'` 强制 1 column。
>
> ⚠️ **不要 commit / 不要 git add**——dirty 工作区累积到本 follow-up-2 通过后**整批 A4.1 commit**（含 plan owner 真源 + A4.1 主轮 + follow-up + follow-up-2）。
> ⚠️ 完成后 **STOP**，按底部"完成报告"格式回报；**§4 完成报告必须含 §4.X 完整改动清单段**。
> ⚠️ **不扩范围**：只动下方 §0 列出的 2 文件 + 重跑 audit 产物。

---

## §0 — Plan owner 已定裁定

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

1. `src/components/Notification/Notification.vue` —— restore 2 个 CSS color selector + 加 comment 说明真源不一致
2. `playground/docs/pages/NotificationPage.vue` —— grid `:cell-min-width` 改 `'360px'` → `'100%'`

### 改动 1：BaseNotification 部分 restore CSS

A4.1 follow-up 误删 4 行 dead code，但**实际只 2 行真 dead**（warning / secondary warning 用 message-* hardcoded fill，CSS 无效）；**另 2 行有效**（error / info 用 status-* currentColor）。

**修复**：在 `<style scoped>` 适当位置（原 4 行 selector 删除处附近，在 `.notif__icon :deep(svg) { ... }` 之后）加：

```css
/* status-* icons use fill="currentColor" — CSS color rules are functional.
 * (warning / secondary warning use message-* icons with hardcoded fills;
 *  CSS color for them was dead, intentionally not restored. See backlog
 *  CANONICAL-003 for icon真源不一致 tech debt.) */
.notif--error .notif__icon {
  color: var(--red);
}

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

**不要** restore `.notif--warning` / `.notif--secondary-warning` color rules（SVG hardcoded，CSS 无效）。

### 改动 2：NotificationPage cell-min-width 改 '100%'

NotificationPage 当前 `<FigmaMembersGrid :cell-min-width="'360px'" />` 不够大——Notification width hardcoded 480px，3 columns × 360px cells 致内容溢出 cell。改 `'100%'`：CSS `repeat(auto-fit, minmax(100%, 1fr))` 强制每行 1 个 cell。

**单点改**：`:cell-min-width="'100%'"`

### 不动

- `src/canonical/Notification.vue`（wrapper，prop API 不动）
- `playground/docs/components/FigmaMembersGrid.vue`（cellMinWidth prop 接 string，'100%' 字面量直接传入即可）
- `figma-sync/*` / generator / types.ts / canonical/* / 其他 page / prop-aliases.md / icon-aliases.ts / AGENTS.md
- `docs/internal/backlog.md`（plan owner 已 update CANONICAL-003）

### 预期 dev 视觉（修后）

- Figma Coverage：7 个 dark theme variants 每行**只 1 个**渲染（不再 3-cell 行 + 内容溢出）
- 每个 cell 含完整大小的 Notification (480px width 在 cell 100% width 内)
- error 图标：**红色**三角 ✓
- info 图标：**蓝色** i 圆 ✓
- warning 图标：红三角（hardcoded SVG fill 不变）
- secondary warning 图标：橙圆 ! （hardcoded SVG fill 不变）

### 预期 audit verdict（修后）

- NotificationPage：α=pass · β=pass · γ=pass · δ=pass · ε=pass · findings=0（CSS 改动不影响 audit）
- 17 其他 audit reports：与 follow-up commit pending 状态一致除 timestamps

---

## §1 — 必读输入

1. [`docs/internal/backlog.md`](../../backlog.md) — CANONICAL-003 已精确化（plan owner update）
2. [`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) — "复盘后续发现" 段
3. [`src/components/Notification/Notification.vue`](../../../src/components/Notification/Notification.vue) — 当前 dirty 状态（A4.1 follow-up 删了 4 行 CSS），restore 2 行
4. [`playground/docs/pages/NotificationPage.vue`](../../../playground/docs/pages/NotificationPage.vue) — 当前 dirty `:cell-min-width="'360px'"`，改 `'100%'`
5. [`src/icons/raw.ts`](../../../src/icons/raw.ts) — 验 IconStatusError / IconStatusInfo 用 `fill="currentColor"`（**只读**确认）

---

## §2 — 任务清单

### 任务 2.1 — BaseNotification restore 2 行 CSS

按 §0 改动 1。在 `<style scoped>` 加 `.notif--error` + `.notif--info` 2 个 selector + comment 说明。

### 任务 2.2 — NotificationPage cell-min-width 改 '100%'

按 §0 改动 2。单点字面量替换 `'360px'` → `'100%'`。

### 任务 2.3 — typecheck

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

### 任务 2.4 — 跑 audit + baseline regression

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

预期：NotificationPage 仍 5+1 全 pass；17 其他仅 timestamps。

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

```bash
pnpm dev
```

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

---

## §3 — 验收清单

- [ ] BaseNotification restore `.notif--error` + `.notif--info` color rules + comment
- [ ] BaseNotification **没** restore `.notif--warning` / `.notif--secondary-warning`（intentional）
- [ ] NotificationPage `:cell-min-width="'100%'"`
- [ ] vue-tsc 0 错误
- [ ] NotificationPage 5+1 全 pass
- [ ] 17 其他 audit reports 一致除 timestamps
- [ ] dev 启动等 plan owner 视觉确认
- [ ] generator / canonical wrapper / FigmaMembersGrid / 其他 page / prop-aliases / icon-aliases / AGENTS / backlog 没动
- [ ] 没 commit / 没 git add

---

## §4 — 完成报告

```
## Phase A4.1 follow-up-2 完成报告

### 改动文件 (按 prompt 任务的预期 scope)
- src/components/Notification/Notification.vue (+X 行: restore 2 selector + comment)
- playground/docs/pages/NotificationPage.vue (1 行: cell-min-width 字面量替换)
- docs/internal/t2-sample-audit-report.<page>.md × 18 (重生)

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

### BaseNotification CSS restore hunk
[贴 +X/-Y 行 hunk]

### NotificationPage cell-min-width hunk
[1 行 diff hunk]

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

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

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

### 验收 self-check
- [ ] 2 selector restore + comment
- [ ] 没 restore warning / secondary warning
- [ ] cell-min-width='100%'
- [ ] vue-tsc 0 错
- [ ] audit baseline 一致
- [ ] dev 启动等 plan owner
- [ ] 不动其它文件
- [ ] 没 commit
- [ ] §4.X 完整改动清单已列

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

STOP — 等 plan owner 复审 + 截图确认 → 整批 A4.1 commit (plan owner 真源 + A4.1 主轮 + follow-up + follow-up-2 + 2 prompts)。
```

---

## §5 — 严守约束总览

- ⚠️ **不要 commit / 不要 git add**
- ⚠️ §0 文件改动**精确 2 文件**
- ⚠️ §4 完成报告**必须含 §4.X 完整改动清单段**
- ⚠️ dev 视觉**不自评**——启动 dev 后 STOP 等 plan owner 截图
- ⚠️ Audit baseline regression（17 其他 page）必须 pass
- ⚠️ 完成 STOP，按 §4 格式回报