技能概述
Dashboard Widget 技能生成可獨立使用的儀表板小組件。每個 Widget 是一個自包含的卡片組件，內含：KPI 數字顯示、Sparkline 迷你趨勢圖（inline SVG）、進度條或環形圖。可以單獨使用，也可以組合嵌入大型儀表板。所有顏色和字體來自 DESIGN.md tokens。
觸發關鍵字
- dashboard widget、widget、KPI card、mini chart
- sparkline、數據卡片、metric card、小組件
什麼時候用
- 需要獨立的數據展示卡片
- 嵌入現有管理系統的監控組件
- 個人 Dashboard 的核心指標展示
- 簡報中的數據可視化卡片
使用方法
實際場景
場景一：SaaS 產品監控面板
你需要在管理後台展示 4 個核心指標：今日活躍用戶、API 調用次數、服務可用性、本月收入。每個指標用一個 Widget 卡片展示，包含當前數值、環比變化（+12%）、和 7 天 Sparkline 趨勢線。點擊任意卡片可下鑽查看詳細報表。
場景二：個人投資組合追蹤
展示你的投資組合表現：總資產、今日收益、年化回報率、持倉分佈。每個 Widget 使用不同顏色區分類別，Sparkline 顯示 30 天走勢。
核心實現
<!-- KPI Widget -->
<div class="widget kpi">
<div class="widget-header">
<span class="label">今日活躍用戶</span>
<span class="delta positive">+12.3%</span>
</div>
<div class="value">12,847</div>
<!-- Sparkline -->
<svg class="sparkline" viewBox="0 0 100 30" preserveAspectRatio="none">
<polyline fill="none" stroke="#2563eb" stroke-width="1.5"
points="0,25 10,22 20,20 30,24 40,18 50,15 60,16 70,10 80,12 90,8 100,5"/>
<polyline fill="url(#gradient)" stroke="none" opacity="0.2"
points="0,30 0,25 10,22 20,20 30,24 40,18 50,15 60,16 70,10 80,12 90,8 100,5 100,30"/>
</svg>
</div>
<style>
.widget {
background: var(--card-bg, #fff);
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.widget-header { display: flex; justify-content: space-between; }
.value { font-size: 2rem; font-weight: 700; margin: 0.5rem 0; }
.delta.positive { color: #16a34a; }
.delta.negative { color: #dc2626; }
.sparkline { width: 100%; height: 30px; }
</style>
數據來源
// 示例：從 API 獲取數據並更新 Widget
async function updateWidget() {
const res = await fetch('/api/metrics/active-users');
const data = await res.json();
document.querySelector('.kpi .value').textContent = data.current.toLocaleString();
document.querySelector('.kpi .delta').textContent = `+${data.delta}%`;
// 更新 sparkline points...
}
setInterval(updateWidget, 60000); // 每分鐘刷新
自檢清單
- 數值千位分隔符正確
- Sparkline 數據點 ≥ 7 個
- 漲跌顏色區分（綠漲紅跌）
- 卡片懸浮有微交互
- 響應式適配移動端
使用場景示例
場景一：SaaS 產品監控面板
管理後台展示 4 個核心指標：今日活躍用戶、API 調用次數、服務可用性、本月收入。每個 Widget 包含當前數值、環比變化和 7 天 Sparkline 趨勢線。
場景二：個人投資組合追蹤
展示投資組合表現：總資產、今日收益、年化回報率、持倉分佈。每個 Widget 使用不同顏色區分類別，Sparkline 顯示 30 天走勢。
場景三：電商運營儀表板
展示 GMV、訂單量、轉化率、客單價等核心指標，每個 Widget 帶環比變化和迷你趨勢圖，方便快速掌握業務健康度。