From 624a04ec6917e9704accbc553eb1f0acee14bbdb Mon Sep 17 00:00:00 2001 From: zqm Date: Fri, 14 Nov 2025 15:18:02 +0800 Subject: [PATCH] =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E4=B8=AD=E5=BF=83=E6=8C=87?= =?UTF-8?q?=E7=A4=BA=E5=99=A8=E5=B1=82=E7=BA=A7=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修正 center-main-indicator z-index 从 10 更新为 10000 - 确保独立中心指示器位于 center-dock-container 上层 - 删除残留的 indicator-center 样式定义 - 更新文档中的 z-index 说明和层级结构图 - 清理代码并同步文档描述 --- .../Web/src/DockLayout/DockIndicator.vue | 69 +++++++++------ .../DockLayout/DockIndicator指示器命名约定.md | 88 +++++++++++++------ .../Robot/Web/src/DockLayout/ToDoList.md | 2 +- 3 files changed, 102 insertions(+), 57 deletions(-) diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue index 370349d..4613b69 100644 --- 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" /> - - + + + @@ -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; /* 完全不透明 */ diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator指示器命名约定.md b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator指示器命名约定.md index e6c8acc..6937603 100644 --- 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 - 添加子区域指示器功能实现记录 - 更新文档以反映半透明依靠区功能的完成状态 diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/ToDoList.md b/AutoRobot/Windows/Robot/Web/src/DockLayout/ToDoList.md index 03fae74..3eea444 100644 --- 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时，隐藏外部边缘指示器，只显示中心指示器。 \ No newline at end of file +3. 当主区域内没有其他Area时，隐藏外部边缘指示器、中心区域容器，只显示中心指示器。 \ No newline at end of file