修复主区域边缘指示器显示逻辑

- 修改DockLayout.vue中的hideEdgeIndicators判断逻辑,从简单检查floatingAreas数组改为实际检测主区域内容区内是否包含其他Area
- 添加checkMainContentForAreas函数,通过DOM查询检测主区域内的.vs-area、.tab-page和.panel元素
- 添加onMounted钩子和floatingAreas监听器,确保在适当时机进行检测
- 保持DockIndicator.vue中v-if条件渲染边缘指示器的逻辑
- 修复第3条需求:当主区域内没有其他Area时正确隐藏外部边缘指示器
This commit is contained in:
zqm
2025-11-14 14:23:10 +08:00
parent 806674d5aa
commit c298d7ba2d
3 changed files with 84 additions and 27 deletions

View File

@@ -69,6 +69,7 @@
<!-- 上指示根据activeDockZone状态显示和高亮 -->
<svg
v-if="!props.hideEdgeIndicators"
width="41"
height="41"
viewBox="0 0 40 40"
@@ -93,6 +94,7 @@
<!-- 右指示根据activeDockZone状态显示和高亮 -->
<svg
v-if="!props.hideEdgeIndicators"
width="41"
height="41"
viewBox="0 0 40 40"
@@ -117,6 +119,7 @@
<!-- 下指示根据activeDockZone状态显示和高亮 -->
<svg
v-if="!props.hideEdgeIndicators"
width="41"
height="41"
viewBox="0 0 40 40"
@@ -141,6 +144,7 @@
<!-- 左指示根据activeDockZone状态显示和高亮 -->
<svg
v-if="!props.hideEdgeIndicators"
width="41"
height="41"
viewBox="0 0 40 40"
@@ -434,34 +438,14 @@
<script setup>
import { computed, watch, ref, onUnmounted } from 'vue'
// Props定义
const props = defineProps({
// 是否可见
visible: {
type: Boolean,
default: false
},
// 目标区域的位置和大小信息
targetRect: {
type: Object,
default: () => ({
left: 0,
top: 0,
width: 0,
height: 0
})
},
// 鼠标位置
mousePosition: {
type: Object,
default: () => ({
x: 0,
y: 0
})
}
visible: Boolean,
targetRect: Object,
mousePosition: Object,
hideEdgeIndicators: Boolean
})
// 鼠标悬停在哪个指示器上
// 创建响应式的hoveredZone状态
const hoveredZone = ref(null)
// 鼠标是否悬停在中心指示器上(用于控制中心指示区的显示)
const isCenterIndicatorHovered = ref(false)