PA04▸🧩 Compose · 互動組合▸資料容器

Bento Data View

便當格資料容器

難度 ★★★★★標籤 bento · skeleton · 狀態3 min read

模式簡述

Bento 格子是 dashboard 的主流佈局。每格獨立載入、獨立失敗，把「整頁 loading / 整頁錯誤」的舊範式解構掉。重點：部分失敗不要拖累其他格子。

▸ skeleton|全部 skeleton 載入中

Claude Code Prompt

💬 Claude Code Prompt

參考：PA04 bento-data
技術：CSS Grid + per-cell 狀態

具體行為：
- 6 格 grid（手機 2 欄、平板以上 3 欄）
- 每格獨立顯示：title (uppercase mono)、value (2xl 數字)、trend (綠/紅)
- 載入：每格 skeleton（3 行 pulse）
- 部分失敗：失敗的格子顯示 error icon + retry
- 空：整片 dashed border + Inbox icon

限制：
- 數字用 tabular-nums，避免跳寬
- trend 正負用顏色區分（綠 emerald / 紅 red）
- 不要把所有格子做成一樣的視覺，沒有層次

完整程式碼

BentoData.tsx

function Cell({ title, value, trend, variant = 'normal' }) {
if (variant === 'skeleton') {
  return (
    <div className="rounded-lg border p-4 space-y-2">
      <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
      <div className="h-6 w-2/3 animate-pulse rounded bg-muted" />
    </div>
  )
}
if (variant === 'error') {
  return (
    <div className="rounded-lg border p-4">
      <span>{title}</span>
      <p className="text-red-500">載入失敗</p>
      <button>重試</button>
    </div>
  )
}
return (
  <div className="rounded-lg border p-4">
    <p className="text-xs uppercase">{title}</p>
    <p className="text-2xl tabular-nums">{value}</p>
    <p className={trend.startsWith('-') ? 'text-red-500' : 'text-emerald-500'}>{trend}</p>
  </div>
)
}

何時用

✅ Dashboard（多指標、各自更新節奏不同）
✅ 後台監控介面
✅ 個人首頁的多模組概覽

何時別用

❌ 資料只有 1-2 個指標（過度設計）
❌ 資料之間有強因果關係（用 chart 更好）
❌ 純文字內容（用 list 即可）

我踩過的坑

整頁一個 loading 狀態：第 1 個 API 還沒回，第 5 個已經回了也看不到。每格獨立 loading 才是 bento 的精神。
數字不是 tabular-nums：每 5 秒更新一次數字，寬度一直跳，旁邊的 trend 也跟著抖。加 tabular-nums 解決。
error 的 retry 沒做：一格失敗就要使用者 reload 整頁，超爛。每格獨立 retry，使用者體驗差很多。

模式簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關模式

搜尋