修复停靠指示器定位问题：调整所有指示器与容器边缘保持5像素距离

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

@@ -9,7 +9,7 @@
       style="z-index: 9999;"
     />
     
-    <!-- 主区域 -->
+    <!-- 主区域 - 添加ref引用 -->
     <Area 
       :WindowState="windowState" 
       :showTitleBar="false" 
@@ -98,7 +98,6 @@ const floatingAreas = ref([])
 
 // 容器引用
 const dockLayoutRef = ref(null)
-
 // 区域ID计数器
 let areaIdCounter = 1
 
@@ -299,6 +298,20 @@ const onPanelDragStart = (areaId, event) => {
       x: event.clientX,
       y: event.clientY
     }
+    
+    // 拖拽开始时就显示指示器
+    showDockIndicator.value = true
+    
+    // 使用dock-layout作为默认目标区域
+    if (dockLayoutRef.value) {
+      const rect = dockLayoutRef.value.getBoundingClientRect()
+      targetAreaRect.value = {
+        left: 0,  // 使用相对于容器的位置（左上角）
+        top: 0,
+        width: rect.width,
+        height: rect.height
+      }
+    }
   }
 }
 
@@ -373,6 +386,26 @@ const onTabDragStart = (areaId, event) => {
       y: area.y
     }
     console.log('TabPage拖拽开始，移动Area:', areaId)
+    
+    // 初始化鼠标位置跟踪
+    currentMousePosition.value = {
+      x: event.clientX,
+      y: event.clientY
+    }
+    
+    // 拖拽开始时就显示指示器
+    showDockIndicator.value = true
+    
+    // 使用dock-layout作为默认目标区域
+    if (dockLayoutRef.value) {
+      const rect = dockLayoutRef.value.getBoundingClientRect()
+      targetAreaRect.value = {
+        left: 0,  // 使用相对于容器的位置（左上角）
+        top: 0,
+        width: rect.width,
+        height: rect.height
+      }
+    }
   }
 }
 
@@ -402,6 +435,12 @@ const onTabDragMove = (areaId, event) => {
       area.x = newLeft
       area.y = newTop
       
+      // 更新鼠标位置
+      currentMousePosition.value = {
+        x: event.clientX,
+        y: event.clientY
+      }
+      
       // 调试信息
       console.log('TabPage拖拽移动，Area新位置:', { x: newLeft, y: newTop })
     }
@@ -442,14 +481,19 @@ const handleMainAreaDragOver = (event) => {
   event.preventDefault()
   
   if (panelDragState.value.isDragging || tabDragState.value.isDragging) {
-    // 获取主区域的位置和大小
-    const mainAreaElement = event.currentTarget
-    const rect = mainAreaElement.getBoundingClientRect()
+    // 使用dock-layout作为基准获取位置和大小
+    let rect
+    if (dockLayoutRef.value) {
+      rect = dockLayoutRef.value.getBoundingClientRect()
+    } else {
+      // 回退到使用事件目标
+      rect = event.currentTarget.getBoundingClientRect()
+    }
     
     // 更新目标区域信息并显示停靠指示器
     targetAreaRect.value = {
-      left: rect.left,
-      top: rect.top,
+      left: 0,  // 使用相对于容器的位置（左上角）
+      top: 0,
       width: rect.width,
       height: rect.height
     }