# Prompt — CANONICAL-001 Tooltip arrow CSS placement fix

> **角色**：executor
> **范围**：修 [`docs/internal/backlog.md`](../../backlog.md) CANONICAL-001 —— BaseTooltip 的 arrow border CSS 从 theme-based 移到 placement-based，让 4 个方向 placement (top/bottom/left/right) 的箭头都指向正确的锚点方向。
>
> ⚠️ **不要 commit / 不要 git add**——dirty 工作区累积。
> ⚠️ 完成后 **STOP**，按底部"完成报告"格式回报。
> ⚠️ **不扩范围**：只动 [`src/components/Tooltip/Tooltip.vue`](../../../src/components/Tooltip/Tooltip.vue) 一个文件的 `<style scoped>` 段；不动 template / script / canonical/Tooltip.vue / 任何其他文件。

---

## §0 — Plan owner 已诊断 + 裁定

### Bug 根因

[`src/components/Tooltip/Tooltip.vue:179-183`](../../../src/components/Tooltip/Tooltip.vue#L179)：

```css
.tooltip-arrow--dark,
.tooltip-arrow--light {
  border-top: 1px solid var(--tooltip-border);
  border-left: 1px solid var(--tooltip-border);
}
```

borders 在 **theme class** 声明而非 placement class——所有 12 个 placement 共用同一组 `border-top + border-left`。配合 `.tooltip-arrow { transform: rotate(45deg) }`：
- `border-top + border-left` 旋转后视觉的 "L" 边沿在 9→12 点方向
- 这只对 `bottom-*` placement 视觉正确（arrow 在 bubble 顶部、L 朝上 → 视觉箭头指向上方锚点）
- `top-*` / `left-*` / `right-*` 三类 placement 共用同 borders → 箭头方向不一致

### 实测复现（commit 8870419 dev 验收 + 用户截图）

- TooltipPage Position Preview 段
- placement `left up` (`top-start`) / `Center up` (`top`) / `right up` (`top-end`) → bubble 位置在按钮上方 OK，**arrow 三角看起来指向远离锚点方向（向上）**
- 应该指向**下方锚点**（向下）

### 裁定：fix 方向

**把 borders 从 theme class 移到 placement class**——每个 placement 方向用对应 border 组合，让 rotate(45deg) 后的视觉 "L" 朝向锚点方向。

| Placement | bubble 相对锚点位置 | arrow 应指向 | borders 组合（plan owner 推断，executor 视觉验收确认） |
|---|---|---|---|
| `bottom-*` | 下方 | ↑（上方锚点） | **保持当前**: `border-top` + `border-left` |
| `top-*` | 上方 | ↓（下方锚点） | 推断: `border-bottom` + `border-right`（top-left 的镜像） |
| `right-*` | 右方 | ←（左方锚点） | 推断: `border-bottom` + `border-left` |
| `left-*` | 左方 | →（右方锚点） | 推断: `border-top` + `border-right` |

⚠️ 上表 `top-*` / `right-*` / `left-*` 的 borders 是**几何推断**——executor 必须在 dev 浏览器**实测每类 placement** 验证箭头指向锚点；如几何推断不对（如某类应该是不同组合），按实测结果调整并在 STOP 报告里说明。

### 不动（边界约束）

- ❌ 不改 arrow size (`width: 8.5px; height: 8.5px`)
- ❌ 不改 arrow position offsets (`top: -5px` / `bottom: -5px` / `left: -5px` / `right: -5px` / `left: calc(...)` / `top: calc(...)`)
- ❌ 不改 `transform: rotate(45deg)`
- ❌ 不改 theme bg / text / border color 逻辑（继续用 `--tooltip-border` CSS var 控制颜色）
- ❌ 不动 template / script setup / canonical/Tooltip.vue / canonical Tooltip 任何字段
- ❌ 不动 BadgePage / 任何其他 page

### 实施细节

**删除**当前 `.tooltip-arrow--dark, .tooltip-arrow--light` 共用的 borders 规则（line 179-183）。

**新增**：在每个 placement group 的 CSS rule 里**添加** borders 声明（与 position offsets 同一规则块）。例：

```css
.tooltip-arrow--bottom,
.tooltip-arrow--bottom-start,
.tooltip-arrow--bottom-end {
  top: -5px;
  border-top: 1px solid var(--tooltip-border);
  border-left: 1px solid var(--tooltip-border);
}

.tooltip-arrow--top,
.tooltip-arrow--top-start,
.tooltip-arrow--top-end {
  bottom: -5px;
  border-bottom: 1px solid var(--tooltip-border);
  border-right: 1px solid var(--tooltip-border);
}

/* 类似处理 right-* 和 left-* */
```

具体 borders 组合按 §0 表 + 实测调整。

---

## §1 — 必读输入

1. [`docs/internal/backlog.md`](../../backlog.md) — CANONICAL-001 entry（实证 + 触发条件）
2. [`src/components/Tooltip/Tooltip.vue`](../../../src/components/Tooltip/Tooltip.vue) — BaseTooltip 实现（line 171-255 是 arrow CSS 段）
3. [`src/canonical/Tooltip.vue`](../../../src/canonical/Tooltip.vue) — canonical wrapper（**只读，不改**），了解 placement map：figma `Center down`→`bottom` / `left down`→`bottom-start` / `right down`→`bottom-end` / `Center up`→`top` / `left up`→`top-start` / `right up`→`top-end`
4. [`playground/docs/pages/TooltipPage.vue`](../../../playground/docs/pages/TooltipPage.vue) — Position Preview 段渲染 6 个 dark theme variants × 6 pointing，可作视觉验收 fixture

---

## §2 — 任务

### 任务 2.1 — 实施 CSS 修改

按 §0 删 line 179-183 + 加 borders 到 4 个 placement group rules（bottom/top/right/left 各一组）。

具体变更预期 ~6-8 行 net diff（删 5 行 / 加 8 行 + position offsets 与 borders 合并）。

### 任务 2.2 — 视觉验收 12 placement

```bash
pnpm dev
# 浏览器开 TooltipPage → Position Preview 段 6 个 dark variants（含 left/Center/right × down/up）
# 浏览器开 TooltipPage → Interaction Preview 段 1 个（site theme dark = darkTheme=on = top-* 系列也有覆盖）
```

预期：
- 6 个 Position Preview 卡片的 6 个 placement (`bottom-start` / `bottom` / `bottom-end` / `top-start` / `top` / `top-end`) 的 arrow 都正确指向"Hover me"按钮（锚点方向）
- 截图至少**上下两类对比**（一个 bottom-* hover 显示 + 一个 top-* hover 显示）

如果 left/right placement 在 BadgePage 或 TooltipPage 没现成 fixture，可临时**只观察 SFC 静态分析**——left/right border 推断无法 dev 实测就在 STOP 报告里说明，不强行造 fixture。

### 任务 2.3 — typecheck

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

预期 0 错误（只动 CSS，不动 type）。

### 任务 2.4 — 不要动 backlog.md

backlog.md CANONICAL-001 → Resolved 迁移**由 plan owner 复审通过后做**，executor 不要动。

---

## §3 — 验收清单

- [ ] 删 line 179-183 `.tooltip-arrow--dark, .tooltip-arrow--light` 共用 borders 规则
- [ ] 4 个 placement group rules 各加合适的 borders 声明
- [ ] arrow size / position offsets / rotate / theme color 逻辑**没动**
- [ ] template / script / canonical/Tooltip.vue **没动**
- [ ] vue-tsc 0 错误
- [ ] dev 视觉验收：bottom-* 系列 arrow 正确（基线，不应有 regression）
- [ ] dev 视觉验收：top-* 系列 arrow 现在指向下方锚点（修复点）
- [ ] left-*/right-* 推断的 border 组合通过实测或静态分析合理化
- [ ] 没 commit / 没 git add
- [ ] 没动 backlog.md / canonical/Tooltip.vue / 任何其他文件

---

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

```
## CANONICAL-001 Tooltip arrow fix 完成报告

### 改动文件
- src/components/Tooltip/Tooltip.vue (修改 <style scoped> 段, +X/-Y 行)

### CSS diff
[贴 git diff 完整 hunk]

### 视觉验收
- bottom-* 系列 arrow（基线 regression check）: <OK / 不 OK + 说明>
- top-* 系列 arrow（fix 点）: <现在指向下方锚点 OK / 仍有问题>
- left-* / right-* 系列 arrow: <实测 OK / 静态分析推断合理 / 待 fixture 验证>
- 截图至少 2 张（bottom-* + top-* 对比）

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

### 验收 self-check
- [ ] 删 line 179-183 共用 borders 规则
- [ ] 4 个 placement group 各加 borders
- [ ] arrow size / offsets / rotate / theme color 没动
- [ ] template / script / canonical 没动
- [ ] 没 commit
- [ ] 没动 backlog.md

### 未解决项 / blocker
[如 left/right 推断 border 无法实测验证，列出；或修后视觉仍异常，描述]

STOP — 等 plan owner 复审 + 截图后做 backlog.md CANONICAL-001 迁 Resolved 段 + 进 Phase A1。
```

---

## §5 — 严守约束总览

- ⚠️ **不要 commit / 不要 git add**
- ⚠️ §0 裁定 fix 方向**确定**（border 从 theme 移到 placement），具体 borders 组合可按实测调整
- ⚠️ 仅动 1 文件 `<style>` 段，~8 行 diff
- ⚠️ 不为某 placement 加特例（每个 placement direction 用一致的几何镜像）
- ⚠️ bottom-* 系列必须 regression-pass（不能因修复 top-* 把 bottom-* 改坏）
- ⚠️ 不动 backlog.md（plan owner 复审通过后迁 Resolved）
- ⚠️ 完成 STOP，按 §4 格式回报