# 02 — 頁面與元件變更對照

對照原 `/Users/jimchen/Innovedus/edge-ai-platform/edge-ai-platform/frontend` 盤點結果。

## 2.1 頁面層級

| 原路由 | 決定 | visionA-local 對應 | 說明 |
|--------|------|---------------------|------|
| `/`（Dashboard） | ✅ **保留但重新設計** | `/` | 原為叢集總覽，改為「快速開始 + 單機狀態」 |
| `/models` | ✅ 保留 | `/models` | 移除 cluster 相關欄位 |
| `/devices` | ✅ 保留 | `/devices` | 移除 cluster 分組、flash 按鈕 |
| `/clusters` | ❌ **整個刪除** | — | 決策已定 |
| `/workspace/[deviceId]` | ✅ 保留 | `/workspace?device=...` 或 `/workspace/[deviceId]` | 新增裝置選擇器 top bar |
| `/workspace/cluster` | ❌ **整個刪除** | — | |
| `/settings` | ✅ **保留但重構** | `/settings/[tab]` | 從長捲頁改為分頁式 |

## 2.2 元件目錄

### 保留（全數）

| 原目錄 | 元件 | 備註 |
|--------|------|------|
| `components/camera/` | camera-feed、camera-controls、camera-overlay、source-selector、camera-inference-view、batch-image-thumbnails | 全保留 |
| `components/devices/` | device-card、device-list、device-health-card、device-connection-log、device-status | 移除 flash-dialog、flash-progress |
| `components/models/` | model-card、model-grid、model-filters、model-upload-dialog、model-detail、model-comparison-dialog | 全保留 |
| `components/inference/` | inference-panel、classification-result、confidence-slider、performance-metrics、video-progress | 全保留 |
| `components/dashboard/` | stat-card、activity-timeline、connected-devices-list | 拿掉 cluster 欄位 |
| `components/layout/` | sidebar、header、connection-status、help-button | 改寫，見 §2.3 |
| `components/ui/` | shadcn 元件組 | 全保留 |
| onboarding-dialog.tsx、guided-tour.tsx | 強化（見 04-first-run） |
| server-log-viewer.tsx、server-status-dashboard.tsx | 移至 Settings > 進階 |
| theme-sync.tsx、lang-sync.tsx、store-hydration.tsx | 全保留 |

### 刪除

| 原目錄／檔案 | 原因 |
|------------|------|
| `components/cluster/`（全目錄） | Cluster 功能砍掉 |
| `components/devices/flash-dialog.tsx`、`flash-progress.tsx` | 韌體燒錄 Q9 決策砍掉 |
| `components/relay-token-sync.tsx` | Relay 功能砍掉 |
| `app/clusters/`（全目錄） | 對應頁面砍掉 |
| `app/workspace/cluster/`（全目錄） | 同上 |

### 修改

| 元件 | 修改內容 |
|------|---------|
| `layout/sidebar.tsx` | 刪除 clusters 導航項；把 workspace 提升為主導航；logo 字樣改「visionA-local」；底部加 Server 狀態卡 |
| `layout/header.tsx` | 新增 Mock badge 顯示邏輯；刪除 relay mode switcher；連線狀態改為「Server running / idle / error」 |
| `layout/connection-status.tsx` | 語意從「Relay tunnel」改為「Local server」 |
| `dashboard/stat-card.tsx` | 移除 cluster 統計；重新設計 stat 組合（見 03-wireframes） |
| `dashboard/activity-timeline.tsx` | 過濾掉 cluster-related event |
| `app/settings/page.tsx` | 改為分頁 layout |
| `app/page.tsx` | 整頁重寫（見 03-wireframes Dashboard 章） |

## 2.3 Layout 改寫重點

### sidebar.tsx

```tsx
// 移除
- { href: '/clusters', label: 'Clusters', icon: Network }
- <RelayTokenSync />

// 新增
+ { href: '/workspace', label: 'Workspace', icon: Play }
+ <ServerStatusBadge /> // 底部常駐
```

### header.tsx

```tsx
// 移除
- <RelayModeSwitcher />

// 新增
+ {isMockMode && <MockBadge />}
+ <PageTitle />  // 取代原來的 logo-in-header（logo 只在 sidebar 顯示）
```

## 2.4 新元件

| 元件 | 放置位置 | 用途 |
|------|---------|------|
| `FirstRunWizard` | `components/first-run/` | 三步引導流程 |
| `ModeSelector` | `components/first-run/` | 真實/Mock 模式選擇卡 |
| `HardwareDetectionStep` | `components/first-run/` | USB 掃描進度與結果 |
| `MockBadge` | `components/layout/` | Header 右側 Mock 指示 |
| `ServerStatusBadge` | `components/layout/` | Sidebar 底部 server 狀態 |
| `EmptyWorkspace` | `components/workspace/` | 無裝置引導畫面 |
| `SettingsTabs` | `components/settings/` | 分頁 layout |
| `QuickStartCard` | `components/dashboard/` | Dashboard 首屏的 CTA 卡組 |
| `LanguageSwitcher` | `components/settings/` | i18n 切換 |
| `SignatureWarningNotice` | `components/first-run/` | 解釋 Gatekeeper/SmartScreen 警告（疑問 #5） |

## 2.5 被移除元件回收清單

以下程式碼可以從原專案直接刪除（不需要轉移到 local_tool）：

```
components/cluster/**/*
components/relay-token-sync.tsx
components/devices/flash-dialog.tsx
components/devices/flash-progress.tsx
app/clusters/**/*
app/workspace/cluster/**/*
```

提醒：Architect 的 round 1 分析已列出對應的後端刪除清單，請確認 API 層與前端同步刪乾淨。