独立中心指示器层级修正

- 修正 center-main-indicator z-index 从 10 更新为 10000 - 确保独立中心指示器位于 center-dock-container 上层 - 删除残留的 indicator-center 样式定义 - 更新文档中的 z-index 说明和层级结构图 - 清理代码并同步文档描述
2025-11-14 15:18:02 +08:00
parent c298d7ba2d
commit 624a04ec69
3 changed files with 102 additions and 57 deletions
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
@@ -408,30 +408,31 @@
          d="M10 14 L19 14 L19 30 L10 30 Z" />
      </svg>
      
-      <!-- 中心指示器：根据activeDockZone状态显示和高亮，添加鼠标事件处理 -->
-      <svg 
-        width="41" 
-        height="41" 
-        viewBox="0 0 40 40" 
-        aria-hidden="true" 
-        class="indicator-center" 
-        :class="{ 'active': activeDockZone === 'center' }"
-        @mouseenter="handleMouseEnter('center')"
-        @mouseleave="handleMouseLeave"
-      >
-        <use xlink:href="#shared-border" />
-        <path
-          fill="#4C5E83"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M8 8 L32 8 L32 31 L31 32 L9 32 L8 31 Z" />
-        <path
-          fill="url(#Area)"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M10 14 L30 14 L30 30 L10 30 Z" />
-    </svg>
    </div>
+    
+    <!-- 中心指示器：独立于中心区域容器，位于容器正中央 -->
+    <svg 
+      width="41" 
+      height="41" 
+      viewBox="0 0 40 40" 
+      aria-hidden="true" 
+      class="center-main-indicator" 
+      :class="{ 'active': activeDockZone === 'center' }"
+      @mouseenter="handleMouseEnter('center')"
+      @mouseleave="handleMouseLeave"
+    >
+      <use xlink:href="#shared-border" />
+      <path
+        fill="#4C5E83"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8 8 L32 8 L32 31 L31 32 L9 32 L8 31 Z" />
+      <path
+        fill="url(#Area)"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 14 L30 14 L30 30 L10 30 Z" />
+    </svg>
  </div>
 </template>

