> ## 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.

# 组件

> UI 和流程组件。

# 组件

组件是应用的可执行部分。每个组件都有一个 `type` 来决定它的运行方式。

## UI 组件

UI 组件是一个网页前端 — React、Vue、Svelte、纯 HTML 或任何在端口上运行的框架。

```typescript theme={"theme":"material-theme-darker"}
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: { command: 'bun run dev' } } }
```

* **每个应用最多 1 个** — Kazzle 为每个应用分配一个预览 URL
* `runtime.dev.command` — 开发服务器命令（由"启动预览"使用）
* `runtime.prod.build` — 构建生产镜像的命令
* `runtime.prod.command` — 启动生产流程组件的命令

如果未设置 `runtime.dev.command`，预览系统会从 `package.json` 运行 `bun run dev`。

## 流程组件

流程组件是后端服务、工作进程或定时任务。

```typescript theme={"theme":"material-theme-darker"}
{ name: 'API', type: 'process', path: './server/index.ts' }
```

### 生命周期：`processMode`

流程组件有两种生命周期之一：

* `processMode: 'persistent'`（默认）— 长期运行的 HTTP 服务器。触发器被 POST 到声明的 `path` 处的运行服务器。
* `processMode: 'triggered'` — 每次触发时生成入口脚本并退出。生产环境中没有空闲机器。

### 触发器

计划和 webhook 触发器在组件上声明。一个组件可以有多个触发器。每个触发器都有一个 `name`（在组件内唯一）和一个 `kind`。

```typescript theme={"theme":"material-theme-darker"}
{
  name: 'events',
  type: 'process',
  path: './components/events/index.ts',
  processMode: 'persistent',
  triggers: [
    { name: 'cleanup', kind: 'schedule', schedule: '0 * * * *', path: '/cron/cleanup' },
    { name: 'stripe',  kind: 'webhook',                          path: '/webhook/stripe' },
  ],
}
```

`path` 对于 `processMode: 'persistent'` 是必需的。对于 `processMode: 'triggered'`，它被省略 — 脚本改为从环境变量读取 `TRIGGER_NAME`。

查看[自动化](/work/automations)了解完整的触发器模型、环境变量约定和 HTTP 身份验证头。

## 运行时命令

| 阶段                     | 运行时机   | 示例                                    |
| ---------------------- | ------ | ------------------------------------- |
| `runtime.dev.command`  | 草稿预览期间 | `bun run dev`、`vite`、`next dev`       |
| `runtime.prod.command` | 在生产环境中 | `bun run start`、`node dist/server.js` |

草稿预览包脚本可以使用 `kazzle run -- <command>`，这样 Kazzle 可以注入本地端口和兄弟组件 URL。生产流程组件必须在 `runtime.prod.command` 中声明真实命令，因为部署会在生产镜像中运行该命令。