跳轉到主要內容

​
預覽

當你開啟應用程式草稿時，Kazzle 可以啟動開發伺服器並顯示即時預覽。

​
運作方式

  1. 從側邊欄開啟草稿分頁
  2. 預覽自動啟動（或手動點擊「啟動預覽」）
  3. Kazzle 從 kazzle.config.ts 讀取 lifecycle.dev
  4. 開發命令在指定的連接埠上執行
  5. 預覽 URL 出現在草稿分頁中

​
設定開發命令

在你的 UI 元件上設定 lifecycle.dev： 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
如果未設定 lifecycle.dev，預覽系統會回退到常見的開發伺服器偵測（Vite、Next.js 等）。

​
預覽 URL

每個應用程式在其沙箱上都有專用連接埠。預覽 URL 遵循以下模式： 
http://localhost:{PORT}
PORT 環境變數由預覽系統自動設定。

​
熱重載

你的程式碼變更會由開發伺服器的熱重載（HMR）偵測。當你或 AI 編輯檔案時，預覽會即時更新。

​
手動控制

  • 啟動預覽 — 如果開發伺服器未執行，則啟動它
  • 停止預覽 — 終止開發伺服器程序
  • 重新啟動 — 停止 + 啟動（在設定變更後很有用）

​
驗證

預覽只有在應用程式開發分頁開啟並顯示預期的 UI 時才會被驗證。逾時、分頁開啟失敗、程序停止或缺少預覽 URL 表示預覽尚未驗證。 當 AI 建置應用程式時，應在啟動或變更草稿後開啟應用程式開發分頁。不應僅根據命令輸出聲稱應用程式正在執行。