ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复拖动Area标题栏时独立中心指示器显示问题并清理控制台日志

Browse Source
This commit is contained in:
zqm
2025-11-14 15:45:54 +08:00
parent ec9f846448
commit e94ae82a38
2 changed files with 121 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
View File

@@ -412,6 +412,7 @@
<!-- 中心指示器：独立于中心区域容器，位于容器正中央 -->
<svg
v-if="props.hideEdgeIndicators"
width="41"
height="41"
viewBox="0 0 40 40"

155
AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
View File

@@ -166,12 +166,7 @@ const checkMainContentForAreas = () => {
// 如果有任何子Area、TabPage或Panel，则认为主区域内有其他Area
hasAreasInMainContent.value = hasChildAreas || tabPages.length > 0 || panels.length > 0
console.log('主区域内容检查结果:', {
childAreas: hasChildAreas,
tabPages: tabPages.length,
panels: panels.length,
hasAreasInMainContent: hasAreasInMainContent.value
})
} catch (error) {
console.error('检查主区域内容时出错:', error)
hasAreasInMainContent.value = false
@@ -271,8 +266,7 @@ const onMaximize = (panelId) => {
tabPage.panels[0] = { ...tabPage.panels[0], maximized: true }
}
console.log('Panel最大化按钮触发，切换Area状态:', area.WindowState)
console.log('Panel最大化状态:', tabPage.panels[0].maximized)
break
}
}
@@ -290,14 +284,14 @@ const onCloseFloatingArea = (id) => {
// 清理Panel引用，确保Panel被正确移除
if (areaToRemove.panels) {
// 这里可以添加任何需要的Panel清理逻辑
console.log('移除Area时同步移除Panel:', areaToRemove.panels.map(p => p.id))
// 清空panels数组，确保Panel被正确移除
areaToRemove.panels = []
}
// 从数组中移除Area
floatingAreas.value.splice(index, 1)
console.log('成功关闭Area:', id)
}
}
@@ -336,27 +330,39 @@ const onPanelDragStart = (areaId, event) => {
const area = floatingAreas.value.find(a => a.id === areaId)
// 只有当Area中只有一个TabPage且该TabPage中只有一个Panel时才允许通过Panel标题栏移动Area
if (area && area.tabPages && area.tabPages.length === 1 && area.tabPages[0].panels && area.tabPages[0].panels.length === 1) {
// 检查event是否为对象格式（来自Panel.vue）
const clientX = event.clientX || (typeof event === 'object' ? event.x : event?.x)
const clientY = event.clientY || (typeof event === 'object' ? event.y : event?.y)
if (clientX === undefined || clientY === undefined) {
console.error('无法获取有效的鼠标位置信息:', event)
return
}
panelDragState.value.isDragging = true
panelDragState.value.currentAreaId = areaId
panelDragState.value.startClientPos = {
x: event.clientX,
y: event.clientY
x: clientX,
y: clientY
}
panelDragState.value.startAreaPos = {
x: area.x,
y: area.y
}
console.log('Panel拖拽开始，移动Area:', areaId)
// 初始化鼠标位置跟踪
currentMousePosition.value = {
x: event.clientX,
y: event.clientY
x: clientX,
y: clientY
}
// 拖拽开始时就显示指示器
showDockIndicator.value = true
// 检查主区域内是否有其他Area
checkMainContentForAreas()
// 使用dock-layout作为默认目标区域
if (dockLayoutRef.value) {
const rect = dockLayoutRef.value.getBoundingClientRect()
@@ -366,6 +372,9 @@ const onPanelDragStart = (areaId, event) => {
width: rect.width,
height: rect.height
}
// 拖拽开始时立即更新停靠区域
updateDockZoneByMousePosition(clientX, clientY)
}
}
}
@@ -375,9 +384,17 @@ const onPanelDragMove = (areaId, event) => {
if (panelDragState.value.isDragging && panelDragState.value.currentAreaId === areaId) {
const area = floatingAreas.value.find(a => a.id === areaId)
if (area) {
// 检查event是否为对象格式（来自Panel.vue）
const clientX = event.clientX || (typeof event === 'object' ? event.x : event?.x)
const clientY = event.clientY || (typeof event === 'object' ? event.y : event?.y)
if (clientX === undefined || clientY === undefined) {
return
}
// 计算移动距离
const deltaX = event.clientX - panelDragState.value.startClientPos.x
const deltaY = event.clientY - panelDragState.value.startClientPos.y
const deltaX = clientX - panelDragState.value.startClientPos.x
const deltaY = clientY - panelDragState.value.startClientPos.y
// 计算新位置
let newLeft = panelDragState.value.startAreaPos.x + deltaX
@@ -398,19 +415,22 @@ const onPanelDragMove = (areaId, event) => {
// 更新鼠标位置
currentMousePosition.value = {
x: event.clientX,
y: event.clientY
x: clientX,
y: clientY
}
// 根据鼠标位置动态更新停靠区域
updateDockZoneByMousePosition(clientX, clientY)
// 调试信息
console.log('Panel拖拽移动，Area新位置:', { x: newLeft, y: newTop })
}
}
}
// Panel拖拽结束
const onPanelDragEnd = () => {
console.log('Panel拖拽结束')
panelDragState.value.isDragging = false
panelDragState.value.currentAreaId = null
@@ -420,7 +440,7 @@ const onPanelDragEnd = () => {
// 如果有活动的停靠区域，可以在这里处理停靠逻辑
if (activeDockZone.value) {
console.log('停靠到区域:', activeDockZone.value)
// 这里可以实现具体的停靠逻辑
}
}
@@ -430,27 +450,39 @@ const onTabDragStart = (areaId, event) => {
const area = floatingAreas.value.find(a => a.id === areaId)
// 只有当Area中只有一个TabPage时才允许通过TabPage的页标签移动Area
if (area && area.tabPages && area.tabPages.length === 1) {
// 检查event是否为对象格式（来自TabPage.vue）
const clientX = event.clientX || (typeof event === 'object' ? event.x : event?.x)
const clientY = event.clientY || (typeof event === 'object' ? event.y : event?.y)
if (clientX === undefined || clientY === undefined) {
console.error('无法获取有效的鼠标位置信息:', event)
return
}
tabDragState.value.isDragging = true
tabDragState.value.currentAreaId = areaId
tabDragState.value.startClientPos = {
x: event.clientX,
y: event.clientY
x: clientX,
y: clientY
}
tabDragState.value.startAreaPos = {
x: area.x,
y: area.y
}
console.log('TabPage拖拽开始，移动Area:', areaId)
// 初始化鼠标位置跟踪
currentMousePosition.value = {
x: event.clientX,
y: event.clientY
x: clientX,
y: clientY
}
// 拖拽开始时就显示指示器
showDockIndicator.value = true
// 检查主区域内是否有其他Area
checkMainContentForAreas()
// 使用dock-layout作为默认目标区域
if (dockLayoutRef.value) {
const rect = dockLayoutRef.value.getBoundingClientRect()
@@ -460,6 +492,9 @@ const onTabDragStart = (areaId, event) => {
width: rect.width,
height: rect.height
}
// 拖拽开始时立即更新停靠区域
updateDockZoneByMousePosition(clientX, clientY)
}
}
}
@@ -469,9 +504,17 @@ const onTabDragMove = (areaId, event) => {
if (tabDragState.value.isDragging && tabDragState.value.currentAreaId === areaId) {
const area = floatingAreas.value.find(a => a.id === areaId)
if (area) {
// 检查event是否为对象格式（来自TabPage.vue）
const clientX = event.clientX || (typeof event === 'object' ? event.x : event?.x)
const clientY = event.clientY || (typeof event === 'object' ? event.y : event?.y)
if (clientX === undefined || clientY === undefined) {
return
}
// 计算移动距离
const deltaX = event.clientX - tabDragState.value.startClientPos.x
const deltaY = event.clientY - tabDragState.value.startClientPos.y
const deltaX = clientX - tabDragState.value.startClientPos.x
const deltaY = clientY - tabDragState.value.startClientPos.y
// 计算新位置
let newLeft = tabDragState.value.startAreaPos.x + deltaX
@@ -492,19 +535,22 @@ const onTabDragMove = (areaId, event) => {
// 更新鼠标位置
currentMousePosition.value = {
x: event.clientX,
y: event.clientY
x: clientX,
y: clientY
}
// 根据鼠标位置动态更新停靠区域
updateDockZoneByMousePosition(clientX, clientY)
// 调试信息
console.log('TabPage拖拽移动，Area新位置:', { x: newLeft, y: newTop })
}
}
}
// TabPage拖拽结束
const onTabDragEnd = () => {
console.log('TabPage拖拽结束')
tabDragState.value.isDragging = false
tabDragState.value.currentAreaId = null
}
@@ -523,7 +569,7 @@ watch(floatingAreas, (newAreas) => {
// 如果状态不一致，更新Panel的maximized属性
if (isAreaMaximized !== isPanelMaximized) {
tabPage.panels[0] = { ...tabPage.panels[0], maximized: isAreaMaximized };
console.log(`Area ${area.id} 状态变化，同步Panel最大化状态为:`, isAreaMaximized);
}
}
}
@@ -549,6 +595,45 @@ watch(floatingAreas, () => {
// 当主区域内没有其他Area时，隐藏外部边缘指示器，只显示中心指示器
// 根据鼠标位置动态更新停靠区域
const updateDockZoneByMousePosition = (mouseX, mouseY) => {
if (!dockLayoutRef.value || !targetAreaRect.value) return
const rect = dockLayoutRef.value.getBoundingClientRect()
const { left, top, width, height } = targetAreaRect.value
// 计算鼠标相对于目标区域的相对位置 (0-1)
const relativeX = (mouseX - rect.left - left) / width
const relativeY = (mouseY - rect.top - top) / height
// 定义各个区域的阈值
const threshold = 0.2 // 20% 边缘区域
let newActiveZone = null
if (relativeX >= 0 && relativeX <= 1 && relativeY >= 0 && relativeY <= 1) {
// 鼠标在目标区域内
if (relativeY <= threshold) {
newActiveZone = 'top'
} else if (relativeY >= 1 - threshold) {
newActiveZone = 'bottom'
} else if (relativeX <= threshold) {
newActiveZone = 'left'
} else if (relativeX >= 1 - threshold) {
newActiveZone = 'right'
} else if (relativeX >= 0.4 && relativeX <= 0.6 && relativeY >= 0.4 && relativeY <= 0.6) {
// 中心区域 (40%-60% 的中心区域)
newActiveZone = 'center'
}
}
// 只有当停靠区域改变时才更新，减少不必要的重新渲染
if (activeDockZone.value !== newActiveZone) {
activeDockZone.value = newActiveZone
}
}
// 处理主区域的dragover事件
const handleMainAreaDragOver = (event) => {
event.preventDefault()
@@ -654,7 +739,7 @@ const onPanelMaximizeSync = ({ areaId, maximized }) => {
if (area && area.tabPages && area.tabPages.length === 1 && area.tabPages[0].panels && area.tabPages[0].panels.length === 1) {
// 更新TabPage中Panel的maximized状态
area.tabPages[0].panels[0] = { ...area.tabPages[0].panels[0], maximized };
console.log(`同步Area ${areaId} 的Panel最大化状态为:`, maximized);
}
}