搜索Vue Flow的事件文档，了解各种事件的作用```toolCall::search_web::call_dd8b1d97cd024263b58ef2eb::INIT
```搜索Vue Flow官方文档中关于事件的部分```toolCall::search_web::call_a115e4b38ace4ad49f0567c8::INIT
```搜索项目中VueFlow组件的使用和事件处理方式```toolCall::search_codebase::call_0504778489654ede8dc88d87::INIT
```基于搜索到的代码信息，我来为您介绍Vue Flow中常用的事件及其作用：## Vue Flow 事件说明Vue Flow 提供了丰富的事件系统，允许您监听和响应用户与流程图的交互。以下是在项目中使用的各种事件及其作用：### 节点相关事件1. **`@node-click`** - 节点单击事件- 当用户单击节点时触发- 通常用于选中节点、打开节点属性面板等操作2. **`@node-double-click`** - 节点双击事件- 当用户双击节点时触发- 常用于打开节点详细设置或执行特定操作3. **`@node-contextmenu`** - 节点右键菜单事件- 当用户右键点击节点时触发- 通常用于显示上下文菜单4. **`@node-drag-start`** - 节点拖拽开始事件- 当用户开始拖拽节点时触发- 可用于记录节点初始位置或执行拖拽前的准备工作5. **`@node-drag`** - 节点拖拽中事件- 在节点拖拽过程中持续触发- 可用于实时更新节点位置或显示辅助信息6. **`@node-drag-stop`** - 节点拖拽结束事件- 当用户停止拖拽节点时触发- 常用于保存节点新位置或执行相关业务逻辑### 边（连接线）相关事件1. **`@edge-click`** - 边单击事件- 当用户单击连接线时触发- 通常用于选中边或显示边属性2. **`@edge-double-click`** - 边双击事件- 当用户双击连接线时触发- 可用于编辑边的属性或执行特定操作3. **`@edge-context-menu`** - 边右键菜单事件- 当用户右键点击连接线时触发- 通常用于显示边的上下文菜单4. **`@edge-mouse-enter`** - 鼠标进入边事件- 当鼠标光标移入连接线上方时触发- 可用于高亮显示边或显示额外信息5. **`@edge-mouse-leave`** - 鼠标离开边事件- 当鼠标光标移出连接线上方时触发- 通常用于取消高亮或隐藏额外信息6. **`@edge-mouse-move`** - 鼠标在边上移动事件- 当鼠标在连接线上移动时持续触发- 可用于显示实时位置信息### 连接相关事件1. **[@connect](file://h:\websoc\src\websocket\index.js#L2-L15)** - 连接事件- 当用户成功创建连接时触发- 用于处理新创建的连接，如保存到数据库或更新状态2. **`@connect-start`** - 连接开始事件- 当用户开始创建连接时触发（从一个节点的连接点开始拖拽）- 可用于初始化连接操作或显示辅助线3. **`@connect-end`** - 连接结束事件- 当用户结束连接操作时触发（无论是否成功创建连接）- 用于清理连接操作相关的状态### 边更新相关事件1. **`@edge-update-start`** - 边更新开始事件- 当用户开始修改现有连接时触发2. **`@edge-update`** - 边更新中事件- 在边更新过程中持续触发3. **`@edge-update-end`** - 边更新结束事件- 当用户完成边更新操作时触发### 选择相关事件1. **`@selection-drag`** - 选择区域拖拽事件- 当用户拖拽选择区域时触发2. **`@selection-drag-start`** - 选择区域拖拽开始事件- 当用户开始拖拽选择区域时触发3. **`@selection-start`** - 选择开始事件- 当用户开始选择操作时触发### 视图相关事件1. **`@move`** - 视图移动事件- 当用户移动视图（平移）时触发- 可用于跟踪视图位置或实现视差效果2. **`@move-start`** - 视图移动开始事件- 当用户开始移动视图时触发3. **`@move-end`** - 视图移动结束事件- 当用户结束视图移动时触发### 其他事件1. **`@update:nodes`** - 节点更新事件- 当节点数据发生变化时触发2. **`@dragover`** - 拖拽悬停事件- 当拖拽元素悬停在流程图上时触发3. **`@dragleave`** - 拖拽离开事件- 当拖拽元素离开流程图区域时触发### 项目中的实际应用在您的项目中，这些事件主要用于：1. **用户交互处理** - 通过[logEvent](file://h:\websoc\src\views\system\index.vue#L566-L842)函数统一处理各种事件
2. **节点操作** - 处理节点的点击、拖拽等操作
3. **连接管理** - 处理节点间的连接创建和修改
4. **视图控制** - 监控和响应视图的移动和缩放
5. **属性面板** - 根据选中的节点或边显示相应的属性设置这些事件使得Vue Flow成为一个功能强大的交互式流程图组件，能够满足复杂的用户交互需求。