独立中心指示器层级修正

- 修正 center-main-indicator z-index 从 10 更新为 10000
- 确保独立中心指示器位于 center-dock-container 上层
- 删除残留的 indicator-center 样式定义
- 更新文档中的 z-index 说明和层级结构图
- 清理代码并同步文档描述
This commit is contained in:
zqm
2025-11-14 15:18:02 +08:00
parent c298d7ba2d
commit 624a04ec69
3 changed files with 102 additions and 57 deletions

View File

@@ -408,30 +408,31 @@
d="M10 14 L19 14 L19 30 L10 30 Z" /> d="M10 14 L19 14 L19 30 L10 30 Z" />
</svg> </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> </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> </div>
</template> </template>
@@ -892,10 +893,15 @@ watch(activeDockZone, (newZone) => {
z-index: 2; /* 确保在中心指示区上方 */ z-index: 2; /* 确保在中心指示区上方 */
} }
/* 中心指示器:较小的图标,显示在中心指示区上层 */ /* 注意indicator-center 类已被移除,现在使用 center-main-indicator */
.indicator-center {
position: relative; /* 独立中心指示器:位于与中心区域容器同级的正中央位置 */
z-index: 2; /* 确保在中心指示区上方 */ .center-main-indicator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10000; /* 确保在中心区域容器上方 */
opacity: 0.7; /* 默认半透明 */ opacity: 0.7; /* 默认半透明 */
transition: all 0.2s; /* 应用到所有属性的过渡 */ transition: all 0.2s; /* 应用到所有属性的过渡 */
} }
@@ -917,10 +923,15 @@ watch(activeDockZone, (newZone) => {
opacity: 1; /* 完全不透明 */ opacity: 1; /* 完全不透明 */
transform: translateY(-50%) scale(1.1); /* 保持垂直居中的同时放大 */ transform: translateY(-50%) scale(1.1); /* 保持垂直居中的同时放大 */
} }
.indicator-center.active { /* 注意:indicator-center 类已被移除,现在使用 center-main-indicator */
/* 注意:.indicator-center.active 样式已被移除 */
/* 独立中心指示器的活动状态样式 */
.center-main-indicator.active {
opacity: 1; /* 完全不透明 */ opacity: 1; /* 完全不透明 */
transform: scale(1.1); /* 只放大,不改变位置 */ transform: translate(-50%, -50%) scale(1.1); /* 保持居中位置的同时放大 */
} }
/* 中心指示区内部指示器的活动状态样式 */ /* 中心指示区内部指示器的活动状态样式 */
.indicator-center-top.active { .indicator-center-top.active {
opacity: 1; /* 完全不透明 */ opacity: 1; /* 完全不透明 */

View File

@@ -56,37 +56,35 @@
| `indicator-center-bottom` | `center-edge-bottom` | 中心区域下边缘指示器 | | `indicator-center-bottom` | `center-edge-bottom` | 中心区域下边缘指示器 |
| `indicator-center-left` | `center-edge-left` | 中心区域左边缘指示器 | | `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 DockIndicator
├── 外部边缘指示器 ├── 外部边缘指示器
│ ├── global-top-indicator (indicator-top) │ ├── indicator-top (global-top-indicator)
│ ├── global-right-indicator (indicator-right) │ ├── indicator-right (global-right-indicator)
│ ├── global-bottom-indicator (indicator-bottom) │ ├── indicator-bottom (global-bottom-indicator)
│ └── global-left-indicator (indicator-left) │ └── indicator-left (global-left-indicator)
── 中心区域容器 (center-dock-container) ── 中心区域容器 (center-dock-container)
├── 中心指示区 (center-dock-zone) ├── 中心指示区 (indicator-center-area)
── indicator-center-area ── 边缘方向指示器
├── 子区域指示器 │ │ ├── 中心指示区上方指示器 (indicator-center-top)
│ ├── center-top-area (dock-top-area) │ ├── 中心指示区右侧指示器 (indicator-center-right)
│ ├── center-right-area (dock-right-area) │ ├── 中心指示区下方指示器 (indicator-center-bottom)
── center-bottom-area (dock-bottom-area) ── 中心指示区左侧指示器 (indicator-center-left)
│ └── center-left-area (dock-left-area) │ └── 子区域指示器
├── 边缘方向指示器 ├── 上区指示 (dock-top-area)
├── center-edge-top (indicator-center-top) ├── 右区指示 (dock-right-area)
├── center-edge-right (indicator-center-right) ├── 下区指示 (dock-bottom-area)
── center-edge-bottom (indicator-center-bottom) ── 左区指示 (dock-left-area)
│ └── center-edge-left (indicator-center-left) └── 独立中心指示器 (center-main-indicator) [位于中心区域容器上层z-index:10000]
└── 中心指示器
└── center-main-indicator (indicator-center)
``` ```
## 命名原则 ## 命名原则
@@ -119,22 +117,58 @@ DockIndicator
## 中文沟通用词建议 ## 中文沟通用词建议
- **全局顶部指示器**:指代全局顶部边缘指示器 - **全局顶部指示器**:指代全局顶部边缘指示器
- **全局右侧指示器**:指代全局右侧边缘指示器
- **全局底部指示器**:指代全局底部边缘指示器
- **全局左侧指示器**:指代全局左侧边缘指示器
- **独立中心指示器**指代center-main-indicator与中心区域容器同级但位于容器上层的独立中心指示器z-index:10
- **中心区域**指代center-dock-container - **中心区域**指代center-dock-container
- **中心停靠区**指代center-dock-zone - **中心停靠区**指代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年
**最后更新**2024年 **最后更新**2024年
**适用范围**DockIndicator.vue 组件 **适用范围**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
- 添加子区域指示器功能实现记录 - 添加子区域指示器功能实现记录
- 更新文档以反映半透明依靠区功能的完成状态 - 更新文档以反映半透明依靠区功能的完成状态

View File

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