在中心指示区上下左右与边框5个像素的位置添加四个指示器

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; /* 完全不透明 */