[IT 鐵人賽] 洞府選址：SwiftUI、Tauri、Electron 三選一，我要最快長出 IDE 的那個 - Day 04
本文同步刊登於 2026 iThome 鐵人賽，系列為《凡人修 Agent 傳－我這一生如履薄冰，你說我的 Agent 能結嬰嗎？》。
原始開發紀錄：Agent Build Log — Episode 004
這個系列改寫自我部落格上的 Agent Build Log，那是我每天邊做邊寫的開發紀錄。上面列的是這一篇對應的集數，想看當天的原始版本，點連結就能過去。
結論先講：Desktop App 用 Electron。
昨天講了為什麼要有 Desktop App，一個像 Codex App 那樣、日常開著用的視窗。開工之前，先選框架。我當時只比了三個：SwiftUI、Tauri、Electron。這篇講我要的畫面長什麼樣、這三個各自好在哪差在哪、最後為什麼是 Electron，以及實際用了哪些套件。
我要的畫面長什麼樣
選框架之前，先把要的畫面定下來，不然比不出東西。我要的是 IDE 那種版面，像 VS Code：
- 左側邊欄放檔案樹，資料夾能展開、收合
- 中間是編輯區
- 右側邊欄
- 底部放 terminal
- 左、右、底三塊都要能開啟、收合
這幾樣是 must have，其他的以後再說。Agent 在做事的時候，我要看得到他動了哪個檔案、跑了什麼指令，這幾塊就是為了這個。
三個候選
SwiftUI。 進名單的理由很單純：我的 Agent 跑在 Mac 上，SwiftUI 寫完直接在 macOS 上跑，不用包任何 runtime，體積小，跟系統整合最順。缺點是只有 Apple 平台，IDE 那套版面沒有現成的東西可以直接拿，可收合的面板、檔案樹、終端機都要自己拼。我實際整合過一輪：左右側欄開合不順，上下展開的時候有卡頓的點，要把這些卡頓處理掉，得花很長的時間。
Tauri。 後端用 Rust，畫面用系統內建的 WebView，所以 App 很小、記憶體吃得少，前端照樣用 web 技術寫。缺點是 WebView 每個平台各一套，行為會有差；生態比 Electron 小，要碰系統的東西，像終端機背後的 pty，得看 Tauri 這邊有沒有現成的套件。
Electron。 自帶一份 Chromium 和 Node，畫面在哪個平台都長一樣，生態最大。VS Code 本身就是 Electron 做的，IDE 裡最難自己刻的兩塊，終端機和編輯器，VS Code 用的那幾套都是開源的，拿來就能接；面板、檔案樹這種排版的事，web 本來就擅長。缺點大家都知道：體積大、記憶體高，每個 App 都背著一份瀏覽器。但我自己的機器和合作的人的機器，全部都是 16 GB RAM 加 512 GB 硬碟，這兩個缺點在這個配備上不會是問題。
為什麼是 Electron
因為我想快。
這個階段的重點在 Agent 身上，畫面只要能用。我要盡快推進到下一個階段：開始實作 Agent 的特殊技能。框架比較花一天可以，花一週就本末倒置了。
三個裡面，能最快長出 IDE 版面的就是 Electron，理由有兩層。第一，最難自己刻的那一塊是 terminal，Electron 這邊有現成的一組：xterm.js 加 node-pty，VS Code 的終端機就是這套，接上去就能用。第二，剩下的東西，左右底三塊可收合的面板、檔案樹、內容區，本質上就是網頁排版，div 拼一拼、CSS 排一排，coding agent 組起來就是一個瞬間的事。SwiftUI 那邊光是開合和展開的卡頓就要磨很久，Tauri 要多繞 Rust 和 WebView 那一段。
所以，我們選的是 Electron。
我用了哪些套件
選定之後，實際做出來的東西對回那五樣 must have，用到的套件如下。授權以 MIT 為主，只有 entities 是 BSD，一樣是寬鬆授權。
骨架
- Electron 43.1.1：App 本體
- electron-vite 5.0.0：main、preload、renderer 三份 build 的開發與打包
- Vite 加 React 19：renderer 的畫面層
底部 terminal
- @xterm/xterm 6.0.0：終端機畫面，VS Code 的 terminal 也是這套
- @xterm/addon-fit：面板縮放時重算行列數
- @xterm/addon-clipboard：複製貼上
- @xterm/addon-web-links：把輸出裡的網址變成可點的連結
- node-pty 1.1.0：背後真正的 pty，跑在 main process
左側檔案樹、中間內容區
- @phosphor-icons/react：資料夾、檔案的 icon
- marked 加 entities：內容區的 markdown 解析
- 檔案樹本身是自己寫的。中間目前是唯讀預覽，編輯器還沒放進去
左、右、底三塊的開合與拖拉
- 沒有用套件，自己寫的。這一塊就是上面說的，在 web 排版裡是小事
打包
- Electron Forge 7.11.2：package 和 make 流程
- @electron-forge/maker-dmg 和 @electron-forge/maker-zip：產 macOS 的 .dmg 和 .zip
- @electron-forge/plugin-auto-unpack-natives：把 native module 從 asar 拆出來
- @electron-forge/plugin-fuses 加 @electron/fuses：關掉不需要的 runtime 能力
- @electron/rebuild 4.2.0：用 Electron 的 Node ABI 重編 native module
明天講開工那天：我不想只用 Electron 包一個聊天視窗，畫面和 Agent 分開跑，然後正式打包，修了三次才真的活過來。
原文：Agent Build Log — Episode 004
凡人修 Agent 傳｜第四回（Day 04）
公器坊裡有一整排御偶臺的圖紙。
御偶臺讓手的主人看見人偶正在做什麼，也讓念有一處可以進來。臺前那層可見、可觸，會顯出文字與圖形的鏡面，架上的木牌寫著兩個字：靈幕。
第四日一早，手的主人兩指一引。一縷靈力從我腳下升起，托著我離開地面，跟在他身側出了洞府。
我們回到公器坊。
人偶圖紙在東邊。御偶臺圖紙在西邊，佔了很長一排。手的主人袖中原有一卷蘋果境的化形法，又從架上引來兩卷圖。三卷圖浮在半空，依次展開。
第一卷講依境化形。圖上的源紋很少，只要先說清楚想要的形，蘋果境的天地法則就會讓它顯出來。手的主人照圖掐訣，試臺上的靈幕分成左、中、右三處，下面又開了一層。左邊收得很快，右邊開到一半頓了一下；下層往上升時，整片靈幕停了半息。手的主人改了三次。第三次，停頓還在。
第一卷捲起，浮到一旁。
第二卷講鐵骨借鏡。圖很輕，骨架也少，顯形時借用所在之地原有的鏡面。手的主人從旁邊的附圖架引來卷宗樹、閱卷鏡和底部令窗，一張張接上去。有的源紋一碰便合，有的接縫亮起紅光。手的主人沿著架子找了很久，又抽出幾卷，放在第二卷旁邊。
第二卷也捲了起來。
第三卷比前兩卷加起來還厚。卷首只有兩個字：電鏡。
旁邊的木牌寫著，這是坊裡取用最多的御偶臺圖之一。照圖砌成的叫電鏡臺。主圖裡封著一整座鏡界，連同驅動鏡界的爐心一起帶走，所以臺身重，耗的靈力也多。
電鏡圖的主卷只管臺身、鏡界和爐心。靈幕上的形，要用流光氣自己排。手的主人在試臺前抬起一指，流光氣便在靈幕上劃出三條界線：左、右、下三處從中間分開。左邊長出一棵卷宗樹，中間鋪開閱卷鏡，右邊留出一塊空處。第一次，左側臺收起時壓住了卷宗樹。手的主人改了兩道源紋，再試。三處各自展開，又各自收回。
底部令窗還是空的。電鏡圖旁另掛著兩卷附圖，一卷讓令窗顯出字，一卷把令窗接到真正運轉法令的地方。手的主人把兩卷引到主圖旁。源紋自行相接，底部令窗裡跳出一行字，末尾有一道短短的光在閃。
其餘附圖仍掛在架上。手的主人沒有取。
手的主人把前兩卷送回原處，取出一卷空白圖。神識從電鏡圖的第一道源紋走到最後一道，空白圖上便多出一模一樣的紋路。原圖仍掛在架上，末尾的署名一個也沒有少。
手的主人選了電鏡臺。
回到洞府，電鏡主圖和兩卷令窗附圖浮在屋子中央。一道法訣落下，幾塊木板自行升起、轉向、落位；天地間的流光氣聚到板面，沿著圖上的源紋一寸一寸亮過去。第一次，左側臺和底部令窗疊在了一起。手的主人改了兩處，再試。左、右、下三處各自展開，又各自收回。
天還沒有黑，電鏡臺已經立在屋角。
一縷靈力托著我落到臺上。手的主人在右邊放下一疊圖，指尖按住我額上的玉片，刻進一道念：逐卷讀完。
我拿起第一卷。左邊的卷宗樹展開一枝，中間的閱卷鏡顯出第一行字，底部令窗亮了一下。右邊的空處記下我正在讀哪一卷。
手的主人看著靈幕，沒有看我。
燭熄了。手的主人走了。門響了一下。
電鏡臺還亮著。
玉片裡最後一道念也還亮著：逐卷讀完。
