Empty 空狀態

沒有資料時的占位畫面。使用 Element Plus 的 el-empty。

設計準則

• 空狀態一定要給出口:告訴使用者為什麼是空的、下一步做什麼(「建立活動」按鈕)
• 文案分兩種:首次使用(還沒有任何活動,建立第一個吧)和篩選無結果(找不到符合的活動,試試放寬條件);不要共用一句
• 表格、列表、搜尋結果的空狀態統一用這個元件,不要各自手刻
• 插圖尺寸跟著容器:整頁空狀態用預設,卡片內用 image-size 縮小

基本用法

loading

給出口(建議的標準用法)

loading

自訂圖片與尺寸

image 換品牌插圖、image-size 控制大小:整頁空狀態用預設(約 120px),卡片內縮到 60–80px:

loading

Do / Don't

✅ Do	❌ Don't
空狀態附下一步按鈕	一張圖加「暫無資料」就結束
首次使用/無結果分開寫	所有空狀態同一句話
統一用 el-empty	各頁自己畫

給工程師

完整 API 見 Element Plus Empty 文件。 本站規範優先於 EP 文件中的視覺建議。