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-31 10:51:47 +08:00
parent 3865b91837
commit 526ac86414
4 changed files with 493 additions and 1089 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -426,10 +426,15 @@ const onDragEnd = (eventData) => {
// 处理事件总线的area.resize.move事件
const onAreaResizeMove = (eventData) => {
console.log(`[Area:${props.id}] 收到AREA_RESIZE_MOVE事件:`, eventData) // 添加调试日志
const { areaId, size, position, direction } = eventData
if (areaId !== props.id) return
if (areaId !== props.id) {
console.log(`[Area:${props.id}] areaId不匹配，期望: ${props.id}, 实际: ${areaId}`) // 添加调试日志
return
}
console.log(`[Area:${props.id}] 更新前originalPosition:`, originalPosition.value) // 添加调试日志
if (direction.includes('right') || direction.includes('left')) {
originalPosition.value.width = size.width
if (direction.includes('left')) {
@@ -442,6 +447,7 @@ const onAreaResizeMove = (eventData) => {
originalPosition.value.top = position.top
}
}
console.log(`[Area:${props.id}] 更新后originalPosition:`, originalPosition.value) // 添加调试日志
emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,

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

@@ -111,6 +111,11 @@ const mainAreaResizeBars = ref([])
// 检查主区域内是否有其他Area（简化版）
const hasAreasInMainContent = ref(false)
// 添加拖拽操作缓存，避免在每次移动事件中重复检测
const dragOperationCache = new Map();
/**
* 检查是否应该操作区域而非面板
* 当只有一个面板时，操作区域而不是面板
@@ -165,6 +170,33 @@ const shouldOperateAreaInsteadOfPanel = (areaId) => {
}
};
/**
* 检查是否应该操作区域而非面板（从GlobalEventManager.js迁移）
* 当只有一个面板时，操作区域而不是面板
* @param {Object} data - 事件数据
* @returns {boolean} 是否应该操作区域
*/
const shouldOperateAreaInsteadOfPanelFromData = (data) => {
const { panelId, areaId } = data;
console.log(`🔍 检查单面板模式: areaId=${areaId}, panelId=${panelId}`);
// 从AreaHandler获取区域状态
const areaState = areaHandler.getAreaState(areaId);
// 检查区域是否只有一个面板
let panelCount = 0;
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;
}
// 如果区域中只有一个面板，返回true
const result = panelCount === 1;
console.log(`✅ 单面板检测结果: ${result} (面板数量: ${panelCount})`);
return result;
};
const onCloseFloatingArea = (event) => {
const id = event.areaId;
areaActions.closeFloating(id);
@@ -303,61 +335,91 @@ const handleAreaDragLeave = (event) => {
globalEventActions.handleDragLeave('floating-area');
};
const onPanelDragStart = (event) => {
const areaId = event.areaId;
const panelId = event.panelId;
// 处理面板拖拽开始事件
const onPanelDragStart = async (event) => {
console.log(`📈 收到面板拖拽开始事件:`, { event });
// 触发面板拖拽开始上升事件
eventBus.emit(EVENT_TYPES.PANEL_DRAG_START, {
dragId: event.dragId,
panelId: panelId,
areaId: areaId,
position: event.position,
timestamp: event.timestamp,
layout: {
areas: floatingAreas.value
}
// 检查是否应该操作区域而非面板，并缓存结果
const shouldOperateArea = shouldOperateAreaInsteadOfPanelFromData(event);
// 缓存检测结果，用于后续的拖拽移动和结束事件
dragOperationCache.set(event.dragId, {
shouldOperateArea,
timestamp: Date.now()
});
console.log(`🚀 面板拖拽开始: panelId=${panelId}, areaId=${areaId}, dragId=${event.dragId}`);
if (shouldOperateArea) {
// 转换为区域拖拽事件
const areaDragStartData = {
...event,
eventType: 'area.drag.start',
dragId: event.dragId || `area_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
};
// 发送区域拖拽开始事件
eventBus.emit('area.drag.start', areaDragStartData, { componentId: 'dock-layout' });
} else {
// 发送面板拖拽状态更新事件（下降事件）
eventBus.emit(EVENT_TYPES.PANEL_DRAG_STATE_UPDATE, {
...event,
status: 'active'
}, { componentId: 'dock-layout' });
}
};
const onPanelDragMove = (event) => {
const areaId = event.areaId;
const panelId = event.panelId;
// 处理面板拖拽移动事件
const onPanelDragMove = async (event) => {
console.log(`📈 收到面板拖拽移动事件:`, { event });
// 触发面板拖拽移动上升事件
eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE, {
dragId: event.dragId,
panelId: panelId,
areaId: areaId,
position: event.position,
timestamp: event.timestamp,
layout: {
areas: floatingAreas.value
// 从缓存中获取单面板检测结果，避免重复检测
const cache = dragOperationCache.get(event.dragId);
const shouldOperateArea = cache ? cache.shouldOperateArea : shouldOperateAreaInsteadOfPanelFromData(event);
if (shouldOperateArea) {
// 转换为区域拖拽移动事件
const areaDragMoveData = {
...event,
eventType: 'area.drag.move'
};
// 发送区域拖拽移动事件
eventBus.emit('area.drag.move', areaDragMoveData, { componentId: 'dock-layout' });
} else {
// 发送面板拖拽状态更新事件（下降事件）
eventBus.emit(EVENT_TYPES.PANEL_DRAG_STATE_UPDATE, {
...event,
status: 'moving'
}, { componentId: 'dock-layout' });
}
});
console.log(`📱 面板拖拽移动: panelId=${panelId}, areaId=${areaId}, position=${JSON.stringify(event.position)}`);
};
const onPanelDragEnd = (event) => {
const areaId = event.areaId;
const panelId = event.panelId;
// 处理面板拖拽结束事件
const onPanelDragEnd = async (event) => {
console.log(`📈 收到面板拖拽结束事件:`, { event });
// 触发面板拖拽结束上升事件
eventBus.emit(EVENT_TYPES.PANEL_DRAG_END, {
dragId: event.dragId,
panelId: panelId,
areaId: areaId,
position: event.position,
timestamp: event.timestamp,
layout: {
areas: floatingAreas.value
// 从缓存中获取单面板检测结果
const cache = dragOperationCache.get(event.dragId);
const shouldOperateArea = cache ? cache.shouldOperateArea : shouldOperateAreaInsteadOfPanelFromData(event);
if (shouldOperateArea) {
// 转换为区域拖拽结束事件
const areaDragEndData = {
...event,
eventType: 'area.drag.end'
};
// 发送区域拖拽结束事件
eventBus.emit('area.drag.end', areaDragEndData, { componentId: 'dock-layout' });
} else {
// 发送面板拖拽状态更新事件（下降事件）
eventBus.emit(EVENT_TYPES.PANEL_DRAG_STATE_UPDATE, {
...event,
status: 'ended'
}, { componentId: 'dock-layout' });
}
});
console.log(`✅ 面板拖拽结束: panelId=${panelId}, areaId=${areaId}, finalPosition=${JSON.stringify(event.position)}`);
// 清理缓存
dragOperationCache.delete(event.dragId);
};
// 监听区域位置更新下降事件
@@ -479,15 +541,13 @@ const setupEventListeners = () => {
const unsubscribeFunctions = [];
// Area相关事件
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_POSITION_UPDATE, onUpdatePosition, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_FLOATING_UPDATE_POSITION, onUpdatePosition, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_OVER, handleAreaDragOver, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_LEAVE, handleAreaDragLeave, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_MERGE_REQUEST, handleAreaMergeRequest, { componentId: 'dock-layout' }));
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_UPDATED, onAreaUpdated, { componentId: 'dock-layout' }));
// 添加新的下降事件监听器
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_STATE_UPDATE, onAreaDragStateUpdate, { componentId: 'dock-layout' }));
// Tab相关事件
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_CHANGE, onTabChange, { componentId: 'dock-layout' }));
@@ -687,18 +747,385 @@ const findOrCreateMainAreaTabPage = () => {
};
}
// 处理上升事件（用户触发的原始事件）- 从GlobalEventManager.js迁移
const handleRisingEvent = async (data, event) => {
// 从事件对象中获取事件类型
const eventType = event.type;
try {
// 总是输出日志，便于调试
console.log(`📈 收到上升事件: ${eventType}`, { data });
// 根据事件类型分发到不同的处理方法
switch (eventType) {
// 面板拖拽事件
case EVENT_TYPES.PANEL_DRAG_START:
await handlePanelDragStart(data);
break;
case EVENT_TYPES.PANEL_DRAG_MOVE:
await handlePanelDragMove(data);
break;
case EVENT_TYPES.PANEL_DRAG_END:
await handlePanelDragEnd(data);
break;
case EVENT_TYPES.PANEL_DRAG_CANCEL:
await handlePanelDragCancel(data);
break;
// 面板resize事件
case EVENT_TYPES.PANEL_RESIZE_START:
await handlePanelResizeStart(data);
break;
case EVENT_TYPES.PANEL_RESIZE_MOVE:
await handlePanelResizeMove(data);
break;
case EVENT_TYPES.PANEL_RESIZE_END:
await handlePanelResizeEnd(data);
break;
// 区域拖拽事件
case EVENT_TYPES.AREA_DRAG_START:
await handleAreaDragStart(data);
break;
case EVENT_TYPES.AREA_DRAG_MOVE:
await handleAreaDragMove(data);
break;
case EVENT_TYPES.AREA_DRAG_END:
await handleAreaDragEnd(data);
break;
case EVENT_TYPES.AREA_DRAG_CANCEL:
await handleAreaDragCancel(data);
break;
// 区域resize事件
case EVENT_TYPES.AREA_RESIZE_START:
await handleAreaResizeStart(data);
break;
case EVENT_TYPES.AREA_RESIZE_MOVE:
await handleAreaResizeMove(data);
break;
case EVENT_TYPES.AREA_RESIZE_END:
await handleAreaResizeEnd(data);
break;
// 标签页拖拽事件
case EVENT_TYPES.TABPAGE_DRAG_START:
await handleTabPageDragStart(data);
break;
case EVENT_TYPES.TABPAGE_DRAG_MOVE:
await handleTabPageDragMove(data);
break;
case EVENT_TYPES.TABPAGE_DRAG_END:
await handleTabPageDragEnd(data);
break;
case EVENT_TYPES.TABPAGE_DRAG_CANCEL:
await handleTabPageDragCancel(data);
break;
// 默认处理
default:
console.log(`🌐 全局事件: ${eventType}`, data);
}
} catch (error) {
console.error(`❌ 上升事件处理错误 (${eventType}):`, error);
}
};
// 面板拖拽开始处理
const handlePanelDragStart = async (data) => {
if (debugMode) {
console.log('👋 处理面板拖拽开始:', data);
}
// 检查是否应该操作区域而非面板，并缓存结果
const shouldOperateArea = shouldOperateAreaInsteadOfPanelFromData(data);
// 缓存检测结果，用于后续的拖拽移动和结束事件
dragOperationCache.set(data.dragId, {
shouldOperateArea,
timestamp: Date.now()
});
if (shouldOperateArea) {
// 转换为区域拖拽事件
const areaDragStartData = {
...data,
eventType: 'area.drag.start',
dragId: data.dragId || `area_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
};
// 发送区域拖拽开始事件
eventBus.emit('area.drag.start', areaDragStartData);
} else {
// 发送面板拖拽状态更新事件（下降事件）
eventBus.emit('panel.drag.state.update', {
...data,
status: 'active'
});
}
};
// 面板拖拽移动处理
const handlePanelDragMove = async (data) => {
if (debugMode) {
console.log('✋ 处理面板拖拽移动:', data);
}
// 从缓存中获取单面板检测结果，避免重复检测
const cache = dragOperationCache.get(data.dragId);
const shouldOperateArea = cache ? cache.shouldOperateArea : shouldOperateAreaInsteadOfPanelFromData(data);
if (shouldOperateArea) {
// 转换为区域拖拽移动事件
const areaDragMoveData = {
...data,
eventType: 'area.drag.move'
};
// 发送区域拖拽移动事件
eventBus.emit('area.drag.move', areaDragMoveData);
} else {
// 发送面板拖拽状态更新事件（下降事件）
eventBus.emit('panel.drag.state.update', {
...data,
status: 'moving'
});
}
};
// 面板拖拽结束处理
const handlePanelDragEnd = async (data) => {
if (debugMode) {
console.log('✋ 处理面板拖拽结束:', data);
}
// 从缓存中获取单面板检测结果
const cache = dragOperationCache.get(data.dragId);
const shouldOperateArea = cache ? cache.shouldOperateArea : shouldOperateAreaInsteadOfPanelFromData(data);
if (shouldOperateArea) {
// 转换为区域拖拽结束事件
const areaDragEndData = {
...data,
eventType: 'area.drag.end'
};
// 发送区域拖拽结束事件
eventBus.emit('area.drag.end', areaDragEndData);
} else {
// 发送面板拖拽状态更新事件（下降事件）
eventBus.emit('panel.drag.state.update', {
...data,
status: 'ended'
});
}
// 清理缓存
dragOperationCache.delete(data.dragId);
};
// 面板拖拽取消处理
const handlePanelDragCancel = async (data) => {
if (debugMode) {
console.log('✋ 处理面板拖拽取消:', data);
}
// 发送面板拖拽状态更新事件（下降事件）
eventBus.emit('panel.drag.state.update', {
...data,
status: 'cancelled'
});
// 清理缓存
dragOperationCache.delete(data.dragId);
};
// 区域拖拽开始处理
const handleAreaDragStart = async (data) => {
if (debugMode) {
console.log('👋 处理区域拖拽开始:', data);
}
// 发送区域拖拽状态更新事件（下降事件）
eventBus.emit('area.drag.state.update', {
...data,
status: 'active'
});
};
// 区域拖拽移动处理
const handleAreaDragMove = async (data) => {
if (debugMode) {
console.log('✋ 处理区域拖拽移动:', data);
}
// 发送区域拖拽状态更新事件（下降事件）
eventBus.emit('area.drag.state.update', {
...data,
status: 'moving'
});
// 发送区域位置更新事件（下降事件）
eventBus.emit('area.position.update', {
...data,
position: data.position
});
};
// 区域拖拽结束处理
const handleAreaDragEnd = async (data) => {
if (debugMode) {
console.log('✋ 处理区域拖拽结束:', data);
}
// 发送区域拖拽状态更新事件（下降事件）
eventBus.emit('area.drag.state.update', {
...data,
status: 'ended'
});
};
// 区域拖拽取消处理
const handleAreaDragCancel = async (data) => {
if (debugMode) {
console.log('✋ 处理区域拖拽取消:', data);
}
// 发送区域拖拽状态更新事件（下降事件）
eventBus.emit('area.drag.state.update', {
...data,
status: 'cancelled'
});
};
// 面板resize处理
const handlePanelResizeStart = async (data) => {
if (debugMode) {
console.log('👋 处理面板resize开始:', data);
}
eventBus.emit(EVENT_TYPES.AREA_RESIZE_START, {
...data,
resizeType: 'panel'
});
};
const handlePanelResizeMove = async (data) => {
if (debugMode) {
console.log('✋ 处理面板resize移动:', data);
}
eventBus.emit(EVENT_TYPES.AREA_RESIZE, {
...data,
resizeType: 'panel'
});
eventBus.emit(EVENT_TYPES.AREA_RESIZE_MOVE, {
...data,
resizeType: 'panel'
});
};
const handlePanelResizeEnd = async (data) => {
if (debugMode) {
console.log('✋ 处理面板resize结束:', data);
}
eventBus.emit(EVENT_TYPES.AREA_RESIZE_END, {
...data,
resizeType: 'panel'
});
};
// 区域resize处理
const handleAreaResizeStart = async (data) => {
if (debugMode) {
console.log('👋 处理区域resize开始:', data);
}
eventBus.emit(EVENT_TYPES.AREA_RESIZE_START, {
...data,
resizeType: 'area'
});
};
const handleAreaResizeMove = async (data) => {
if (debugMode) {
console.log('✋ 处理区域resize移动:', data);
}
eventBus.emit(EVENT_TYPES.AREA_RESIZE, {
...data,
resizeType: 'area'
});
eventBus.emit(EVENT_TYPES.AREA_RESIZE_MOVE, {
...data,
resizeType: 'area'
});
};
const handleAreaResizeEnd = async (data) => {
if (debugMode) {
console.log('✋ 处理区域resize结束:', data);
}
eventBus.emit(EVENT_TYPES.AREA_RESIZE_END, {
...data,
resizeType: 'area'
});
};
// 标签页拖拽处理
const handleTabPageDragStart = async (data) => {
if (debugMode) {
console.log('👋 处理标签页拖拽开始:', data);
}
// 标签页拖拽逻辑
eventBus.emit('tabpage.drag.state.update', {
...data,
status: 'active'
});
};
const handleTabPageDragMove = async (data) => {
if (debugMode) {
console.log('✋ 处理标签页拖拽移动:', data);
}
eventBus.emit('tabpage.drag.state.update', {
...data,
status: 'moving'
});
};
const handleTabPageDragEnd = async (data) => {
if (debugMode) {
console.log('✋ 处理标签页拖拽结束:', data);
}
eventBus.emit('tabpage.drag.state.update', {
...data,
status: 'ended'
});
};
const handleTabPageDragCancel = async (data) => {
if (debugMode) {
console.log('✋ 处理标签页拖拽取消:', data);
}
eventBus.emit('tabpage.drag.state.update', {
...data,
status: 'cancelled'
});
};
// 单面板检测处理函数
const onCheckSinglePanel = (event) => {
const areaId = event.areaId;
const panelId = event.panelId;
// 使用现有的shouldOperateAreaInsteadOfPanel函数检查是否为单面板
const isSinglePanel = shouldOperateAreaInsteadOfPanel(areaId);
// 使用新的shouldOperateAreaInsteadOfPanelFromData函数检查是否为单面板
const isSinglePanel = shouldOperateAreaInsteadOfPanelFromData(event);
// 发送检测结果
eventBus.emit(EVENT_TYPES.PANEL_SINGLE_PANEL_RESULT, {
areaId,
panelId,
areaId: event.areaId,
panelId: event.panelId,
isSinglePanel
}, { componentId: 'dock-layout' });
};

1029
AutoRobot/Windows/Robot/Web/src/DockLayout/README.md
View File

File diff suppressed because it is too large Load Diff

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

@@ -19,10 +19,10 @@
</template>
<script setup>
import { computed } from 'vue'
import Area from './Area.vue'
import TabPage from './TabPage.vue'
import Panel from './Panel.vue'
import { computed, defineAsyncComponent } from 'vue'
const Area = defineAsyncComponent(() => import('./Area.vue'))
const TabPage = defineAsyncComponent(() => import('./TabPage.vue'))
const Panel = defineAsyncComponent(() => import('./Panel.vue'))
import { eventBus, EVENT_TYPES } from './eventBus'
// 定义组件属性