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

AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue

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

AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue

@@ -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,
+      x: clientX,
-      y: event.clientY
+      y: clientY
     }
     panelDragState.value.startAreaPos = {
       x: area.x,
       y: area.y
     }
-    console.log('Panel拖拽开始，移动Area:', areaId)
+
     
     // 初始化鼠标位置跟踪
     currentMousePosition.value = {
-      x: event.clientX,
+      x: clientX,
-      y: event.clientY
+      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 deltaX = clientX - panelDragState.value.startClientPos.x
-      const deltaY = event.clientY - panelDragState.value.startClientPos.y
+      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,
+        x: clientX,
-        y: event.clientY
+        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,
+      x: clientX,
-      y: event.clientY
+      y: clientY
     }
     tabDragState.value.startAreaPos = {
       x: area.x,
       y: area.y
     }
-    console.log('TabPage拖拽开始，移动Area:', areaId)
+
     
     // 初始化鼠标位置跟踪
     currentMousePosition.value = {
-      x: event.clientX,
+      x: clientX,
-      y: event.clientY
+      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 deltaX = clientX - tabDragState.value.startClientPos.x
-      const deltaY = event.clientY - tabDragState.value.startClientPos.y
+      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,
+        x: clientX,
-        y: event.clientY
+        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);
+
   }
 }