自定义组件
编辑器支持将画布上的单个组件或多个组件组成的分组封装为可复用的自定义组件，保存后在左侧面板「自定义」分类中管理和拖拽使用。
单组件封装
适用场景：直接封装画布上已配置好样式、数据、事件的单个图表或装饰组件。
操作步骤：
- 画布上选中单个组件
- 右键 → 选择「保存为我的组件」
- 弹出「封装为自定义组件」对话框
| 字段 | 说明 |
|---|---|
| 组件名称 | 自动填入组件原标题，可修改 |
| 组件分类 | 普通用户仅「自定义组件」；管理员可见预设分类（指标/状态/对比/通用/容器等） |
| 适配器类型 | 默认「自动匹配」，可手动指定（柱状图/折线图/饼图/雷达图/默认等） |
| 暴露属性 | 勾选哪些配置区块对使用者开放：标题/名称、尺寸、样式/滤镜、图表配置（仅单组件） |
| 封面图 | 系统自动截取画布快照，点击可手动上传替换（≤2MB） |
- 点击「确定」→ 系统自动脱敏实例、上传封面、保存到后端 → 组件出现在左侧「自定义」列表
覆盖更新：若组件来源于已有自定义模板（带 templateId），右键时会先弹出选择框——「覆盖更新」替换原模板，或「另存为新组件」创建独立副本。
分组组件封装
适用场景：将多个组件先组合为分组，整体作为一个可复用的组件块（如「标题+图表+装饰边框」的组合面板）。
操作步骤：
第一步：创建分组
多选组件后，有两种方式创建分组：
| 方式 | 操作 |
|---|---|
| 键盘 | Ctrl+G |
| 右键 | 多选组件 → 右键 →「创建分组」 |
分组创建后，画布上显示为一个整体容器，子组件在容器内保持相对位置。
第二步：封装分组
选中整个分组
右键 → 选择「保存为我的组件」
弹出「封装为自定义组件」对话框
分组封装与单组件封装的差异：
| 差异项 | 单组件 | 分组组件 |
|---|---|---|
| 对话框标题 | 封装为自定义组件 | 封装为自定义组件 |
| 暴露属性选项 | 标题/名称、尺寸、样式/滤镜、图表配置 | 标题/名称、尺寸、样式/滤镜（无图表配置） |
| 适配器类型 | 图表适配器列表 | 组合适配器（自动分发）、IoT 设备数据源、HTTP API 数据源 |
| 模板类型 | single_template | group_template |
| 脱敏方式 | 清空 id + 重置坐标 | 容器坐标重置为 0 + 递归脱敏子组件（保留组内相对坐标） |
分组组件封装时自动注入组合适配器，实例化后在简化数据面板中使用 CompositeAdapterEditor 配置数据分发。
封装内部流程
每次封装，系统自动执行以下处理：
- 实例脱敏：清空 id（实例化时重新生成 UUID）、重置坐标为 0、数据源重置为静态、清除事件绑定、解锁并显示
- 注入元数据：标记
sourceType='custom'+templateId，推断简化数据模式（editMode），写入暴露属性白名单（exposedProps）和适配器类型 - 生成模板：生成
single_template或group_template的模板 JSON - 封面截图：调用
html2canvas自动截取组件/分组快照并上传为封面
使用自定义组件
组件创建后，在左侧面板「自定义」分类中可看到个人组件库列表。
| 方式 | 操作 |
|---|---|
| 点击添加 | 单击组件项，自动添加到画布 |
| 拖拽添加 | 拖拽到画布指定位置 |
实例化时自动生成新 UUID，子组件 ID 同步更新。组件持有溯源标记 sourceType='custom' + templateId，后续可覆盖更新。
简化数据模式
根据组件类型自动决定数据配置面板的形态：
| 模式 | editMode | 适用类型 | 说明 |
|---|---|---|---|
none | 装饰、图标 | 无数据配置入口 | |
form | 信息、文本 | 表单字段编辑（SimplifiedDataPanel → FormEditor） | |
table | 图表、表格 | 表格行列编辑器（SimplifiedDataPanel → TableEditor） | |
composite | 分组组件 | 组合适配器配置（SimplifiedDataPanel → CompositeAdapterEditor） |
自定义组件的数据绑定全部使用简化数据面板（详见 5.2 节）。
更新日志
2026/8/4 15:04
查看所有更新日志
7e927-于