跳转到主要内容

​
预览

打开应用草稿时，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 构建应用时，应在启动或更改草稿后打开应用开发标签页。不应仅根据命令输出声称应用正在运行。