修复中心指示器在鼠标悬停时位置变动的问题

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

@@ -1,6 +1,6 @@
 <template>
   <div v-if="visible" class="dock-indicator" :style="indicatorStyle">
-    <!-- 半透明区域框：根据活动区域显示 -->
+    <!-- 停靠区 半透明区域框：根据活动区域显示 -->
     <div 
       v-if="activeDockZone" 
       class="dock-preview-area" 
@@ -153,49 +153,53 @@
         d="M10 14 L19 14 L19 30 L10 30 Z" />
     </svg>
     
-    <!-- 中心指示器：根据activeDockZone状态显示和高亮 -->
+    <!-- 中心区域容器：包装中心指示区和中心指示器 -->
-    <svg 
+    <div class="center-dock-container">
-      width="41" 
+      <!-- 中心指示区：一直可见 -->
-      height="41" 
+      <svg 
-      viewBox="0 0 40 40" 
+        width="185" 
-      aria-hidden="true" 
+        height="185" 
-      class="indicator-center" 
+        viewBox="0 0 185 185" 
-      :class="{ 'active': activeDockZone === 'center' }"
+        aria-hidden="true" 
-      @mouseenter="handleMouseEnter('center')"
+        class="indicator-center-area" 
-      @mouseleave="handleMouseLeave"
+        :class="{ 'active': activeDockZone === 'center' }"
-    >
+      >
-      <use xlink:href="#shared-border" />
+        <path
-      <path
+          fill="#636873"
-        fill="#4C5E83"
+          fill-rule="evenodd"
-        fill-rule="evenodd"
+          clip-rule="evenodd"
-        clip-rule="evenodd"
+          d="M0 72 L63 72 L72 63 L72 0 L113 0 L113 63 L123 72 L185 72 L185 113 L123 113 L113 123 L113 185 L72 185 L72 123 L63 113 L0 113 Z" />
-        d="M8 8 L32 8 L32 31 L31 32 L9 32 L8 31 Z" />
+        <path
-      <path
+          fill="#D5DCF0"
-        fill="url(#Area)"
+          fill-rule="evenodd"
-        fill-rule="evenodd"
+          clip-rule="evenodd"
-        clip-rule="evenodd"
+          d="M1 73 L64 73 L73 64 L73 1 L112 1 L112 64 L122 73 L184 73 L184 112 L122 112 L112 122 L112 184 L73 184 L73 122 L64 112 L1 112 Z" />
-        d="M10 14 L30 14 L30 30 L10 30 Z" />
+      </svg>
-    </svg>
+      
-    <!-- 中心指示区 -->
+      <!-- 中心指示器：根据activeDockZone状态显示和高亮，添加鼠标事件处理 -->
-    <svg 
+      <svg 
-      width="185" 
+        width="41" 
-      height="185" 
+        height="41" 
-      viewBox="0 0 185 185" 
+        viewBox="0 0 40 40" 
-      aria-hidden="true" 
+        aria-hidden="true" 
-      class="indicator-top" 
+        class="indicator-center" 
-      style="position: relative; left: 400px; top: 300px;" 
+        :class="{ 'active': activeDockZone === 'center' }"
-    >
+        @mouseenter="handleMouseEnter('center')"
-      <path
+        @mouseleave="handleMouseLeave"
-        fill="#636873"
+      >
-        fill-rule="evenodd"
+        <use xlink:href="#shared-border" />
-        clip-rule="evenodd"
+        <path
-        d="M0 72 L63 72 L72 63 L72 0 L113 0 L113 63 L123 72 L185 72 L185 113 L123 113 L113 123 L113 185 L72 185 L72 123 L63 113 L0 113 Z" />
+          fill="#4C5E83"
-      <path
+          fill-rule="evenodd"
-        fill="#D5DCF0"
+          clip-rule="evenodd"
-        fill-rule="evenodd"
+          d="M8 8 L32 8 L32 31 L31 32 L9 32 L8 31 Z" />
-        clip-rule="evenodd"
+        <path
-        d="M1 73 L64 73 L73 64 L73 1 L112 1 L112 64 L122 73 L184 73 L184 112 L122 112 L112 122 L112 184 L73 184 L73 122 L64 112 L1 112 Z" />
+          fill="url(#Area)"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10 14 L30 14 L30 30 L10 30 Z" />
     </svg>
+    </div>
   </div>
 </template>
 
@@ -231,8 +235,11 @@ const props = defineProps({
 
 // 鼠标悬停在哪个指示器上
 const hoveredZone = ref(null)
+// 鼠标是否悬停在中心指示器上（用于控制中心指示区的显示）
+const isCenterIndicatorHovered = ref(false)
 // 延迟定时器
 let mouseLeaveTimer = null
+let centerLeaveTimer = null
 
 // 处理鼠标进入指示器
 const handleMouseEnter = (zone) => {
@@ -242,6 +249,11 @@ const handleMouseEnter = (zone) => {
     mouseLeaveTimer = null
   }
   hoveredZone.value = zone
+  
+  // 如果是中心指示器，设置专门的状态
+  if (zone === 'center') {
+    isCenterIndicatorHovered.value = true
+  }
 }
 
 // 处理鼠标离开指示器
@@ -251,6 +263,12 @@ const handleMouseLeave = () => {
     hoveredZone.value = null
     mouseLeaveTimer = null
   }, 100)
+  
+  // 单独处理中心指示器的离开事件，设置延迟
+  centerLeaveTimer = setTimeout(() => {
+    isCenterIndicatorHovered.value = false
+    centerLeaveTimer = null
+  }, 100)
 }
 
 // 清理定时器
@@ -258,6 +276,9 @@ onUnmounted(() => {
   if (mouseLeaveTimer) {
     clearTimeout(mouseLeaveTimer)
   }
+  if (centerLeaveTimer) {
+    clearTimeout(centerLeaveTimer)
+  }
 })
 
 // 计算指示器的样式
@@ -404,15 +425,38 @@ watch(activeDockZone, (newZone) => {
   z-index: 9999; /* 确保在预览区域上方 */
 }
 
-/* 中心指示器：定位在目标区域的中心 */
+/* 中心区域容器：包装中心指示区和中心指示器 */
-.indicator-center {
+.center-dock-container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  z-index: 9999; /* 确保在预览区域上方 */
+  width: 185px;
+  height: 185px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 中心指示区：较大的背景区域 */
+.indicator-center-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   opacity: 0.7; /* 默认半透明 */
   transition: opacity 0.2s;
-  z-index: 9999; /* 确保在预览区域上方 */
+  z-index: 1; /* 中心指示区在下层 */
+}
+
+/* 中心指示器：较小的图标，显示在中心指示区上层 */
+.indicator-center {
+  position: relative;
+  z-index: 2; /* 确保在中心指示区上方 */
+  opacity: 0.7; /* 默认半透明 */
+  transition: all 0.2s; /* 应用到所有属性的过渡 */
 }
 
 /* 活动状态样式 */
@@ -434,7 +478,11 @@ watch(activeDockZone, (newZone) => {
 }
 .indicator-center.active {
   opacity: 1; /* 完全不透明 */
-  transform: translate(-50%, -50%) scale(1.1); /* 保持中心居中的同时放大 */
+  transform: scale(1.1); /* 只放大，不改变位置 */
+}
+
+.indicator-center-area.active {
+  opacity: 1; /* 完全不透明 */
   transition: all 0.2s;
 }
 </style>