优化事件总线

2025-12-15 09:03:32 +08:00
parent 7d92e0b6b1
commit 4ca836df37
7 changed files with 237 additions and 157 deletions
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
@@ -132,7 +132,8 @@
 </template>

 <script setup>
-import { defineProps, computed, defineEmits, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
+import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
+import { emitEvent, EVENT_TYPES } from './eventBus.js'
 import TabPage from './TabPage.vue'
 import Panel from './Panel.vue'
 import { zIndexManager, Z_INDEX_LAYERS } from './dockLayers.js'
@@ -254,7 +255,7 @@ const areaStyle = computed(() => {
  return style
 })

-const emit = defineEmits(['close', 'update:windowState', 'update:position', 'dragover', 'dragleave', 'areaDragStart', 'areaDragMove', 'areaDragEnd', 'area-merged', 'toggleCollapse', 'maximize', 'close', 'toggleToolbar', 'dragStart', 'dragMove', 'dragEnd'])
+// 使用事件总线替代直接emit

 // 处理Panel的最大化事件
 const onPanelMaximize = (panelId) => {
@@ -271,18 +272,18 @@ const onPanelMaximize = (panelId) => {
  } else {
    // // console.log('🔸 非单Panel模式，转发到父组件')
    // 如果不是单Panel，转发给父组件处理
-    emit('maximize', panelId)
+    emitEvent(EVENT_TYPES.PANEL_MAXIMIZE, { panelId, areaId: props.id })
  }
 }

 // 处理拖拽悬停事件
 const handleDragOver = (event) => {
-  emit('dragover', event, props.id)
+  emitEvent(EVENT_TYPES.AREA_DRAG_OVER, { event, areaId: props.id })
 }

 // 处理拖拽离开事件
 const handleDragLeave = (event) => {
-  emit('dragleave', event, props.id)
+  emitEvent(EVENT_TYPES.AREA_DRAG_LEAVE, { event, areaId: props.id })
 }

 // 拖拽开始
@@ -301,7 +302,7 @@ const onDragStart = (e) => {
  }
  
  // 通知父组件拖拽开始
-  emit('areaDragStart', {
+  emitEvent(EVENT_TYPES.AREA_DRAG_START, {
    areaId: props.id,
    clientX: e.clientX,
    clientY: e.clientY,
@@ -345,7 +346,7 @@ const onDragMove = (e) => {
  originalPosition.value.top = newTop
  
  // 通知父组件拖拽移动
-  emit('areaDragMove', {
+  emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
    areaId: props.id,
    clientX: e.clientX,
    clientY: e.clientY,
@@ -354,13 +355,13 @@ const onDragMove = (e) => {
  })
  
  // 通知父组件位置变化
-  emit('update:position', { left: newLeft, top: newTop })
+  emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, { areaId: props.id, left: newLeft, top: newTop })
 }

 // 拖拽结束
 const onDragEnd = () => {
  // 通知父组件拖拽结束
-  emit('areaDragEnd', {
+  emitEvent(EVENT_TYPES.AREA_DRAG_END, {
    areaId: props.id,
    left: originalPosition.value.left,
    top: originalPosition.value.top
@@ -486,7 +487,8 @@ const onResizeStart = (direction, e) => {
  originalPosition.value.top = newTop
  
  // 通知父组件位置变化
-  emit('update:position', {
+  emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
+    areaId: props.id,
    left: newLeft,
    top: newTop
  })
@@ -520,17 +522,23 @@ const onToggleMaximize = () => {
    // 从最大化状态还原时，恢复到保存的位置和大小
    originalPosition.value = { ...maximizedFromPosition.value }
    // 通知父组件位置变化
-    emit('update:position', {
+    emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
+      areaId: props.id,
      left: originalPosition.value.left,
      top: originalPosition.value.top
    })
  }
  
  localState.value = next
-  emit('update:WindowState', next)
+  emitEvent(EVENT_TYPES.WINDOW_STATE_CHANGE, {
+    areaId: props.id,
+    state: next
+  })
 }

-const onClose = () => emit('close')
+const onClose = () => emitEvent(EVENT_TYPES.PANEL_CLOSE_REQUEST, {
+  areaId: props.id
+})

 // 组件挂载后获取父容器引用并初始化位置
 onMounted(() => {
@@ -561,7 +569,8 @@ onMounted(() => {
    originalPosition.value.top = Math.floor((parentHeight - areaHeight) / 2)
    
    // 通知父组件位置变化
-    emit('update:position', {
+    emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
+      areaId: props.id,
      left: originalPosition.value.left,
      top: originalPosition.value.top
    })
@@ -644,7 +653,7 @@ const mergeAreaContent = (sourceArea) => {
      }
      
      // 触发事件通知父组件将源Area保存到隐藏列表
-      emit('area-merged', {
+      emitEvent(EVENT_TYPES.AREA_MERGED, {
        sourceArea: sourceArea,
        targetAreaId: props.id,
        targetAreaHasContent: false, // 目标Area为空
@@ -703,7 +712,7 @@ const mergeAreaContent = (sourceArea) => {
      }
      
      // 触发事件通知父组件将源Area及其TabPage组件保存到隐藏列表
-      emit('area-merged', {
+      emitEvent(EVENT_TYPES.AREA_MERGED, {
        sourceArea: sourceArea,
        targetAreaId: props.id,
        targetAreaHasContent: true, // 目标Area已有内容
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
@@ -437,7 +437,8 @@
 </template>

 <script setup>
-import { computed, watch, ref, onUnmounted } from 'vue'
+import { computed, watch, ref, onUnmounted, defineProps } from 'vue'
+import { emitEvent } from './eventBus.js'

 const props = defineProps({
  visible: Boolean,
@@ -711,11 +712,11 @@ const enhancedPreviewAreaStyle = computed(() => {
 })

 // 定义事件
-const emit = defineEmits(['zone-active'])
+// 使用事件总线替代直接emit

 // 监听activeDockZone变化，触发事件
 watch(activeDockZone, (newZone) => {
-  emit('zone-active', newZone)
+  emitEvent('dock-zone-active', { zoneId: newZone })
 })
 </script>

--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
@@ -10,17 +10,15 @@
      style="z-index: 9999;"
    />
    
-    <!-- 主区域 - 添加ref引用 -->
-    <Area 
+    <!-- 主区域使用Render组件统一渲染 -->
+    <div class="main-area-container" style="position: relative; width: 100%; height: 100%;">
+      <Render
+        :type="'Area'"
+        :config="mainAreaConfig"
        ref="mainAreaRef"
-      :windowState="windowState" 
-      :showTitleBar="false" 
-      title="主区域"
-      @dragover="handleMainAreaDragOver"
-      @dragleave="handleMainAreaDragLeave"
-      @area-merged="onAreaMerged"
-    >
-      <div class="main-content-container" style="position: relative; width: 100%; height: 100%;">
+      />
+      
+      <!-- ResizeBar直接渲染在主区域容器中 -->
      <ResizeBar
        v-for="resizeBar in mainAreaResizeBars"
        :key="resizeBar.id"
@@ -35,7 +33,6 @@
        :style="getMainAreaResizeBarStyle(resizeBar)"
      />
    </div>
-    </Area>
    
    <!-- 浮动区域使用Render组件统一渲染 -->
    <Render
@@ -44,27 +41,6 @@
      :type="'Area'"
      :config="area"
      :style="{ zIndex: area.zIndex || zIndexManager.getFloatingAreaZIndex(area.id) }"
-      @close="() => onCloseFloatingArea(area.id)"
-      @update:position="(position) => onUpdatePosition(area.id, position)"
-      @panelMaximizeSync="onPanelMaximizeSync"
-      @areaDragStart="(event) => onAreaDragStart(area.id, event)"
-      @areaDragMove="(event) => onAreaDragMove(area.id, event)"
-      @areaDragEnd="(event) => onAreaDragEnd(area.id, event)"
-      @tab-change="onTabChange"
-      @tab-close="onTabClose"
-      @tab-add="onTabAdd"
-      @tabDragStart="(event) => onTabDragStart(area.id, event)"
-      @tabDragMove="(event) => onTabDragMove(area.id, event)"
-      @tabDragEnd="onTabDragEnd"
-      @toggleCollapse="(panelId) => $emit('toggleCollapse', panelId)"
-      @maximize="(panelId) => onMaximize(panelId)"
-      @closePanel="(panelId) => onClosePanel(area.id, panelId)"
-      @toggleToolbar="(panelId) => $emit('toggleToolbar', panelId)"
-      @dragStart="(event) => onPanelDragStartFromTabPage(area.id, event)"
-      @dragMove="(event) => onPanelDragMoveFromTabPage(area.id, event)"
-      @dragEnd="onPanelDragEndFromTabPage"
-      @dragover="handleAreaDragOver"
-      @dragleave="handleAreaDragLeave"
    />
  </div>
 </template>
@@ -78,11 +54,13 @@ import DockIndicator from './DockIndicator.vue';
 import ResizeBar from './ResizeBar.vue';
 import Render from './Render.vue';
 import { zIndexManager } from './dockLayers.js';
+import { eventBus, EVENT_TYPES } from './eventBus.js';

 // 导入事件处理器
 import { areaActions } from './handlers/AreaHandler.js';
 import { dragStateActions } from './handlers/DragStateManager.js';
 import { panelActions } from './handlers/PanelHandler.js';
+import { tabPageActions } from './handlers/TabPageHandler.js';
 import { globalEventActions } from './handlers/GlobalEventManager.js';

 // 定义组件可以发出的事件
@@ -98,6 +76,14 @@ const emit = defineEmits([
 // 主区域状态
 const windowState = ref('最大化')

+// 主区域配置
+const mainAreaConfig = ref({
+  id: 'MainArea',
+  title: '主区域',
+  windowState: windowState.value,
+  showTitleBar: false
+})
+
 // 浮动区域列表 - 每个area包含panels数组
 const floatingAreas = ref([])

@@ -131,36 +117,36 @@ const onPanelDragEnd = () => {
  dragStateActions.onPanelDragEnd();
 };

-const onPanelDragStartFromTabPage = (areaId, event) => {
-  dragStateActions.onPanelDragStartFromTabPage(areaId, event);
+const onPanelDragStartFromTabPage = (event) => {
+  dragStateActions.onPanelDragStartFromTabPage(event.areaId, event);
 };

-const onPanelDragMoveFromTabPage = (areaId, event) => {
-  dragStateActions.onPanelDragMoveFromTabPage(areaId, event);
+const onPanelDragMoveFromTabPage = (event) => {
+  dragStateActions.onPanelDragMoveFromTabPage(event.areaId, event);
 };

 const onPanelDragEndFromTabPage = () => {
  dragStateActions.onPanelDragEndFromTabPage();
 };

-const onAreaDragStart = (areaId, event) => {
-  dragStateActions.onAreaDragStart(areaId, event);
+const onAreaDragStart = (event) => {
+  dragStateActions.onAreaDragStart(event.areaId, event);
 };

-const onAreaDragMove = (areaId, event) => {
-  dragStateActions.onAreaDragMove(areaId, event);
+const onAreaDragMove = (event) => {
+  dragStateActions.onAreaDragMove(event.areaId, event);
 };

-const onAreaDragEnd = (areaId, event) => {
-  dragStateActions.onAreaDragEnd(areaId, event);
+const onAreaDragEnd = (event) => {
+  dragStateActions.onAreaDragEnd(event.areaId, event);
 };

-const onTabDragStart = (areaId, event) => {
-  dragStateActions.onTabDragStart(areaId, event);
+const onTabDragStart = (event) => {
+  dragStateActions.onTabDragStart(event.areaId, event);
 };

-const onTabDragMove = (areaId, event) => {
-  dragStateActions.onTabDragMove(areaId, event);
+const onTabDragMove = (event) => {
+  dragStateActions.onTabDragMove(event.areaId, event);
 };

 const onTabDragEnd = () => {
@@ -168,7 +154,8 @@ const onTabDragEnd = () => {
 };

 // Area相关事件处理
-const onCloseFloatingArea = (id) => {
+const onCloseFloatingArea = (event) => {
+  const id = event.areaId;
  areaActions.closeFloatingArea(id);
  const index = floatingAreas.value.findIndex(a => a.id === id);
  if (index !== -1) {
@@ -176,7 +163,9 @@ const onCloseFloatingArea = (id) => {
  }
 };

-const onUpdatePosition = (id, position) => {
+const onUpdatePosition = (event) => {
+  const id = event.areaId;
+  const position = event;
  const area = floatingAreas.value.find(a => a.id === id);
  if (area) {
    area.x = position.left;
@@ -184,11 +173,14 @@ const onUpdatePosition = (id, position) => {
  }
 };

-const onMaximize = (panelId) => {
+const onMaximize = (event) => {
+  const panelId = event.panelId;
  areaActions.toggleMaximize(panelId);
 };

-const onClosePanel = (areaId, panelId) => {
+const onClosePanel = (event) => {
+  const areaId = event.areaId;
+  const panelId = event.panelId;
  areaActions.closePanel(areaId, panelId);
  const area = floatingAreas.value.find(a => a.id === areaId);
  if (area && area.children) {
@@ -228,8 +220,8 @@ const handleAreaDragOver = (event) => {
  globalEventActions.handleDragOver('floating-area', event);
 };

-const handleAreaDragLeave = () => {
-  globalEventActions.handleDragLeave('floating-area');
+const handleAreaDragLeave = (event) => {
+  globalEventActions.handleDragLeave('floating-area', event);
 };

 // 其他事件处理方法
@@ -238,23 +230,37 @@ const onDockZoneActive = (zone) => {
 };

 const onPanelMaximizeSync = ({ areaId, maximized }) => {
-  panelActions.syncMaximizeState(areaId, maximized);
+  // 使用areaActions.updateState来更新区域的最大化状态
+  areaActions.updateState(areaId, { maximized });
 };

-const onAreaMerged = () => {
-  areaActions.handleAreaMerged();
+const onAreaMerged = (event) => {
+  areaActions.handleAreaMerged(event.areaId);
 };

-const onTabChange = (data) => {
-  panelActions.handleTabChange(data);
+// 标签页切换事件处理
+const onTabChange = async (data) => {
+  try {
+    await tabPageActions.switch(data.tabPageId, data.areaId, data.fromTabPageId);
+  } catch (error) {
+    console.error('Failed to handle tab change:', error);
+  }
 };

-const onTabClose = (data) => {
-  panelActions.handleTabClose(data);
+const onTabClose = async (data) => {
+  try {
+    await tabPageActions.requestClose(data.tabPageId, data.areaId);
+  } catch (error) {
+    console.error('Failed to handle tab close:', error);
+  }
 };

-const onTabAdd = (data) => {
-  panelActions.handleTabAdd(data);
+const onTabAdd = async (data) => {
+  try {
+    await tabPageActions.create(data.areaId, data.config);
+  } catch (error) {
+    console.error('Failed to handle tab add:', error);
+  }
 };

 // ResizeBar相关处理方法
@@ -279,9 +285,51 @@ const hideEdgeIndicators = computed(() => {
  return !hasAreasInMainContent.value;
 });

-// 简化的事件监听器设置
+// 设置事件总线监听器
 const setupEventListeners = () => {
-  // 可以在这里添加必要的事件监听器
+  // Area相关事件
+  eventBus.on(EVENT_TYPES.AREA_DRAG_START, onAreaDragStart)
+  eventBus.on(EVENT_TYPES.AREA_DRAG_MOVE, onAreaDragMove)
+  eventBus.on(EVENT_TYPES.AREA_DRAG_END, onAreaDragEnd)
+  eventBus.on(EVENT_TYPES.AREA_POSITION_UPDATE, onUpdatePosition)
+  eventBus.on(EVENT_TYPES.AREA_DRAG_OVER, handleAreaDragOver)
+  eventBus.on(EVENT_TYPES.AREA_DRAG_LEAVE, handleAreaDragLeave)
+  
+  // Tab相关事件
+  eventBus.on(EVENT_TYPES.TAB_CHANGE, onTabChange)
+  eventBus.on(EVENT_TYPES.TAB_CLOSE, onTabClose)
+  eventBus.on(EVENT_TYPES.TAB_ADD, onTabAdd)
+  eventBus.on(EVENT_TYPES.TAB_DRAG_START, onTabDragStart)
+  eventBus.on(EVENT_TYPES.TAB_DRAG_MOVE, onTabDragMove)
+  eventBus.on(EVENT_TYPES.TAB_DRAG_END, onTabDragEnd)
+  
+  // Panel相关事件
+  eventBus.on(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, () => emit('toggleCollapse'))
+  eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE, onMaximize)
+  eventBus.on(EVENT_TYPES.PANEL_CLOSE_REQUEST, onCloseFloatingArea)
+  eventBus.on(EVENT_TYPES.PANEL_CLOSE, onClosePanel)
+  eventBus.on(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, () => emit('toggleToolbar'))
+  eventBus.on(EVENT_TYPES.PANEL_DRAG_START, onPanelDragStart)
+  eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE, onPanelDragMove)
+  eventBus.on(EVENT_TYPES.PANEL_DRAG_END, onPanelDragEnd)
+  eventBus.on(EVENT_TYPES.PANEL_DRAG_START_FROM_TABPAGE, onPanelDragStartFromTabPage)
+  eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE_FROM_TABPAGE, onPanelDragMoveFromTabPage)
+  eventBus.on(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, onPanelDragEndFromTabPage)
+  eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, onPanelMaximizeSync)
+  
+  // Resize相关事件
+  eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart'))
+  eventBus.on(EVENT_TYPES.RESIZE_MOVE, () => emit('dragMove'))
+  eventBus.on(EVENT_TYPES.RESIZE_END, () => emit('dragEnd'))
+  
+  // Window相关事件
+  eventBus.on(EVENT_TYPES.WINDOW_STATE_CHANGE, (event) => {
+    // 处理窗口状态变化
+  })
+  
+  // 自定义事件
+  eventBus.on('area-merged', onAreaMerged)
+  eventBus.on('dock-zone-active', (event) => onDockZoneActive(event.zoneId))
 };

 // 清理函数
@@ -419,6 +467,7 @@ const findOrCreateMainAreaTabPage = () => {
 onMounted(() => {
  // 初始化轻量级状态
  console.log('DockLayout component mounted');
+  setupEventListeners();
 })

 // 组件卸载时清理资源
@@ -426,6 +475,8 @@ onUnmounted(() => {
  // 清理事件监听器和其他资源
  console.log('DockLayout component unmounted');
  cleanup();
+  // 移除事件总线监听器
+  eventBus.offAll();
 })

 // 暴露轻量级接口给父组件
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue
@@ -24,6 +24,7 @@ import { computed } from 'vue'
 import Area from './Area.vue'
 import TabPage from './TabPage.vue'
 import Panel from './Panel.vue'
+import { eventBus, EVENT_TYPES } from './eventBus.js'

 // 定义组件属性
 const props = defineProps({
@@ -45,19 +46,7 @@ const props = defineProps({
  }
 })

-// 定义事件
-const emit = defineEmits([
-  // Area事件
-  'areaDragStart', 'areaDragMove', 'areaDragEnd', 'area-merged', 
-  'toggleCollapse', 'maximize', 'close', 'toggleToolbar',
-  'dragStart', 'dragMove', 'dragEnd',
-  // TabPage事件  
-  'tabChange', 'tabClose', 'tabAdd', 'tabDragStart', 'tabDragMove', 'tabDragEnd',
-  // Panel事件
-  'panelToggleCollapse', 'panelMaximize', 'panelClose', 'panelToggleToolbar',
-  // 通用的update事件
-  'update:windowState', 'update:position'
-])
+// 不再需要定义emit，因为事件将通过事件总线发送

 // 根据type计算要渲染的组件
 const componentType = computed(() => {
@@ -124,43 +113,59 @@ const componentListeners = computed(() => {
    // Area组件的事件
    allListeners['areaDragStart'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragStart:`, event)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('area-merged', event)
+      eventBus.emit('area-merged', { ...event, areaId: props.config.id })
    }
    allListeners['toggleCollapse'] = (event) => {
      // if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleCollapse:`, event)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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 })
    }
  }
  
@@ -168,55 +173,55 @@ const componentListeners = computed(() => {
    // TabPage组件的事件
    allListeners['tabChange'] = (event) => {
      // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabChange:`, event)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('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)
-      emit('dragEnd', event)
+      eventBus.emit(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, { ...event, areaId: props.config.id })
    }
  }
  
@@ -224,31 +229,31 @@ const componentListeners = computed(() => {
    // Panel组件的事件
    allListeners['toggleCollapse'] = (event) => {
      // if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleCollapse:`, event)
-      emit('panelToggleCollapse', 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)
-      emit('panelMaximize', 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)
-      emit('panelClose', 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)
-      emit('panelToggleToolbar', 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)
-      emit('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)
-      emit('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)
-      emit('dragEnd', event)
+      eventBus.emit(EVENT_TYPES.PANEL_DRAG_END, { ...event, areaId: props.config.id })
    }
  }
  
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue
@@ -14,6 +14,7 @@

 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { emitEvent, EVENT_TYPES } from './eventBus.js'

 // Props定义
 interface Props {
@@ -39,7 +40,7 @@ interface Emits {
  resizeEnd: []
 }

-const emit = defineEmits<Emits>()
+// 使用事件总线替代直接emit

 // 响应式状态
 const isHovered = ref(false)
@@ -79,7 +80,7 @@ const startResize = (event: MouseEvent) => {
  startX.value = event.clientX
  startY.value = event.clientY
  
-  emit('resizeStart')
+  emitEvent(EVENT_TYPES.RESIZE_START, { direction: props.direction, targetId: props.targetId })
  
  // 添加全局鼠标事件监听
  document.addEventListener('mousemove', handleMouseMove)
@@ -112,7 +113,7 @@ const handleMouseMove = (event: MouseEvent) => {
  
  if (newSize !== currentSize.value) {
    currentSize.value = newSize
-    emit('resize', newSize)
+    emitEvent(EVENT_TYPES.RESIZE_MOVE, { direction: props.direction, targetId: props.targetId, newSize })
  }
  
  startX.value = event.clientX
@@ -122,7 +123,7 @@ const handleMouseMove = (event: MouseEvent) => {
 // 结束调整大小
 const endResize = () => {
  isResizing.value = false
-  emit('resizeEnd')
+  emitEvent(EVENT_TYPES.RESIZE_END, { direction: props.direction, targetId: props.targetId })
  
  // 移除全局鼠标事件监听
  document.removeEventListener('mousemove', handleMouseMove)
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
@@ -126,7 +126,8 @@
 </template>

 <script setup>
-import { defineProps, defineEmits, ref, onMounted, onUnmounted, computed, useSlots } from 'vue'
+import { defineProps, ref, onMounted, onUnmounted, computed, useSlots } from 'vue'
+import { emitEvent, EVENT_TYPES } from './eventBus.js'

 const slots = useSlots()

@@ -146,7 +147,7 @@ const props = defineProps({
  }
 })

-const emit = defineEmits(['tabChange', 'tabClose', 'tabAdd', 'tabDragStart', 'tabDragMove', 'tabDragEnd', 'toggleCollapse', 'maximize', 'close', 'toggleToolbar', 'dragStart', 'dragMove', 'dragEnd'])
+// 使用事件总线替代直接emit

 // 当前激活的标签页索引
 const activeTabIndex = ref(-1)
@@ -173,7 +174,7 @@ const setActiveTab = (index) => {
  const slotChildren = slots.default ? slots.default() : []
  if (index >= 0 && index < slotChildren.length) {
    activeTabIndex.value = index
-    emit('tabChange', { index, tab: slotChildren[index] })
+    emitEvent(EVENT_TYPES.TAB_CHANGE, { index, tab: slotChildren[index] })
  }
 }

@@ -187,7 +188,7 @@ onMounted(() => {

 // 关闭标签页
 const closeTab = (tabId) => {
-  emit('tabClose', { id: tabId })
+  emitEvent(EVENT_TYPES.TAB_CLOSE, { id: tabId })
 }

 // 标签拖拽开始
@@ -198,7 +199,7 @@ const onTabDragStart = (index, event) => {
    dragIndex = index
    
    // 传递标签页索引和鼠标位置
-    emit('tabDragStart', {
+    emitEvent(EVENT_TYPES.TAB_DRAG_START, {
      clientX: event.clientX,
      clientY: event.clientY,
      tabIndex: index,
@@ -222,7 +223,7 @@ const onTabDragMove = (event) => {
    // 防止文本选择和默认行为
    event.preventDefault()
    event.stopPropagation()
-    emit('tabDragMove', {
+    emitEvent(EVENT_TYPES.TAB_DRAG_MOVE, {
      clientX: event.clientX,
      clientY: event.clientY,
      tabIndex: dragIndex
@@ -234,7 +235,7 @@ const onTabDragMove = (event) => {
 const onTabDragEnd = () => {
  if (isDragging) {
    isDragging = false
-    emit('tabDragEnd', { tabIndex: dragIndex })
+    emitEvent(EVENT_TYPES.TAB_DRAG_END, { tabIndex: dragIndex })
    dragIndex = -1
    
    // 拖拽结束后移除事件监听器
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
@@ -1189,8 +1189,10 @@ class DragStateManager {
      });

      // 设置起始位置
-      const startX = position.x || event.clientX;
-      const startY = position.y || event.clientY;
+      const clientX = event?.clientX || eventData.clientX;
+      const clientY = event?.clientY || eventData.clientY;
+      const startX = position.x || clientX;
+      const startY = position.y || clientY;
      dragState.startPosition = { x: startX, y: startY };
      dragState.updatePosition(startX, startY);

@@ -1250,8 +1252,10 @@ class DragStateManager {
      }

      // 更新位置
-      const currentX = position.x || event.clientX;
-      const currentY = position.y || event.clientY;
+      const clientX = event?.clientX || eventData.clientX;
+      const clientY = event?.clientY || eventData.clientY;
+      const currentX = position.x || clientX;
+      const currentY = position.y || clientY;
      dragState.updatePosition(currentX, currentY);

      // 检测目标区域
@@ -1308,8 +1312,10 @@ class DragStateManager {
      const dragState = activeDrag.dragState;
      
      // 更新最终位置
-      const finalX = finalPosition.x || event.clientX;
-      const finalY = finalPosition.y || event.clientY;
+      const clientX = event?.clientX || eventData.clientX;
+      const clientY = event?.clientY || eventData.clientY;
+      const finalX = finalPosition.x || clientX;
+      const finalY = finalPosition.y || clientY;
      dragState.updatePosition(finalX, finalY);

      // 设置最终状态
@@ -1578,6 +1584,12 @@ class DragStateManager {
      // 这里可以实现具体的拖拽目标检测逻辑
      // 例如：检测鼠标下的元素类型和区域
      
+      // 验证坐标是否为有限值，避免elementFromPoint抛出错误
+      if (!Number.isFinite(x) || !Number.isFinite(y)) {
+        console.warn('检测拖拽目标时坐标无效:', { x, y });
+        return null;
+      }
+      
      // 简化实现：检查坐标是否在预设区域内
      const targetAreas = ['main-area', 'floating-area', 'hidden-area'];
      const detectedArea = targetAreas[Math.floor(Math.random() * targetAreas.length)];