事件与交互
适用组件：图表组件、信息展示组件（标准面板）。组件编辑器下「事件」Tab 隐藏。分组组件的「事件」Tab 不包含数据联动。
事件配置位于右侧面板的「事件」标签页，面板顶部显示当前组件 ID。按功能分为三个可折叠区域：
组件交互
适用组件：具有交互事件能力的输入组件（Tab 切换、Select、DatePicker、Input 等），选中该类组件后「事件」Tab 中出现「组件交互」折叠区。非交互组件不显示此项。
可视化配置组件间的数据联动关系，无需编写代码。点击「新增」按钮添加一条联动规则，每条规则对应一个目标组件：
配置字段：
| 字段 | 说明 |
|---|---|
| 触发事件 | 下拉选择源组件的交互事件类型（组件自身定义的 change / click 等） |
| 绑定（目标组件） | 下拉选择画布上符合条件的组件（排除自身、静态组件、分组组件），仅列出具有动态请求和数据池的组件。已被其他规则绑定的目标灰度不可再选 |
| 查询结果 | 参考表，展示触发事件后源组件输出的数据字段及说明 |
| 关联目标请求参数 | 将目标组件的请求 Params 和 Header 字段映射到源组件的输出字段，下拉选择对应关系 |
联动执行流程：源组件值变化 → 匹配 interactEvents → 修改目标组件 requestParams 中的 Params / Header → 自动触发目标组件数据拉取。
基础事件配置
适用面板：标准面板 →「事件」Tab →「基础事件配置」折叠区。
为组件的鼠标交互编写 JavaScript 响应函数。点击「编辑」按钮打开 Monaco 编辑器弹窗（1200×700），按事件类型分 Tab 编辑：
| 事件 | 函数签名 | 触发时机 |
|---|---|---|
click | async function click(mouseEvent, components) { } | 鼠标单击组件 |
dblclick | async function dblclick(mouseEvent, components) { } | 鼠标双击组件 |
mouseenter | async function mouseenter(mouseEvent, components) { } | 鼠标移入组件区域 |
mouseleave | async function mouseleave(mouseEvent, components) { } | 鼠标移出组件区域 |
参数说明：
| 参数 | 说明 |
|---|---|
mouseEvent | 原生鼠标事件对象 |
components | 画布上所有组件的集合对象，通过 components[id] 访问任意组件实例 |
编辑器功能：
- Monaco Editor 代码编辑，支持 JavaScript 语法高亮
- 右侧面板：验证结果（语法校验错误信息、错误函数名、堆栈）+ 变量说明（参数文档）
- 保存前自动进行语法校验（使用
AsyncFunction构造器），语法错误时拒绝保存并提示
提示：ECharts 图表组件会拦截部分鼠标事件，若基础事件无响应请检查图表配置。
高级事件配置
适用面板：标准面板 →「事件」Tab →「高级事件配置」折叠区。
为 Vue 组件生命周期编写响应函数，弹窗标题为「高级事件编辑器（配合源码使用）」：
| 事件 | 函数签名 | 触发时机 |
|---|---|---|
vnodeBeforeMount | async function vnodeBeforeMount(e, components, echarts, node_modules) { } | 组件渲染前 |
vnodeMounted | async function vnodeMounted(e, components, echarts, node_modules) { } | 组件渲染后 |
参数说明：
| 参数 | 说明 |
|---|---|
e | 生命周期事件上下文 |
components | 画布组件集合 |
echarts | ECharts 库实例，可直接调用其 API |
node_modules | 内置第三方模块集合 |
编辑器功能：
- Monaco Editor + 分 Tab 编辑 + 语法校验（同基础事件）
- 内置案例模板：自定义 tooltip、地图自动轮播等（通过
importTemplate注入） - 各 Tab 顶部提示该事件的使用要点
事件安全策略
组件编辑模式下事件配置不可见。
所有事件代码在白名单 Proxy 沙箱中执行：
- 允许：
JSON、Math、Date、Promise、console、Array、Object、String、Number、Boolean等 40 个安全全局对象 - 禁止访问：
window、document、eval、fetch、localStorage、XMLHttpRequest、WebSocket、setTimeout、setInterval等浏览器 API - 执行前通过动态 JS 安全策略检查，被禁用时打印警告并跳过
更新日志
2026/8/4 15:04
查看所有更新日志
7e927-于
