編輯器、工作區、Palette、側欄與 Deploy 概念
先學會讀畫面，再學會執行畫面。Node-RED 5.0.2 的 editor 是設計工具；只有 Deploy 才把變更交給執行環境。本章先巡覽，不變更正在運作的家庭自動化。
為何需要本章
打開 editor 後，最容易犯的錯是把「畫布上看得到」當成「runtime 正在執行」。你可以在 workspace 拖入節點、拉 wire、改名稱，這些都先是瀏覽器端的編輯狀態；按下 Deploy 後，runtime 才依選定 scope 套用。若現有走廊燈、夜間通知或溫控已由 Node-RED 執行，錯選 Full 可能讓與本次修改無關的節點也重新啟動。
本章的任務只有辨識 editor 各區域、開啟節點 Help、理解三個 Deploy 選項與建立操作前檢核。不匯入 flow、不修改 server config、不安裝 palette package，也不按 Deploy。下一章才會建立一條純 Inject → Change → Debug 的可控練習。
核心觀念：設計面與執行面
| 動作 | 發生在哪裡 | 是否改變 runtime |
|---|---|---|
| 切換 workspace tab、縮放、平移 | editor 視圖 | 否 |
| 拖入節點、改屬性、連 wire | 未 Deploy 的 flow model | 尚未 |
| 查看 Information（info）／Help、搜尋 Palette | editor UI | 否；但 Manage palette 安裝套件是另一種系統變更 |
| 按 Deploy | editor 將完整 flow set 與 deployment type 送往 runtime | 是，依 Full／Modified Flows／Modified Nodes 決定重啟範圍 |
| 修改 Add-on options 並 restart | Home Assistant Add-on 層 | 是，範圍比 flow Deploy 更外層 |
Node-RED 5.0.2 editor 固定 locale 對三種部署顯示 Full、Modified Flows、Modified Nodes。內部 deployment type 分別是 full、flows、nodes。這些不是「儲存品質」等級，而是 runtime restart strategy；每種都會提交當前 flow 設定，差別在 runtime 如何套用。
不 Deploy 的 editor 巡覽
- 確認目前入口與版本脈絡。
從 Add-on 的 OPEN WEB UI 進入。先確定你不是在另一套 Node-RED editor；本章畫面事實以 Node-RED 5.0.2 固定提交為準。
- 只用視線辨識四個主要區域。
找到中央 workspace、左側 Palette、右側 sidebar，以及上方 header／Deploy 控制。不要拖節點，也不要開啟 Deploy 主按鈕。
- 巡覽 workspace tabs。
切換現有 tab 但不要修改。若其中有家庭自動化，記住 tab 只是組織與 runtime flow scope 的一部分，不等於 Home Assistant Area。
- 搜尋核心節點並閱讀 Help。
在 Palette 找 Inject、Change、Debug；選取後從 sidebar Help 讀節點說明。搜尋不等於安裝，切勿進入 Manage palette 新增 package。
- 展開 Deploy options 但不執行。
只記錄 Full、Modified Flows、Modified Nodes 的名稱與描述，然後關閉選單。任何截圖都在 Deploy 前完成。
- 清理畫面資訊。
離開前關閉可能含家庭資料的 Debug 訊息與 config details，不將真實 IDs、內部 URL 或 credentials 分享到公開筆記。
Workspace：Flow 的可視化工作面
中央 workspace 以 tabs 組織 flows。節點有輸入與輸出 ports，wire 將上游輸出連到下游輸入；訊息沿 wire 移動。節點放在左邊或右邊主要是閱讀布局，不會讓 runtime 自動形成時間順序；真正路徑由 wires 與節點行為決定。沒有接線的節點仍可能因自身事件來源而運作，因此不能只看有沒有上游 wire 判定副作用。
選取、編輯與 dirty 狀態
節點的 edit dialog 用來設定屬性；完成 dialog 只更新 editor model。Node-RED 會追蹤未部署變更，離開頁面時也有未 Deploy 變更確認邏輯。不要以瀏覽器重新整理當成可靠「復原」方法：若不確定曾改了什麼，先停止操作、記錄畫面並用 editor 的變更檢視或受控版本回復。
Tab 不是權限邊界
把「玄關照明」與「環境通知」分成 tabs 能改善可讀性，但不會隔離 credentials、網路或 Home Assistant 權限。共用 config nodes 也可能讓一個修改影響多個 flows。對 config node 的變更要特別檢查使用者清單與 deployment scope。
可讀布局
安全的家庭 flow 由左到右表達「來源 → 條件 → 動作／觀察」，節點名稱描述目的，例如「僅夜間」「確認燈目前為關」「測試輸出」。加 Comment 說明假設、失效安全與回復方式。視覺排列不是測試證據，Deploy 後仍須觀察每個分支。
Palette：可用節點目錄，不是能力保證
Palette 位於 editor 左側，依類別列出節點並提供搜尋。Node-RED 核心含 Inject、Debug、Complete、Catch、Status、Link、Comment，以及 Change、Switch、Template、Delay、Trigger、Function 等。本 Add-on 還預裝多項第三方 nodes 和 HA WebSocket 0.80.3；看見節點只表示 package 已註冊，不表示你的環境設定、設備或權限已完成。
| 節點 | 本課用途 | 安全提醒 |
|---|---|---|
| Inject | 手動產生測試 msg | 下一章明確關閉自動 Inject；只按一次按鈕觸發 |
| Change | 設定、變更、刪除或搬移訊息屬性 | 確認資料型別與目標 property，不把 secrets 寫入 msg |
| Debug | 輸出選定訊息內容到 Debug sidebar | 可能暴露敏感 payload；排障後停用或移除 |
| Action | 日後請 Home Assistant 執行 action | 有實體副作用；舊文稱 Call Service 僅作 legacy 辨識，本章不使用 |
Theme 只改外觀
Add-on 22.0.1 預裝 @node-red-contrib-themes/theme-collection 5.0.1，Add-on option 的預設是 theme: default，並以固定 schema 清單限制可選名稱。Theme 會改變 editor 顏色與視覺呈現，不是認證、權限或資料隔離。變更 Add-on theme 後要 restart App，而不是按 Deploy。
Manage palette 是供應鏈操作
搜尋 Palette 不會安裝套件，但透過 Manage palette 安裝會把第三方 server code 帶入執行環境。Add-on 的 npm_packages 又是另一條啟動安裝路徑。兩者都需要審查 package 名稱、維護狀態、固定版本、權限面與回復方式；不要只因名稱或圖示相似就安裝。
精確的三種 Deploy scope 與重啟影響
| UI 名稱 | 5.0.2 描述 | runtime 影響 | 家庭場景 |
|---|---|---|---|
| Full | Deploys everything in the workspace | 完整部署，停止後重新啟動全部 nodes | 無關的計時器、事件訂閱、連線與照明 flow 都可能重啟；變更面最大 |
| Modified Flows | Only deploys flows that contain changed nodes | 重新啟動包含已變更 nodes 的 flows | 同一 tab 內未修改但正在運作的節點也可能重啟；確認該 flow 是否含長時間等待或設備控制 |
| Modified Nodes | Only deploys nodes that have changed | runtime stop list 精確為 changed 與 removed nodes | 通常縮小干擾；config node 變更可能把引用它的 nodes 標記為 changed，因此仍須檢查相依關係 |
Node-RED 5.0.2 runtime 的行為是：Full 會停止全部 nodes 再啟動；Modified Flows 會停止已修改 flow 上全部 nodes 再啟動；Modified Nodes 的 stop list 僅由 diff.changed 與 diff.removed 組成。config node 變更可能把引用它的 nodes 標記為 changed，因此仍須檢查相依關係；但這不表示 linked nodes 會因連結本身被加入 Modified Nodes stop list。節點重新啟動可能重設記憶體狀態、重建訂閱或連線，Inject 若配置為啟動時自動送出也可能再次產生訊息。因此 production 家庭自動化不能用「scope 比較小」取代影響分析。
按下前的五項檢核
- 確認修改清單與部署目的，不把未知的 dirty 變更一起送出。
- 確認 scope，列出會停止／重啟的 flow、changed／removed node，以及可能因 config node 變更而被標記為 changed 的引用節點。
- 檢查 Inject 啟動觸發、Delay／Trigger 等等待中訊息、Action、HTTP、檔案和設備輸出。
- 準備觀測與回復方式；涉及家中照明時選非關鍵測試設備並安排可見時段。
- Deploy 後讀通知、Debug 與必要日誌；不要連續點擊，先等待結果。
故障排除
- 找不到 Palette：確認左側是否收合、瀏覽器寬度與縮放；不要因此直接進 Manage palette 安裝同名套件。
- 找不到 Debug 訊息：確認右側 sidebar 已開啟 Debug tab、對應 Debug node 是否啟用，以及變更是否已在受控情況 Deploy。前四章不要輸出 complete message。
- Deploy 按鈕無法使用：可能沒有未部署變更或沒有
flows.write權限。不要用重開認證或 direct port 方式繞過；先確認登入與 editor 狀態。 - Deploy 出現 unknown／invalid／unused config 警告：停止部署，逐一選取問題節點並看 Information／Help；不要忽略警告來取得「成功」畫面。
- 按 Deploy 後其他自動化重啟：記錄當時 scope。Full 影響全部，Modified Flows 影響含變更的 flows；Modified Nodes 的 stop list 只有 changed 與 removed nodes，但 config node 變更可能把引用節點標記為 changed。
- 畫面和網路文章不同：以 Node-RED 5.0.2 固定 editor locale 與原始碼為準；主分支或其他版本的側欄排列不能用來宣稱本版 UI。
固定來源
- Node-RED 5.0.2 固定提交：
@node-red/editor-client與src/js/ui/deploy.js。 - Node-RED 官方 Editor 指南與 官方 runtime configuration 說明；版本細節仍由固定提交校正。
- Add-on 22.0.1 固定提交：內嵌 Node-RED 5.0.2 與 theme collection 5.0.1。
- Add-on 固定官方文件：theme 與設定變更後 restart 邊界。