创建器视图
布局概述
创建器视图是一个三面板编辑环境,通过双击组件区域中的任何分组来打开。它在左侧提供区块列表,中间是代码编辑器,右侧是实时预览,底部有 AI 提示框。
区块列表面板
左侧面板显示当前组中的所有块。每个块显示带有块名称和编号文件列表的卡片预览。使用顶部工具栏导航返回、在列表视图和分割视图之间切换,或点击+按钮添加新块。
代码编辑器
中间面板是一个带标签页的代码编辑器,用于编写和编辑区块内容。标签页按文件类型组织:
文本
为区块编写文档、Markdown 或纯文本内容。
HTML
编辑组件的 HTML 结构。
CSS
为组件添加样式。
JavaScript
为组件添加交互性和逻辑。
实时预览
右侧面板渲染组件的实时预览。当您在编辑器中添加HTML、CSS和JavaScript时,预览会更新以显示编译结果。您还可以将文件拖放或将内容粘贴(Ctrl+V)直接到预览区域以添加到块中。使用眼睛图标切换预览,使用BG开关更改预览背景。
AI 提示框
底部栏是AI提示框。使用它来描述更改并让AI生成或修改块内容。它包括模型选择器、文本输入字段、语音和表情输入以及生成按钮。两个模式切换——A和V——在直接AI模式和变体模式之间切换。
AI 生成类别
AI 模型选择器显示生成类别,决定 AI 生成什么类型的内容:
文本生成
生成或编辑基于文本的内容,如代码、文档和标记。
图像生成
从文本提示创建图像或使用 AI 编辑现有图像(文本转图像和图像转图像)。
视频生成
从文本描述生成视频或将静态图像制成动画视频(文本转视频和图像转视频)。
直接 AI 模式 (A)
当A切换激活时,AI直接就地修改您的组件。字段文本显示"描述要应用于组件的更改",并显示一个徽章指示将修改哪个文件(例如"将修改:text")。此模式适合对当前选定文件进行快速、具体的编辑。
变体模式 (V)
当V切换激活时,AI会生成组件的多个变体而不是就地编辑。字段文本变为"描述您想要生成的变体",并出现一个带有− / +控件的计数器,让您选择要创建多少个变体。生成的变体出现在专用面板中,您可以在其中查看并将首选版本添加到组中。
