使用全局事件总线

AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue

@@ -1,5 +1,6 @@
 <template>
     <div 
+      ref="areaRef"
       class="vs-area select-none" 
       :class="{ 'is-maximized': isMaximized, 'is-normal': !isMaximized }" 
       :style="areaStyle"
@@ -133,7 +134,7 @@
 
 <script setup>
 import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
-import { emitEvent, EVENT_TYPES } from './eventBus.js'
+import { emitEvent, EVENT_TYPES, globalEventListenerManager } from './eventBus.js'
 import TabPage from './TabPage.vue'
 import Panel from './Panel.vue'
 import { zIndexManager, Z_INDEX_LAYERS } from './dockLayers.js'
@@ -155,6 +156,8 @@ const props = defineProps({
   draggable: { type: Boolean, default: true }
 })
 
+// 使用全局事件总线和拖拽管理器
+
 // 本地状态
 const localState = ref(props.windowState)
 // 保存原始位置和大小信息
@@ -170,6 +173,9 @@ const maximizedFromPosition = ref(null)
 // 存储接收到的外部Area内容
 const receivedContent = ref([])
 
+// 组件引用
+const areaRef = ref(null)
+
 // 拖拽相关状态
 const isDragging = ref(false)
 const dragStartPos = ref({ x: 0, y: 0 })
@@ -301,18 +307,21 @@ const onDragStart = (e) => {
     y: originalPosition.value.top || 0
   }
   
-  // 通知父组件拖拽开始
+  // 使用事件总线通知拖拽开始
   emitEvent(EVENT_TYPES.AREA_DRAG_START, {
     areaId: props.id,
+    event: e,
+    element: areaRef.value,
+    position: { x: e.clientX, y: e.clientY },
     clientX: e.clientX,
     clientY: e.clientY,
     startLeft: originalPosition.value.left || 0,
     startTop: originalPosition.value.top || 0
   })
   
-  // 添加全局事件监听
-  document.addEventListener('mousemove', onDragMove)
-  document.addEventListener('mouseup', onDragEnd)
+  // 使用全局事件管理器添加事件监听
+  globalEventListenerManager.addGlobalListener('mousemove', onDragMove)
+  globalEventListenerManager.addGlobalListener('mouseup', onDragEnd)
   
   // 防止文本选择
   e.preventDefault()
@@ -345,32 +354,39 @@ const onDragMove = (e) => {
   originalPosition.value.left = newLeft
   originalPosition.value.top = newTop
   
-  // 通知父组件拖拽移动
+  // 使用事件总线通知拖拽移动
   emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
     areaId: props.id,
+    event: e,
+    element: areaRef.value,
+    position: { x: e.clientX, y: e.clientY },
     clientX: e.clientX,
     clientY: e.clientY,
     left: newLeft,
     top: newTop
   })
   
-  // 通知父组件位置变化
+  // 使用事件总线通知位置变化
   emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, { areaId: props.id, left: newLeft, top: newTop })
 }
 
 // 拖拽结束
 const onDragEnd = () => {
-  // 通知父组件拖拽结束
+  // 使用事件总线通知拖拽结束
   emitEvent(EVENT_TYPES.AREA_DRAG_END, {
     areaId: props.id,
+    finalPosition: {
+      x: originalPosition.value.left,
+      y: originalPosition.value.top
+    },
     left: originalPosition.value.left,
     top: originalPosition.value.top
   })
   
   isDragging.value = false
-  // 移除全局事件监听
-  document.removeEventListener('mousemove', onDragMove)
-  document.removeEventListener('mouseup', onDragEnd)
+  // 使用全局事件管理器移除事件监听
+  globalEventListenerManager.removeGlobalListener('mousemove', onDragMove)
+  globalEventListenerManager.removeGlobalListener('mouseup', onDragEnd)
 }
 
 // 调整大小开始
@@ -392,10 +408,10 @@ const onResizeStart = (direction, e) => {
     top: originalPosition.value.top
   }
   
-  // 添加全局事件监听
-  document.addEventListener('mousemove', onResizeMove)
-  document.addEventListener('mouseup', onResizeEnd)
-  document.addEventListener('mouseleave', onResizeEnd)
+  // 使用全局事件管理器添加事件监听
+  globalEventListenerManager.addGlobalListener('mousemove', onResizeMove)
+  globalEventListenerManager.addGlobalListener('mouseup', onResizeEnd)
+  globalEventListenerManager.addGlobalListener('mouseleave', onResizeEnd)
   
   // 防止文本选择
   e.preventDefault()
@@ -486,7 +502,7 @@ const onResizeStart = (direction, e) => {
   originalPosition.value.left = newLeft
   originalPosition.value.top = newTop
   
-  // 通知父组件位置变化
+  // 使用事件总线通知位置变化
   emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
     areaId: props.id,
     left: newLeft,
@@ -501,10 +517,10 @@ const onResizeStart = (direction, e) => {
 const onResizeEnd = () => {
   isResizing.value = false
   resizeDirection.value = null
-  // 移除全局事件监听
-  document.removeEventListener('mousemove', onResizeMove)
-  document.removeEventListener('mouseup', onResizeEnd)
-  document.removeEventListener('mouseleave', onResizeEnd)
+  // 使用全局事件管理器移除事件监听
+  globalEventListenerManager.removeGlobalListener('mousemove', onResizeMove)
+  globalEventListenerManager.removeGlobalListener('mouseup', onResizeEnd)
+  globalEventListenerManager.removeGlobalListener('mouseleave', onResizeEnd)
 }
 
 const onToggleMaximize = () => {
@@ -580,13 +596,13 @@ onMounted(() => {
 // 组件卸载时清理全局事件监听器
 onUnmounted(() => {
   // 清理拖拽相关的全局事件监听器
-  document.removeEventListener('mousemove', onDragMove)
-  document.removeEventListener('mouseup', onDragEnd)
+  globalEventListenerManager.removeGlobalListener('mousemove', onDragMove)
+  globalEventListenerManager.removeGlobalListener('mouseup', onDragEnd)
   
   // 清理调整大小相关的全局事件监听器
-  document.removeEventListener('mousemove', onResizeMove)
-  document.removeEventListener('mouseup', onResizeEnd)
-  document.removeEventListener('mouseleave', onResizeEnd)
+  globalEventListenerManager.removeGlobalListener('mousemove', onResizeMove)
+  globalEventListenerManager.removeGlobalListener('mouseup', onResizeEnd)
+  globalEventListenerManager.removeGlobalListener('mouseleave', onResizeEnd)
 })