边框调节

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

@@ -427,40 +427,114 @@ const onDragEnd = (eventData) => {
 // 处理事件总线的area.resize.move事件
 const onAreaResizeMove = (eventData) => {
   console.log(`[Area:${props.id}] 收到AREA_RESIZE_MOVE事件:`, eventData) // 添加调试日志
-  const { areaId, size, position, direction } = eventData
+  const { areaId, size, position, direction, timestamp } = eventData
   
   if (areaId !== props.id) {
     console.log(`[Area:${props.id}] areaId不匹配，期望: ${props.id}, 实际: ${areaId}`) // 添加调试日志
     return
   }
   
+  // 防御性检查，确保事件数据完整
+  if (!size || !position) {
+    console.error(`[Area:${props.id}] 无效的事件数据，缺少size或position`)
+    return
+  }
+  
   console.log(`[Area:${props.id}] 更新前originalPosition:`, originalPosition.value) // 添加调试日志
   
   // 应用最小尺寸限制，与CSS保持一致
   const minWidth = 200
   const minHeight = 30
   
-  let newWidth = size.width
-  let newHeight = size.height
-  let newLeft = position.left
-  let newTop = position.top
+  // 对输入值进行验证和过滤，确保数值有效
+  const inputWidth = Number(size.width)
+  const inputHeight = Number(size.height)
+  const inputLeft = Number(position.left)
+  const inputTop = Number(position.top)
   
-  // 宽度限制
-  if (direction.includes('right') || direction.includes('left')) {
-    newWidth = Math.max(minWidth, newWidth)
-    originalPosition.value.width = newWidth
-    if (direction.includes('left')) {
-      originalPosition.value.left = newLeft
-    }
+  if (isNaN(inputWidth) || isNaN(inputHeight) || isNaN(inputLeft) || isNaN(inputTop)) {
+    console.error(`[Area:${props.id}] 收到无效的数值，跳过更新`)
+    return
   }
   
-  // 高度限制
-  if (direction.includes('bottom') || direction.includes('top')) {
-    newHeight = Math.max(minHeight, newHeight)
-    originalPosition.value.height = newHeight
-    if (direction.includes('top')) {
-      originalPosition.value.top = newTop
-    }
+  // 直接使用Panel计算好的尺寸和位置，不再重新计算
+  // Panel已经处理了对角线方向的特殊逻辑，Area只需要验证和应用即可
+  let newWidth = Math.max(minWidth, inputWidth)
+  let newHeight = Math.max(minHeight, inputHeight)
+  let newLeft = inputLeft
+  let newTop = inputTop
+  
+  // 计算边界位置，用于调试
+  const oldBottom = originalPosition.value.top + originalPosition.value.height
+  const newBottom = newTop + newHeight
+  const oldRight = originalPosition.value.left + originalPosition.value.width
+  const newRight = newLeft + newWidth
+  
+  // 对对角线方向进行特殊处理和日志记录
+  switch (direction) {
+    case 'top-right':
+      console.log(`[Area:${props.id}] top-right方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
+      // 验证top-right方向下边框位置是否保持不变
+      if (Math.abs(newBottom - oldBottom) > 1) {
+        console.warn(`[Area:${props.id}] top-right方向下边框位置变化较大，可能存在计算误差`)
+      }
+      break
+      
+    case 'top-left':
+      console.log(`[Area:${props.id}] top-left方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
+      console.log(`[Area:${props.id}] top-left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
+      break
+      
+    case 'bottom-left':
+      console.log(`[Area:${props.id}] bottom-left方向处理: 原上边框: ${originalPosition.value.top}, 新上边框: ${newTop}, 差值: ${newTop - originalPosition.value.top}`)
+      console.log(`[Area:${props.id}] bottom-left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
+      break
+      
+    case 'top':
+      console.log(`[Area:${props.id}] top方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
+      break
+      
+    case 'left':
+      console.log(`[Area:${props.id}] left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
+      break
+  }
+  
+  // 使用已有的边界位置计算结果，无需重新声明
+  // 确保新的位置和尺寸在合理范围内
+  // 注意：不直接限制newTop和newLeft，而是通过调整尺寸来保持在可视区域内
+  // 这样可以避免拖拽时的突然跳动
+  
+  // 获取父容器尺寸，用于边界检查
+  let parentWidth = window.innerWidth
+  let parentHeight = window.innerHeight
+  
+  if (parentContainer.value && parentContainer.value !== window) {
+    const parentRect = parentContainer.value.getBoundingClientRect()
+    parentWidth = parentRect.width
+    parentHeight = parentRect.height
+  }
+  
+  // 确保整个Area在父容器可视范围内
+  // 如果右侧超出，调整宽度
+  if (newRight > parentWidth) {
+    newWidth = parentWidth - newLeft
+  }
+  
+  // 如果底部超出，调整高度
+  if (newBottom > parentHeight) {
+    newHeight = parentHeight - newTop
+  }
+  
+  // 确保不小于最小尺寸
+  newWidth = Math.max(minWidth, newWidth)
+  newHeight = Math.max(minHeight, newHeight)
+  
+  // 原子性更新originalPosition，避免中间状态被访问
+  originalPosition.value = {
+    width: newWidth,
+    height: newHeight,
+    left: newLeft,
+    top: newTop
   }
   
   console.log(`[Area:${props.id}] 更新后originalPosition:`, originalPosition.value) // 添加调试日志
@@ -471,7 +545,8 @@ const onAreaResizeMove = (eventData) => {
     left: originalPosition.value.left,
     top: originalPosition.value.top,
     width: originalPosition.value.width,
-    height: originalPosition.value.height
+    height: originalPosition.value.height,
+    timestamp: timestamp || Date.now()
   }, {
     source: { component: 'Area', areaId: props.id }
   })