认识 Zion 编辑器

Zion 编辑器集成了页面搭建、数据管理、API 集成、行为流编排、AI Agent 搭建和项目设置等开发能力，并提供实时预览、同步变更和发布等项目级操作。

编辑器结构

编辑器由顶部导航栏和下方的编辑区域组成。切换顶部入口后，编辑区域会展示对应的内容和配置。

顶部导航栏

当前线上编辑器的顶部导航栏分为三个区域：

• 功能入口：包含 页面、数据、API、行为流、AI 和设置，用于切换主要功能。
• 项目信息：显示当前项目名称，点击后可打开项目详情页。
• 项目级操作：包含 AI 助手、开发者接入、协作、实时预览、同步变更和发布等入口。

项目搭建区域

顶部导航栏下方是搭建项目的主要区域：

• 左侧边栏：选择和管理当前功能中的对象，例如页面、数据表、API 或行为流。
• 主工作区：编辑当前选中的对象及其配置。

下面将按照顶部的功能入口，介绍如何在编辑器中搭建项目。

搭建项目

搭建界面

进入 页面 后，左侧用于管理客户端、页面、弹窗和组件树，中间是页面画布，右侧用于配置当前选中的页面或组件。

管理页面和组件

• 在客户端下创建和切换页面或弹窗。
• 从组件面板添加组件，并在组件树中调整层级。
• 在画布中选择、移动和排列组件。

页面、弹窗和组件之间的关系详见 UI 组织方式。如果你准备开始搭建应用，可以继续阅读搭建第一个页面。

配置当前对象

选中页面或组件后，在右侧面板切换以下标签：

• 设计：配置尺寸、布局、位置和样式，以及组件的特定配置，例如文本组件的文本内容及其数据绑定。
• 数据：为列表等支持数据配置的组件声明数据源。
• 行为：为当前对象的触发器添加前端行为。

画布底部提供选择、移动、快捷键和缩放等常用工具。

管理数据

进入顶部的 数据 后，可以管理应用的数据结构和数据资源：

• 在 数据模型 中创建数据表、字段和表间关系。
• 在 数据库 中查看和管理运行数据。
• 在 资源 中管理项目文件。

左侧用于切换数据功能，中间列表用于选择具体对象，主工作区展示当前对象的字段、配置或数据。相关概念和操作入口见数据。

集成第三方 API

进入顶部的 API 后，可以添加第三方 API，配置请求地址、方法、参数和返回数据。具体操作见集成第三方 API。

搭建行为流

进入顶部的 行为流 后，可以创建行为流，并使用数据库、条件、循环、API 和 AI 等节点编排后端业务逻辑。具体操作见搭建行为流。

搭建 AI Agent

进入顶部的 AI 后，可以创建和管理 AI Agent，并为其配置模型、提示词、上下文和工具。具体操作见搭建 AI Agent。

管理项目全局配置

进入顶部的 设置 后，可以查看和修改项目级或客户端级配置。

项目级操作

同步变更和发布

• 同步变更：只发布后端配置，例如数据模型、行为流、API 和 AI Agent。
• 发布：发布前端与后端变更，使最新版本在运行环境中生效。

发布流程和不同客户端的发布方式详见发布应用。

其他操作

• AI 助手：通过自然语言搭建或调整页面、数据和业务逻辑。
• 开发者接入：打开开发者接入弹窗，查看 Runtime Schema、项目端点和鉴权信息，了解如何连接 AI 编程工具进行前端开发。详见 Headless · Zion BaaS。
• 实时预览：在 Web 环境中模拟项目客户端，检查界面、数据绑定和交互效果。详见实时预览。
• 错误与搜索：查看项目中的配置错误，或搜索页面、组件、行为和数据请求。
• 运行日志：查看行为流、数据库、API 和 AI 等后端能力的执行记录。详见运行日志。
• 权限与协作：邀请成员参与项目，并通过角色控制其权限。详见权限管理。

下一步

• 搭建第一个页面
• 创建和管理数据库
• 搭建行为流
• 发布应用