wehub-skill-sync
211 lines
6.6 KiB
Markdown
211 lines
6.6 KiB
Markdown
# 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"、不要感叹号。
|