边框调节

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,
+    width: Math.max(200, originalPosition.value.width),
-    height: originalPosition.value.height
+    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,11 +680,13 @@ onMounted(() => {
     originalPosition.value.left = centerLeft
     originalPosition.value.top = centerTop
     
-    // 通知父组件位置变化
+    // 通知父组件位置和尺寸变化
   emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
     areaId: props.id,
     left: centerLeft,
-      top: centerTop
+    top: centerTop,
+    width: originalPosition.value.width,
+    height: originalPosition.value.height
   }, {
     source: { component: 'Area', areaId: props.id }
   })
@@ -761,7 +796,7 @@ defineExpose({
   background: var(--vs-bg);
   border: 1px solid var(--vs-border);
   min-width: 300px;
-  min-height: 250px;
+  min-height: 30px;
 }
 
 /* 正常状态样式 */

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

@@ -422,16 +422,7 @@ const onPanelDragEnd = async (event) => {
   dragOperationCache.delete(event.dragId);
 };
 
-// 监听区域位置更新下降事件
+
-const onAreaPositionUpdate = (event) => {
-  const id = event.areaId;
-  const position = event.position;
-  const area = floatingAreas.value.find(a => a.id === id);
-  if (area) {
-    area.left = position.left;
-    area.top = position.top;
-  }
-};
 
 // 监听区域拖拽状态更新下降事件
 const onAreaDragStateUpdate = (event) => {
@@ -570,6 +561,8 @@ const setupEventListeners = () => {
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_RESIZE_START, onAreaResizeStart, { componentId: 'dock-layout' }));
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_RESIZE_MOVE, onAreaResizeMove, { componentId: 'dock-layout' }));
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_RESIZE_END, onAreaResizeEnd, { componentId: 'dock-layout' }));
+  // Area位置更新事件
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_POSITION_UPDATE, onAreaPositionUpdate, { componentId: 'dock-layout' }));
   
   // Resize相关事件
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart'), { componentId: 'dock-layout' }));
@@ -1158,6 +1151,23 @@ const onAreaResizeMove = (event) => {
   }
 };
 
+// 处理Area位置更新事件
+const onAreaPositionUpdate = (event) => {
+  const { areaId, left, top, width, height } = event;
+  
+  const area = floatingAreas.value.find(a => a.id === areaId);
+  if (area) {
+    area.left = left;
+    area.top = top;
+    if (width !== undefined) {
+      area.width = width;
+    }
+    if (height !== undefined) {
+      area.height = height;
+    }
+  }
+};
+
 const onAreaResizeEnd = (event) => {
   const { areaId, direction, finalPosition } = event;
   

AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js

@@ -802,7 +802,8 @@ class GlobalEventManager {
         width: (areaState.width || 0) + (data.delta?.width || 0),
         height: (areaState.height || 0) + (data.delta?.height || 0)
       },
-      delta: data.delta
+      delta: data.delta,
+      direction: data.direction // 保留原事件的方向信息
     });
   }