From ac6b2de047b071f7946420e0f73f290e5f147bdc Mon Sep 17 00:00:00 2001 From: zqm Date: Sun, 4 Jan 2026 17:12:09 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BE=B9=E6=A1=86=E8=B0=83=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Robot/Web/src/DockLayout/Panel.vue | 101 +++++++++--------- 1 file changed, 51 insertions(+), 50 deletions(-) diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue index 2819a1b..13ce53b 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue @@ -286,13 +286,13 @@ const onToggleToolbar = () => { }; // 拖拽相关状态 -let isDragging = false -let currentDragId = null -let currentAreaId = null +const isDragging = ref(false) +const currentDragId = ref(null) +const currentAreaId = ref(null) // Resize相关状态 -let isResizing = false -let currentResizeDirection = null +const isResizing = ref(false) +const currentResizeDirection = ref(null) // 拖拽开始 const onDragStart = (e) => { @@ -304,22 +304,22 @@ const onDragStart = (e) => { // 只有当点击的是标题栏区域（不是按钮）时才触发拖拽 if (!e.target.closest('.title-bar-buttons') && !e.target.closest('button')) { // 1. 立即重置之前的拖拽状态 - isDragging = false - currentDragId = null - currentAreaId = null + isDragging.value = false + currentDragId.value = null + currentAreaId.value = null - isDragging = true + isDragging.value = true // 生成统一的 dragId - currentDragId = `panel_${props.id}_${Date.now()}_${Math.random().toString(36).substring(2, 9)}` + currentDragId.value = `panel_${props.id}_${Date.now()}_${Math.random().toString(36).substring(2, 9)}` - console.log(`[Panel:${props.id}] 开始拖拽, dragId: ${currentDragId}`) + console.log(`[Panel:${props.id}] 开始拖拽, dragId: ${currentDragId.value}`) // 保存当前Area的ID，避免在拖拽移动过程中重复调用getCurrentAreaId() - currentAreaId = getCurrentAreaId(); + currentAreaId.value = getCurrentAreaId(); // 获取当前区域的起始位置 - const areaState = areaHandler.getAreaState(currentAreaId); + const areaState = areaHandler.getAreaState(currentAreaId.value); const areaStartPosition = { left: areaState.left || 0, top: areaState.top || 0 @@ -335,9 +335,9 @@ const onDragStart = (e) => { const floatingAreas = areaHandler.areaStateManager.getFloatingAreas(); emitEvent(EVENT_TYPES.PANEL_DRAG_START, { - dragId: currentDragId, + dragId: currentDragId.value, panelId: props.id, - areaId: currentAreaId, + areaId: currentAreaId.value, position: { x: e.clientX, y: e.clientY }, left: areaStartPosition.left, top: areaStartPosition.top, @@ -346,12 +346,12 @@ const onDragStart = (e) => { areas: floatingAreas } }, { - source: { component: 'Panel', panelId: props.id, dragId: currentDragId } + source: { component: 'Panel', panelId: props.id, dragId: currentDragId.value } }) // 添加全局的拖拽移动和结束事件监听 const onDragMove = (e) => { - if (isDragging) { + if (isDragging.value) { // 计算偏移量 const deltaX = e.clientX - dragStartPosition.x; const deltaY = e.clientY - dragStartPosition.y; @@ -364,9 +364,9 @@ const onDragStart = (e) => { const floatingAreas = areaHandler.areaStateManager.getFloatingAreas(); emitEvent(EVENT_TYPES.PANEL_DRAG_MOVE, { - dragId: currentDragId, + dragId: currentDragId.value, panelId: props.id, - areaId: currentAreaId, + areaId: currentAreaId.value, position: { x: e.clientX, y: e.clientY }, left: newLeft, top: newTop, @@ -375,21 +375,21 @@ const onDragStart = (e) => { areas: floatingAreas } }, { - source: { component: 'Panel', panelId: props.id, dragId: currentDragId } + source: { component: 'Panel', panelId: props.id, dragId: currentDragId.value } }) } }; const onDragEnd = (e) => { - if (isDragging) { - isDragging = false + if (isDragging.value) { + isDragging.value = false // 获取所有浮动区域信息，用于单面板检测 const floatingAreas = areaHandler.areaStateManager.getFloatingAreas(); emitEvent(EVENT_TYPES.PANEL_DRAG_END, { - dragId: currentDragId, + dragId: currentDragId.value, panelId: props.id, - areaId: currentAreaId, + areaId: currentAreaId.value, position: { x: e.clientX, y: e.clientY }, timestamp: Date.now(), layout: { @@ -431,14 +431,15 @@ const onResizeStart = (e, direction) => { } // 重置之前的resize状态，避免状态污染 - isResizing = false; - currentResizeDirection = null; + isResizing.value = false; + currentResizeDirection.value = null; + currentAreaId.value = null; - isResizing = true; - currentResizeDirection = direction; - currentAreaId = getCurrentAreaId(); + isResizing.value = true; + currentResizeDirection.value = direction; + currentAreaId.value = getCurrentAreaId(); - console.log(`[Panel:${props.id}] 当前AreaID: ${currentAreaId}`); + console.log(`[Panel:${props.id}] 当前AreaID: ${currentAreaId.value}`); const startPosition = { x: e.clientX, y: e.clientY }; @@ -449,9 +450,9 @@ const onResizeStart = (e, direction) => { } // 获取最新的Area状态，添加防御性检查 - const areaState = areaHandler.getAreaState(currentAreaId); + const areaState = areaHandler.getAreaState(currentAreaId.value); if (!areaState) { - console.error(`[Panel:${props.id}] 无法获取Area状态，areaId: ${currentAreaId}`); + console.error(`[Panel:${props.id}] 无法获取Area状态，areaId: ${currentAreaId.value}`); return; } @@ -462,7 +463,7 @@ const onResizeStart = (e, direction) => { let actualTop = areaState.top || 0; // 优先使用Area元素的实际尺寸和位置，而不是Panel元素 - const areaElement = document.querySelector(`[data-area-id="${currentAreaId}"]`); + const areaElement = document.querySelector(`[data-area-id="${currentAreaId.value}"]`); if (areaElement) { const rect = areaElement.getBoundingClientRect(); // 只有当获取到的尺寸有效时才使用DOM尺寸 @@ -505,7 +506,7 @@ const onResizeStart = (e, direction) => { // 发送resize开始事件，包含初始状态便于调试 emitEvent(EVENT_TYPES.PANEL_RESIZE_START, { panelId: props.id, - areaId: currentAreaId, + areaId: currentAreaId.value, direction, position: startPosition, initialState: { width: actualWidth, height: actualHeight, left: actualLeft, top: actualTop }, // 添加初始状态 @@ -518,7 +519,7 @@ const onResizeStart = (e, direction) => { // 添加全局的resize移动和结束事件监听 const onResizeMove = (e) => { - if (isResizing && currentAreaId) { + if (isResizing.value && currentAreaId.value) { const currentPosition = { x: e.clientX, y: e.clientY }; // 直接计算拖动距离，使用更简洁的变量名 @@ -545,7 +546,7 @@ const onResizeStart = (e, direction) => { let newTop = initialTop; // 处理不同方向的拖拽逻辑 - switch (currentResizeDirection) { + switch (currentResizeDirection.value) { case 'top-right': // 向右上方拖拽：保持下边框位置不变 newTop = Math.max(0, initialTop + deltaY); @@ -599,18 +600,18 @@ const onResizeStart = (e, direction) => { default: // 其他方向，使用默认逻辑 - if (currentResizeDirection.includes('left')) { + if (currentResizeDirection.value.includes('left')) { newWidth = initialWidth - deltaX; newLeft = initialLeft + deltaX; - } else if (currentResizeDirection.includes('right')) { + } else if (currentResizeDirection.value.includes('right')) { newWidth = initialWidth + deltaX; } - if (currentResizeDirection.includes('top')) { + if (currentResizeDirection.value.includes('top')) { // 向上拖拽时，deltaY为负，所以newHeight应该增加 newTop = Math.max(0, initialTop + deltaY); newHeight = initialBottom - newTop; - } else if (currentResizeDirection.includes('bottom')) { + } else if (currentResizeDirection.value.includes('bottom')) { newHeight = initialHeight + deltaY; } break; @@ -637,7 +638,7 @@ const onResizeStart = (e, direction) => { // 计算实际的下边框位置，用于调试 const actualBottom = newTop + newHeight; - console.log(`[Panel:${props.id}] resize移动，方向: ${currentResizeDirection}，初始边界: {top: ${initialTop}, bottom: ${initialBottom}, left: ${initialLeft}, right: ${initialRight}}，拖动距离: {deltaX: ${deltaX}, deltaY: ${deltaY}}，新位置: {left: ${newLeft}, top: ${newTop}}，新尺寸: ${JSON.stringify(newSize)}，实际下边框: ${actualBottom}，高度差: ${actualBottom - initialBottom}`); + console.log(`[Panel:${props.id}] resize移动，方向: ${currentResizeDirection.value}，初始边界: {top: ${initialTop}, bottom: ${initialBottom}, left: ${initialLeft}, right: ${initialRight}}，拖动距离: {deltaX: ${deltaX}, deltaY: ${deltaY}}，新位置: {left: ${newLeft}, top: ${newTop}}，新尺寸: ${JSON.stringify(newSize)}，实际下边框: ${actualBottom}，高度差: ${actualBottom - initialBottom}`); // 发送事件前，确保所有值都是合理的数字 if (isNaN(newWidth) || isNaN(newHeight) || isNaN(newPosition.left) || isNaN(newPosition.top)) { @@ -647,8 +648,8 @@ const onResizeStart = (e, direction) => { emitEvent(EVENT_TYPES.PANEL_RESIZE_MOVE, { panelId: props.id, - areaId: currentAreaId, - direction: currentResizeDirection, + areaId: currentAreaId.value, + direction: currentResizeDirection.value, size: newSize, position: newPosition, delta: { x: deltaX, y: deltaY }, // 添加拖动距离，便于调试 @@ -662,16 +663,16 @@ const onResizeStart = (e, direction) => { }; const onResizeEnd = (e) => { - if (isResizing && currentAreaId) { - isResizing = false; + if (isResizing.value && currentAreaId.value) { + isResizing.value = false; - console.log(`[Panel:${props.id}] resize结束，方向: ${currentResizeDirection}，最终位置: {x: ${e.clientX}, y: ${e.clientY}}`); + console.log(`[Panel:${props.id}] resize结束，方向: ${currentResizeDirection.value}，最终位置: {x: ${e.clientX}, y: ${e.clientY}}`); // 发送resize结束事件 emitEvent(EVENT_TYPES.PANEL_RESIZE_END, { panelId: props.id, - areaId: currentAreaId, - direction: currentResizeDirection, + areaId: currentAreaId.value, + direction: currentResizeDirection.value, finalPosition: { x: e.clientX, y: e.clientY }, timestamp: Date.now() }, { @@ -686,8 +687,8 @@ const onResizeStart = (e, direction) => { document.removeEventListener('mouseleave', onResizeEnd); // 完全重置resize状态，避免状态污染 - currentResizeDirection = null; - currentAreaId = null; + currentResizeDirection.value = null; + currentAreaId.value = null; } };