解决循环导入

AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue

@@ -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,

AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue

@@ -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 onPanelDragStart = async (event) => {
-  const panelId = event.panelId;
+  console.log(`📈 收到面板拖拽开始事件:`, { event });
   
-  // 触发面板拖拽开始上升事件
+  // 检查是否应该操作区域而非面板，并缓存结果
-  eventBus.emit(EVENT_TYPES.PANEL_DRAG_START, {
+  const shouldOperateArea = shouldOperateAreaInsteadOfPanelFromData(event);
-    dragId: event.dragId,
+  
-    panelId: panelId,
+  // 缓存检测结果，用于后续的拖拽移动和结束事件
-    areaId: areaId,
+  dragOperationCache.set(event.dragId, {
-    position: event.position,
+    shouldOperateArea,
-    timestamp: event.timestamp,
+    timestamp: Date.now()
-    layout: {
-      areas: floatingAreas.value
-    }
   });
   
-  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)}`
     };
     
-const onPanelDragMove = (event) => {
+    // 发送区域拖拽开始事件
-  const areaId = event.areaId;
+    eventBus.emit('area.drag.start', areaDragStartData, { componentId: 'dock-layout' });
-  const panelId = event.panelId;
+  } else {
-  
+    // 发送面板拖拽状态更新事件（下降事件）
-  // 触发面板拖拽移动上升事件
+    eventBus.emit(EVENT_TYPES.PANEL_DRAG_STATE_UPDATE, {
-  eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE, {
+      ...event,
-    dragId: event.dragId,
+      status: 'active'
-    panelId: panelId,
+    }, { componentId: 'dock-layout' });
-    areaId: areaId,
-    position: event.position,
-    timestamp: event.timestamp,
-    layout: {
-      areas: floatingAreas.value
   }
-  });
-  
-  console.log(`📱 面板拖拽移动: panelId=${panelId}, areaId=${areaId}, position=${JSON.stringify(event.position)}`);
 };
 
-const onPanelDragEnd = (event) => {
+// 处理面板拖拽移动事件
-  const areaId = event.areaId;
+const onPanelDragMove = async (event) => {
-  const panelId = event.panelId;
+  console.log(`📈 收到面板拖拽移动事件:`, { event });
   
-  // 触发面板拖拽结束上升事件
+  // 从缓存中获取单面板检测结果，避免重复检测
-  eventBus.emit(EVENT_TYPES.PANEL_DRAG_END, {
+  const cache = dragOperationCache.get(event.dragId);
-    dragId: event.dragId,
+  const shouldOperateArea = cache ? cache.shouldOperateArea : shouldOperateAreaInsteadOfPanelFromData(event);
-    panelId: panelId,
+  
-    areaId: areaId,
+  if (shouldOperateArea) {
-    position: event.position,
+    // 转换为区域拖拽移动事件
-    timestamp: event.timestamp,
+    const areaDragMoveData = {
-    layout: {
+      ...event,
-      areas: floatingAreas.value
+      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}, finalPosition=${JSON.stringify(event.position)}`);
+// 处理面板拖拽结束事件
+const onPanelDragEnd = async (event) => {
+  console.log(`📈 收到面板拖拽结束事件:`, { event });
+  
+  // 从缓存中获取单面板检测结果
+  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' });
+  }
+  
+  // 清理缓存
+  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;
+  // 使用新的shouldOperateAreaInsteadOfPanelFromData函数检查是否为单面板
-  const panelId = event.panelId;
+  const isSinglePanel = shouldOperateAreaInsteadOfPanelFromData(event);
-  
-  // 使用现有的shouldOperateAreaInsteadOfPanel函数检查是否为单面板
-  const isSinglePanel = shouldOperateAreaInsteadOfPanel(areaId);
   
   // 发送检测结果
   eventBus.emit(EVENT_TYPES.PANEL_SINGLE_PANEL_RESULT, {
-    areaId,
+    areaId: event.areaId,
-    panelId,
+    panelId: event.panelId,
     isSinglePanel
   }, { componentId: 'dock-layout' });
 };

AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue

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