@@ -892,10 +893,15 @@ watch(activeDockZone, (newZone) => {
  z-index: 2; /* 确保在中心指示区上方 */
 }

-/* 中心指示器：较小的图标，显示在中心指示区上层 */
-.indicator-center {
-  position: relative;
-  z-index: 2; /* 确保在中心指示区上方 */
+/* 注意：indicator-center 类已被移除，现在使用 center-main-indicator */
+
+/* 独立中心指示器：位于与中心区域容器同级的正中央位置 */
+.center-main-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10000; /* 确保在中心区域容器上方 */
  opacity: 0.7; /* 默认半透明 */
  transition: all 0.2s; /* 应用到所有属性的过渡 */
 }
@@ -917,10 +923,15 @@ watch(activeDockZone, (newZone) => {
  opacity: 1; /* 完全不透明 */
  transform: translateY(-50%) scale(1.1); /* 保持垂直居中的同时放大 */
 }
-.indicator-center.active {
+/* 注意：indicator-center 类已被移除，现在使用 center-main-indicator */
+/* 注意：.indicator-center.active 样式已被移除 */
+
+/* 独立中心指示器的活动状态样式 */
+.center-main-indicator.active {
  opacity: 1; /* 完全不透明 */
-  transform: scale(1.1); /* 只放大，不改变位置 */
+  transform: translate(-50%, -50%) scale(1.1); /* 保持居中位置的同时放大 */
 }
+
 /* 中心指示区内部指示器的活动状态样式 */
 .indicator-center-top.active {
  opacity: 1; /* 完全不透明 */
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator指示器命名约定.md
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator指示器命名约定.md
@@ -56,37 +56,35 @@
 | `indicator-center-bottom` | `center-edge-bottom` | 中心区域下边缘指示器 |
 | `indicator-center-left` | `center-edge-left` | 中心区域左边缘指示器 |

-### 6. 中心指示器（Center Indicator）
-位于中心区域中央的指示器。
+### 6. 独立中心指示器（Independent Center Indicator）
+位于与中心区域容器同级的独立中心指示器，具有更高层级（z-index:10000）。

 | 当前名称 | 建议命名 | 用途说明 |
 |---------|---------|----------|
-| `indicator-center` | `center-main-indicator` | 中心主指示器 |
+| `center-main-indicator` | - | 独立中心指示器，与中心区域容器同级但位于容器上层（z-index:10000），位于容器正中央，提供主要的中心区域交互入口 |

 ## 层级结构图

 ```
 DockIndicator
 ├── 外部边缘指示器
-│   ├── global-top-indicator (indicator-top)
-│   ├── global-right-indicator (indicator-right)  
-│   ├── global-bottom-indicator (indicator-bottom)
-│   └── global-left-indicator (indicator-left)
-└── 中心区域容器 (center-dock-container)
-    ├── 中心指示区 (center-dock-zone)
-    │   └── indicator-center-area
-    ├── 子区域指示器
-    │   ├── center-top-area (dock-top-area)
-    │   ├── center-right-area (dock-right-area)
-    │   ├── center-bottom-area (dock-bottom-area)
-    │   └── center-left-area (dock-left-area)
-    ├── 边缘方向指示器
-    │   ├── center-edge-top (indicator-center-top)
-    │   ├── center-edge-right (indicator-center-right)
-    │   ├── center-edge-bottom (indicator-center-bottom)
-    │   └── center-edge-left (indicator-center-left)
-    └── 中心指示器
-        └── center-main-indicator (indicator-center)
+│   ├── indicator-top (global-top-indicator)
+│   ├── indicator-right (global-right-indicator)  
+│   ├── indicator-bottom (global-bottom-indicator)
+│   └── indicator-left (global-left-indicator)
+├── 中心区域容器 (center-dock-container)
+│   ├── 中心指示区 (indicator-center-area)
+│   ├── 边缘方向指示器
+│   │   ├── 中心指示区上方指示器 (indicator-center-top)
+│   │   ├── 中心指示区右侧指示器 (indicator-center-right)
+│   │   ├── 中心指示区下方指示器 (indicator-center-bottom)
+│   │   └── 中心指示区左侧指示器 (indicator-center-left)
+│   └── 子区域指示器
+│       ├── 上区指示 (dock-top-area)
+│       ├── 右区指示 (dock-right-area)
+│       ├── 下区指示 (dock-bottom-area)
+│       └── 左区指示 (dock-left-area)
+└── 独立中心指示器 (center-main-indicator) [位于中心区域容器上层，z-index:10000]
 ```

 ## 命名原则
@@ -119,22 +117,58 @@ DockIndicator
 ## 中文沟通用词建议

 - **全局顶部指示器**：指代全局顶部边缘指示器
+- **全局右侧指示器**：指代全局右侧边缘指示器  
+- **全局底部指示器**：指代全局底部边缘指示器
+- **全局左侧指示器**：指代全局左侧边缘指示器
+- **独立中心指示器**：指代center-main-indicator，与中心区域容器同级但位于容器上层的独立中心指示器（z-index:10）
 - **中心区域**：指代center-dock-container
 - **中心停靠区**：指代center-dock-zone
- **中心各子区域**：分别称为"上方半透明区域"、"右侧半透明区域"、"下方半透明区域"、"左侧半透明区域"（鼠标悬停时显示停靠依靠区）
- **中心边缘指示器**：分别称为"上边缘指示器"、"右边缘指示器"、"下边缘指示器"、"左边缘指示器"
- **中心主指示器**：指代中心的中央指示器
+- **中心上方区域**：指代center-top-area，鼠标悬停显示停靠依靠区
+- **中心右侧区域**：指代center-right-area，鼠标悬停显示停靠依靠区
+- **中心下方区域**：指代center-bottom-area，鼠标悬停显示停靠依靠区
+- **中心左侧区域**：指代center-left-area，鼠标悬停显示停靠依靠区
+- **中心上边缘指示器**：指代center-edge-top，用于精确停靠定位
+- **中心右边缘指示器**：指代center-edge-right，用于精确停靠定位
+- **中心下边缘指示器**：指代center-edge-bottom，用于精确停靠定位
+- **中心左边缘指示器**：指代center-edge-left，用于精确停靠定位

 ---

-**文档版本**：v1.2  
+**文档版本**：v1.8  
 **创建日期**：2024年  
 **最后更新**：2024年  
 **适用范围**：DockIndicator.vue 组件

 ## 更新日志

-### v1.2 (当前版本)
+### v1.8 (当前版本)
+- **重要修正**：移除文档中不准确的`indicator-center`描述，反映真实代码状态
+- 删除"中心指示器"章节，该组件已从模板中移除
+- 修正层级结构图，移除不存在的`indicator-center`节点
+- 增强中文沟通用词建议，提供更详细的指示器说明
+- **层级修正**：将独立中心指示器z-index从10更新为10000，确保其位于中心区域容器之上
+- **代码清理**：删除DockIndicator.vue中残留的无用indicator-center样式定义
+
+### v1.7 (前一版本)
+- 修改DockIndicator.vue代码，实现将中心指示器移到与中心区域容器同级
+- 保持中心指示器位置相对于中心区域容器正中央
+- 更新层级结构图，增加独立中心指示器层级
+- 新增独立中心指示器分类说明
+- 更新层级结构图格式和内容
+
+### v1.6 (前一版本)
+- 根据实际代码情况更新文档结构
+- 移除独立中心指示器相关内容，确认真实实现为单一的center-dock-container内部指示器
+- 更新层级结构图，反映实际的DOM层级结构
+- 统一文档内容与代码实现的一致性
+
+### v1.3
+- 添加独立中心指示器相关命名约定
+- 更新层级结构图，增加独立中心指示器层级
+- 更新中文沟通用词建议，增加独立中心指示器相关词汇
+- 调整中心指示器分类，区分容器内外两种类型
+
+### v1.2
 - 添加子区域指示器功能实现记录
 - 更新文档以反映半透明依靠区功能的完成状态

--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/ToDoList.md
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/ToDoList.md
@@ -33,4 +33,4 @@
 ### 停靠规则
 1. 当一个Panel被拖动时，显示停靠指示器。
 2. 当拖动Panel到指示器时，显示停靠区。
-3. 当主区域内没有其他Area时，隐藏外部边缘指示器，只显示中心指示器。
+3. 当主区域内没有其他Area时，隐藏外部边缘指示器、中心区域容器，只显示中心指示器。