今天內容偏範例專案導覽~

需求

如同前幾天文章所說，這系列需要一個能公開分享、任何人都能 clone 下來重現的實驗場，因此，我請 AI 生成了一個 Electron 專案作為範例。為了讓我後續可以展示各種使用情境，我有刻意把畫面弄複雜一點點。如果後面有想到新的情境，也會直接改這個範例。

至於為什麼不拿別人現成的開源專案就好，主要是我懶得花時間找合適的專案，不如直接叫 AI 生一個符合自己想像的就好。

範例 Electron App：DemoStreamApp

專案在這裡：auto-manual-gen，底下的 apps/demo-stream-app 就是今天的主角。(文件還不是很完整，之後會慢慢補齊XD)

DemoStreamApp 是一個虛構的 AI 影像串流監控台，用 Electron + Vue 3 + Vite 打造，只有兩個分頁：

• 即時監控：左欄是統計卡與攝影機清單（15 台，多到需要捲動），右欄是可切換 1×1 / 2×2 / 3×3 / 4×4 的畫面牆。雙擊左欄的攝影機就依序填進右側第一個空格，按格子右上角的 ✕ 只清掉那一格；配好的版面可以存成具名的「版面設定」，之後從下拉選單一鍵套回來。
• 系統設定：告警、動作偵測、人臉辨識三組開關（子設定是條件渲染的，總開關一關整塊就從 DOM 消失），加上僅管理員可見的「授權與裝置」區塊。

另外，值得一提的一點是，同一份前端程式碼也能單獨當純 Web 應用跑起來。這樣就可以同時 Demo 兩種類型 (Electron 與 Web)。畫面右上角會直接顯示目前是哪一種模式。

把範例跑起來

把 DemoStreamApp 執行起來的方法並不難，首先，準備 Node.js 環境，接著 git clone 專案下來之後，在 repo 根目錄安裝套件，然後用指令把 Web 版或 Electron 版跑起來：

npm install

npm run demo            # Web 模式，http://localhost:5173
npm run demo:electron   # Electron 模式（會先 build 再啟動）

兩個指令跑的是同一份前端。另外，畫面上所有資料（攝影機名稱、RTSP 位址、授權金鑰）都是捏造的，「即時影像」是純 CSS 畫出來的假畫面，不含任何真實影像。

Repo 怎麼擺

最後補一下 repo 的全貌，因為後面每天的實作都會長在這張圖上。

根目錄就是 Day 05 那張資料夾結構圖的樣子：manifest/、docs/、fixtures/、templates/、runner/、screenshots/、output/ 全都在根目錄，也就是說，這個 repo 自己就是一本手冊專案。目前是骨架階段，除了範例 App 以外都還是空的。

比較起來只多了兩個目錄：

auto-manual/
├─ (Day 05 的那一整棵樹)
├─ agent/                  # 給 AI agent 的上下文，另含 diff-pairs：已知答案的圖對
└─ apps/demo-stream-app/   # 靶：今天講的這個 App

agent/ 是 Day 05 沒畫到的部分，之後談 AI 怎麼寫 manifest、怎麼判讀截圖差異時會用到。

至於 apps/，這裡要先講清楚一件事：範例 App 與手冊產線，實務上應該是兩個獨立的 repo。 產品有產品的版控節奏，產線是另一套工具，硬綁在一起只會互相牽制。這邊放在同一個 repo，純粹是為了方便展示，讓大家 clone 一次就能同時拿到靶跟打靶的工具，不用在兩個專案之間切換。

補充說明

有兩個觀念我想先提一下：

1. 開發模式與 build 後載入的不是同一個東西

   Electron 的 main process 會讀 VITE_DEV_SERVER_URL，有值就載 dev server，沒有就載 dist/index.html。在使用手冊產線中，必須走後者，也就是 build 後的樣子，才會與實際產品狀況一致。所以驅動 Electron 之前必須先 build。這部份明天設定啟動參數時會再對照一次。

2. Web 跑得起來不等於 Electron 跑得起來

   有些設定在 Web 與 Electron 中的處理邏輯不太一樣，例如：vite.config.ts 裡的 base: './' 不能拿掉，改成絕對路徑後 Web 版沒事，Electron 版因為走 file:// 會直接變成白畫面。同一類的還有 useContentSize: true，加了它視窗尺寸的 1600×900 指的才是內容區而不是含邊框的視窗，截圖尺寸才能跨平台一致。

明天會正式讓 Playwright 把這個 App 啟動起來，同時處理 Electron 與 Web 兩條路線，並讓大家感受到 Electron 與 Web 之間的差異。