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 改寫重點
// 移除
- { href: '/clusters', label: 'Clusters', icon: Network }
- <RelayTokenSync />
// 新增
+ { href: '/workspace', label: 'Workspace', icon: Play }
+ <ServerStatusBadge /> // 底部常駐
// 移除
- <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 層與前端同步刪乾淨。
jim800121chen
5a8d2797c2