UI 编辑器
功能概述
UI 编辑器是外脑编辑器的可视化界面设计工具，让你在项目中创建和编辑用户界面。通过拖拽组件、调整属性和组织层级结构，你可以构建交互式的前端界面，并与工作流 Block 系统联动。
界面说明
UI 编辑器位于项目编辑器内，采用侧边栏 + 主区域的双栏布局。
侧边栏
侧边栏通过折叠面板划分为三个区域：
设计稿面板（Designs）
以文件树形式管理 UI 设计文件：
- 文件操作：创建设计文件、创建文件夹、重命名、删除
- 拖拽排序：支持拖拽文件和文件夹调整位置和层级
- 回收站：删除的设计文件进入回收站，支持恢复或永久删除
- 选中高亮：当前编辑的设计文件在树中高亮显示
设计结构面板（Structure）
仅在选中设计文件后显示。以树形结构展示当前 UI 设计的组件层级关系，帮助你理解和导航组件嵌套结构。
组件库面板（Components）
仅在编辑模式下显示。提供可拖拽的 UI 组件列表，包括基础布局组件（div、span 等），可直接拖拽到画布中使用。
主区域
主区域根据是否选中设计文件显示不同内容：
全局视图（未选中设计文件）
展示所有 UI 设计文件的概览索引。
编辑器视图（选中设计文件）
- 画布区域：UI 设计的可视化编辑画布，所见即所得
- 属性编辑器：右侧可拖拽调整宽度的 Drawer 面板，编辑选中组件的属性配置
- 删除组件：在属性编辑器底部提供删除按钮（根节点不可删除）
顶部操作栏
- 设计标题：显示当前编辑的设计文件名称
- Publish 按钮：发布 UI 设计（功能开发中）
- Run 按钮：预览运行 UI 设计（功能开发中）
操作步骤
创建设计文件
- 进入项目编辑器，在左侧菜单中选择「UI」
- 在侧边栏「设计稿」面板中，右键文件夹选择「新建文件」，或使用顶部按钮
- 新建的设计文件会自动打开编辑
- 设计文件名可随时右键重命名
编辑 UI 设计
- 在侧边栏中点击要编辑的设计文件
- 从左侧「组件库」面板中拖拽组件到画布
- 在画布中点击选中组件，右侧自动打开属性编辑器
- 在属性编辑器中调整组件的样式和配置
- 修改会自动保存（防抖 1 秒）
管理组件层级
- 在「设计结构」面板中查看组件树
- 点击树中的节点可选中对应组件
- 在画布中可拖拽调整组件位置和父子关系
组织设计文件
- 在「设计稿」面板中创建文件夹分类管理
- 拖拽文件或文件夹调整位置
- 删除的文件进入回收站，可在回收站中恢复
标注反馈
标注反馈功能让你在 UI 预览中直接标记需要修改的元素，附上修改说明后发送给 AI，AI 能精确理解你指向的是哪个元素以及你想要什么变化。
视觉指引 — 颜色含义
编辑器中有四种颜色的高亮框，分别代表不同的交互状态：
| 颜色 | 样式 | 含义 | 触发方式 |
|---|---|---|---|
| 🔵 蓝色实线框 | ━ | 悬停预览 — 鼠标经过元素时的临时高亮 | 鼠标移到元素上方 |
| 🟢 绿色实线框（带浅色底） | ━ | 选中元素 — 当前选中的元素，用于属性编辑 | 直接点击元素（非标注模式） |
| 🟠 橙色实线框（带浅色底） | ━ | 标注选中 — 多选模式下已选中的元素 | Cmd/Ctrl + Click |
| 🟠 橙色虚线框（带浅色底） | ╌ | 框选区域 — 拖拽时的选择范围矩形 | 鼠标拖拽（移动超过 8px 时激活） |
此外，当你在标注面板中悬停某条标注时，iframe 内对应的元素也会显示橙色高亮。
进入标注模式
- 在顶部操作栏中，找到带气泡图标的按钮（位于版本历史按钮左侧）
- 点击该按钮，按钮变为橙色高亮 — 表示已进入标注模式
- 同时右侧会打开标注面板（Drawer）
- 按钮上方的 badge 数字显示当前待处理的标注数量
标注方式
标注模式下有四种标注方式：
方式一：单击标注（最常用）
适合标注单个按钮、标题、图片等独立元素。
- 进入标注模式
- 直接点击你想标注的元素
- 弹出标注创建对话框
- 选择意图 → 输入评论 → 确认
方式二：多选标注
适合一次标注多个相关元素（如"这三个按钮的间距不对"）。
- 进入标注模式
- 按住
Cmd（Mac）或Ctrl（Windows），依次点击要标注的元素 - 每个元素会显示橙色实线框，表示已被选入多选列表
- 再次
Cmd/Ctrl + Click已选中的元素可以取消选中 - 完成选择后，松开 Cmd/Ctrl 直接点击任意位置 → 弹出标注创建对话框
- 此时标注会关联你选中的所有元素
方式三：框选标注
适合标注一个区域内的所有元素（如"这一块区域的排版有问题"）。
- 进入标注模式
- 在 iframe 预览区域中按住鼠标拖拽
- 移动超过 8 像素后，出现橙色虚线框显示选择范围
- 松开鼠标后，框内完全包含的叶子元素被自动选中
- 弹出标注创建对话框
框选逻辑
框选只选中完全包含在矩形内的元素，且自动去除父子嵌套关系（只保留最内层元素），避免选到整个页面容器。
方式四：文本选择标注
适合标注特定的文字内容（如"这段文案需要修改"）。
- 进入标注模式
- 在文本上拖拽选中一段文字
- 松开鼠标后弹出标注创建对话框
- 选中的文本内容会自动填入标注的元素信息
创建标注
无论使用哪种方式选中元素，都会弹出标注创建对话框：
选择意图（四种颜色标签）：
| 意图 | 说明 | 典型用法 |
|---|---|---|
| 修复（Fix） | 红色标签 | 这里有 bug、显示异常、功能不正常 |
| 修改（Change） | 蓝色标签 | 想改样式、布局、内容 |
| 疑问（Question） | 橙色标签 | 不确定这里的设计意图，想让 AI 解释 |
| 认可（Approve） | 绿色标签 | 这里做得好，保持不变 |
输入评论：描述你期望的修改或问题，越具体越好。支持 Cmd/Ctrl + Enter 快捷确认。
管理标注
标注创建后显示在右侧标注面板中：
- 悬停标注卡片：iframe 内对应的元素会显示橙色高亮，帮助你回忆这条标注标记的是哪里
- 已解决：点击绿色勾 ✓ 按钮，标注状态变为"已解决"（半透明显示）
- 忽略：点击灰色叉 ✗ 按钮，标注状态变为"已忽略"
- 删除：点击红色垃圾桶按钮，永久删除标注
发送给 AI
标注创建后，当你在右侧 Agent 对话中发送消息时，所有待处理的标注会自动附带在消息上下文中。AI 会收到每条标注的：
- 元素的 XPath 定位路径（精确到 DOM 节点）
- 元素的标签名、CSS 类名、文本内容
- 你标注的意图和评论
你只需要正常对 AI 说"按照标注修改"或提出其他请求，AI 就能理解你的反馈并进行修改。
标注会在 AI 编辑后自动清空
当 AI 完成编辑生成新的 HTML 后，所有标注会被自动清空。这是因为新 HTML 的 DOM 结构已改变，旧的元素定位路径不再有效。如果 AI 的修改不满意，你需要重新标注。
退出标注模式
再次点击顶部的标注模式按钮，按钮恢复默认状态，标注面板关闭。此时点击元素会恢复为打开属性编辑器（绿色框选中模式）。