# Prompt — Phase A4.1 follow-up-3: Icon.vue inline color override bug fix

> **角色**：executor
> **范围**：A4.1 follow-up-2 视觉 reverify 暴露 Icon.vue inline style override 设计 bug —— `color: currentColor` 默认 inline 屏蔽外部 CSS color rules 永不生效。修 Icon.vue 改为条件 emit inline color（仅在 prop 非默认值时）。
>
> ⚠️ **不要 commit / 不要 git add**——dirty 累积到本 follow-up-3 通过后整批 A4.1 commit。
> ⚠️ 完成后 **STOP**，按底部"完成报告"格式回报；**§4 完成报告必须含 §4.X 完整改动清单段**。
> ⚠️ **不扩范围**：只动 `src/components/Icon/Icon.vue` 一个文件 + 重跑 audit 产物。

---

## §0 — Plan owner 已定裁定

### Bug 根因（commit 99be418 之后状态）

[`src/components/Icon/Icon.vue:60-66`](../../../src/components/Icon/Icon.vue#L60)：

```vue
<span
  v-if="svg"
  class="icon"
  :style="{ width: size + 'px', height: size + 'px', color: color }"
  ...
/>
```

`color` prop default `'currentColor'`。Vue render → DOM `<span style="color: currentColor">`。

**CSS specificity 后果**：
- inline `style="color: ..."`：specificity (1, 0, 0, 0)
- 外部 class 选择器（如 `.notif--error .notif__icon`）：specificity (0, 0, 2, 0)
- **inline 永远赢** → 外部 CSS color rules 对 Icon 永不生效

CSS spec：`color: currentColor` keyword **等于 inherit**——意图是"inherit 父级"，但作为 inline style **把外部 CSS 屏蔽了**——逻辑反向。

### 实证

A4.1 follow-up-2 restore `.notif--error .notif__icon { color: var(--red) }` 后 dev 仍显示 white error 图标 —— 因为 Icon.vue inline override 阻止外部 CSS 生效。

### Fix 实施

按下面伪代码改 Icon.vue script setup：

```ts
const iconStyle = computed<Record<string, string | number>>(() => {
  const style: Record<string, string | number> = {
    width: props.size + 'px',
    height: props.size + 'px',
  }
  // 仅当 consumer 显式传 color prop（非 default 'currentColor'）才 emit inline color
  // 避免 inline 'color: currentColor' 屏蔽外部 CSS color rules
  if (props.color && props.color !== 'currentColor') {
    style.color = props.color
  }
  return style
})
```

template 改用 computed style：

```vue
<span
  v-if="svg"
  class="icon"
  :style="iconStyle"
  v-html="svg"
  v-bind="accessibilityAttrs"
/>
```

### 行为变化（backward compatibility）

| Consumer 模式 | Fix 前 | Fix 后 | 一致？ |
|---|---|---|---|
| 显式传 `:color="<value>"` | inline `color: <value>` | inline `color: <value>` | ✅ 不变 |
| 默认（不传 color） | inline `color: currentColor` | **无 inline color** | ⚠️ 默认 inheritance 变化但等同 |
| 外部 CSS 试图设 icon color | ❌ inline 屏蔽 | ✅ CSS 生效 | ⚠️ **修复点** |

CSS `color: currentColor` 语义**等于 inherit**——removing inline 等于让 inherit 走外部 CSS 链 → 默认 callers 行为不变（仍 inherit），但**外部 CSS 现在能生效**（修复点）。

### 预期视觉修后

- BaseNotification `.notif--error .notif__icon { color: var(--red) }` 真正生效 → `IconStatusError` SVG `fill="currentColor"` → **红色**三角 ✓
- BaseNotification `.notif--info .notif__icon { color: var(--blue) }` 真正生效 → `IconStatusInfo` SVG `fill="currentColor"` → **蓝色** i 圆 ✓
- warning / secondary warning：SVG `fill="#EA4233"` / `#F68512` hardcoded，不受 CSS 影响 → 仍 红三角 / 橙圆 ✓
- 其他 Icon 消费者（Button / Tooltip / Form / etc）：默认 callers 行为等同，外部 CSS 改色现在能生效（潜在的"以前没生效但应该生效"修复）

### 不动

- `playground/docs/components/FigmaMembersGrid.vue`
- `playground/docs/pages/NotificationPage.vue`
- `src/components/Notification/Notification.vue`（commit f9ca71c 之后已 dirty 不动）
- `src/canonical/*`
- 所有真源 .md（icon-aliases / prop-aliases / backlog / AGENTS）
- generator / audit / types.ts

---

## §1 — 必读输入

1. [`src/components/Icon/Icon.vue`](../../../src/components/Icon/Icon.vue) — 修目标
2. [`src/components/Notification/Notification.vue`](../../../src/components/Notification/Notification.vue) — 验 `.notif--error / --info` CSS rules（dirty 中已 restore）
3. [`src/icons/raw.ts`](../../../src/icons/raw.ts) — 验 `IconStatusError` / `IconStatusInfo` 用 `fill="currentColor"`（**只读**确认）

---

## §2 — 任务清单

### 任务 2.1 — Icon.vue 实施 conditional inline color

按 §0 fix 实施。建议加 computed `iconStyle`（不要 inline computation 在 template 里）。

### 任务 2.2 — typecheck

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

预期 0 错误。

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

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

预期：18 reports 全部一致除 timestamps（Icon.vue 改动不影响 audit 算法）。

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

```bash
pnpm dev
```

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

---

## §3 — 验收清单

- [ ] Icon.vue `iconStyle` computed 实施 conditional color emission
- [ ] template 用 `:style="iconStyle"` 替代 inline object
- [ ] 默认 `color = 'currentColor'` 时不 emit inline color
- [ ] 显式传 `color` prop 时 emit inline color
- [ ] vue-tsc 0 错误
- [ ] 18 audit reports 一致除 timestamps
- [ ] dev 启动等 plan owner 视觉确认
- [ ] BaseNotification / NotificationPage / FigmaMembersGrid / canonical / 其他 page / 真源 .md 没动
- [ ] 没 commit / 没 git add

---

## §4 — 完成报告

```
## Phase A4.1 follow-up-3 Icon.vue inline color fix 完成报告

### 改动文件
- src/components/Icon/Icon.vue (+X/-Y, conditional inline color)
- docs/internal/t2-sample-audit-report.<page>.md × 18 (重生)

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

### Icon.vue diff hunk
[贴 hunk]

### Audit baseline regression
- 18 reports 一致除 timestamps: <OK / 偏离>

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

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

### 验收 self-check
- [ ] iconStyle computed 实施
- [ ] template 用 computed
- [ ] default 不 emit inline color
- [ ] 显式 prop 仍 emit inline color
- [ ] vue-tsc 0 错
- [ ] 18 baseline 一致
- [ ] dev 启动等 plan owner
- [ ] 不动其它文件
- [ ] 没 commit
- [ ] §4.X 完整改动清单已列

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

STOP — 等 plan owner 复审 + 视觉确认 → 整批 A4.1 commit (plan owner 真源 + A4.1 主轮 + 3 个 follow-up + 4 个 prompts)。
```

---

## §5 — 严守约束总览

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