From afdd48bc937c7f99ccd9925e59f5fc56fb51da55 Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Fri, 14 Nov 2025 09:39:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4DockIndicator.vue=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E5=8C=BA=E5=9F=9F=E6=8C=87=E7=A4=BA=E5=99=A8=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将左区、右区、下区三个区域指示器从外部移动到center-dock-container内部
- 按照上区指示器的布局方式，围绕中心指示器放置
- 更新相关CSS样式，确保视觉一致性和布局平衡
- 删除原有的外部指示器定义，简化代码结构
---
 .../Web/src/DockLayout/DockIndicator.vue      | 189 +++++++++++-------
 .../Robot/Web/src/DockLayout/DockLayout.vue   |   2 +-
 2 files changed, 118 insertions(+), 73 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
index afaf8ae..c29f791 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
@@ -169,77 +169,7 @@
         d="M10 13 L30 13 L30 19 L10 19 Z" />
     </svg>
     
-    <!-- 右指示：根据activeDockZone状态显示和高亮 -->
-    <svg 
-      width="41" 
-      height="41" 
-      viewBox="0 0 40 40" 
-      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
-        fill="#4C5E83"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M19 8 L32 8 L32 31 L31 32 L20 32 L19 31 Z" />
-      <path
-        fill="url(#Area)"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M21 14 L30 14 L30 30 L21 30 Z" />
-    </svg>
-    
-    <!-- 下指示：根据activeDockZone状态显示和高亮 -->
-    <svg 
-      width="41" 
-      height="41" 
-      viewBox="0 0 40 40" 
-      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
-        fill="#4C5E83"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M8 19 L32 19 L32 31 L31 32 L9 32 L8 31 Z" />
-      <path
-        fill="url(#Area)"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M10 24 L30 24 L30 30 L10 30 Z" />
-    </svg>
-    
-    <!-- 左指示：根据activeDockZone状态显示和高亮 -->
-    <svg 
-      width="41" 
-      height="41" 
-      viewBox="0 0 40 40" 
-      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
-        fill="#4C5E83"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M8 8 L21 8 L21 31 L19 32 L9 32 L8 31 Z" />
-      <path
-        fill="url(#Area)"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M10 14 L19 14 L19 30 L10 30 Z" />
-    </svg>
+
     
     <!-- 中心区域容器：包装中心指示区和中心指示器 -->
     <div class="center-dock-container">
@@ -290,6 +220,88 @@
           clip-rule="evenodd"
           d="M10 21 L30 21 L30 30 L10 30 Z" />
       </svg>
+
+      <!-- 左区指示 -->
+      <svg 
+        width="41" 
+        height="41" 
+        viewBox="0 0 40 40" 
+        aria-hidden="false" 
+        class="dock-left-area"
+      >
+        <use xlink:href="#shared-area" />
+        <path
+          fill="url(#Area)"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10 13 L30 13 L30 20 L10 20 Z" />
+        <path
+          d="M10 20 L30 20"
+          stroke="#4C5E83"
+          stroke-dasharray="2,2"
+          stroke-width="1"
+          fill="none" />
+        <path
+          fill="#F0F2F6"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10 21 L30 21 L30 30 L10 30 Z" />
+      </svg>
+
+      <!-- 右区指示 -->
+      <svg 
+        width="41" 
+        height="41" 
+        viewBox="0 0 40 40" 
+        aria-hidden="false" 
+        class="dock-right-area"
+      >
+        <use xlink:href="#shared-area" />
+        <path
+          fill="url(#Area)"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10 13 L30 13 L30 20 L10 20 Z" />
+        <path
+          d="M10 20 L30 20"
+          stroke="#4C5E83"
+          stroke-dasharray="2,2"
+          stroke-width="1"
+          fill="none" />
+        <path
+          fill="#F0F2F6"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10 21 L30 21 L30 30 L10 30 Z" />
+      </svg>
+
+      <!-- 下区指示 -->
+      <svg 
+        width="41" 
+        height="41" 
+        viewBox="0 0 40 40" 
+        aria-hidden="false" 
+        class="dock-bottom-area"
+      >
+        <use xlink:href="#shared-area" />
+        <path
+          fill="url(#Area)"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10 13 L30 13 L30 20 L10 20 Z" />
+        <path
+          d="M10 20 L30 20"
+          stroke="#4C5E83"
+          stroke-dasharray="2,2"
+          stroke-width="1"
+          fill="none" />
+        <path
+          fill="#F0F2F6"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10 21 L30 21 L30 30 L10 30 Z" />
+      </svg>
+      
       <!-- 中心指示区上方指示器：位于中心指示区上边缘，距离上边框5像素 -->
       <svg 
         width="41" 
@@ -668,7 +680,40 @@ watch(activeDockZone, (newZone) => {
 /* 上区指示器：位于中心指示区上方指示器的上方4个像素处 */
 .dock-top-area {
   position: absolute;
-  top: 46px; /* 向上偏移，确保距离中心指示区上方指示器上边缘4个像素 */
+  top: 51px; /* 向上偏移，确保距离中心指示区上方指示器上边缘4个像素 */
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0.7; /* 默认半透明 */
+  transition: opacity 0.2s;
+  z-index: 2; /* 确保在中心指示区上方 */
+}
+
+/* 左区指示器：位于中心指示区左侧指示器的右侧4个像素处 */
+.dock-left-area {
+  position: absolute;
+  top: 50%;
+  left: 51px; /* 向右偏移，确保距离中心指示区左侧指示器右边缘4个像素 */
+  transform: translateY(-50%);
+  opacity: 0.7; /* 默认半透明 */
+  transition: opacity 0.2s;
+  z-index: 2; /* 确保在中心指示区上方 */
+}
+
+/* 右区指示器：位于中心指示区右侧指示器的左侧4个像素处 */
+.dock-right-area {
+  position: absolute;
+  top: 50%;
+  right: 51px; /* 向左偏移，确保距离中心指示区右侧指示器左边缘4个像素 */
+  transform: translateY(-50%);
+  opacity: 0.7; /* 默认半透明 */
+  transition: opacity 0.2s;
+  z-index: 2; /* 确保在中心指示区上方 */
+}
+
+/* 下区指示器：位于中心指示区下方指示器的下方4个像素处 */
+.dock-bottom-area {
+  position: absolute;
+  bottom: 51px; /* 向上偏移，确保距离中心指示区下方指示器下边缘4个像素 */
   left: 50%;
   transform: translateX(-50%);
   opacity: 0.7; /* 默认半透明 */
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
index e0b3b1c..127623b 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
@@ -3,7 +3,7 @@
     <!-- 停靠指示器组件 - 设置高z-index确保显示在最顶层 -->
       <!-- :visible="showDockIndicator" :visible="true" -->
     <DockIndicator
-      :visible="true"
+      :visible="showDockIndicator"
       :target-rect="targetAreaRect"
       :mouse-position="currentMousePosition"
       @zone-active="onDockZoneActive"