+
+
+
@@ -64,6 +75,8 @@
@dragStart="onPanelDragStart(area.id, $event)"
@dragMove="onPanelDragMove(area.id, $event)"
@dragEnd="onPanelDragEnd"
+ @dragover="handleAreaDragOver"
+ @dragleave="handleAreaDragLeave"
/>
@@ -75,6 +88,7 @@ import { ref, defineExpose, nextTick, watch } from 'vue'
import Area from './Area.vue';
import Panel from './Panel.vue';
import TabPage from './TabPage.vue';
+import DockIndicator from './DockIndicator.vue';
// 主区域状态
const windowState = ref('最大化')
@@ -88,6 +102,12 @@ const dockLayoutRef = ref(null)
// 区域ID计数器
let areaIdCounter = 1
+// 停靠指示器相关状态
+const showDockIndicator = ref(false)
+const currentMousePosition = ref({ x: 0, y: 0 })
+const targetAreaRect = ref({ left: 0, top: 0, width: 0, height: 0 })
+const activeDockZone = ref(null)
+
// Panel拖拽相关状态
const panelDragState = ref({
isDragging: false,
@@ -273,6 +293,12 @@ const onPanelDragStart = (areaId, event) => {
y: area.y
}
console.log('Panel拖拽开始，移动Area:', areaId)
+
+ // 初始化鼠标位置跟踪
+ currentMousePosition.value = {
+ x: event.clientX,
+ y: event.clientY
+ }
}
}
@@ -302,6 +328,12 @@ const onPanelDragMove = (areaId, event) => {
area.x = newLeft
area.y = newTop
+ // 更新鼠标位置
+ currentMousePosition.value = {
+ x: event.clientX,
+ y: event.clientY
+ }
+
// 调试信息
console.log('Panel拖拽移动，Area新位置:', { x: newLeft, y: newTop })
}
@@ -313,6 +345,16 @@ const onPanelDragEnd = () => {
console.log('Panel拖拽结束')
panelDragState.value.isDragging = false
panelDragState.value.currentAreaId = null
+
+ // 隐藏停靠指示器
+ showDockIndicator.value = false
+ activeDockZone.value = null
+
+ // 如果有活动的停靠区域，可以在这里处理停靠逻辑
+ if (activeDockZone.value) {
+ console.log('停靠到区域:', activeDockZone.value)
+ // 这里可以实现具体的停靠逻辑
+ }
}
// TabPage拖拽开始
@@ -395,6 +437,98 @@ watch(floatingAreas, (newAreas) => {
});
}, { deep: true });
+// 处理主区域的dragover事件
+const handleMainAreaDragOver = (event) => {
+ event.preventDefault()
+
+ if (panelDragState.value.isDragging || tabDragState.value.isDragging) {
+ // 获取主区域的位置和大小
+ const mainAreaElement = event.currentTarget
+ const rect = mainAreaElement.getBoundingClientRect()
+
+ // 更新目标区域信息并显示停靠指示器
+ targetAreaRect.value = {
+ left: rect.left,
+ top: rect.top,
+ width: rect.width,
+ height: rect.height
+ }
+
+ showDockIndicator.value = true
+
+ // 更新鼠标位置
+ currentMousePosition.value = {
+ x: event.clientX,
+ y: event.clientY
+ }
+ }
+}
+
+// 处理主区域的dragleave事件
+const handleMainAreaDragLeave = () => {
+ // 检查鼠标是否真的离开了区域（可能只是进入了子元素）
+ setTimeout(() => {
+ const activeElement = document.activeElement
+ const dockLayout = dockLayoutRef.value
+
+ // 如果活动元素不是dockLayout的后代，隐藏指示器
+ if (!dockLayout || (activeElement && !dockLayout.contains(activeElement))) {
+ showDockIndicator.value = false
+ activeDockZone.value = null
+ }
+ }, 50)
+}
+
+// 处理浮动区域的dragover事件
+const handleAreaDragOver = (event, areaId) => {
+ event.preventDefault()
+
+ if (panelDragState.value.isDragging || tabDragState.value.isDragging) {
+ // 避免自身停靠到自身
+ if (areaId !== panelDragState.value.currentAreaId && areaId !== tabDragState.value.currentAreaId) {
+ // 获取目标区域的位置和大小
+ const areaElement = event.currentTarget
+ const rect = areaElement.getBoundingClientRect()
+
+ // 更新目标区域信息并显示停靠指示器
+ targetAreaRect.value = {
+ left: rect.left,
+ top: rect.top,
+ width: rect.width,
+ height: rect.height
+ }
+
+ showDockIndicator.value = true
+
+ // 更新鼠标位置
+ currentMousePosition.value = {
+ x: event.clientX,
+ y: event.clientY
+ }
+ }
+ }
+}
+
+// 处理浮动区域的dragleave事件
+const handleAreaDragLeave = () => {
+ // 延迟检查，避免快速移动时的闪烁
+ setTimeout(() => {
+ const activeElement = document.activeElement
+ const dockLayout = dockLayoutRef.value
+
+ // 如果活动元素不是dockLayout的后代，隐藏指示器
+ if (!dockLayout || (activeElement && !dockLayout.contains(activeElement))) {
+ showDockIndicator.value = false
+ activeDockZone.value = null
+ }
+ }, 50)
+}
+
+// 处理停靠区域激活事件
+const onDockZoneActive = (zone) => {
+ activeDockZone.value = zone
+}
+
// 处理Panel最大化同步事件
const onPanelMaximizeSync = ({ areaId, maximized }) => {
// 查找对应的Area