面板拖拽问题

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

@@ -113,7 +113,7 @@
 
 <script setup>
 import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
-import { emitEvent, EVENT_TYPES, globalEventListenerManager } from './eventBus'
+import { emitEvent, EVENT_TYPES } from './eventBus'
 import TabPage from './TabPage.vue'
 import Panel from './Panel.vue'
 import Render from './Render.vue'
@@ -358,11 +358,7 @@ const onDragStart = (e) => {
   emitEvent(EVENT_TYPES.AREA_DRAG_START, {
     dragId: currentDragId.value,
     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,
     timestamp: Date.now()
@@ -370,10 +366,6 @@ const onDragStart = (e) => {
     source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
   })
   
-  // 使用全局事件管理器添加事件监听
-  globalEventListenerManager.addGlobalListener('mousemove', onDragMove)
-  globalEventListenerManager.addGlobalListener('mouseup', onDragEnd)
-  
   // 防止文本选择
   e.preventDefault()
 }
@@ -409,11 +401,7 @@ const onDragMove = (e) => {
   emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
     dragId: currentDragId.value,
     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,
     timestamp: Date.now()
@@ -453,9 +441,6 @@ const onDragEnd = () => {
   
   isDragging.value = false
   currentDragId.value = null
-  // 使用全局事件管理器移除事件监听
-  globalEventListenerManager.removeGlobalListener('mousemove', onDragMove)
-  globalEventListenerManager.removeGlobalListener('mouseup', onDragEnd)
 }
 
 // 调整大小开始
@@ -477,50 +462,45 @@ const onResizeStart = (direction, e) => {
     top: originalPosition.value.top
   }
   
-  // 使用全局事件管理器添加事件监听
-  globalEventListenerManager.addGlobalListener('mousemove', onResizeMove)
-  globalEventListenerManager.addGlobalListener('mouseup', onResizeEnd)
-  globalEventListenerManager.addGlobalListener('mouseleave', onResizeEnd)
-  
   // 防止文本选择
   e.preventDefault()
   e.stopPropagation()
 }
 
 // 调整大小移动
-  const onResizeMove = (e) => {
-    if (!isResizing.value) return
-    
-    const deltaX = e.clientX - resizeStartPos.value.x
-    const deltaY = e.clientY - resizeStartPos.value.y
-    
-    let newWidth = resizeStartSize.value.width
-    let newHeight = resizeStartSize.value.height
-    let newLeft = resizeStartAreaPos.value.left
-    let newTop = resizeStartAreaPos.value.top
-    
-    // 根据方向调整大小
-    switch (resizeDirection.value) {
-      case 'nw':
-        newWidth = Math.max(200, resizeStartSize.value.width - deltaX)
-        newHeight = Math.max(150, resizeStartSize.value.height - deltaY)
-        newLeft = resizeStartAreaPos.value.left + deltaX
-        newTop = resizeStartAreaPos.value.top + deltaY
-        break
-      case 'ne':
-        newWidth = Math.max(200, resizeStartSize.value.width + deltaX)
-        newHeight = Math.max(150, resizeStartSize.value.height - deltaY)
-        newTop = resizeStartAreaPos.value.top + deltaY
-        break
-      case 'sw':
-        newWidth = Math.max(200, resizeStartSize.value.width - deltaX)
-        newHeight = Math.max(150, resizeStartSize.value.height + deltaY)
-        newLeft = resizeStartAreaPos.value.left + deltaX
-        break
-      case 'se':
-        newWidth = Math.max(200, resizeStartSize.value.width + deltaX)
-        newHeight = Math.max(150, resizeStartSize.value.height + deltaY)
-        break
+const onResizeMove = (e) => {
+  if (!isResizing.value) return
+  
+  const deltaX = e.clientX - resizeStartPos.value.x
+  const deltaY = e.clientY - resizeStartPos.value.y
+  
+  let newWidth = resizeStartSize.value.width
+  let newHeight = resizeStartSize.value.height
+  let newLeft = resizeStartAreaPos.value.left
+  let newTop = resizeStartAreaPos.value.top
+  
+  // 根据方向调整大小
+  switch (resizeDirection.value) {
+    case 'nw':
+      newWidth = Math.max(200, resizeStartSize.value.width - deltaX)
+      newHeight = Math.max(150, resizeStartSize.value.height - deltaY)
+      newLeft = resizeStartAreaPos.value.left + deltaX
+      newTop = resizeStartAreaPos.value.top + deltaY
+      break
+    case 'ne':
+      newWidth = Math.max(200, resizeStartSize.value.width + deltaX)
+      newHeight = Math.max(150, resizeStartSize.value.height - deltaY)
+      newTop = resizeStartAreaPos.value.top + deltaY
+      break
+    case 'sw':
+      newWidth = Math.max(200, resizeStartSize.value.width - deltaX)
+      newHeight = Math.max(150, resizeStartSize.value.height + deltaY)
+      newLeft = resizeStartAreaPos.value.left + deltaX
+      break
+    case 'se':
+      newWidth = Math.max(200, resizeStartSize.value.width + deltaX)
+      newHeight = Math.max(150, resizeStartSize.value.height + deltaY)
+      break
     case 'n':
       // 拖动上边框时，Area向上边扩展
       newHeight = Math.max(150, resizeStartSize.value.height - deltaY)
@@ -588,10 +568,6 @@ const onResizeStart = (direction, e) => {
 const onResizeEnd = () => {
   isResizing.value = false
   resizeDirection.value = null
-  // 使用全局事件管理器移除事件监听
-  globalEventListenerManager.removeGlobalListener('mousemove', onResizeMove)
-  globalEventListenerManager.removeGlobalListener('mouseup', onResizeEnd)
-  globalEventListenerManager.removeGlobalListener('mouseleave', onResizeEnd)
 }
 
 const onToggleMaximize = () => {
@@ -672,16 +648,13 @@ onMounted(() => {
   }
 })
 
-// 组件卸载时清理全局事件监听器
+// 组件卸载时清理状态
 onUnmounted(() => {
-  // 清理拖拽相关的全局事件监听器
-  globalEventListenerManager.removeGlobalListener('mousemove', onDragMove)
-  globalEventListenerManager.removeGlobalListener('mouseup', onDragEnd)
-  
-  // 清理调整大小相关的全局事件监听器
-  globalEventListenerManager.removeGlobalListener('mousemove', onResizeMove)
-  globalEventListenerManager.removeGlobalListener('mouseup', onResizeEnd)
-  globalEventListenerManager.removeGlobalListener('mouseleave', onResizeEnd)
+  // 清理拖拽和调整大小状态
+  isDragging.value = false
+  currentDragId.value = null
+  isResizing.value = false
+  resizeDirection.value = null
 })