Dashboard 版型預覽

一個用本設計系統元件組出來的行銷成效儀表板,給設計師參考整體版面、間距、卡片與色彩的搭配方式。所有內容皆為 Element Plus + Accuhit 品牌樣式,沒有額外自刻樣式。

loading

這個版型用到哪些規範

區塊	用到的元件 / 規範
頁面底色 + 卡片	bg-page 底 + Card 卡片(shadow="never"),圓角 8px
時間切換	Segmented 分段控制器
主要操作	Button 按鈕:一個畫面一顆 primary
KPI 指標卡	Layout 柵格分四欄 + 大數字(Tailwind text-3xl)+ 漲跌用語意色
活動列表	Table 表格 + Tag 標籤(管道 round、狀態 plain)
管道 / 客群佔比	Progress 進度條(線形 + 儀表盤)
最新動態	Timeline 時間線
間距	卡片之間 20px(gutter="20" / mb-5),卡片內距 20px

設計準則(儀表板)

• 一頁一個重點:最重要的 KPI 放最上方一整排,一眼看完關鍵數字
• 卡片分區、留白分組:相關資訊放同一張卡,卡與卡之間用 20px 間距,不要塞滿
• 顏色跟著語意:漲用 success、跌用 danger;圖表 / 分類佔比才用擴充色盤,避免和語意色混淆
• 大數字用 Tailwind 字級(> 20px),小標題與說明用 text-secondary
• 表格輕量化:狀態、管道用 Tag 呈現,數字靠右對齊方便比對
• 這是靜態預覽;實際串接資料、載入中骨架、空狀態請依各元件頁的規範補上

給設計師

可以直接參考這個版面的欄位切分(KPI 4 欄、主區 16 / 8 分欄)、卡片圓角(8px)與間距(20px)來畫設計稿。點右下角 <> 可展開原始碼看每個區塊怎麼組。