diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue index ff35711..a821ab5 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue +++ b/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; } /* 正常状态样式 */ diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue index 3029219..a3b724f 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue +++ b/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; diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js index b4ba370..1fe77cf 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js +++ b/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 // 保留原事件的方向信息 }); }