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

边框调节

Browse Source
This commit is contained in:
zqm
2025-12-30 11:38:59 +08:00
parent 5f0794aab0
commit 3865b91837
6 changed files with 792 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
View File

@@ -10,42 +10,42 @@
>
<!-- 调整大小的边框 -->
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-nw"
@mousedown="onResizeStart('nw', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-ne"
@mousedown="onResizeStart('ne', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-sw"
@mousedown="onResizeStart('sw', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-se"
@mousedown="onResizeStart('se', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-n"
@mousedown="onResizeStart('n', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-e"
@mousedown="onResizeStart('e', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-s"
@mousedown="onResizeStart('s', $event)"
></div>
<div
v-if="resizable && !isMaximized"
v-if="resizable && !isMaximized && !isSinglePanel"
class="resize-handle resize-handle-w"
@mousedown="onResizeStart('w', $event)"
></div>
@@ -113,7 +113,7 @@
<script setup>
import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
import { emitEvent, EVENT_TYPES } from './eventBus'
import { emitEvent, onEvent, EVENT_TYPES } from './eventBus'
import TabPage from './TabPage.vue'
import Panel from './Panel.vue'
import Render from './Render.vue'
@@ -145,28 +145,62 @@ const props = defineProps({
// 本地状态
const localState = ref(props.windowState)
// 保存原始位置和大小信息
const originalPosition = ref({
width: props.width,
height: props.height,
left: props.left,
top: props.top
})
// 保存最大化前的位置和大小，用于还原
const maximizedFromPosition = ref(null)
// 不再需要存储接收到的外部Area内容，改为通过children配置管理
// 组件引用
const areaRef = ref(null)
// 不再需要获取插槽，改为使用props.children
// 原始位置和大小（用于拖拽和调整大小）
const originalPosition = ref({
width: props.width,
height: props.height,
left: props.left || 0,
top: props.top || 0
})
// 调整大小相关状态
const isResizing = ref(false)
const resizeDirection = ref(null)
const resizeStartPos = ref({ x: 0, y: 0 })
const resizeStartSize = ref({ width: 0, height: 0 })
const resizeStartAreaPos = ref({ left: 0, top: 0 })
// 计算属性：是否是单面板场景
const isSinglePanel = computed(() => {
// 检查children配置
if (props.children) {
const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
// 如果没有children，不是单面板
if (childrenArray.length === 0) return false;
// 如果children不是TabPage，不是单面板
const firstChild = childrenArray[0];
if (firstChild.type !== 'TabPage') return false;
// 检查TabPage的children
const tabPageChildren = firstChild.children;
if (!tabPageChildren) return false;
const tabPageChildrenArray = Array.isArray(tabPageChildren) ? tabPageChildren : [tabPageChildren];
// 如果TabPage只包含一个Panel，是单面板
return tabPageChildrenArray.length === 1;
}
// 默认不是单面板
return false;
});
// 计算属性：是否显示标题栏
const shouldShowTitleBar = computed(() => {
// 基础条件：props.showTitleBar为true
if (!props.showTitleBar) return false;
// 单面板场景不显示标题栏
if (isSinglePanel.value) return false;
// 检查children配置
if (props.children) {
const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
@@ -201,32 +235,12 @@ const dragStartPos = ref({ x: 0, y: 0 })
const areaStartPos = ref({ x: 0, y: 0 })
const currentDragId = ref(null)
// 调整大小相关状态
const isResizing = ref(false)
const resizeStartPos = ref({ x: 0, y: 0 })
const resizeDirection = ref(null)
const resizeStartSize = ref({ width: 0, height: 0 })
const resizeStartAreaPos = ref({ left: 0, top: 0 })
// 父容器引用
const parentContainer = ref(null)
// 根据本地状态计算是否最大化
const isMaximized = computed(() => localState.value === '最大化' || localState.value === 'maximized')
// 监听props位置变化，更新原始位置
watch(() => props.left, (newLeft) => {
if (newLeft !== undefined && newLeft !== originalPosition.value.left) {
originalPosition.value.left = newLeft
}
}, { immediate: true })
watch(() => props.top, (newTop) => {
if (newTop !== undefined && newTop !== originalPosition.value.top) {
originalPosition.value.top = newTop
}
}, { immediate: true })
// 监听windowState变化，同步更新localState
watch(() => props.windowState, (newState) => {
if (newState !== localState.value) {
@@ -235,14 +249,11 @@ watch(() => props.windowState, (newState) => {
// 如果是从外部设置为最大化，保存当前位置以便还原
if (newState === '最大化' || newState === 'maximized') {
maximizedFromPosition.value = {
width: originalPosition.value.width,
height: originalPosition.value.height,
left: originalPosition.value.left,
top: originalPosition.value.top
width: props.width,
height: props.height,
left: props.left,
top: props.top
}
} else if (maximizedFromPosition.value) {
// 如果是从外部设置为正常状态，恢复保存的位置
originalPosition.value = { ...maximizedFromPosition.value }
}
}
}, { immediate: true })
@@ -263,21 +274,15 @@ const areaStyle = computed(() => {
}
}
// 非最大化状态：使用原始位置或默认居中
// 非最大化状态：优先使用originalPosition的值，实时响应拖拽变化
const style = {
width: `${originalPosition.value.width}px`,
height: `${originalPosition.value.height}px`,
left: `${originalPosition.value.left}px`,
top: `${originalPosition.value.top}px`,
zIndex: Z_INDEX_LAYERS.CONTENT // 使用统一的z-index层级
}
// 如果有明确的位置，则使用指定位置
if (originalPosition.value.left !== undefined) {
style.left = `${originalPosition.value.left}px`
}
if (originalPosition.value.top !== undefined) {
style.top = `${originalPosition.value.top}px`
}
return style
})
@@ -370,77 +375,81 @@ const onDragStart = (e) => {
e.preventDefault()
}
// 拖拽移动
const onDragMove = (e) => {
if (!isDragging.value || !currentDragId.value) return
// 拖拽移动 - 处理事件总线的area.drag.move事件
const onDragMove = (eventData) => {
// 从事件数据中获取位置信息
const { left, top, dragId } = eventData
// 计算移动距离
const deltaX = e.clientX - dragStartPos.value.x
const deltaY = e.clientY - dragStartPos.value.y
// 计算新位置
let newLeft = areaStartPos.value.x + deltaX
let newTop = areaStartPos.value.y + deltaY
// 确保不超出父容器边界
if (parentContainer.value) {
const parentRect = parentContainer.value.getBoundingClientRect()
const areaWidth = originalPosition.value.width
const areaHeight = originalPosition.value.height
// 严格边界检查，确保元素完全在父容器内
newLeft = Math.max(0, Math.min(newLeft, parentRect.width - areaWidth))
newTop = Math.max(0, Math.min(newTop, parentRect.height - areaHeight))
// 只使用明确提供的left和top值，不直接使用position.x和position.y
if (left !== undefined) {
originalPosition.value.left = left
}
if (top !== undefined) {
originalPosition.value.top = top
}
// 更新位置
originalPosition.value.left = newLeft
originalPosition.value.top = newTop
// 使用事件总线通知拖拽移动，包含 dragId
emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
dragId: currentDragId.value,
areaId: props.id,
position: { x: e.clientX, y: e.clientY },
left: newLeft,
top: newTop,
timestamp: Date.now()
}, {
source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
})
// 使用事件总线通知位置变化，包含 dragId
// 发送位置更新事件
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
dragId: currentDragId.value,
dragId: dragId || currentDragId.value,
areaId: props.id,
left: newLeft,
top: newTop
left: originalPosition.value.left,
top: originalPosition.value.top
}, {
source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
source: { component: 'Area', areaId: props.id, dragId: dragId || currentDragId.value }
})
}
// 拖拽结束
const onDragEnd = () => {
if (!currentDragId.value) return
// 拖拽结束 - 处理事件总线的area.drag.end事件
const onDragEnd = (eventData) => {
const { dragId, finalPosition } = eventData
// 使用事件总线通知拖拽结束，包含 dragId 和标准化数据格式
emitEvent(EVENT_TYPES.AREA_DRAG_END, {
dragId: currentDragId.value,
areaId: props.id,
finalPosition: {
x: originalPosition.value.left,
y: originalPosition.value.top
},
left: originalPosition.value.left,
top: originalPosition.value.top,
timestamp: Date.now()
}, {
source: { component: 'Area', areaId: props.id, dragId: currentDragId.value }
})
// 如果提供了finalPosition，更新位置
if (finalPosition) {
originalPosition.value.left = finalPosition.x
originalPosition.value.top = finalPosition.y
}
// 清理拖拽状态
isDragging.value = false
currentDragId.value = null
// 发送位置更新事件
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
dragId: dragId || currentDragId.value,
areaId: props.id,
left: originalPosition.value.left,
top: originalPosition.value.top
}, {
source: { component: 'Area', areaId: props.id, dragId: dragId || currentDragId.value }
})
}
// 处理事件总线的area.resize.move事件
const onAreaResizeMove = (eventData) => {
const { areaId, size, position, direction } = eventData
if (areaId !== props.id) return
if (direction.includes('right') || direction.includes('left')) {
originalPosition.value.width = size.width
if (direction.includes('left')) {
originalPosition.value.left = position.left
}
}
if (direction.includes('bottom') || direction.includes('top')) {
originalPosition.value.height = size.height
if (direction.includes('top')) {
originalPosition.value.top = position.top
}
}
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,
left: originalPosition.value.left,
top: originalPosition.value.top
}, {
source: { component: 'Area', areaId: props.id }
})
}
// 调整大小开始
@@ -576,28 +585,19 @@ const onToggleMaximize = () => {
if (!isMaximized.value) {
// 切换到最大化状态前，保存当前位置和大小
maximizedFromPosition.value = {
width: originalPosition.value.width,
height: originalPosition.value.height,
left: originalPosition.value.left,
top: originalPosition.value.top
width: props.width,
height: props.height,
left: props.left,
top: props.top
}
} else if (maximizedFromPosition.value) {
// 从最大化状态还原时，恢复到保存的位置和大小
originalPosition.value = { ...maximizedFromPosition.value }
// 通知父组件位置变化
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,
left: originalPosition.value.left,
top: originalPosition.value.top
}, {
source: { component: 'Area', areaId: props.id }
})
}
localState.value = next
emitEvent(EVENT_TYPES.WINDOW_STATE_CHANGE, {
areaId: props.id,
state: next
state: next,
// 从最大化状态还原时，传递原始位置信息
position: isMaximized.value && maximizedFromPosition.value ? maximizedFromPosition.value : undefined
}, {
source: { component: 'Area', areaId: props.id }
})
@@ -614,7 +614,7 @@ onMounted(() => {
parentContainer.value = document.querySelector('.dock-layout') || window
// 如果没有指定left或top，自动居中定位
if (originalPosition.value.left === undefined || originalPosition.value.top === undefined) {
if (props.left === undefined || props.top === undefined) {
let parentWidth, parentHeight
if (parentContainer.value === window) {
@@ -630,22 +630,40 @@ onMounted(() => {
parentHeight = 600
}
const areaWidth = originalPosition.value.width || 300
const areaHeight = originalPosition.value.height || 250
const areaWidth = props.width || 300
const areaHeight = props.height || 250
// 计算居中位置
originalPosition.value.left = Math.floor((parentWidth - areaWidth) / 2)
originalPosition.value.top = Math.floor((parentHeight - areaHeight) / 2)
const centerLeft = Math.floor((parentWidth - areaWidth) / 2)
const centerTop = Math.floor((parentHeight - areaHeight) / 2)
// 更新originalPosition
originalPosition.value.left = centerLeft
originalPosition.value.top = centerTop
// 通知父组件位置变化
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,
left: originalPosition.value.left,
top: originalPosition.value.top
left: centerLeft,
top: centerTop
}, {
source: { component: 'Area', areaId: props.id }
})
} else {
// 使用props初始化originalPosition
originalPosition.value.left = props.left
originalPosition.value.top = props.top
originalPosition.value.width = props.width
originalPosition.value.height = props.height
}
// 监听区域拖拽事件
onEvent(EVENT_TYPES.AREA_DRAG_MOVE, onDragMove, { componentId: `area-${props.id}` })
onEvent(EVENT_TYPES.AREA_DRAG_END, onDragEnd, { componentId: `area-${props.id}` })
// 监听区域resize事件 - 同时监听两种事件类型，确保兼容性
onEvent(EVENT_TYPES.AREA_RESIZE_MOVE, onAreaResizeMove, { componentId: `area-${props.id}` })
onEvent(EVENT_TYPES.AREA_RESIZE, onAreaResizeMove, { componentId: `area-${props.id}` })
})
// 组件卸载时清理状态
@@ -869,24 +887,24 @@ defineExpose({
}
.resize-handle-e {
width: 12px;
right: -6px;
width: 3px;
right: -1.5px;
top: 12px;
bottom: 12px;
cursor: ew-resize;
}
.resize-handle-s {
height: 12px;
bottom: -6px;
height: 3px;
bottom: -1.5px;
left: 12px;
right: 12px;
cursor: ns-resize;
}
.resize-handle-w {
width: 12px;
left: -6px;
width: 3px;
left: -1.5px;
top: 12px;
bottom: 12px;
cursor: ew-resize;

82
AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
View File

@@ -118,6 +118,9 @@ const hasAreasInMainContent = ref(false)
* @returns {boolean} 是否应该操作区域
*/
const shouldOperateAreaInsteadOfPanel = (areaId) => {
console.log(`[DockLayout] 检查单Panel模式，areaId: ${areaId}`);
console.log(`[DockLayout] 当前floatingAreas:`, floatingAreas.value);
const area = floatingAreas.value.find(a => a.id === areaId);
if (!area) {
console.log(`[DockLayout] 未找到Area: ${areaId}`);
@@ -129,14 +132,20 @@ const shouldOperateAreaInsteadOfPanel = (areaId) => {
// 遍历所有子元素，统计Panel数量
let panelCount = 0;
console.log(`[DockLayout] Area ${areaId} 的children:`, area.children);
const childrenArray = Array.isArray(area.children) ? area.children : [area.children];
for (const child of childrenArray) {
console.log(`[DockLayout] 检查子元素:`, child);
if (child.type === 'TabPage' && child.children) {
console.log(`[DockLayout] 找到TabPage，children:`, child.children);
const tabChildrenArray = Array.isArray(child.children) ? child.children : [child.children];
for (const tabChild of tabChildrenArray) {
console.log(`[DockLayout] 检查TabPage子元素:`, tabChild);
if (tabChild.type === 'Panel') {
panelCount++;
console.log(`[DockLayout] 找到Panel，当前计数: ${panelCount}`);
}
}
}
@@ -144,6 +153,7 @@ const shouldOperateAreaInsteadOfPanel = (areaId) => {
// 如果区域中只有一个面板，返回true
const result = panelCount === 1;
console.log(`[DockLayout] Area ${areaId} 单Panel检查结果:`, result, `(面板数量: ${panelCount})`);
if (result) {
console.log(`[DockLayout] Area ${areaId} 是单Panel模式，应该操作Area而不是Panel`);
}
@@ -494,6 +504,12 @@ const setupEventListeners = () => {
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_START, onPanelDragStart, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE, onPanelDragMove, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_END, onPanelDragEnd, { componentId: 'dock-layout' }));
// 单面板检测事件
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CHECK_SINGLE_PANEL, onCheckSinglePanel, { componentId: 'dock-layout' }));
// Area resize事件
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' }));
// Resize相关事件
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart'), { componentId: 'dock-layout' }));
@@ -502,7 +518,20 @@ const setupEventListeners = () => {
// Window相关事件
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.WINDOW_STATE_CHANGE, (event) => {
// 处理窗口状态变化
const areaId = event.areaId;
const state = event.state;
const position = event.position;
const area = floatingAreas.value.find(a => a.id === areaId);
if (area) {
area.windowState = state;
if (position) {
area.left = position.left;
area.top = position.top;
area.width = position.width;
area.height = position.height;
}
}
}, { componentId: 'dock-layout' }));
// 自定义事件
@@ -658,6 +687,57 @@ const findOrCreateMainAreaTabPage = () => {
};
}
// 单面板检测处理函数
const onCheckSinglePanel = (event) => {
const areaId = event.areaId;
const panelId = event.panelId;
// 使用现有的shouldOperateAreaInsteadOfPanel函数检查是否为单面板
const isSinglePanel = shouldOperateAreaInsteadOfPanel(areaId);
// 发送检测结果
eventBus.emit(EVENT_TYPES.PANEL_SINGLE_PANEL_RESULT, {
areaId,
panelId,
isSinglePanel
}, { componentId: 'dock-layout' });
};
// Area resize事件处理函数
const onAreaResizeStart = (event) => {
const { areaId, direction, position } = event;
// AreaHandler已经监听了AREA_RESIZE_START事件，会自动处理
// 只需要更新本地floatingAreas中的状态
};
const onAreaResizeMove = (event) => {
const { areaId, direction, size, position } = event;
const area = floatingAreas.value.find(a => a.id === areaId);
if (area) {
if (direction.includes('right') || direction.includes('left')) {
area.width = size.width;
if (direction.includes('left')) {
area.left = position.left;
}
}
if (direction.includes('bottom') || direction.includes('top')) {
area.height = size.height;
if (direction.includes('top')) {
area.top = position.top;
}
}
}
};
const onAreaResizeEnd = (event) => {
const { areaId, direction, finalPosition } = event;
// AreaHandler已经监听了AREA_RESIZE_END事件，会自动处理
// 只需要更新本地floatingAreas中的状态
};
// 轻量级生命周期处理
onMounted(() => {
// 初始化轻量级状态

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

@@ -2,9 +2,46 @@
<div class="panel bg-white overflow-hidden"
:style="{ width: '100%', height: '100%' }"
:data-panel-id="id">
<!-- Resize handles - 只在单面板且非最大化模式下显示 -->
<div v-if="isSinglePanel && !isMaximized" class="resize-handles">
<!-- 右侧调整手柄 -->
<div class="resize-handle resize-handle-right"
@mousedown="onResizeStart($event, 'right')"
data-direction="right"></div>
<!-- 底部调整手柄 -->
<div class="resize-handle resize-handle-bottom"
@mousedown="onResizeStart($event, 'bottom')"
data-direction="bottom"></div>
<!-- 左侧调整手柄 -->
<div class="resize-handle resize-handle-left"
@mousedown="onResizeStart($event, 'left')"
data-direction="left"></div>
<!-- 顶部调整手柄 -->
<div class="resize-handle resize-handle-top"
@mousedown="onResizeStart($event, 'top')"
data-direction="top"></div>
<!-- 右下角调整手柄 -->
<div class="resize-handle resize-handle-bottom-right"
@mousedown="onResizeStart($event, 'bottom-right')"
data-direction="bottom-right"></div>
<!-- 左下角调整手柄 -->
<div class="resize-handle resize-handle-bottom-left"
@mousedown="onResizeStart($event, 'bottom-left')"
data-direction="bottom-left"></div>
<!-- 右上角调整手柄 -->
<div class="resize-handle resize-handle-top-right"
@mousedown="onResizeStart($event, 'top-right')"
data-direction="top-right"></div>
<!-- 左上角调整手柄 -->
<div class="resize-handle resize-handle-top-left"
@mousedown="onResizeStart($event, 'top-left')"
data-direction="top-left"></div>
</div>
<div class="flex flex-col h-full">
<!-- 标题栏 -->
<div class="title-bar h-6 bg-[#435d9c] text-white px-2 flex items-center justify-between select-none cursor-move"
:style="{ cursor: isSinglePanel && isMaximized ? 'default' : 'move' }"
@mousedown="onDragStart">
<div class="flex items-center">
<span class="text-xs">{{ title }}</span>
@@ -177,6 +214,9 @@ const subscriptionRegistry = new Map();
// 响应式的最大化状态，初始化为props.maximized
const isMaximized = ref(props.maximized);
// 响应式的单面板状态，用于控制resize handle的显示
const isSinglePanel = ref(false);
const getCurrentAreaId = () => {
const panelElement = document.querySelector(`[data-panel-id="${props.id}"]`);
if (panelElement) {
@@ -250,8 +290,17 @@ let isDragging = false
let currentDragId = null
let currentAreaId = null
// Resize相关状态
let isResizing = false
let currentResizeDirection = null
// 拖拽开始
const onDragStart = (e) => {
// 单面板且最大化时，不允许拖拽标题栏
if (isSinglePanel.value && isMaximized.value) {
return;
}
// 只有当点击的是标题栏区域（不是按钮）时才触发拖拽
if (!e.target.closest('.title-bar-buttons') && !e.target.closest('button')) {
// 1. 立即重置之前的拖拽状态
@@ -269,6 +318,19 @@ const onDragStart = (e) => {
// 保存当前Area的ID，避免在拖拽移动过程中重复调用getCurrentAreaId()
currentAreaId = getCurrentAreaId();
// 获取当前区域的起始位置
const areaState = areaHandler.getAreaState(currentAreaId);
const areaStartPosition = {
left: areaState.left || 0,
top: areaState.top || 0
};
// 保存拖拽起始位置
const dragStartPosition = {
x: e.clientX,
y: e.clientY
};
// 获取所有浮动区域信息，用于单面板检测
const floatingAreas = areaHandler.areaStateManager.getFloatingAreas();
@@ -277,6 +339,8 @@ const onDragStart = (e) => {
panelId: props.id,
areaId: currentAreaId,
position: { x: e.clientX, y: e.clientY },
left: areaStartPosition.left,
top: areaStartPosition.top,
timestamp: Date.now(),
layout: {
areas: floatingAreas
@@ -288,6 +352,14 @@ const onDragStart = (e) => {
// 添加全局的拖拽移动和结束事件监听
const onDragMove = (e) => {
if (isDragging) {
// 计算偏移量
const deltaX = e.clientX - dragStartPosition.x;
const deltaY = e.clientY - dragStartPosition.y;
// 计算新位置
const newLeft = areaStartPosition.left + deltaX;
const newTop = areaStartPosition.top + deltaY;
// 获取所有浮动区域信息，用于单面板检测
const floatingAreas = areaHandler.areaStateManager.getFloatingAreas();
@@ -296,6 +368,8 @@ const onDragStart = (e) => {
panelId: props.id,
areaId: currentAreaId,
position: { x: e.clientX, y: e.clientY },
left: newLeft,
top: newTop,
timestamp: Date.now(),
layout: {
areas: floatingAreas
@@ -342,6 +416,129 @@ const onDragStart = (e) => {
}
};
// Resize开始
const onResizeStart = (e, direction) => {
console.log(`[Panel:${props.id}] 检测到resize mousedown事件，方向: ${direction}，单面板状态: ${isSinglePanel.value}，最大化状态: ${isMaximized.value}`);
e.preventDefault();
e.stopPropagation();
console.log(`[Panel:${props.id}] 开始resize，方向: ${direction}，位置: {x: ${e.clientX}, y: ${e.clientY}}`);
// 只有在单面板模式下才允许resize
if (!isSinglePanel.value) {
console.log(`[Panel:${props.id}] 非单面板模式，跳过resize`);
return;
}
isResizing = true;
currentResizeDirection = direction;
currentAreaId = getCurrentAreaId();
console.log(`[Panel:${props.id}] 当前AreaID: ${currentAreaId}`);
const startPosition = { x: e.clientX, y: e.clientY };
const areaHandler = getAreaHandler();
const areaState = areaHandler.getAreaState(currentAreaId);
const areaStartState = {
width: areaState.width || 0,
height: areaState.height || 0,
left: areaState.left || 0,
top: areaState.top || 0
};
// 发送resize开始事件
emitEvent(EVENT_TYPES.PANEL_RESIZE_START, {
panelId: props.id,
areaId: currentAreaId,
direction,
position: startPosition,
timestamp: Date.now()
}, {
source: { component: 'Panel', panelId: props.id }
});
console.log(`[Panel:${props.id}] 已发送PANEL_RESIZE_START事件`);
// 添加全局的resize移动和结束事件监听
const onResizeMove = (e) => {
if (isResizing && currentAreaId) {
const currentPosition = { x: e.clientX, y: e.clientY };
const totalDelta = {
width: currentPosition.x - startPosition.x,
height: currentPosition.y - startPosition.y
};
const newSize = {
width: areaStartState.width + totalDelta.width,
height: areaStartState.height + totalDelta.height
};
const newPosition = {
left: areaStartState.left,
top: areaStartState.top
};
if (currentResizeDirection.includes('left')) {
newPosition.left = areaStartState.left + totalDelta.width;
}
if (currentResizeDirection.includes('top')) {
newPosition.top = areaStartState.top + totalDelta.height;
}
console.log(`[Panel:${props.id}] resize移动，方向: ${currentResizeDirection}，总量: ${JSON.stringify(newSize)}，位置: ${JSON.stringify(newPosition)}`);
emitEvent(EVENT_TYPES.PANEL_RESIZE_MOVE, {
panelId: props.id,
areaId: currentAreaId,
direction: currentResizeDirection,
size: newSize,
position: newPosition,
timestamp: Date.now()
}, {
source: { component: 'Panel', panelId: props.id }
});
console.log(`[Panel:${props.id}] 已发送PANEL_RESIZE_MOVE事件`);
}
};
const onResizeEnd = (e) => {
if (isResizing && currentAreaId) {
isResizing = false;
console.log(`[Panel:${props.id}] resize结束，方向: ${currentResizeDirection}，最终位置: {x: ${e.clientX}, y: ${e.clientY}}`);
// 发送resize结束事件
emitEvent(EVENT_TYPES.PANEL_RESIZE_END, {
panelId: props.id,
areaId: currentAreaId,
direction: currentResizeDirection,
finalPosition: { x: e.clientX, y: e.clientY },
timestamp: Date.now()
}, {
source: { component: 'Panel', panelId: props.id }
});
console.log(`[Panel:${props.id}] 已发送PANEL_RESIZE_END事件`);
// 清理全局事件监听器
document.removeEventListener('mousemove', onResizeMove);
document.removeEventListener('mouseup', onResizeEnd);
document.removeEventListener('mouseleave', onResizeEnd);
// 重置resize状态
currentResizeDirection = null;
}
};
// 添加全局事件监听器
document.addEventListener('mousemove', onResizeMove);
document.addEventListener('mouseup', onResizeEnd);
document.addEventListener('mouseleave', onResizeEnd);
};
/**
* 注册面板相关事件监听器，确保唯一性
*/
@@ -360,25 +557,47 @@ const setupEventListeners = () => {
}
}, { componentId: `panel-${props.id}` })
// 监听单面板检测结果事件
const unsubscribeSinglePanelResult = onEvent(EVENT_TYPES.PANEL_SINGLE_PANEL_RESULT, (data) => {
// 检查panelId或areaId匹配
if (data.panelId === props.id || data.areaId === getCurrentAreaId()) {
console.log(`[Panel:${props.id}] 收到单面板检测结果:`, data.isSinglePanel);
isSinglePanel.value = data.isSinglePanel;
}
}, { componentId: `panel-${props.id}` })
// 生成唯一的订阅ID
const subscriptionId = `maximizeSync_${props.id}_${Date.now()}`
const singlePanelSubscriptionId = `singlePanelResult_${props.id}_${Date.now()}`
// 检查是否已经注册过相同的监听器
if (subscriptionRegistry.has(subscriptionId)) {
// 监听器已存在，打日志并返回
console.warn(`[Panel:${props.id}] 监听器已存在，跳过重复注册: ${subscriptionId}`)
return
} else {
// 将订阅函数添加到集合和注册表中
subscriptions.add(unsubscribeMaximizeSync)
subscriptionRegistry.set(subscriptionId, {
unsubscribe: unsubscribeMaximizeSync,
name: 'maximizeSync',
createdAt: Date.now()
})
}
// 将订阅函数添加到集合和注册表中
subscriptions.add(unsubscribeMaximizeSync)
subscriptionRegistry.set(subscriptionId, {
unsubscribe: unsubscribeMaximizeSync,
name: 'maximizeSync',
createdAt: Date.now()
})
// 检查单面板监听器是否已存在
if (subscriptionRegistry.has(singlePanelSubscriptionId)) {
console.warn(`[Panel:${props.id}] 单面板监听器已存在，跳过重复注册: ${singlePanelSubscriptionId}`)
} else {
// 将单面板订阅函数添加到集合和注册表中
subscriptions.add(unsubscribeSinglePanelResult)
subscriptionRegistry.set(singlePanelSubscriptionId, {
unsubscribe: unsubscribeSinglePanelResult,
name: 'singlePanelResult',
createdAt: Date.now()
})
}
console.log(`[Panel:${props.id}] 事件监听器注册完成，ID: ${subscriptionId}`)
console.log(`[Panel:${props.id}] 事件监听器注册完成`)
} catch (error) {
console.error(`[Panel:${props.id}] 注册事件监听器失败:`, error)
@@ -466,6 +685,19 @@ onMounted(() => {
// 设置事件监听器
setupEventListeners()
// 发送单面板检测请求
const areaId = getCurrentAreaId();
if (areaId) {
console.log(`[Panel:${props.id}] 发送单面板检测请求，areaId: ${areaId}`);
emitEvent(EVENT_TYPES.PANEL_CHECK_SINGLE_PANEL, {
panelId: props.id,
areaId: areaId,
timestamp: Date.now()
}, {
source: { component: 'Panel', panelId: props.id }
});
}
if (import.meta.env.DEV) {
console.log(`[Panel:${props.id}] 所有监听器设置完成`)
}
@@ -506,16 +738,32 @@ onUnmounted(() => {
flex-direction: column;
width: 100%;
height: 100%;
z-index: 10;
position: relative;
}
/* 图标样式优化 */
.icon-square-svg {
/* 优化SVG渲染，避免1px边框显示过粗的问题 */
shape-rendering: crispEdges;
/* 标题栏样式 */
.title-bar {
z-index: 15;
position: relative;
}
/* 内容区域滚动条样式 */
/* 标题栏按钮组样式 */
.title-bar-buttons {
z-index: 16;
position: relative;
}
/* 工具栏样式 */
.toolbar {
z-index: 15;
position: relative;
}
/* 内容区域样式 */
.content-area {
z-index: 10;
position: relative;
/* 确保滚动条正确显示 */
scrollbar-width: thin;
scrollbar-color: #c7d2ea #f5f7fb;
@@ -553,4 +801,115 @@ onUnmounted(() => {
display: none !important;
border: 0 !important;
}
/* Resize handles样式 */
.resize-handles {
position: absolute;
top: 12px; /* 从标题栏和工具栏下方开始，避免覆盖标题栏按钮 */
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
/* 不设置z-index，或设为auto，不创建新的层叠上下文 */
z-index: auto;
/* 确保resize-handles容器只覆盖内容区域，不包括标题栏 */
}
.resize-handle {
position: absolute;
pointer-events: auto;
background-color: transparent;
cursor: pointer;
z-index: 20; /* 直接相对于面板的层叠上下文，大于标题栏的15 */
}
/* 右侧调整手柄 */
.resize-handle-right {
top: 0;
right: 0;
width: 3px;
height: 100%;
cursor: e-resize;
z-index: 20;
}
/* 底部调整手柄 */
.resize-handle-bottom {
left: 0;
bottom: 0;
width: 100%;
height: 3px;
cursor: s-resize;
z-index: 20;
}
/* 左侧调整手柄 */
.resize-handle-left {
top: 0;
left: 0;
width: 3px;
height: 100%;
cursor: w-resize;
z-index: 20;
}
/* 顶部调整手柄 */
.resize-handle-top {
top: -12px; /* 调整top值，让它显示在面板的上边缘 */
left: 0;
width: 100%;
height: 3px;
cursor: n-resize;
z-index: 20; /* 确保顶部resize-handle能够接收鼠标事件 */
}
/* 右下角调整手柄 */
.resize-handle-bottom-right {
bottom: 0;
right: 0;
width: 3px;
height: 3px;
cursor: se-resize;
z-index: 20;
}
/* 左下角调整手柄 */
.resize-handle-bottom-left {
bottom: 0;
left: 0;
width: 3px;
height: 3px;
cursor: sw-resize;
z-index: 20;
}
/* 右上角调整手柄 */
.resize-handle-top-right {
top: -12px; /* 调整top值，让它显示在面板的上边缘 */
right: 0;
width: 3px;
height: 3px;
cursor: ne-resize;
z-index: 20; /* 确保右上角resize-handle能够接收鼠标事件 */
}
/* 左上角调整手柄 */
.resize-handle-top-left {
top: -12px; /* 调整top值，让它显示在面板的上边缘 */
left: 0;
width: 3px;
height: 3px;
cursor: nw-resize;
z-index: 20; /* 确保左上角resize-handle能够接收鼠标事件 */
}
/* 悬停效果 */
.resize-handle:hover {
background-color: rgba(67, 93, 156, 0.4);
}
/* 激活效果 */
.resize-handle:active {
background-color: rgba(67, 93, 156, 0.6);
}
</style>

157
AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue
View File

@@ -3,7 +3,6 @@
<component
:is="componentType"
v-bind="componentProps"
v-on="componentListeners"
>
<!-- 统一处理children属性，不区分组件类型，只要有children就渲染 -->
<template v-if="config.children">
@@ -106,162 +105,6 @@ const componentProps = computed(() => {
}
})
// 计算要监听的事件（用于事件转发）
const componentListeners = computed(() => {
const allListeners = {}
// 根据组件类型添加相应的事件监听器
if (props.type === 'Area') {
// Area组件的事件
allListeners['areaDragStart'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragStart:`, event)
eventBus.emit(EVENT_TYPES.AREA_DRAG_START, { ...event, areaId: props.config.id })
}
allListeners['areaDragMove'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragMove:`, event)
eventBus.emit(EVENT_TYPES.AREA_DRAG_MOVE, { ...event, areaId: props.config.id })
}
allListeners['areaDragEnd'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragEnd:`, event)
eventBus.emit(EVENT_TYPES.AREA_DRAG_END, { ...event, areaId: props.config.id })
}
allListeners['area-merged'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] area-merged:`, event)
eventBus.emit(EVENT_TYPES.AREA_MERGED, { ...event, areaId: props.config.id })
}
allListeners['toggleCollapse'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleCollapse:`, event)
eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
}
allListeners['maximize'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] maximize:`, event)
eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
}
allListeners['close'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] close:`, event)
eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
}
allListeners['toggleToolbar'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleToolbar:`, event)
eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
}
allListeners['update:windowState'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] update:windowState:`, event)
eventBus.emit(EVENT_TYPES.WINDOW_STATE_CHANGE, event)
}
allListeners['update:position'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] update:position:`, event)
eventBus.emit(EVENT_TYPES.AREA_POSITION_UPDATE, event)
}
allListeners['dragover'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] dragover:`, event)
eventBus.emit(EVENT_TYPES.AREA_DRAG_OVER, { ...event, areaId: props.config.id })
}
allListeners['dragleave'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] dragleave:`, event)
eventBus.emit(EVENT_TYPES.AREA_DRAG_LEAVE, { ...event, areaId: props.config.id })
}
allListeners['panelMaximizeSync'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] panelMaximizeSync:`, event)
eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, { ...event, areaId: props.config.id })
}
allListeners['closePanel'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] closePanel:`, event)
eventBus.emit(EVENT_TYPES.PANEL_CLOSE, { ...event, areaId: props.config.id })
}
}
if (props.type === 'TabPage') {
// TabPage组件的事件
allListeners['tabChange'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabChange:`, event)
eventBus.emit(EVENT_TYPES.TAB_CHANGE, { ...event, areaId: props.config.id })
}
allListeners['tabClose'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabClose:`, event)
eventBus.emit(EVENT_TYPES.TAB_CLOSE, { ...event, areaId: props.config.id })
}
allListeners['tabAdd'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabAdd:`, event)
eventBus.emit(EVENT_TYPES.TAB_ADD, { ...event, areaId: props.config.id })
}
allListeners['tabDragStart'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragStart:`, event)
eventBus.emit(EVENT_TYPES.TAB_DRAG_START, { ...event, areaId: props.config.id })
}
allListeners['tabDragMove'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragMove:`, event)
eventBus.emit(EVENT_TYPES.TAB_DRAG_MOVE, { ...event, areaId: props.config.id })
}
allListeners['tabDragEnd'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragEnd:`, event)
eventBus.emit(EVENT_TYPES.TAB_DRAG_END, { ...event, areaId: props.config.id })
}
allListeners['toggleCollapse'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] toggleCollapse:`, event)
eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
}
allListeners['maximize'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] maximize:`, event)
eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
}
allListeners['close'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] close:`, event)
eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
}
allListeners['toggleToolbar'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] toggleToolbar:`, event)
eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
}
allListeners['dragStart'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragStart:`, event)
eventBus.emit(EVENT_TYPES.PANEL_DRAG_START_FROM_TABPAGE, { ...event, areaId: props.config.id })
}
allListeners['dragMove'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragMove:`, event)
eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE_FROM_TABPAGE, { ...event, areaId: props.config.id })
}
allListeners['dragEnd'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragEnd:`, event)
eventBus.emit(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, { ...event, areaId: props.config.id })
}
}
if (props.type === 'Panel') {
// Panel组件的事件
allListeners['toggleCollapse'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleCollapse:`, event)
eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
}
allListeners['maximize'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] maximize:`, event)
eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
}
allListeners['close'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] close:`, event)
eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
}
allListeners['toggleToolbar'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleToolbar:`, event)
eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
}
allListeners['dragStart'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragStart:`, event)
eventBus.emit(EVENT_TYPES.PANEL_DRAG_START, { ...event, areaId: props.config.id })
}
allListeners['dragMove'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragMove:`, event)
eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE, { ...event, areaId: props.config.id })
}
allListeners['dragEnd'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragEnd:`, event)
eventBus.emit(EVENT_TYPES.PANEL_DRAG_END, { ...event, areaId: props.config.id })
}
}
return allListeners
})
// 暴露组件实例方法

