ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

边框调节

Browse Source
This commit is contained in:
zqm
2026-01-04 17:12:09 +08:00
parent 4ebe993815
commit ac6b2de047
1 changed files with 51 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
View File

@@ -286,13 +286,13 @@ const onToggleToolbar = () => {
}; };
// 拖拽相关状态 // 拖拽相关状态
let isDragging = false const isDragging = ref(false)
let currentDragId = null const currentDragId = ref(null)
let currentAreaId = null const currentAreaId = ref(null)
// Resize相关状态 // Resize相关状态
let isResizing = false const isResizing = ref(false)
let currentResizeDirection = null const currentResizeDirection = ref(null)
// 拖拽开始 // 拖拽开始
const onDragStart = (e) => { const onDragStart = (e) => {
@@ -304,22 +304,22 @@ const onDragStart = (e) => {
// 只有当点击的是标题栏区域（不是按钮）时才触发拖拽 // 只有当点击的是标题栏区域（不是按钮）时才触发拖拽
if (!e.target.closest('.title-bar-buttons') && !e.target.closest('button')) { if (!e.target.closest('.title-bar-buttons') && !e.target.closest('button')) {
// 1. 立即重置之前的拖拽状态 // 1. 立即重置之前的拖拽状态
isDragging = false isDragging.value = false
currentDragId = null currentDragId.value = null
currentAreaId = null currentAreaId.value = null
isDragging = true isDragging.value = true
// 生成统一的 dragId // 生成统一的 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() // 保存当前Area的ID，避免在拖拽移动过程中重复调用getCurrentAreaId()
currentAreaId = getCurrentAreaId(); currentAreaId.value = getCurrentAreaId();
// 获取当前区域的起始位置 // 获取当前区域的起始位置
const areaState = areaHandler.getAreaState(currentAreaId); const areaState = areaHandler.getAreaState(currentAreaId.value);
const areaStartPosition = { const areaStartPosition = {
left: areaState.left || 0, left: areaState.left || 0,
top: areaState.top || 0 top: areaState.top || 0
@@ -335,9 +335,9 @@ const onDragStart = (e) => {
const floatingAreas = areaHandler.areaStateManager.getFloatingAreas(); const floatingAreas = areaHandler.areaStateManager.getFloatingAreas();
emitEvent(EVENT_TYPES.PANEL_DRAG_START, { emitEvent(EVENT_TYPES.PANEL_DRAG_START, {
dragId: currentDragId, dragId: currentDragId.value,
panelId: props.id, panelId: props.id,
areaId: currentAreaId, areaId: currentAreaId.value,
position: { x: e.clientX, y: e.clientY }, position: { x: e.clientX, y: e.clientY },
left: areaStartPosition.left, left: areaStartPosition.left,
top: areaStartPosition.top, top: areaStartPosition.top,
@@ -346,12 +346,12 @@ const onDragStart = (e) => {
areas: floatingAreas areas: floatingAreas
} }
}, { }, {
source: { component: 'Panel', panelId: props.id, dragId: currentDragId } source: { component: 'Panel', panelId: props.id, dragId: currentDragId.value }
}) })
// 添加全局的拖拽移动和结束事件监听 // 添加全局的拖拽移动和结束事件监听
const onDragMove = (e) => { const onDragMove = (e) => {
if (isDragging) { if (isDragging.value) {
// 计算偏移量 // 计算偏移量
const deltaX = e.clientX - dragStartPosition.x; const deltaX = e.clientX - dragStartPosition.x;
const deltaY = e.clientY - dragStartPosition.y; const deltaY = e.clientY - dragStartPosition.y;
@@ -364,9 +364,9 @@ const onDragStart = (e) => {
const floatingAreas = areaHandler.areaStateManager.getFloatingAreas(); const floatingAreas = areaHandler.areaStateManager.getFloatingAreas();
emitEvent(EVENT_TYPES.PANEL_DRAG_MOVE, { emitEvent(EVENT_TYPES.PANEL_DRAG_MOVE, {
dragId: currentDragId, dragId: currentDragId.value,
panelId: props.id, panelId: props.id,
areaId: currentAreaId, areaId: currentAreaId.value,
position: { x: e.clientX, y: e.clientY }, position: { x: e.clientX, y: e.clientY },
left: newLeft, left: newLeft,
top: newTop, top: newTop,
@@ -375,21 +375,21 @@ const onDragStart = (e) => {
areas: floatingAreas areas: floatingAreas
} }
}, { }, {
source: { component: 'Panel', panelId: props.id, dragId: currentDragId } source: { component: 'Panel', panelId: props.id, dragId: currentDragId.value }
}) })
} }
}; };
const onDragEnd = (e) => { const onDragEnd = (e) => {
if (isDragging) { if (isDragging.value) {
isDragging = false isDragging.value = false
// 获取所有浮动区域信息，用于单面板检测 // 获取所有浮动区域信息，用于单面板检测
const floatingAreas = areaHandler.areaStateManager.getFloatingAreas(); const floatingAreas = areaHandler.areaStateManager.getFloatingAreas();
emitEvent(EVENT_TYPES.PANEL_DRAG_END, { emitEvent(EVENT_TYPES.PANEL_DRAG_END, {
dragId: currentDragId, dragId: currentDragId.value,
panelId: props.id, panelId: props.id,
areaId: currentAreaId, areaId: currentAreaId.value,
position: { x: e.clientX, y: e.clientY }, position: { x: e.clientX, y: e.clientY },
timestamp: Date.now(), timestamp: Date.now(),
layout: { layout: {
@@ -431,14 +431,15 @@ const onResizeStart = (e, direction) => {
} }
// 重置之前的resize状态，避免状态污染 // 重置之前的resize状态，避免状态污染
isResizing = false; isResizing.value = false;
currentResizeDirection = null; currentResizeDirection.value = null;
currentAreaId.value = null;
isResizing = true; isResizing.value = true;
currentResizeDirection = direction; currentResizeDirection.value = direction;
currentAreaId = getCurrentAreaId(); 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 }; const startPosition = { x: e.clientX, y: e.clientY };
@@ -449,9 +450,9 @@ const onResizeStart = (e, direction) => {
} }
// 获取最新的Area状态，添加防御性检查 // 获取最新的Area状态，添加防御性检查
const areaState = areaHandler.getAreaState(currentAreaId); const areaState = areaHandler.getAreaState(currentAreaId.value);
if (!areaState) { if (!areaState) {
console.error(`[Panel:${props.id}] 无法获取Area状态，areaId: ${currentAreaId}`); console.error(`[Panel:${props.id}] 无法获取Area状态，areaId: ${currentAreaId.value}`);
return; return;
} }
@@ -462,7 +463,7 @@ const onResizeStart = (e, direction) => {
let actualTop = areaState.top || 0; let actualTop = areaState.top || 0;
// 优先使用Area元素的实际尺寸和位置，而不是Panel元素 // 优先使用Area元素的实际尺寸和位置，而不是Panel元素
const areaElement = document.querySelector(`[data-area-id="${currentAreaId}"]`); const areaElement = document.querySelector(`[data-area-id="${currentAreaId.value}"]`);
if (areaElement) { if (areaElement) {
const rect = areaElement.getBoundingClientRect(); const rect = areaElement.getBoundingClientRect();
// 只有当获取到的尺寸有效时才使用DOM尺寸 // 只有当获取到的尺寸有效时才使用DOM尺寸
@@ -505,7 +506,7 @@ const onResizeStart = (e, direction) => {
// 发送resize开始事件，包含初始状态便于调试 // 发送resize开始事件，包含初始状态便于调试
emitEvent(EVENT_TYPES.PANEL_RESIZE_START, { emitEvent(EVENT_TYPES.PANEL_RESIZE_START, {
panelId: props.id, panelId: props.id,
areaId: currentAreaId, areaId: currentAreaId.value,
direction, direction,
position: startPosition, position: startPosition,
initialState: { width: actualWidth, height: actualHeight, left: actualLeft, top: actualTop }, // 添加初始状态 initialState: { width: actualWidth, height: actualHeight, left: actualLeft, top: actualTop }, // 添加初始状态
@@ -518,7 +519,7 @@ const onResizeStart = (e, direction) => {
// 添加全局的resize移动和结束事件监听 // 添加全局的resize移动和结束事件监听
const onResizeMove = (e) => { const onResizeMove = (e) => {
if (isResizing && currentAreaId) { if (isResizing.value && currentAreaId.value) {
const currentPosition = { x: e.clientX, y: e.clientY }; const currentPosition = { x: e.clientX, y: e.clientY };
// 直接计算拖动距离，使用更简洁的变量名 // 直接计算拖动距离，使用更简洁的变量名
@@ -545,7 +546,7 @@ const onResizeStart = (e, direction) => {
let newTop = initialTop; let newTop = initialTop;
// 处理不同方向的拖拽逻辑 // 处理不同方向的拖拽逻辑
switch (currentResizeDirection) { switch (currentResizeDirection.value) {
case 'top-right': case 'top-right':
// 向右上方拖拽：保持下边框位置不变 // 向右上方拖拽：保持下边框位置不变
newTop = Math.max(0, initialTop + deltaY); newTop = Math.max(0, initialTop + deltaY);
@@ -599,18 +600,18 @@ const onResizeStart = (e, direction) => {
default: default:
// 其他方向，使用默认逻辑 // 其他方向，使用默认逻辑
if (currentResizeDirection.includes('left')) { if (currentResizeDirection.value.includes('left')) {
newWidth = initialWidth - deltaX; newWidth = initialWidth - deltaX;
newLeft = initialLeft + deltaX; newLeft = initialLeft + deltaX;
} else if (currentResizeDirection.includes('right')) { } else if (currentResizeDirection.value.includes('right')) {
newWidth = initialWidth + deltaX; newWidth = initialWidth + deltaX;
} }
if (currentResizeDirection.includes('top')) { if (currentResizeDirection.value.includes('top')) {
// 向上拖拽时，deltaY为负，所以newHeight应该增加 // 向上拖拽时，deltaY为负，所以newHeight应该增加
newTop = Math.max(0, initialTop + deltaY); newTop = Math.max(0, initialTop + deltaY);
newHeight = initialBottom - newTop; newHeight = initialBottom - newTop;
} else if (currentResizeDirection.includes('bottom')) { } else if (currentResizeDirection.value.includes('bottom')) {
newHeight = initialHeight + deltaY; newHeight = initialHeight + deltaY;
} }
break; break;
@@ -637,7 +638,7 @@ const onResizeStart = (e, direction) => {
// 计算实际的下边框位置，用于调试 // 计算实际的下边框位置，用于调试
const actualBottom = newTop + newHeight; 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)) { 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, { emitEvent(EVENT_TYPES.PANEL_RESIZE_MOVE, {
panelId: props.id, panelId: props.id,
areaId: currentAreaId, areaId: currentAreaId.value,
direction: currentResizeDirection, direction: currentResizeDirection.value,
size: newSize, size: newSize,
position: newPosition, position: newPosition,
delta: { x: deltaX, y: deltaY }, // 添加拖动距离，便于调试 delta: { x: deltaX, y: deltaY }, // 添加拖动距离，便于调试
@@ -662,16 +663,16 @@ const onResizeStart = (e, direction) => {
}; };
const onResizeEnd = (e) => { const onResizeEnd = (e) => {
if (isResizing && currentAreaId) { if (isResizing.value && currentAreaId.value) {
isResizing = false; 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结束事件 // 发送resize结束事件
emitEvent(EVENT_TYPES.PANEL_RESIZE_END, { emitEvent(EVENT_TYPES.PANEL_RESIZE_END, {
panelId: props.id, panelId: props.id,
areaId: currentAreaId, areaId: currentAreaId.value,
direction: currentResizeDirection, direction: currentResizeDirection.value,
finalPosition: { x: e.clientX, y: e.clientY }, finalPosition: { x: e.clientX, y: e.clientY },
timestamp: Date.now() timestamp: Date.now()
}, { }, {
@@ -686,8 +687,8 @@ const onResizeStart = (e, direction) => {
document.removeEventListener('mouseleave', onResizeEnd); document.removeEventListener('mouseleave', onResizeEnd);
// 完全重置resize状态，避免状态污染 // 完全重置resize状态，避免状态污染
currentResizeDirection = null; currentResizeDirection.value = null;
currentAreaId = null; currentAreaId.value = null;
} }
}; };