wehub/skillhub-034-live-dashboard

Fork 0

Files

T

wehub-skill-sync 15235ed7a3 chore: import zh skill live-dashboard

2026-07-13 21:35:48 +08:00

6.6 KiB

Raw Permalink Blame History

Components

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

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

live-pill（顶栏右上角）

<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 网格的一个单元格）

<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，手写）

<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——单个构件，无外部依赖。

活动信息流行

<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 标准五色集）

<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`	待办

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

关联数据库行

<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 / 阴影。

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

<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"。

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

<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，以便刷新后恢复状态。

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

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

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

标注（Notion 惯用风格）

<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>

6.6 KiB Raw Permalink Blame History Unescape Escape