From a8757b9988f6e4ff4a2c62873120db5fda4f257c Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Thu, 13 Nov 2025 15:12:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E4=B8=AD=E5=BF=83=E6=8C=87=E7=A4=BA?=
 =?UTF-8?q?=E5=8C=BA=E4=B8=8A=E4=B8=8B=E5=B7=A6=E5=8F=B3=E4=B8=8E=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=865=E4=B8=AA=E5=83=8F=E7=B4=A0=E7=9A=84=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=B7=BB=E5=8A=A0=E5=9B=9B=E4=B8=AA=E6=8C=87=E7=A4=BA?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Web/src/DockLayout/DockIndicator.vue      | 161 ++++++++++++++++++
 1 file changed, 161 insertions(+)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
index f55e7de..c63c556 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
@@ -176,6 +176,102 @@
           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" />
       </svg>
       
+      <!-- 中心指示区上方指示器：位于中心指示区上边缘，距离上边框5像素 -->
+      <svg 
+        width="41" 
+        height="41" 
+        viewBox="0 0 40 40" 
+        aria-hidden="true" 
+        class="indicator-center-top" 
+        :class="{ 'active': activeDockZone === 'center-top' }"
+        @mouseenter="handleMouseEnter('center-top')"
+        @mouseleave="handleMouseLeave"
+      >
+        <use xlink:href="#shared-icon" />
+        <path
+          fill="#4C5E83"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" />
+        <path
+          fill="url(#Area)"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M10 13 L30 13 L30 19 L10 19 Z" />
+      </svg>
+      
+      <!-- 中心指示区右侧指示器：位于中心指示区右边缘，距离右边框5像素 -->
+      <svg 
+        width="41" 
+        height="41" 
+        viewBox="0 0 40 40" 
+        aria-hidden="true" 
+        class="indicator-center-right" 
+        :class="{ 'active': activeDockZone === 'center-right' }"
+        @mouseenter="handleMouseEnter('center-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>
+      
+      <!-- 中心指示区下方指示器：位于中心指示区下边缘，距离下边框5像素 -->
+      <svg 
+        width="41" 
+        height="41" 
+        viewBox="0 0 40 40" 
+        aria-hidden="true" 
+        class="indicator-center-bottom" 
+        :class="{ 'active': activeDockZone === 'center-bottom' }"
+        @mouseenter="handleMouseEnter('center-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>
+      
+      <!-- 中心指示区左侧指示器：位于中心指示区左边缘，距离左边框5像素 -->
+      <svg 
+        width="41" 
+        height="41" 
+        viewBox="0 0 40 40" 
+        aria-hidden="true" 
+        class="indicator-center-left" 
+        :class="{ 'active': activeDockZone === 'center-left' }"
+        @mouseenter="handleMouseEnter('center-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>
+      
       <!-- 中心指示器：根据activeDockZone状态显示和高亮，添加鼠标事件处理 -->
       <svg 
         width="41" 
@@ -312,6 +408,7 @@ const previewAreaStyle = computed(() => {
   // 根据不同的活动区域计算预览区域的样式
   switch (activeDockZone.value) {
     case 'top':
+    case 'center-top': // 中心指示区上方指示器使用与top相同的预览区域
       return {
         position: 'absolute',
         left: `${left}px`,
@@ -320,6 +417,7 @@ const previewAreaStyle = computed(() => {
         height: `${height * threshold}px`
       };
     case 'bottom':
+    case 'center-bottom': // 中心指示区下方指示器使用与bottom相同的预览区域
       return {
         position: 'absolute',
         left: `${left}px`,
@@ -328,6 +426,7 @@ const previewAreaStyle = computed(() => {
         height: `${height * threshold}px`
       };
     case 'left':
+    case 'center-left': // 中心指示区左侧指示器使用与left相同的预览区域
       return {
         position: 'absolute',
         left: `${left}px`,
@@ -336,6 +435,7 @@ const previewAreaStyle = computed(() => {
         height: `${height}px`
       };
     case 'right':
+    case 'center-right': // 中心指示区右侧指示器使用与right相同的预览区域
       return {
         position: 'absolute',
         left: `${left + width * (1 - threshold)}px`,
@@ -451,6 +551,50 @@ watch(activeDockZone, (newZone) => {
   z-index: 1; /* 中心指示区在下层 */
 }
 
+/* 中心指示区上方指示器：位于中心指示区上边缘，距离上边框5像素 */
+.indicator-center-top {
+  position: absolute;
+  top: 5px;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0.7; /* 默认半透明 */
+  transition: opacity 0.2s;
+  z-index: 2; /* 确保在中心指示区上方 */
+}
+
+/* 中心指示区右侧指示器：位于中心指示区右边缘，距离右边框5像素 */
+.indicator-center-right {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  transform: translateY(-50%);
+  opacity: 0.7; /* 默认半透明 */
+  transition: opacity 0.2s;
+  z-index: 2; /* 确保在中心指示区上方 */
+}
+
+/* 中心指示区下方指示器：位于中心指示区下边缘，距离下边框5像素 */
+.indicator-center-bottom {
+  position: absolute;
+  bottom: 5px;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0.7; /* 默认半透明 */
+  transition: opacity 0.2s;
+  z-index: 2; /* 确保在中心指示区上方 */
+}
+
+/* 中心指示区左侧指示器：位于中心指示区左边缘，距离左边框5像素 */
+.indicator-center-left {
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  transform: translateY(-50%);
+  opacity: 0.7; /* 默认半透明 */
+  transition: opacity 0.2s;
+  z-index: 2; /* 确保在中心指示区上方 */
+}
+
 /* 中心指示器：较小的图标，显示在中心指示区上层 */
 .indicator-center {
   position: relative;
@@ -480,6 +624,23 @@ watch(activeDockZone, (newZone) => {
   opacity: 1; /* 完全不透明 */
   transform: scale(1.1); /* 只放大，不改变位置 */
 }
+/* 中心指示区内部指示器的活动状态样式 */
+.indicator-center-top.active {
+  opacity: 1; /* 完全不透明 */
+  transform: translateX(-50%) scale(1.1); /* 保持水平居中的同时放大 */
+}
+.indicator-center-right.active {
+  opacity: 1; /* 完全不透明 */
+  transform: translateY(-50%) scale(1.1); /* 保持垂直居中的同时放大 */
+}
+.indicator-center-bottom.active {
+  opacity: 1; /* 完全不透明 */
+  transform: translateX(-50%) scale(1.1); /* 保持水平居中的同时放大 */
+}
+.indicator-center-left.active {
+  opacity: 1; /* 完全不透明 */
+  transform: translateY(-50%) scale(1.1); /* 保持垂直居中的同时放大 */
+}
 
 .indicator-center-area.active {
   opacity: 1; /* 完全不透明 */