# 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 只有兩層，不需要 |