6
AutoRobot/Windows/Robot/Web/src/DockLayout/eventBus.js
View File

@@ -126,6 +126,7 @@ export const EVENT_TYPES = {
// 调整大小
AREA_RESIZE_START: 'area.resize.start',
AREA_RESIZE: 'area.resize',
AREA_RESIZE_MOVE: 'area.resize.move',
AREA_RESIZE_END: 'area.resize.end',
AREA_RATIO_CHANGE: 'area.ratio.change',
AREA_HIDE: 'area.hide',
@@ -154,6 +155,11 @@ export const EVENT_TYPES = {
PANEL_DRAG_MOVE: 'panel.drag.move',
PANEL_DRAG_END: 'panel.drag.end',
PANEL_DRAG_CANCEL: 'panel.drag.cancel',
PANEL_CHECK_SINGLE_PANEL: 'panel.check.single.panel',
PANEL_SINGLE_PANEL_RESULT: 'panel.single.panel.result',
PANEL_RESIZE_START: 'panel.resize.start',
PANEL_RESIZE_MOVE: 'panel.resize.move',
PANEL_RESIZE_END: 'panel.resize.end',
PANEL_DRAG_START_FROM_TABPAGE: 'panel.drag.start.fromTabPage',
PANEL_DRAG_MOVE_FROM_TABPAGE: 'panel.drag.move.fromTabPage',
PANEL_DRAG_END_FROM_TABPAGE: 'panel.drag.end.fromTabPage',

220
AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js
View File

@@ -4,6 +4,7 @@
*/
import { eventBus, EVENT_TYPES } from '../eventBus';
import { getAreaHandler } from './AreaHandler';
// 全局事件类型常量
export const GLOBAL_EVENT_TYPES = {
@@ -371,11 +372,19 @@ class GlobalEventManager {
EVENT_TYPES.PANEL_DRAG_MOVE,
EVENT_TYPES.PANEL_DRAG_END,
EVENT_TYPES.PANEL_DRAG_CANCEL,
// 面板resize上升事件
EVENT_TYPES.PANEL_RESIZE_START,
EVENT_TYPES.PANEL_RESIZE_MOVE,
EVENT_TYPES.PANEL_RESIZE_END,
// 区域拖拽上升事件
EVENT_TYPES.AREA_DRAG_START,
EVENT_TYPES.AREA_DRAG_MOVE,
EVENT_TYPES.AREA_DRAG_END,
EVENT_TYPES.AREA_DRAG_CANCEL,
// 区域resize上升事件
EVENT_TYPES.AREA_RESIZE_START,
EVENT_TYPES.AREA_RESIZE_MOVE,
EVENT_TYPES.AREA_RESIZE_END,
// TabPage拖拽上升事件
EVENT_TYPES.TABPAGE_DRAG_START,
EVENT_TYPES.TABPAGE_DRAG_MOVE,
@@ -413,31 +422,51 @@ class GlobalEventManager {
// 根据事件类型分发到不同的处理方法
switch (eventType) {
// 面板拖拽事件
case 'panel.drag.start':
case EVENT_TYPES.PANEL_DRAG_START:
await this._handlePanelDragStart(data);
break;
case 'panel.drag.move':
case EVENT_TYPES.PANEL_DRAG_MOVE:
await this._handlePanelDragMove(data);
break;
case 'panel.drag.end':
case EVENT_TYPES.PANEL_DRAG_END:
await this._handlePanelDragEnd(data);
break;
case 'panel.drag.cancel':
case EVENT_TYPES.PANEL_DRAG_CANCEL:
await this._handlePanelDragCancel(data);
break;
// 面板resize事件
case EVENT_TYPES.PANEL_RESIZE_START:
await this._handlePanelResizeStart(data);
break;
case EVENT_TYPES.PANEL_RESIZE_MOVE:
await this._handlePanelResizeMove(data);
break;
case EVENT_TYPES.PANEL_RESIZE_END:
await this._handlePanelResizeEnd(data);
break;
// 区域拖拽事件
case 'area.drag.start':
case EVENT_TYPES.AREA_DRAG_START:
await this._handleAreaDragStart(data);
break;
case 'area.drag.move':
case EVENT_TYPES.AREA_DRAG_MOVE:
await this._handleAreaDragMove(data);
break;
case 'area.drag.end':
case EVENT_TYPES.AREA_DRAG_END:
await this._handleAreaDragEnd(data);
break;
case 'area.drag.cancel':
case EVENT_TYPES.AREA_DRAG_CANCEL:
await this._handleAreaDragCancel(data);
break;
// 区域resize事件
case EVENT_TYPES.AREA_RESIZE_START:
await this._handleAreaResizeStart(data);
break;
case EVENT_TYPES.AREA_RESIZE_MOVE:
await this._handleAreaResizeMove(data);
break;
case EVENT_TYPES.AREA_RESIZE_END:
await this._handleAreaResizeEnd(data);
break;
// 默认处理
default:
console.log(`🌐 全局事件: ${eventType}`, data);
@@ -454,56 +483,26 @@ class GlobalEventManager {
* @returns {boolean} 是否应该操作区域
*/
_shouldOperateAreaInsteadOfPanel(data) {
const { panelId, areaId, layout } = data;
const { panelId, areaId } = data;
console.log(`🔍 检查单面板模式: areaId=${areaId}, panelId=${panelId}`);
console.log(` layout信息: ${layout ? '提供' : '未提供'}`);
// 如果没有提供layout信息，默认返回false
if (!layout) {
console.log('❌ 没有提供layout信息，返回false');
return false;
}
// 获取AreaHandler实例
const areaHandler = getAreaHandler();
console.log(` 所有区域数量: ${layout.areas?.length || 0}`);
// 从AreaHandler获取区域状态
const areaState = areaHandler.getAreaState(areaId);
// 获取当前区域
const area = layout.areas?.find(a => a.id === areaId);
if (!area) {
console.log(`❌ 找不到区域: ${areaId}，返回false`);
return false;
}
console.log(` 找到区域: ${areaId}, 类型: ${area.type}`);
// 修复：检查area.children而非area.panels，统计Panel数量
// 检查区域是否只有一个面板
let panelCount = 0;
// 遍历所有children，统计Panel数量
const childrenArray = Array.isArray(area.children) ? area.children : [area.children];
console.log(` 区域children数量: ${childrenArray.length}`);
for (const child of childrenArray) {
console.log(` 检查child: 类型=${child.type}, 有children=${!!child.children}`);
if (child.type === 'TabPage' && child.children) {
const tabChildrenArray = Array.isArray(child.children) ? child.children : [child.children];
console.log(` TabPage children数量: ${tabChildrenArray.length}`);
for (const tabChild of tabChildrenArray) {
console.log(` 检查TabPage child: 类型=${tabChild.type}, id=${tabChild.id || 'unknown'}`);
if (tabChild.type === 'Panel') {
panelCount++;
console.log(`✅ 找到Panel: ${tabChild.id || 'unknown'}`);
}
}
}
if (areaState.children && areaState.children.type === 'TabPage') {
const tabChildren = Array.isArray(areaState.children.children) ? areaState.children.children : [areaState.children.children];
panelCount = tabChildren.filter(child => child.type === 'Panel').length;
}
console.log(`📊 区域${areaId}的Panel数量: ${panelCount}`);
// 如果区域中只有一个面板，返回true
const result = panelCount === 1;
console.log(`✅ 单面板检测结果: ${result}`);
console.log(`✅ 单面板检测结果: ${result} (面板数量: ${panelCount})`);
return result;
}
@@ -698,6 +697,131 @@ class GlobalEventManager {
});
}
/**
* 处理面板resize开始事件
* @param {Object} data - 事件数据
*/
async _handlePanelResizeStart(data) {
if (this.debugMode) {
console.log('👋 处理面板resize开始:', data);
}
// 只有在单面板模式下，才将面板resize事件转发为区域resize事件
if (this._shouldOperateAreaInsteadOfPanel(data)) {
eventBus.emit(EVENT_TYPES.AREA_RESIZE_START, {
...data,
eventType: EVENT_TYPES.AREA_RESIZE_START
});
}
}
/**
* 处理面板resize移动事件
* @param {Object} data - 事件数据
*/
async _handlePanelResizeMove(data) {
if (this.debugMode) {
console.log('✋ 处理面板resize移动:', data);
}
// 只有在单面板模式下，才将面板resize事件转发为区域resize事件
if (this._shouldOperateAreaInsteadOfPanel(data)) {
// 直接转发总量数据
eventBus.emit(EVENT_TYPES.AREA_RESIZE, {
...data,
eventType: EVENT_TYPES.AREA_RESIZE,
size: data.size,
position: data.position
});
eventBus.emit(EVENT_TYPES.AREA_RESIZE_MOVE, {
...data,
eventType: EVENT_TYPES.AREA_RESIZE_MOVE,
size: data.size,
position: data.position
});
}
}
/**
* 处理面板resize结束事件
* @param {Object} data - 事件数据
*/
async _handlePanelResizeEnd(data) {
if (this.debugMode) {
console.log('✋ 处理面板resize结束:', data);
}
// 只有在单面板模式下，才将面板resize事件转发为区域resize事件
if (this._shouldOperateAreaInsteadOfPanel(data)) {
eventBus.emit(EVENT_TYPES.AREA_RESIZE_END, {
...data,
eventType: EVENT_TYPES.AREA_RESIZE_END
});
}
}
/**
* 处理区域resize开始事件
* @param {Object} data - 事件数据
*/
async _handleAreaResizeStart(data) {
if (this.debugMode) {
console.log('👋 处理区域resize开始:', data);
}
// 发送区域resize开始事件（下降事件）
eventBus.emit(EVENT_TYPES.AREA_RESIZE_START, {
...data,
eventType: EVENT_TYPES.AREA_RESIZE_START
});
}
/**
* 处理区域resize移动事件
* @param {Object} data - 事件数据
*/
async _handleAreaResizeMove(data) {
if (this.debugMode) {
console.log('✋ 处理区域resize移动:', data);
}
// 获取AreaHandler实例
const areaHandler = getAreaHandler();
// 获取当前区域状态，包含宽高信息
const areaState = areaHandler.getAreaState(data.areaId);
// 发送AREA_RESIZE事件，与AreaHandler监听的事件类型匹配
eventBus.emit(EVENT_TYPES.AREA_RESIZE, {
...data,
eventType: EVENT_TYPES.AREA_RESIZE,
currentWidth: areaState.width || 0,
currentHeight: areaState.height || 0,
size: {
width: (areaState.width || 0) + (data.delta?.width || 0),
height: (areaState.height || 0) + (data.delta?.height || 0)
},
delta: data.delta
});
}
/**
* 处理区域resize结束事件
* @param {Object} data - 事件数据
*/
async _handleAreaResizeEnd(data) {
if (this.debugMode) {
console.log('✋ 处理区域resize结束:', data);
}
// 发送区域resize结束事件（下降事件）
eventBus.emit(EVENT_TYPES.AREA_RESIZE_END, {
...data,
eventType: EVENT_TYPES.AREA_RESIZE_END
});
}
async _onGlobalEvent(data) {
const eventType = data.eventType;