jim800121chen
fb7da5d180
依 autoflow-agent workspace v2 設計把 PRD / 設計 / 架構 / 交付類 共享文件從個人層 .autoflow/（ignored）搬到 docs/autoflow/（進 git）， 讓團隊可共享產品與架構文件，個人層只留 progress / review / testing 等 per-branch 筆記。 - 02-prd/ 21 個檔（PRD、features、market-analysis 等） - 03-design/ 18 個檔（design-spec、wireframes、flows 等） - 04-architecture/ 31 個檔（TDD、design-doc、ADR×14、API 規格等） - 07-delivery/ 3 個檔（project-summary、phase-0.6-handover、stage-deployment-setup） 合計 73 檔。原檔已從 .autoflow/ 移除（migration 工具執行 git mv， 但因 .autoflow/ 在 .gitignore 中、git 將此操作視為新增、無 rename history）。
178 lines
8.1 KiB
Markdown
178 lines
8.1 KiB
Markdown
# 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 台裝置
|
||
```
|