Wireframe — /clusters
文字版 wireframe。從 edge-ai-platform POC 搬來，視覺對齊既有 Shadcn 風格。
佈局（Desktop）
┌────────────────────────────────────────────────────────────────┐
│ [Sidebar] [Header] │
│ ────────────────────────────────────────────────────────────── │
│ │
│ 叢集 [+ 建立叢集] │
│ 管理你的多裝置推論叢集 │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ ClusterCard A │ │ ClusterCard B │ │ ClusterCard C │ │
│ │ │ │ │ │ │ │
│ │ Production A │ │ Dev Cluster │ │ Test Cluster │ │
│ │ 🟢 推論中 │ │ 🔵 閒置 │ │ 🟡 降級 │ │
│ │ │ │ │ │ │ │
│ │ 裝置：3 │ │ 裝置：2 │ │ 裝置：3 │ │
│ │ 模型：yolov5s │ │ 模型：- │ │ 模型：yolov5s │ │
│ │ │ │ │ │ │ │
│ │ • KL520 w=3 🟢│ │ • KL720 w=1 🟢│ │ • KL520 w=3 🟢│ │
│ │ • KL720 w=1 🟢│ │ • KL520 w=1 🟢│ │ • KL720 w=1 🟢│ │
│ │ • KL520 w=3 🟢│ │ │ │ • KL520 w=3 ⚪│ │
│ │ │ │ │ │ │ │
│ │ [工作區][刪除] │ │ [工作區][刪除] │ │ [工作區][刪除] │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
ClusterCard 規格（沿用 POC 的 cluster-card.tsx，加強化）
┌───────────────────────────────────────┐
│ CardHeader (pb-3) │
│ ┌─────────────────────┐ ┌───────────┐ │
│ │ CardTitle text-base │ │ Badge │ │
│ │ Production Cluster A│ │ 狀態 │ │
│ └─────────────────────┘ └───────────┘ │
│ │
│ CardContent (space-y-3) │
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 裝置 (label) │ │ 模型 (label) │ │
│ │ 3 (value) │ │ yolov5s │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ 裝置列表（text-xs）: │
│ • office-mac KL520 w=3 [🟢 在線] │
│ • home-pi KL720 w=1 [🟢 在線] │
│ • backup KL520 w=3 [⚪ 離線] │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ [工作區] │ │ [刪除] │ │
│ │ outline │ │ ghost │ │
│ └──────────┘ └──────────┘ │
└───────────────────────────────────────┘
狀態 Badge
| 狀態 |
Badge variant |
文字 |
| idle |
secondary |
閒置 |
| inferencing |
default |
推論中 |
| degraded |
destructive (實際用 yellow) |
降級執行中 |
| offline |
secondary + opacity-50 |
全部離線 |
雲端版新增
| 位置 |
改動 |
| 每個裝置項目右側 |
新增 RemoteDeviceBadge（🟢 / ⚪） |
| degraded 狀態 |
Badge 旁加 Tooltip 說明「X 裝置離線，已自動降級」 |
| 「建立叢集」Dialog 的裝置選擇器 |
只列出 remoteStatus === 'online' 的裝置；離線裝置 disabled |
空狀態
┌────────────────────────────────────────────────────────────────┐
│ │
│ 🕸 │
│ │
│ 還沒有叢集 │
│ │
│ 叢集讓你把多台 Kneron 裝置組合起來做平行推論 │
│ │
│ [建立第一個叢集] │
│ (若沒有任何已配對裝置則 disabled + tooltip: │
│ 「請先配對至少 1 台裝置」) │
│ │
└────────────────────────────────────────────────────────────────┘
使用既有 EmptyState 元件，icon = Lucide Network。
建立叢集 Dialog（沿用 POC）
Dialog: 建立叢集
叢集名稱 * [________________________]
選擇裝置：
☑ Kneron KL520 (office-mac) 權重 [3 ▼] 🟢 在線
☑ Kneron KL720 (home-pi) 權重 [1 ▼] 🟢 在線
☐ Kneron KL520 (backup) 權重 [- ] ⚪ 離線 (disabled)
模型：[ yolov5s ▼ ]
[取消] [建立]
互動
| 操作 |
行為 |
| 點卡片「工作區」 |
跳 /workspace/cluster/[id] |
| 點卡片「刪除」 |
AlertDialog 確認後呼叫 DELETE /api/clusters/:id |
| 點「建立叢集」 |
開 ClusterCreateDialog |
| 切換 degraded 狀態 tooltip |
Hover / Focus Badge 時顯示原因 |
響應式
| 斷點 |
欄數 |
| Mobile (< 640px) |
1 欄 |
| Tablet (640-1024) |
2 欄 |
| Desktop (≥ 1024) |
3 欄 |
無障礙
- Card 整體可 Tab 聚焦（若設為
asChild Link）
- 刪除 AlertDialog 焦點陷阱（shadcn 內建）
- 狀態 Badge 有文字 + 顏色雙重傳達
- Tooltip 使用
aria-describedby
i18n key（沿用 POC cluster.*）
cluster.title → 叢集
cluster.subtitle → 管理你的多裝置推論叢集
cluster.createCluster → 建立叢集
cluster.devices → 裝置
cluster.openWorkspace → 工作區
cluster.deleteConfirm → 確定要刪除「{name}」嗎？
cluster.status.idle → 閒置
cluster.status.inferencing → 推論中
cluster.status.degraded → 降級執行中
cluster.emptyTitle → 還沒有叢集
cluster.emptyDescription → 叢集讓你把多台 Kneron 裝置組合起來做平行推論
cluster.emptyAction → 建立第一個叢集
cluster.noDevicesHint → 請先配對至少 1 台裝置
jim800121chen
fb7da5d180