修改停靠指示器显示逻辑：只有鼠标进入指示器时才显示依靠区

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

@@ -65,6 +65,8 @@
       aria-hidden="true" 
       class="indicator-top" 
       :class="{ 'active': activeDockZone === 'top' }"
+      @mouseenter="handleMouseEnter('top')"
+      @mouseleave="handleMouseLeave"
     >
       <use xlink:href="#shared-icon" />
       <path
@@ -87,6 +89,8 @@
       aria-hidden="true" 
       class="indicator-right" 
       :class="{ 'active': activeDockZone === 'right' }"
+      @mouseenter="handleMouseEnter('right')"
+      @mouseleave="handleMouseLeave"
     >
       <use xlink:href="#shared-icon" transform="rotate(90 20 20)" />
       <path
@@ -109,6 +113,8 @@
       aria-hidden="true" 
       class="indicator-bottom" 
       :class="{ 'active': activeDockZone === 'bottom' }"
+      @mouseenter="handleMouseEnter('bottom')"
+      @mouseleave="handleMouseLeave"
     >
       <use xlink:href="#shared-icon" transform="rotate(180 20 20)" />
       <path
@@ -131,6 +137,8 @@
       aria-hidden="true" 
       class="indicator-left" 
       :class="{ 'active': activeDockZone === 'left' }"
+      @mouseenter="handleMouseEnter('left')"
+      @mouseleave="handleMouseLeave"
     >
       <use xlink:href="#shared-icon" transform="rotate(270 20 20)" />
       <path
@@ -153,6 +161,8 @@
       aria-hidden="true" 
       class="indicator-center" 
       :class="{ 'active': activeDockZone === 'center' }"
+      @mouseenter="handleMouseEnter('center')"
+      @mouseleave="handleMouseLeave"
     >
       <use xlink:href="#shared-border" />
       <path
@@ -199,6 +209,19 @@ const props = defineProps({
   }
 })
 
+// 鼠标悬停在哪个指示器上
+const hoveredZone = ref(null)
+
+// 处理鼠标进入指示器
+const handleMouseEnter = (zone) => {
+  hoveredZone.value = zone
+}
+
+// 处理鼠标离开指示器
+const handleMouseLeave = () => {
+  hoveredZone.value = null
+}
+
 // 计算指示器的样式
 const indicatorStyle = computed(() => {
   return {
@@ -212,43 +235,12 @@ const indicatorStyle = computed(() => {
   }
 })
 
-// 计算活动的停靠区域
+// 计算活动的停靠区域 - 只有当鼠标悬停在指示器上时才返回对应的区域
 const activeDockZone = computed(() => {
   if (!props.visible) return null
   
-  // 计算各个区域的位置和大小
+  // 只有当鼠标悬停在某个指示器上时才返回对应的区域
-  const { left, top, width, height } = props.targetRect
+  return hoveredZone.value
-  const { x, y } = props.mousePosition
-  
-  // 计算相对位置
-  const relativeX = x - left
-  const relativeY = y - top
-  
-  // 定义区域的阈值（25%）
-  const threshold = 0.25
-  
-  // 判断是否在顶部区域
-  if (relativeY < height * threshold) {
-    return 'top'
-  }
-  
-  // 判断是否在底部区域
-  if (relativeY > height * (1 - threshold)) {
-    return 'bottom'
-  }
-  
-  // 判断是否在左侧区域
-  if (relativeX < width * threshold) {
-    return 'left'
-  }
-  
-  // 判断是否在右侧区域
-  if (relativeX > width * (1 - threshold)) {
-    return 'right'
-  }
-  
-  // 默认在中心区域
-  return 'center'
 })
 
 // 计算半透明区域框的样式