UI 编辑器
功能概述
UI 编辑器是外脑编辑器的可视化界面设计工具，让你在项目中创建和编辑用户界面。通过拖拽组件、调整属性和组织层级结构，你可以构建交互式的前端界面，并与工作流 Block 系统联动。
界面说明
UI 编辑器位于项目编辑器内，采用侧边栏 + 主区域的双栏布局。
侧边栏
侧边栏通过折叠面板划分为三个区域：
设计稿面板（Designs）
以文件树形式管理 UI 设计文件：
- 文件操作：创建设计文件、创建文件夹、重命名、删除
- 拖拽排序：支持拖拽文件和文件夹调整位置和层级
- 回收站：删除的设计文件进入回收站，支持恢复或永久删除
- 选中高亮：当前编辑的设计文件在树中高亮显示
设计结构面板（Structure）
仅在选中设计文件后显示。以树形结构展示当前 UI 设计的组件层级关系，帮助你理解和导航组件嵌套结构。
组件库面板（Components）
仅在编辑模式下显示。提供可拖拽的 UI 组件列表，包括基础布局组件（div、span 等），可直接拖拽到画布中使用。
主区域
主区域根据是否选中设计文件显示不同内容：
全局视图（未选中设计文件）
展示所有 UI 设计文件的概览索引。
编辑器视图（选中设计文件）
- 画布区域：UI 设计的可视化编辑画布，所见即所得
- 属性编辑器：右侧可拖拽调整宽度的 Drawer 面板，编辑选中组件的属性配置
- 删除组件：在属性编辑器底部提供删除按钮（根节点不可删除）
顶部操作栏
- 设计标题：显示当前编辑的设计文件名称
- Publish 按钮：发布 UI 设计（功能开发中）
- Run 按钮：预览运行 UI 设计（功能开发中）
操作步骤
创建设计文件
- 进入项目编辑器，在左侧菜单中选择「UI」
- 在侧边栏「设计稿」面板中，右键文件夹选择「新建文件」，或使用顶部按钮
- 新建的设计文件会自动打开编辑
- 设计文件名可随时右键重命名
编辑 UI 设计
- 在侧边栏中点击要编辑的设计文件
- 从左侧「组件库」面板中拖拽组件到画布
- 在画布中点击选中组件，右侧自动打开属性编辑器
- 在属性编辑器中调整组件的样式和配置
- 修改会自动保存（防抖 1 秒）
管理组件层级
- 在「设计结构」面板中查看组件树
- 点击树中的节点可选中对应组件
- 在画布中可拖拽调整组件位置和父子关系
组织设计文件
- 在「设计稿」面板中创建文件夹分类管理
- 拖拽文件或文件夹调整位置
- 删除的文件进入回收站，可在回收站中恢复