介面

即時預覽

用來檢視已生成網站、文件或結構化輸出的回饋介面。

概念專屬圖版即時預覽hx-graph-context-concept-live-preview正在載入視覺預覽…
以原始尺寸檢視

即時預覽

這是什麼

在生成內容仍持續變更時,直接呈現網站、文件或圖片的實際輸出,供使用者即時檢查。

白話解釋

隔著烤箱玻璃看麵包膨起,總比烤完才打開來猜結果好。即時預覽就是 Hermes 的玻璃窗:它會按實際呈現方式顯示生成的網站、文件或圖片,底層檔案變更後也會自行更新,不必每次手動重開。

為什麼重要

即時預覽直接呈現網站、文件或結構化資料的實際輸出,讓使用者不必只靠原始內容猜測成品外觀,因而補齊產出迴圈。子代理逐步製作內容時尤其實用,因為立即看到進度比每次修改後手動開檔更有效率。它也和成品產出緊密相連:若沒有可定位的生成結果,就沒有可供呈現的目標。

運作方式

單一作用中的預覽目標存放在 nanostores atom $previewTargetapps/desktop/src/store/preview.ts),其中會記錄目標是 HTML 檔、圖片、純文字或遠端 URL,也會記錄 HTML 應顯示即時預覽還是原始碼。只有使用者主動點擊工具結果中的預覽連結時才會開啟預覽,不會自行跳出。開啟後便能自動更新:本機檔案由磁碟監看器在每次變更時重新載入;遠端開發伺服器 URL 則在背景工具呼叫回報該對話已完成檔案編輯時重新載入(apps/desktop/src/app/session/hooks/use-preview-routing.ts)。若本機開發伺服器正在執行,窗格也能透過 gateway 觸發 preview.restart 背景任務,並直接顯示進度與完成狀態。

具體範例

Hermes 正分幾輪調整小型網站首頁主視覺的色彩。它寫入 HTML 後,工具結果提供預覽連結,使用者點擊便開啟即時預覽窗格。後續每次完成 CSS 編輯,同一窗格都會自動重新載入並顯示新色彩,不必重開檔案。如果頁面依賴本機開發伺服器,窗格還能在背景重新啟動伺服器並回報何時恢復可用。

如何連結

「即時預覽」屬於「介面」系列。最直接相關的概念包括:「成品產出」、「子代理」、「代理執行環境」、「個人作業系統」。這些連結描述教學關係,不取代來源證據。

來源證據

  • web_server — 正式關聯仍保留,但此來源未納入目前核心來源投影的驗證範圍;應回到釘選版本確認,不能把它當作已驗證程式行為的依據。

工作流程

  • 目前尚無第一輪工作流程對應;此概念仍透過文章與來源證據出現在知識庫圖譜中。

相關文章

相關筆記