> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 预览

> 应用草稿的开发服务器预览。

# 预览

打开应用草稿时，Kazzle 可以启动开发服务器并显示实时预览。

## 工作原理

1. 从侧边栏打开草稿标签页
2. 预览自动启动（或手动点击"启动预览"）
3. Kazzle 读取 `kazzle.config.ts` 中的 `lifecycle.dev`
4. 开发命令在指定端口上运行
5. 预览 URL 出现在草稿标签页中

## 配置开发命令

在 UI 组件上设置 `lifecycle.dev`：

```typescript theme={"theme":"material-theme-darker"}
import { defineConfig } from '@kazzle/app';

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