编辑器界面
编辑器是系统的核心工作区。系统中共有三种编辑器入口，界面和行为有细微差异。
编辑器类型
系统中有三种编辑器模式，界面和功能各有差异：
| 差异点 | 大屏编辑器 | 模板编辑器 | 组件编辑器 |
|---|---|---|---|
| 入口 | 大屏卡片 →「打开编辑器」 | 模板卡片 →「打开编辑器」 | 组件卡片 →「打开编辑器」（或在画布右键→「保存为我的组件」后进入组件编辑态） |
| 组件面板 | 全部 8 类组件 | 全部 8 类组件 | 仅「基础」分类（Charts / Informations / Tables / Decorates / Photos / Icons），无模板和自定义分类 |
| 图层面板 | ✅ 可见 | ✅ 可见 | ❌ 隐藏 |
| 事件配置 | 完整（基础事件 + 生命周期 + 组件交互联动） | 完整 | ❌ 隐藏（事件 Tab 不显示） |
| 顶部返回按钮 | 返回大屏项目列表 | 返回模板列表 | 显示「返回组件管理」按钮 |
| 保存行为 | Ctrl+S 保存大屏画布内容 | Ctrl+S 保存模板内容 | 顶部右侧显示「组件模式保存」按钮，点击后提交到组件库（生成模板 + 上传封面） |
| 标题 | 大屏名称 | 模板名称 | 组件名称 |
| 数据面板 | 简化面板 / 标准面板（按组件类型） | 同大屏 | 仅简化面板 |
大屏编辑器（默认）
功能最完整的模式。顶部工具栏包含返回、撤销/重做、标题编辑、保存、预览、导入/导出、发布按钮。支持多页大屏，通过底部页码切换。
编辑器采用经典三栏式布局：
┌─────────────────────────────────────────────────────────────┐
│ [顶部工具栏] 返回｜撤销/重做｜大屏名称｜保存｜预览｜发布 │
├──────────────┬──────────────────────┬───────────────────────┤
│ │ │ │
│ 左侧面板 │ 画布编辑区 │ 右侧配置面板 │
│ · 组件列表 │ （标尺+网格+组件） │ · 页面配置/组件属性 │
│ · 图层列表 │ │ · 动画/数据/事件 │
│ │ │ │
├──────────────┴──────────────────────┴───────────────────────┤
│ [底部状态栏] 缩放比例｜页码导航｜历史记录｜快捷键提示 │
└─────────────────────────────────────────────────────────────┘模板编辑器
入口：模板管理页 → 模板卡片「打开编辑器」。与大屏编辑器的核心区别：
- 入口上下文：从模板管理进入，返回按钮回模板列表
- 保存目标：
Ctrl+S将画布内容保存到当前模板，同步更新模板封面截图 - 发布行为：无发布概念（模板需手动上架/下架），顶部无「发布」按钮
下文各功能区描述以大屏编辑器为准（功能最完整）。
组件编辑器
入口：组件管理页 → 组件卡片「打开编辑器」，或在画布上右键 →「保存为我的组件」后进入组件编辑态。
与大屏编辑器的核心区别：
- 左侧面板：仅显示「基础」分类组件（Charts / Informations / Tables / Decorates / Photos / Icons），不显示模板和自定义分类
- 右侧面板：无页面配置 Tab（无画布尺寸/背景/主题设置）；选中组件时仅显示「定制」和「数据」两个 Tab（无动画和事件）
- 图层面板：完全隐藏
- 顶部工具栏：左侧显示「返回组件管理」按钮；右侧「保存」替换为「组件模式保存」按钮
- 无选中组件时：右侧面板显示「组件信息」区域（组件名称、ID、版本、类型、分类可编辑）
- 保存行为：点击「组件模式保存」→ 自动截图 → 上传封面 → 更新组件库，不关闭编辑器
组件编辑器下受限的功能在 3.2~3.7 各节中均有注明。
顶部工具栏
工具栏分为左、中、右三个区域：
左侧按钮区
| 按钮 | 功能 | 说明 |
|---|---|---|
| 返回箭头 | 返回管理页面 | 组件编辑模式下显示「返回组件管理」 |
| 撤销 ↶ | Ctrl+Z | 撤销上一步操作，支持多步撤销 |
| 重做 ↷ | Ctrl+Shift+Z | 恢复被撤销的操作 |
| 面板切换 | 显隐控制 | 控制左侧面板/图层面板/右侧配置面板的显隐 |
中间区域
| 元素 | 功能 |
|---|---|
| 大屏名称 | 点击进入编辑态，失焦或回车自动保存 |
| 连线工具 | 激活连线绘制模式，支持折线/圆角折线/直线三种路径类型 |
| 页码显示 | 当前页 / 总页数（如 "6/16"），支持多页大屏 |
右侧按钮区
| 按钮 | 功能 | 快捷键 |
|---|---|---|
| 保存 | 保存画布数据到服务器，成功后自动生成封面截图 | Ctrl+S |
| 同步内容 | 将画布数据同步到后端 | — |
| 预览 | 在新窗口预览大屏效果 | — |
| 导入 | 导入 JSON 或 ZIP 文件覆盖当前画布 | — |
| 导出 | 导出为 JSON / PNG / ZIP | — |
| 发布 | 发布大屏生成公开访问链接，支持一键复制 | — |
| 组件模式保存 | 组件编辑模式下保存到组件库（生成模板+上传封面） | — |
模板编辑器：右侧无「发布」按钮，保存行为为保存模板内容。组件编辑器：右侧无「预览」「发布」按钮，「保存」替换为「组件模式保存」。
左侧组件面板
左侧面板展示可用组件，采用三级分类结构：
| 一级分类 | 二级分类 | 包含内容 |
|---|---|---|
| 通用 | Charts（图表） | 柱状图、折线图、饼图、散点图、雷达图、漏斗图、热力图、地图等 |
| 通用 | Informations（信息） | 文字、时间选择器、下拉选择器、图片、轮播图、视频、词云等 |
| 通用 | Tables（表格） | 滚动排名列表、轮播列表、基础分页表格 |
| 通用 | Decorates（装饰） | 13 种边框、6 种装饰动画、三维地球、数字翻牌、时钟等 |
| 通用 | Photos（图片） | 本地上传图片、共享图库 |
| 通用 | Icons（图标） | 通用图标 70+、Material Line 25+、天气图标 39+ |
| 通用 | Presets（预置） | IoT 业务组件：设备状态、指标翻牌器、设备对比分析等 |
| 模板 | 大屏模板 | 系统/自定义大屏模板，拖拽即用 |
| 自定义 | 用户组件 | 用户封装的自定义组件 |
操作方式：
- 点击：在面板中点击组件将其添加到画布
- 拖拽：从面板拖拽组件到画布生成实例
- 搜索：顶部搜索框按名称筛选组件
- 外部拖放：将本地图片文件拖入画布自动生成 Image 组件
组件编辑器：仅显示「基础」分类（通用大类下的 6 个子类），隐藏「模板」和「自定义」分类。
右侧配置面板
右侧面板根据当前选中目标动态切换内容。
未选中组件时 —— 页面配置
显示画布全局设置：
| 配置项 | 说明 |
|---|---|
| 画布尺寸 | 宽度 × 高度（设计稿尺寸） |
| 背景设置 | 背景颜色、背景图片（支持上传）、滤镜效果 |
| 主题 | 预设主题色彩（明亮/暗淡/马卡龙/蓝绿等 10+ 种） |
| 适配方式 | 预览缩放模式：自适应(fit)/全屏铺满(full)/纵/横向滚动 |
| 全局请求 | 全局轮询间隔、请求头、请求参数 |
组件编辑器：无页面配置 Tab。未选中组件时右侧显示「组件信息」（名称、ID、版本、类型、分类可编辑），而非画布全局设置。
选中组件时
根据组件类型显示不同 Tab：
「定制」Tab —— 组件专属配置：
- 尺寸（宽度 × 高度）和位置（X / Y 坐标）
- 图表样式配置（颜色、字体、图例、坐标轴等）
- 边框、圆角、透明度等样式属性
「动画」Tab —— 入场动画效果：
- 动画类型选择（淡入、滑入、缩放、旋转等）
- 动画时长和延迟时间设置
「事件」Tab —— 交互事件绑定：
- 基础事件：
click、dblclick、mouseenter、mouseleave - 生命周期事件：
vnodeBeforeMount、vnodeMounted - 交互联动：配置组件间数据联动关系
「数据」Tab（图表组件专属）：
- 数据源类型选择：静态数据 / 动态请求 / 公共接口 / 设备属性
- 请求参数配置：URL、Headers、Params、Body
- 字段映射：X 轴字段、Y 轴字段（或 name/value 模式）
- 数据过滤脚本：支持 JS 脚本动态转换数据
组件编辑器：仅显示「定制」和「数据」两个 Tab（无「动画」和「事件」），数据面板固定使用简化数据面板。
画布编辑区
画布是组件的放置和编辑区域，支持标尺和网格辅助对齐。
| 操作 | 方式 |
|---|---|
| 选中组件 | 单击选中，Ctrl+单击多选 |
| 移动组件 | 拖拽移动，自动限制边界，支持吸附对齐 |
| 缩放组件 | 拖拽组件四角或边缘的缩放手柄 |
| 框选 | 空白处拖拽框选多个组件 |
| 缩放画布 | 底部缩放滑块或 Ctrl+滚轮，范围 10%~200% |
| 右键菜单 | 右键组件唤出操作菜单（见下方） |
| 创建分组 | 多选组件后 Ctrl+G，或右键→「创建分组」 |
| 解除分组 | 选中分组后 Ctrl+Shift+G，或右键→「解除分组」 |
| 隔离编辑 | 双击分组进入隔离模式，仅显示组内组件；拖拽分组边框可联动缩放子组件；ESC 退出 |
| 连线绘制 | 顶部连线工具激活后，在组件间拖拽绘制折线/圆角折线/直线，右键结束 |
右键菜单
右键菜单根据选中组件数量显示不同选项：
选中单个组件时（从上到下）：
| 分组 | 菜单项 | 说明 |
|---|---|---|
| 状态操作 | 锁定 / 解锁 | 锁定后组件不可选中和移动 |
| 状态操作 | 隐藏 / 显示 | 隐藏后组件在画布上不可见 |
| 剪贴板 | 复制 / 剪切 / 粘贴 | 跨页面组件的复制粘贴，粘贴位置为右键点击处 |
| 层级调整 | 置顶 / 置底 / 上移 / 下移 | 调整组件 zIndex 层级 |
| 清除 | 清空剪贴板 | 清除当前剪贴板中暂存的组件数据 |
| 删除 | 删除 | 从画布移除组件（可用 Ctrl+Z 撤销） |
| 封装 | 保存为我的组件 | 将当前组件封装为自定义组件，存入组件库（详见 2.5 节） |
选中多个组件时：
| 菜单项 | 说明 |
|---|---|
| 创建分组 | 将选中的多个组件合并为一个分组 |
| 解除分组 | 将已选中的分组拆分为独立组件 |
图层管理面板
展开图层面板后显示所有组件的层级列表：
| 功能 | 说明 |
|---|---|
| 列表顺序 | 逆序展示（越新越靠上，对应 zIndex 越高） |
| 视图切换 | 缩略图模式 / 文本列表模式 |
| 悬停高亮 | 鼠标悬停时画布对应组件高亮 |
| 拖拽排序 | 拖拽调整组件层级 |
| 右键菜单 | 同画布右键菜单 |
组件编辑器：图层面板不可见，「图层」切换按钮从左侧工具栏移除。
底部状态栏
| 元素 | 功能 |
|---|---|
| 缩放控制 | 滑块调节画布显示比例（10% ~ 200%），支持自适应 |
| 页码指示 | 当前页码，支持多页大屏间切换 |
| 历史记录 | 操作历史面板入口 |
| 快捷键提示 | 显示常用快捷键参考 |
更新日志
2026/8/4 15:04
查看所有更新日志
7e927-于