# Components

将以下标记形状逐字复制。通过当前活动的 `DESIGN.md`
（颜色、排版、间距令牌）重新换肤。不要发明新的组件
形状——那是 AI 垃圾混入的地方。

所有代码片段假定 `assets/template.html`
中定义了 CSS 自定义属性（`--ink`、`--ink-2`、`--bg-soft`、`--accent`、
`--line`、`--pill-*-bg/ink` 等）。

---

## live-pill（顶栏右上角）

```html
<div class="pill-live" id="livePill">
  <span class="dot"></span>
  <span id="liveText">Live · synced</span>
</div>
```

三种状态：

| 状态   | `.pill-live` 上的类 | 圆点颜色 | 文本                     |
|---      |---                 |---      |---                      |
| 空闲   | (无)               | 绿色     | `Live · synced`         |
| 同步中 | `.syncing`         | 强调色   | `Syncing…`              |
| 过期   | `.stale`           | 琥珀色   | `Stale · 2 min ago`     |

绿色圆点播放 1.8 秒的 `pulse` 关键帧动画。在
`prefers-reduced-motion` 时禁用。

---

## KPI 卡片（KPI 网格的一个单元格）

```html
<div class="kpi">
  <div class="label">Total tasks</div>
  <div class="value" id="kTotal">142</div>
  <div class="delta up"><span class="arr">↑</span> 6 vs last week</div>
</div>
```

规则：
- `.value` 为 `font-size: 32px; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums`
- `.label` 为 `12px uppercase letter-spacing .03em`，颜色 `--ink-2`
- `.delta.up` → 绿色；`.delta.down` → 红色；中性 `.delta` 为灰色
- 刷新时，用 600 毫秒三次缓出的方式将 `value` 从旧值过渡到新值，
  并添加持续 700 毫秒的 `.flash`（短暂地将数字变为 `--accent-ink`
  颜色）。
- **切勿**在数字下方放置彩色进度条。
- **切勿**在 KPI 卡片内放置迷你走势图——迷你走势图应放在
  两列区块中。

---

## 迷你走势图（SVG，手写）

```html
<svg class="spark" viewBox="0 0 600 140" preserveAspectRatio="none">
  <g class="spark-grid">
    <line x1="0" y1="35"  x2="600" y2="35"/>
    <line x1="0" y1="70"  x2="600" y2="70"/>
    <line x1="0" y1="105" x2="600" y2="105"/>
  </g>
  <path class="spark-fill" d=""></path>
  <path class="spark-line" d=""></path>
  <g id="sparkDots"></g>
  <g id="sparkLabels" class="spark-axis"></g>
</svg>
```

CSS：
- `.spark-fill` 为 `fill: rgba(<accent-rgb>, 0.10)`
- `.spark-line` 为 `fill: none; stroke: var(--accent); stroke-width: 2`
- `.spark-grid line` 为 `stroke: var(--line); stroke-dasharray: 2 3`
- `.spark-dot`（圆形，r=3）为 `fill: var(--accent)`

从长度为 7 的序列计算路径，在 600×140 的 viewBox 内
四周留白（左/右 24，上 16，下 10）。今天的数据库桶位于右侧。

不要使用 Chart.js / Recharts / D3——单个构件，无外部依赖。

---

## 活动信息流行

```html
<div class="feed-row">
  <span class="av" style="background:#f1c40f">SC</span>
  <div class="body">
    <span class="who">Sarah Chen</span>
    <span class="what"> moved</span>
    <span class="target"> 🚀 Q3 Roadmap planning</span>
    <span class="what"> to In progress</span>
  </div>
  <div class="time">3 min ago</div>
</div>
```

- 头像：26 像素圆形，两个字母的首字母缩写，颜色按人固定。
- `.target` 添加 1 像素虚线下划线和 `cursor: pointer`。
- 刚插入的行在 2 秒内获得 `.new` 类——应用柔和的
  `rgba(<accent>, .06)` 背景，并在名称前添加 `•` 项目符号。
- 每 15 秒重新渲染相对时间戳。

---

## 状态药丸（Notion 标准五色集）

```html
<span class="pill done">Done</span>
<span class="pill progress">In progress</span>
<span class="pill blocked">Blocked</span>
<span class="pill review">In review</span>
<span class="pill todo">To do</span>
```

| 类         | 背景色         | 前景色         | Notion 标签  |
|---        |---            |---            |---          |
| `done`    | `#dbeddb`     | `#2b593f`     | 已完成      |
| `progress`| `#fdecc8`     | `#976d23`     | 进行中      |
| `blocked` | `#ffe2dd`     | `#b13b2c`     | 已阻塞      |
| `review`  | `#d3e5ef`     | `#1f5b78`     | 审核中      |
| `todo`    | `#e9e5e3`     | `#5a534f`     | 待办        |

不要引入额外的状态。将任何项目特定的状态映射到以上
五种之一。

---

## 关联数据库行

```html
<div class="db-row">
  <div class="db-cell">📐</div>
  <div class="db-cell title"><span class="t">Design tokens v2 spec</span></div>
  <div class="db-cell"><span class="pill review">In review</span></div>
  <div class="db-cell"><span class="person">…avatar…<span>Lisa Zhao</span></span></div>
  <div class="db-cell due">May 14</div>
  <div class="db-cell priority">Med</div>
</div>
```

- 六列网格：`32px 2.4fr 1fr 1fr 0.9fr 0.9fr`
- `.db-row.changed` 通过 `rowflash` 关键帧触发 1.4 秒的行闪烁动画。
- 悬停：`background: var(--bg-soft)`。无 transform / 阴影。

---

## 刷新按钮（页面头部，主要）

```html
<button class="btn primary" id="refreshBtn">
  <span class="ico" id="refreshIco">↻</span>
  <span>Refresh from Notion</span>
</button>
```

- 默认：`background: var(--accent); color: #fff;`
- 悬停：`background: var(--accent-ink)`
- 轮询期间：给 `.ico` 添加 `.spin` 类，通过 JS 中的 `busy` 标志
  禁用按钮点击（**不要**依赖 `[disabled]`，以保持视觉样式一致）。
- 标签根据连接器调整："Refresh from Notion" / "Refresh from
  Linear" / "Refresh from Stripe"——不要只用 "Refresh"。

---

## 自动刷新开关（页面头部，幽灵按钮）

```html
<button class="btn ghost" id="autoBtn" title="Auto refresh every 30s">
  <span>⏱</span><span id="autoLbl">Auto · on</span>
</button>
```

切换 `setInterval(refresh, refresh_seconds * 1000)`。持久化到
`localStorage.live_dashboard_auto`，以便刷新后恢复状态。

---

## 提示条（底部居中，临时性）

```html
<div class="toast" id="toast">Synced — 3 changes from Notion</div>
```

`position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);`
1800 毫秒自动消失。深色 `#1f1f1f` 背景，白色文字。一次只显示一个
提示条；后续调用重置计时器。

---

## 标注（Notion 惯用风格）

```html
<div class="callout">
  <div class="emj">💡</div>
  <div>
    <div><strong>This page is a Live Artifact.</strong> Numbers below are pulled from
    your <strong>Acme Studio</strong> Notion workspace via the Composio connector.</div>
    <small>Refreshes on demand or when the page opens. Last 7 days only.</small>
  </div>
</div>
```

一个简短的陈述句 + 一行较小的元信息说明。不要营销文案、
不要"Powered by"、不要感叹号。