界面导览 · 编辑器
界面导览 · 编辑器
在首页打开（或新建）一个项目后进入编辑器。这里是搭建大屏的主战场：左侧选组件、中间摆画布、右侧调属性。
| 编号 | 区域 | 作用 |
|---|---|---|
| ① | 顶部栏 | 项目 / 数据 / 操作菜单，工程名，撤销恢复、预览、保存、历史、发布 |
| ② | 图层面板 | 页面图层树、页面列表、待处理暂存区 |
| ③ | 组件库 | 深色 / 浅色 / 资产库，分类浏览与搜索，拖拽添加 |
| ④ | 画布 | 所见即所得地摆放与编辑组件 |
| ⑤ | 属性面板 | 样式 / 数据 / 事件 / 代码，多状态管理 |
| ⑥ | 页面条与缩放 | 前景 / 子页面 / 背景 / 画面管理，画布缩放 |
另有两个浮动元素：选中组件时出现的选区工具栏，以及右下角的 AI 助手按钮。
① 顶部栏
左侧菜单：
- 产品标题（默认「唯杰AI可视化平台」，由
vp_config.json的title配置）：点击返回首页（我的项目）。 - 项目：保存（Ctrl+S）、历史版本...、另存为（Ctrl+Shift+S，导出工程文件
*.vpproj.json/ 工程包*.vpproj.zip（含素材，跨服务器搬家用）/ 工程代码*.vp.tsx/ TSX 工程包.zip，见发布与部署）、项目部署...（获取运行态地址）、项目设置...、素材库...（见素材库）、素材检查...、返回首页。 - 数据：编辑数据...（Ctrl+D，打开连接与连接数据管理）、刷新数据（Ctrl+F5）、数据规则...（见数据系统）。
- 操作：撤销 / 恢复 / 复制 / 粘贴 / 删除 / 全选 / 成组 / 取消分组，以及对齐（左、水平居中、右、顶、垂直居中、底）、分布（横向、纵向）、图层（置顶、置底、上移、下移）。
中间：工程名输入框（直接改名，占位「未命名工程」）；双击进入容器 / 图元内部编辑时，这里会出现退出组件编辑按钮。
右侧按钮：
- 撤销 / 恢复（Ctrl+Z / Ctrl+Y）。
- 尺寸模式条：响应式布局的项目才显示，在**大（桌面）/ 中（平板）/ 小（手机）**断点间切换编辑，见画布系统。
- 外观主题、快捷键（Ctrl+/，打开快捷键速查表）。
- 预览：编辑器内查看运行态效果，Esc 退出。
- 保存：保存到服务端（草稿）。修改画布或连接配置后主动保存，若与上一份不同会把上一份归档为历史版本；内容相同的稿不重复归档（AI 保存不归档）。
- 历史：查看、还原、备注、固定或删除历史版本（须先保存到服务端）。还原用该历史替换当前稿，当前稿若还没进过历史会先归档一条，不会丢。
- 发布：生成线上快照，运行态使用最新发布内容，见发布与部署。
② 图层面板（左上）
顶部三个标签：
- 页面图层：当前页面的组件树，根节点是页面本身（点击可编辑页面属性），组件越靠上层级越高。每行支持：
- 双击重命名；
- 行内图标显示 / 隐藏、锁定 / 解锁（锁定后画布上不可选中）；
- 右键打开与画布组件一致的组件菜单（见下文）；
- 顶部可搜索组件（支持拼音），筛选图标可按 前景 / 页面 / 背景 / 画面 过滤。
- 页面：项目内所有页面 / 画面的列表，支持搜索（拼音），点击切换编辑目标。
- 待处理：从画布「移入待处理」的组件暂存区（有内容时才出现），可加回原位或彻底删除。
双击进入地图 / 三维场景 / 组态等复合组件内部时，此处会切换为该组件的内部图层面板（图层 / 三维元素 / 图元列表），左侧组件库也会同步切换为该子系统的内部物料（如 3D 组件库）。
③ 组件库（左下）
- 库切换：深色 / 浅色两套主题的内置组件模板，以及资产库（你保存的私有组件模板，跨工程可用）。
- 竖向分类栏：常用（按最近使用排序）+ 各分类（文本、图表、表格、容器、控件、媒体、装饰、布局……）。
- 搜索框：按名称搜索组件（支持拼音）。
- 添加组件的四种方式：
操作 效果 单击卡片 高亮预览（不插入） 双击卡片 添加到画布 悬停点「+」 添加到画布 拖拽到画布 在落点插入，可直接拖进容器 / 网格格子
每个组件的参数与效果见组件手册。
④ 画布（中央）
- 顶部与左侧有标尺，工作区带网格点，画布外是深色留白区。
- 选中：单击选中组件；Ctrl+点击加选 / 取消加选；双击进入容器 / 地图 / 三维 / 组态内部编辑，双击空白或 Esc 退出。
- 移动 / 缩放组件：拖动本体或八向手柄；Alt+点击出现旋转手柄（按住 Shift 每 15° 吸附）。
- 画布缩放：Ctrl+滚轮以指针为中心缩放；滚轮滚动画布。
- 右键空白：添加组件... / 粘贴 / 全选。
- 右键组件：重新加载、重命名、删除、移入待处理、隐藏 / 显示、锁定 / 解锁、清除自定义样式，以及：
- 复制 ▸ 复制组件、复制 / 粘贴交互、复制 / 粘贴样式、添加到资产库；
- 分组 ▸ 成组、移入到分组、合并到分组、取消分组；
- 移动到页面 / 复制到页面：跨页面搬运组件；
- 图层 ▸ 置顶 / 置底 / 上移 / 下移；选择图层：从指针处重叠的组件中精确选择。
选区工具栏
选中组件后画布上方浮出一条选区工具栏（可拖动换位置）：
- 面包屑显示 页面 → 容器 → 当前选区，点击可跳级退出容器编辑。
- 单选时：对齐（吸附到页面左 / 右 / 顶 / 底、水平 / 垂直居中）、拉伸（撑满宽 / 高 / 尺寸）、层级（置顶 / 上移 / 下移 / 置底）。
- 多选时：六向对齐；三个以上可横向 / 纵向分布。
- 网格容器的子项可插入行 / 列；另有锁定、复制、删除，以及拖给 AI（把选区交给 AI 助手处理）。
常用快捷键
按 Ctrl+/ 可随时打开完整速查表。
| 分组 | 快捷键 | 功能 |
|---|---|---|
| 项目 | Ctrl+S / Ctrl+Shift+S | 保存 / 另存为 |
| 项目 | Ctrl+D / Ctrl+F5 | 编辑数据 / 刷新数据 |
| 编辑 | Ctrl+Z / Ctrl+Y | 撤销 / 恢复 |
| 编辑 | Ctrl+C / Ctrl+V / Ctrl+A | 复制 / 粘贴 / 全选 |
| 编辑 | Ctrl+G / Ctrl+Shift+G | 成组 / 取消分组 |
| 编辑 | Delete / Backspace | 删除选中组件或图元 |
| 画布 | Ctrl+滚轮 / 滚轮 | 缩放 / 滚动画布 |
| 画布 | Esc | 退出预览 / 容器编辑 / 图元编辑 |
⑤ 属性面板（右侧）
标题区显示当前选中对象（组件或页面）的名称——双击可重命名；组件还有保存为组件（存入资产库）与删除按钮。下方四个标签页：
- 样式：
- 数据：数据来源三选一——项目数据源（连接 / 连接数据 / 字段绑定）、组件自有数据、演示数据；并可配置数据规则。详见数据系统。
- 事件：添加事件，编排「触发器 → 动作」交互规则（点击跳页、打开窗口、联动筛选……）。详见事件交互。
- 代码：给组件 / 页面新增脚本做二次开发。详见二次开发脚本。
标签页右侧的状态下拉（默认显示「默认状态」）用于多状态组件：新建状态、管理状态、切换编辑目标状态，配合事件在运行时切换组件状态。
未选中任何组件时，面板提示从左侧物料添加组件。
⑥ 页面条与缩放（底部）
- 页面条从左到右依次是：
- 前景层（+前景）：覆盖在所有页面之上的一层（如全局标题栏）。
- 子页面（+子页面）：可多页，新建时可选空白页或组态页；点击页签切换，页签上可删除。
- 背景层（+背景）：所有页面共用的底层。
- 画面（+画面）：独立于页面的可复用内容——既可作为弹窗 / 抽屉打开，也可作为画面组件嵌入页面。画面页签上可设 ★ 启动画面（应用加载即打开）、发布为组件；带「页」徽标表示已被某页面「随窗口打开」关联。见窗口系统。
- 页签放不下时，最右侧「⋯」收纳被遮挡的页签。
- 缩放控制（右下）：缩小 / 放大按钮、百分比输入（10%–500%）、最佳显示比例（适配窗口）。
AI 助手（右下角）
右下角的圆形 AI 按钮（可拖动）打开 AI 助手面板：
- 允许 AI 控制本页面：授权 AI（经 MCP 桥）读取与操作当前编辑器页面。
- 打开 AI 问答：与 AI 对话，让它帮你搭建 / 修改大屏。
- 模型端点：列出可用模型；没存密钥的标「未设 Key」，实际生效的那条标「默认」并带左侧色条，每条都能删。点「+ 添加」展开表单新增或更新自己的端点（端点名相同即更新，可用来给已有端点补 Key）。
- MCP 地址：「工程」地址配到 Cursor 的
mcp.json，「本页」地址精确指向当前标签。 - AI 活动：查看 AI 每一步操作日志，并可在画布上高亮它改动的组件。
问答面板本身是可拖动、可缩放的浮窗，标题栏有放大 / 还原（居中铺满视口，再点还原回原来的大小）、最小化与关闭；手动拖动或缩放会自动退出放大态。输入框下方一行集中放附件、截图并标注（先截当前大屏，再在图上画矩形 / 箭头 / 画笔，确认后作为图片附件；点附件缩略图或已发送的图可查看大图、再编辑）、展开输入框、模型选择、上下文占用、立即压缩与发送。write_file 生成整页代码时卡片会自动展开（贴底跟着滚）、生成完折回；read_file 按后缀高亮文件内容，edit_file 以行级 diff 展示变更。
配置与原理见 AI 与 MCP 集成。