visionA/local-tool/.autoflow/03-design/spec/01-information-architecture.md

01 — 資訊架構（IA）

1.1 IA 總覽

visionA-local
│
├─ [1] Dashboard            ⌘1  — 首頁，快速開始 + 單機狀態
│
├─ [2] Models               ⌘2  — 模型庫（上傳、切換、比對 .nef）
│     ├─ Model List
│     ├─ Model Detail (drawer / modal)
│     ├─ Upload Dialog
│     └─ Comparison Dialog
│
├─ [3] Devices              ⌘3  — 實體 Kneron USB 裝置清單
│     ├─ Device List (grid)
│     ├─ Device Detail (drawer)
│     ├─ Connection Log
│     └─ [韌體燒錄已砍，不保留]
│
├─ [4] Workspace            ⌘4  — 推論工作區（核心操作頁）
│     ├─ 無裝置時：Empty State（引導接上裝置或切到 Mock）
│     ├─ 裝置選擇器（top bar）
│     ├─ Camera Feed + Overlay
│     ├─ Inference Panel（模型、參數、結果）
│     └─ Batch Image / Video Upload 分頁
│
└─ Settings                 ⌘,  — 設定（分頁式，4 分頁）
      ├─ 一般（語言、啟動行為、資料目錄、主題唯讀顯示）
      ├─ 硬體（執行模式 Real/Mock、USB 權限、Port 設定）
      ├─ 模型（預置模型開關、自訂模型路徑）
      └─ 進階（日誌、重置、關於）

1.2 主導航

#	項目	圖示	路由（內部）	快捷鍵	預設頁面
1	Dashboard	LayoutDashboard	/	⌘1	—
2	Models	Box	/models	⌘2	—
3	Devices	Cpu	/devices	⌘3	—
4	Workspace	Play	/workspace	⌘4	最近使用的裝置；無則 empty state
—	Settings	Settings	/settings	⌘,	一般分頁

Settings 與 4 個主區塊視覺分離：Settings 放在 sidebar 最下方（靠底對齊），並用 divider 與主導航區隔。

1.3 Sidebar 結構

┌─────────────────┐
│  [logo] visionA │   ← logo 區（32px 高）
│  -local         │
├─────────────────┤
│ ⊞ Dashboard     │   ← 主導航（48px per item，含 icon + label）
│ ▣ Models        │
│ ▣ Devices       │
│ ▶ Workspace     │
│                 │
│  ...            │
│  (spacer)       │
│                 │
├─────────────────┤
│ ● Server: Idle  │   ← Server 狀態（唯讀，常駐）
│   localhost:3721│
├─────────────────┤
│ ⚙ Settings      │
└─────────────────┘

• 寬度：展開 240px / 收合 64px
• 預設狀態：展開
• 收合時：只顯示 icon，hover 時用 tooltip 顯示 label
• 沒有漢堡按鈕：桌面版 sidebar 固定，不提供折疊（減少決策疲勞）；最小視窗寬度 960px 保證 sidebar 不會擠壓

1.4 Header（Top Bar）

┌────────────────────────────────────────────────────────────┐
│ [當前頁標題]          [Mock badge (if mock)]  [連線狀態] [?] │
└────────────────────────────────────────────────────────────┘

• 高度：56px
• 內容：
  • 左：當前頁面標題（h1）
  • 右：
    • Mock 模式時，顯示黃色 Mock badge（hover 有 tooltip 說明）
    • Server 連線狀態小燈（綠/黃/紅）
    • 幫助按鈕（打開 Help drawer）
• 無麵包屑：IA 扁平，不需要
• 無全域搜尋：local 版資料量小，個別頁面內建過濾即可

1.5 路由與 Deep Link 策略

• 內部路由：沿用原 Next.js 檔案系統路由，但所有 URL 對使用者隱藏（無 URL bar）
• 不支援外部 deep link：因為是桌面 app，不會有「別人把連結傳給我」的情境
• App 內跳轉：macOS 原生 menu bar 的快速動作（如「新增裝置掃描」「上傳模型」）會跳轉到對應頁面＋開啟對應 modal
• 路由歷史：保留瀏覽歷史，以支援 App 選單的「前進／後退」（或快捷鍵 ⌘[ / ⌘]）

1.6 導航決策理由

決策	理由
不放 Workspace 到 Devices 子頁	Workspace 是高頻核心動作，放 sidebar 一級可降低點擊數；原專案把它藏在 /devices/[id]/workspace 的二層路徑太深
Settings 獨立於 4 大區	Settings 不是日常導航目標，放底部＋icon only 可讓焦點集中在主功能
取消全域搜尋	本地資料量（模型數 < 50、裝置數 < 10），逐頁過濾即可
取消麵包屑	IA 只有兩層，不需要