边框调节

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

@@ -435,24 +435,43 @@ const onAreaResizeMove = (eventData) => {
   }
   
   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
+  
+  // 宽度限制
   if (direction.includes('right') || direction.includes('left')) {
-    originalPosition.value.width = size.width
+    newWidth = Math.max(minWidth, newWidth)
+    originalPosition.value.width = newWidth
     if (direction.includes('left')) {
-      originalPosition.value.left = position.left
+      originalPosition.value.left = newLeft
     }
   }
+  
+  // 高度限制
   if (direction.includes('bottom') || direction.includes('top')) {
-    originalPosition.value.height = size.height
+    newHeight = Math.max(minHeight, newHeight)
+    originalPosition.value.height = newHeight
     if (direction.includes('top')) {
-      originalPosition.value.top = position.top
+      originalPosition.value.top = newTop
     }
   }
+  
   console.log(`[Area:${props.id}] 更新后originalPosition:`, originalPosition.value) // 添加调试日志
   
+  // 发送区域位置和尺寸更新事件
   emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
     areaId: props.id,
     left: originalPosition.value.left,
-    top: originalPosition.value.top
+    top: originalPosition.value.top,
+    width: originalPosition.value.width,
+    height: originalPosition.value.height
   }, {
     source: { component: 'Area', areaId: props.id }
   })
@@ -468,15 +487,27 @@ const onResizeStart = (direction, e) => {
     x: e.clientX,
     y: e.clientY
   }
+  // 应用最小值限制，确保初始尺寸符合渲染要求和CSS限制
   resizeStartSize.value = {
-    width: originalPosition.value.width,
-    height: originalPosition.value.height
+    width: Math.max(200, originalPosition.value.width),
+    height: Math.max(30, originalPosition.value.height)
   }
   resizeStartAreaPos.value = {
     left: originalPosition.value.left,
     top: originalPosition.value.top
   }
   
+  // 添加鼠标移动和释放事件监听器
+  const handleMouseMove = (moveEvent) => onResizeMove(moveEvent)
+  const handleMouseUp = () => {
+    onResizeEnd()
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+  }
+  
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+  
   // 防止文本选择
   e.preventDefault()
   e.stopPropagation()
@@ -498,27 +529,27 @@ const onResizeMove = (e) => {
   switch (resizeDirection.value) {
     case 'nw':
       newWidth = Math.max(200, resizeStartSize.value.width - deltaX)
-      newHeight = Math.max(150, resizeStartSize.value.height - deltaY)
+      newHeight = Math.max(30, resizeStartSize.value.height - deltaY)
       newLeft = resizeStartAreaPos.value.left + deltaX
       newTop = resizeStartAreaPos.value.top + deltaY
       break
     case 'ne':
       newWidth = Math.max(200, resizeStartSize.value.width + deltaX)
-      newHeight = Math.max(150, resizeStartSize.value.height - deltaY)
+      newHeight = Math.max(30, resizeStartSize.value.height - deltaY)
       newTop = resizeStartAreaPos.value.top + deltaY
       break
     case 'sw':
       newWidth = Math.max(200, resizeStartSize.value.width - deltaX)
-      newHeight = Math.max(150, resizeStartSize.value.height + deltaY)
+      newHeight = Math.max(30, resizeStartSize.value.height + deltaY)
       newLeft = resizeStartAreaPos.value.left + deltaX
       break
     case 'se':
       newWidth = Math.max(200, resizeStartSize.value.width + deltaX)
-      newHeight = Math.max(150, resizeStartSize.value.height + deltaY)
+      newHeight = Math.max(30, resizeStartSize.value.height + deltaY)
       break
     case 'n':
       // 拖动上边框时，Area向上边扩展
-      newHeight = Math.max(150, resizeStartSize.value.height - deltaY)
+      newHeight = Math.max(30, resizeStartSize.value.height - deltaY)
       // 当deltaY为负时，鼠标向上移动，增加高度并向上移动位置
       newTop = resizeStartAreaPos.value.top + deltaY
       break
@@ -526,7 +557,7 @@ const onResizeMove = (e) => {
       newWidth = Math.max(200, resizeStartSize.value.width + deltaX)
       break
     case 's':
-      newHeight = Math.max(150, resizeStartSize.value.height + deltaY)
+      newHeight = Math.max(30, resizeStartSize.value.height + deltaY)
       break
     case 'w':
       // 拖动左边框时，Area向左边扩展
@@ -566,11 +597,13 @@ const onResizeMove = (e) => {
   originalPosition.value.left = newLeft
   originalPosition.value.top = newTop
   
-  // 使用事件总线通知位置变化
+  // 使用事件总线通知位置和尺寸变化
   emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
     areaId: props.id,
     left: newLeft,
-    top: newTop
+    top: newTop,
+    width: newWidth,
+    height: newHeight
   }, {
     source: { component: 'Area', areaId: props.id }
   })
@@ -647,14 +680,16 @@ onMounted(() => {
     originalPosition.value.left = centerLeft
     originalPosition.value.top = centerTop
     
-    // 通知父组件位置变化
-    emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
-      areaId: props.id,
-      left: centerLeft,
-      top: centerTop
-    }, {
-      source: { component: 'Area', areaId: props.id }
-    })
+    // 通知父组件位置和尺寸变化
+  emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
+    areaId: props.id,
+    left: centerLeft,
+    top: centerTop,
+    width: originalPosition.value.width,
+    height: originalPosition.value.height
+  }, {
+    source: { component: 'Area', areaId: props.id }
+  })
   } else {
     // 使用props初始化originalPosition
     originalPosition.value.left = props.left
@@ -761,7 +796,7 @@ defineExpose({
   background: var(--vs-bg);
   border: 1px solid var(--vs-border);
   min-width: 300px;
-  min-height: 250px;
+  min-height: 30px;
 }
 
 /* 正常状态样式 */