From 81dba291f9460834c956b1175d04dd76a35140c0 Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Thu, 25 Dec 2025 13:53:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E9=83=A8=E7=94=A8=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Windows/Robot/Web/src/DockLayout/Area.vue |   4 +-
 .../Web/src/DockLayout/DockIndicator.vue      |   2 +-
 .../Robot/Web/src/DockLayout/DockLayout.vue   |  93 +++++-----
 .../Robot/Web/src/DockLayout/Panel.vue        |   9 +-
 .../Robot/Web/src/DockLayout/Render.vue       |   2 +-
 .../Robot/Web/src/DockLayout/ResizeBar.vue    |   2 +-
 .../Robot/Web/src/DockLayout/TabPage.vue      |   2 +-
 .../Robot/Web/src/DockLayout/eventBus.js      | 174 ++++--------------
 .../src/DockLayout/handlers/AreaHandler.js    |   2 +-
 .../DockLayout/handlers/DragStateManager.js   |  39 +++-
 .../DockLayout/handlers/EventBusManager.js    |  14 +-
 .../DockLayout/handlers/GlobalEventManager.js |  81 +++++---
 .../DockLayout/handlers/IntegrationTester.js  |  12 +-
 .../src/DockLayout/handlers/PanelHandler.js   |  24 ++-
 .../src/DockLayout/handlers/TabPageHandler.js |  25 ++-
 15 files changed, 244 insertions(+), 241 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
index f000131..371bb3a 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
@@ -134,10 +134,10 @@
 
 <script setup>
 import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
-import { emitEvent, EVENT_TYPES, globalEventListenerManager } from './eventBus.js'
+import { emitEvent, EVENT_TYPES, globalEventListenerManager } from './eventBus'
 import TabPage from './TabPage.vue'
 import Panel from './Panel.vue'
-import { zIndexManager, Z_INDEX_LAYERS } from './dockLayers.js'
+import { zIndexManager, Z_INDEX_LAYERS } from './dockLayers'
 
 const props = defineProps({
   id: { type: String, required: true },
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
index 29fbf05..f5791b2 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
@@ -438,7 +438,7 @@
 
 <script setup>
 import { computed, watch, ref, onUnmounted, defineProps } from 'vue'
-import { emitEvent } from './eventBus.js'
+import { emitEvent } from './eventBus'
 
 const props = defineProps({
   visible: Boolean,
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
index 27133a9..1a16857 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
@@ -53,15 +53,13 @@ import TabPage from './TabPage.vue';
 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';
+import { zIndexManager } from './dockLayers';
+import { eventBus, EVENT_TYPES } from './eventBus';
+import { areaActions } from './handlers/AreaHandler';
+import { dragStateActions } from './handlers/DragStateManager';
+import { panelActions } from './handlers/PanelHandler';
+import { tabPageActions } from './handlers/TabPageHandler';
+import { globalEventActions } from './handlers/GlobalEventManager';
 
 // 定义组件可以发出的事件
 const emit = defineEmits([
@@ -287,51 +285,59 @@ const hideEdgeIndicators = computed(() => {
 
 // 设置事件总线监听器
 const setupEventListeners = () => {
+  // 创建一个数组来保存所有的取消订阅函数
+  const unsubscribeFunctions = [];
+  
   // 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)
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_START, onAreaDragStart));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_MOVE, onAreaDragMove));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_END, onAreaDragEnd));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_POSITION_UPDATE, onUpdatePosition));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_DRAG_OVER, handleAreaDragOver));
+  unsubscribeFunctions.push(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)
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_CHANGE, onTabChange));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_CLOSE, onTabClose));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_ADD, onTabAdd));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_DRAG_START, onTabDragStart));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.TAB_DRAG_MOVE, onTabDragMove));
+  unsubscribeFunctions.push(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)
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, () => emit('toggleCollapse')));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE, onMaximize));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE_REQUEST, onCloseFloatingArea));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE, onClosePanel));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, () => emit('toggleToolbar')));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_START, onPanelDragStart));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE, onPanelDragMove));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_END, onPanelDragEnd));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_START_FROM_TABPAGE, onPanelDragStartFromTabPage));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE_FROM_TABPAGE, onPanelDragMoveFromTabPage));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, onPanelDragEndFromTabPage));
+  unsubscribeFunctions.push(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'))
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart')));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_MOVE, () => emit('dragMove')));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_END, () => emit('dragEnd')));
   
   // Window相关事件
-  eventBus.on(EVENT_TYPES.WINDOW_STATE_CHANGE, (event) => {
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.WINDOW_STATE_CHANGE, (event) => {
     // 处理窗口状态变化
-  })
+  }));
   
   // 自定义事件
-  eventBus.on('area-merged', onAreaMerged)
-  eventBus.on('dock-zone-active', (event) => onDockZoneActive(event.zoneId))
+  unsubscribeFunctions.push(eventBus.on('area-merged', onAreaMerged));
+  unsubscribeFunctions.push(eventBus.on('dock-zone-active', (event) => onDockZoneActive(event.zoneId)));
+  
+  return unsubscribeFunctions;
 };
 
+// 保存取消订阅函数数组
+const unsubscribeFunctions = ref([]);
+
 // 清理函数
 const cleanup = () => {
   // 清理事件监听器和其他资源
@@ -467,7 +473,7 @@ const findOrCreateMainAreaTabPage = () => {
 onMounted(() => {
   // 初始化轻量级状态
   console.log('DockLayout component mounted');
-  setupEventListeners();
+  unsubscribeFunctions.value = setupEventListeners();
 })
 
 // 组件卸载时清理资源
@@ -475,8 +481,9 @@ onUnmounted(() => {
   // 清理事件监听器和其他资源
   console.log('DockLayout component unmounted');
   cleanup();
-  // 移除事件总线监听器
-  eventBus.offAll();
+  // 逐个移除事件监听器
+  unsubscribeFunctions.value.forEach(unsubscribe => unsubscribe());
+  unsubscribeFunctions.value = [];
 })
 
 // 暴露轻量级接口给父组件
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
index 6be5fa6..7c98a59 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
@@ -113,12 +113,12 @@
 
 <script setup>
 import { defineProps, onMounted, onUnmounted } from 'vue';
-import { 
+import {
   eventBus, 
   EVENT_TYPES, 
   emitEvent, 
-  onEvent 
-} from './eventBus.js';
+  onEvent
+} from './eventBus';
 
 // 定义组件属性
 const props = defineProps({
@@ -566,9 +566,6 @@ onMounted(() => {
   // 设置事件监听器
   setupEventListeners()
   
-  // 设置拖拽相关事件监听器
-  addDocumentDragListeners()
-  
   // 更新活动状态
   if (window.__panelMemoryProtection) {
     window.__panelMemoryProtection.updateActivity(`panel_${props.id}`)
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue
index 46c74ce..94d9acb 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue
@@ -24,7 +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'
+import { eventBus, EVENT_TYPES } from './eventBus'
 
 // 定义组件属性
 const props = defineProps({
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue
index 47397dd..8b44ee2 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { emitEvent, EVENT_TYPES } from './eventBus.js'
+import { emitEvent, EVENT_TYPES } from './eventBus'
 
 // Props定义
 interface Props {
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
index b754899..b6930ec 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
@@ -127,7 +127,7 @@
 
 <script setup>
 import { defineProps, ref, onMounted, onUnmounted, computed, useSlots } from 'vue'
-import { emitEvent, EVENT_TYPES } from './eventBus.js'
+import { emitEvent, EVENT_TYPES } from './eventBus'
 
 const slots = useSlots()
 
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/eventBus.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/eventBus.js
index 3c685c3..abcb3dc 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/eventBus.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/eventBus.js
@@ -327,6 +327,29 @@ class EnhancedEventBus {
       }
     }
     
+    // 防止重复注册相同的监听器
+    if (!this.bus.all.has(eventType)) {
+      this.bus.all.set(eventType, [])
+    }
+    
+    const listeners = this.bus.all.get(eventType)
+    // 检查是否已经存在相同的处理函数
+    const existingListener = listeners.find(listener => {
+      // 检查是否是同一个wrappedHandler或handler
+      return listener === wrappedHandler || 
+             (listener._originalHandler && listener._originalHandler === handler)
+    })
+    
+    if (existingListener) {
+      // 已经存在相同的监听器，直接返回取消订阅函数
+      return () => {
+        this.off(eventType, wrappedHandler)
+      }
+    }
+    
+    // 保存原始处理函数，用于去重检查
+    wrappedHandler._originalHandler = handler
+    
     // 实际监听事件
     this.bus.on(eventType, wrappedHandler)
     
@@ -494,6 +517,13 @@ class EnhancedEventBus {
     this.bus.off(eventType, callback)
   }
 
+  /**
+   * 取消所有订阅
+   */
+  offAll() {
+    this.bus.all.clear()
+  }
+
   /**
    * 清除所有监听器
    */
@@ -766,165 +796,41 @@ EnhancedEventBus.prototype.destroy = function() {
   console.log(`[EventBus:${this.instanceId}] 实例已销毁`)
 }
 
-// 拖拽状态管理器
-export class DragStateManager {
-  constructor(eventBus) {
-    this.eventBus = eventBus
-    this.dragStates = new Map()
-  }
-
-  /**
-   * 开始拖拽
-   */
-  startDrag(dragInfo) {
-    const { type, id, event } = dragInfo
-    
-    this.dragStates.set(id, {
-      type,
-      startTime: Date.now(),
-      initialPosition: { x: event.clientX, y: event.clientY },
-      currentPosition: { x: event.clientX, y: event.clientY },
-      isActive: true
-    })
-    
-    // 触发拖拽开始事件
-    const eventType = `${type}.drag.start`
-    this.eventBus.emit(eventType, {
-      id,
-      position: { x: event.clientX, y: event.clientY },
-      initialPosition: { x: event.clientX, y: event.clientY }
-    })
-    
-    return id
-  }
-
-  /**
-   * 拖拽移动
-   */
-  moveDrag(id, event) {
-    const dragState = this.dragStates.get(id)
-    if (!dragState || !dragState.isActive) return
-    
-    dragState.currentPosition = { x: event.clientX, y: event.clientY }
-    const delta = {
-      x: event.clientX - dragState.initialPosition.x,
-      y: event.clientY - dragState.initialPosition.y
-    }
-    
-    // 触发拖拽移动事件
-    const eventType = `${dragState.type}.drag.move`
-    this.eventBus.emit(eventType, {
-      id,
-      position: dragState.currentPosition,
-      delta,
-      startTime: dragState.startTime
-    })
-  }
-
-  /**
-   * 结束拖拽
-   */
-  endDrag(id, event) {
-    const dragState = this.dragStates.get(id)
-    if (!dragState) return
-    
-    dragState.isActive = false
-    dragState.endTime = Date.now()
-    dragState.finalPosition = { x: event.clientX, y: event.clientY }
-    
-    // 触发拖拽结束事件
-    const eventType = `${dragState.type}.drag.end`
-    this.eventBus.emit(eventType, {
-      id,
-      position: dragState.finalPosition,
-      initialPosition: dragState.initialPosition,
-      duration: dragState.endTime - dragState.startTime
-    })
-    
-    // 清理拖拽状态
-    setTimeout(() => {
-      this.dragStates.delete(id)
-    }, 100)
-    
-    return dragState
-  }
-
-  /**
-   * 获取拖拽状态
-   */
-  getDragState(id) {
-    return this.dragStates.get(id)
-  }
-
-  /**
-   * 检查是否有活动的拖拽
-   */
-  hasActiveDrag(id = null) {
-    if (id) {
-      const state = this.dragStates.get(id)
-      return state && state.isActive
-    }
-    
-    for (const state of this.dragStates.values()) {
-      if (state.isActive) return true
-    }
-    
-    return false
-  }
-
-  /**
-   * 取消所有拖拽
-   */
-  cancelAllDrags() {
-    for (const [id, state] of this.dragStates.entries()) {
-      if (state.isActive) {
-        this.endDrag(id, {
-          clientX: state.currentPosition.x,
-          clientY: state.currentPosition.y
-        })
-      }
-    }
-  }
-}
-
-// 创建拖拽状态管理器实例
-export const dragStateManager = new DragStateManager(eventBus)
-
-// 便捷的拖拽事件触发函数
+// 便捷的事件触发函数
 export const triggerDragEvent = {
   area: {
     start: (areaId, event) => {
-      return dragStateManager.startDrag({ type: 'area', id: areaId, event })
+      return eventBus.emit(EVENT_TYPES.AREA_DRAG_START, { areaId, event })
     },
     move: (areaId, event) => {
-      dragStateManager.moveDrag(areaId, event)
+      eventBus.emit(EVENT_TYPES.AREA_DRAG_MOVE, { areaId, event })
     },
     end: (areaId, event) => {
-      dragStateManager.endDrag(areaId, event)
+      eventBus.emit(EVENT_TYPES.AREA_DRAG_END, { areaId, event })
     }
   },
   
   tab: {
     start: (tabId, event) => {
-      return dragStateManager.startDrag({ type: 'tab', id: tabId, event })
+      return eventBus.emit(EVENT_TYPES.TAB_DRAG_START, { tabId, event })
     },
     move: (tabId, event) => {
-      dragStateManager.moveDrag(tabId, event)
+      eventBus.emit(EVENT_TYPES.TAB_DRAG_MOVE, { tabId, event })
     },
     end: (tabId, event) => {
-      dragStateManager.endDrag(tabId, event)
+      eventBus.emit(EVENT_TYPES.TAB_DRAG_END, { tabId, event })
     }
   },
   
   panel: {
     start: (panelId, event) => {
-      return dragStateManager.startDrag({ type: 'panel', id: panelId, event })
+      return eventBus.emit(EVENT_TYPES.PANEL_DRAG_START, { panelId, event })
     },
     move: (panelId, event) => {
-      dragStateManager.moveDrag(panelId, event)
+      eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE, { panelId, event })
     },
     end: (panelId, event) => {
-      dragStateManager.endDrag(panelId, event)
+      eventBus.emit(EVENT_TYPES.PANEL_DRAG_END, { panelId, event })
     }
   }
 }
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/AreaHandler.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/AreaHandler.js
index 6c25d1a..3a13657 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/AreaHandler.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/AreaHandler.js
@@ -3,7 +3,7 @@
  * 专门处理Area相关的所有事件，包括浮动区域管理、拖拽、停靠、合并等
  */
 
-import { eventBus } from '../eventBus.js';
+import { eventBus } from '../eventBus';
 
 // Area事件类型常量
 export const AREA_EVENT_TYPES = {
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
index a2c951d..7bd5976 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
@@ -3,8 +3,8 @@
  * 统一管理所有组件的拖拽状态，提供拖拽历史、性能监控、冲突检测等功能
  */
 
-import { eventBus } from '../eventBus.js';
-import { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager.js';
+import { eventBus } from '../eventBus';
+import { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager';
 
 // 拖拽状态类型
 export const DRAG_STATE_TYPES = {
@@ -520,6 +520,11 @@ class DragStateManager {
    * 注册事件监听器
    */
   _registerEventListeners() {
+    // 防止重复注册监听器
+    if (this.eventListenersRegistered) {
+      return;
+    }
+    
     const dragEvents = [
       // Panel拖拽事件
       'panel.drag.start', 'panel.drag.move', 'panel.drag.end', 'panel.drag.cancel',
@@ -535,6 +540,36 @@ class DragStateManager {
         deduplication: { type: 'EVENT_BASED', key: 'dragState' }
       });
     });
+    
+    this.eventListenersRegistered = true;
+  }
+
+  /**
+   * 销毁管理器
+   */
+  destroy() {
+    // 清理事件监听器
+    const dragEvents = [
+      // Panel拖拽事件
+      'panel.drag.start', 'panel.drag.move', 'panel.drag.end', 'panel.drag.cancel',
+      // TabPage拖拽事件
+      'tabpage.drag.start', 'tabpage.drag.move', 'tabpage.drag.end', 'tabpage.drag.cancel',
+      // Area拖拽事件
+      'area.drag.start', 'area.drag.move', 'area.drag.end', 'area.drag.cancel'
+    ];
+    
+    dragEvents.forEach(eventType => {
+      eventBus.off(eventType, this._onDragEvent);
+    });
+    
+    // 清理清理调度器
+    this._stopCleanupScheduler();
+    
+    // 清理拖拽状态
+    this.dragStates.clear();
+    this.dragHistory = [];
+    
+    console.log('🗑️ 拖拽状态管理器已销毁');
   }
 
   /**
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/EventBusManager.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/EventBusManager.js
index 1183d0f..ee25616 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/EventBusManager.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/EventBusManager.js
@@ -3,13 +3,13 @@
  * 统一管理所有事件处理器和功能模块
  */
 
-import { eventBus, eventBusActions, EVENT_TYPES } from '../eventBus.js';
-import { panelHandler, PANEL_EVENT_TYPES, panelActions } from './PanelHandler.js';
-import tabPageHandler, { TABPAGE_EVENT_TYPES, tabPageActions } from './TabPageHandler.js';
-import areaHandler, { AREA_EVENT_TYPES, areaActions } from './AreaHandler.js';
-import globalEventManager, { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager.js';
-import dragStateManager, { DRAG_STATE_TYPES, dragStateActions } from './DragStateManager.js';
-import integrationTester, { testActions, TEST_CONFIG } from './IntegrationTester.js';
+import { eventBus, eventBusActions, EVENT_TYPES } from '../eventBus';
+import { panelHandler, PANEL_EVENT_TYPES, panelActions } from './PanelHandler';
+import tabPageHandler, { TABPAGE_EVENT_TYPES, tabPageActions } from './TabPageHandler';
+import areaHandler, { AREA_EVENT_TYPES, areaActions } from './AreaHandler';
+import globalEventManager, { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager';
+import dragStateManager, { DRAG_STATE_TYPES, dragStateActions } from './DragStateManager';
+import integrationTester, { testActions, TEST_CONFIG } from './IntegrationTester';
 
 // 事件总线配置
 export const EVENT_BUS_CONFIG = {
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js
index 12d98b9..893429e 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js
@@ -3,10 +3,14 @@
  * 统一管理所有事件处理器，提供事件路由、分发、监控和调试功能
  */
 
-import { eventBus } from '../eventBus.js';
-import { panelHandler, PANEL_EVENT_TYPES, panelActions } from './PanelHandler.js';
-import tabPageHandler, { TABPAGE_EVENT_TYPES, tabPageActions } from './TabPageHandler.js';
-import areaHandler, { AREA_EVENT_TYPES, areaActions } from './AreaHandler.js';
+import { eventBus } from '../eventBus';
+import { PANEL_EVENT_TYPES, panelActions, panelHandler } from './PanelHandler';
+import tabPageHandlerModule, { TABPAGE_EVENT_TYPES, tabPageActions } from './TabPageHandler';
+import areaHandlerModule, { AREA_EVENT_TYPES, areaActions } from './AreaHandler';
+
+// 获取处理器实例
+const tabPageHandler = tabPageHandlerModule.getInstance ? tabPageHandlerModule.getInstance() : tabPageHandlerModule;
+const areaHandler = areaHandlerModule;
 
 // 全局事件类型常量
 export const GLOBAL_EVENT_TYPES = {
@@ -305,21 +309,17 @@ class GlobalEventManager {
     this.crossComponentChannels = new Map();
     this.isInitialized = false;
     this.eventListenersRegistered = false;
+    this.componentListenersRegistered = false;
     this.debugMode = false;
-    
-    // 处理器映射
-    this.handlerMap = {
-      panelHandler,
-      tabPageHandler,
-      areaHandler
-    };
+    this.handlerMap = {};
+    this.eventListenerUnsubscribers = [];
     
     // 绑定方法
     this._onGlobalEvent = this._onGlobalEvent.bind(this);
     this._onSystemError = this._handleSystemError.bind(this);
     this._cleanupExpiredData = this._cleanupExpiredData.bind(this);
     
-    this._initialize();
+    // 延迟初始化，先不调用_initialize()
     
     // 保存实例到静态属性
     GlobalEventManager.instance = this;
@@ -328,13 +328,20 @@ class GlobalEventManager {
   /**
    * 初始化事件管理器
    */
-  _initialize() {
+  async _initialize() {
     // 防止重复初始化
     if (this.isInitialized) {
       console.warn('⚠️ 全局事件管理器已初始化，跳过重复初始化');
       return;
     }
     
+    // 初始化处理器映射
+    this.handlerMap = {
+      panelHandler,
+      tabPageHandler,
+      areaHandler
+    };
+    
     // 注册全局事件监听器
     this._registerGlobalEventListeners();
     
@@ -367,10 +374,11 @@ class GlobalEventManager {
     
     const globalEvents = Object.values(GLOBAL_EVENT_TYPES);
     globalEvents.forEach(eventType => {
-      eventBus.on(eventType, this._onGlobalEvent, { 
+      const unsubscribe = eventBus.on(eventType, this._onGlobalEvent, { 
         priority: 0, // 最高优先级
         deduplication: { type: 'TTL_BASED', ttl: 50 }
       });
+      this.eventListenerUnsubscribers.push(unsubscribe);
     });
     
     // 注册所有组件事件监听器
@@ -384,26 +392,30 @@ class GlobalEventManager {
    * 注册组件事件监听器
    */
   _registerComponentEventListeners() {
+    // 防止重复注册组件事件监听器
+    if (this.componentListenersRegistered) {
+      return;
+    }
+    
     // Panel事件监听
     Object.values(PANEL_EVENT_TYPES).forEach(eventType => {
-      eventBus.on(eventType, (data) => {
-        this._routeEvent(eventType, data, 'panel');
-      }, { priority: 1 });
+      const unsubscribe = eventBus.on(eventType, this._routeEvent.bind(this, eventType, null, 'panel'), { priority: 1 });
+      this.eventListenerUnsubscribers.push(unsubscribe);
     });
     
     // TabPage事件监听
     Object.values(TABPAGE_EVENT_TYPES).forEach(eventType => {
-      eventBus.on(eventType, (data) => {
-        this._routeEvent(eventType, data, 'tabPage');
-      }, { priority: 1 });
+      const unsubscribe = eventBus.on(eventType, this._routeEvent.bind(this, eventType, null, 'tabPage'), { priority: 1 });
+      this.eventListenerUnsubscribers.push(unsubscribe);
     });
     
     // Area事件监听
     Object.values(AREA_EVENT_TYPES).forEach(eventType => {
-      eventBus.on(eventType, (data) => {
-        this._routeEvent(eventType, data, 'area');
-      }, { priority: 1 });
+      const unsubscribe = eventBus.on(eventType, this._routeEvent.bind(this, eventType, null, 'area'), { priority: 1 });
+      this.eventListenerUnsubscribers.push(unsubscribe);
     });
+    
+    this.componentListenersRegistered = true;
   }
 
   /**
@@ -1022,8 +1034,15 @@ class GlobalEventManager {
    * 销毁事件管理器
    */
   destroy() {
-    // 清理所有事件监听器，包括全局事件和组件事件
-    eventBus.clear();
+    // 清理自己注册的所有事件监听器
+    this.eventListenerUnsubscribers.forEach(unsubscribe => {
+      try {
+        unsubscribe();
+      } catch (error) {
+        console.warn('清理监听器时出错:', error);
+      }
+    });
+    this.eventListenerUnsubscribers = [];
     
     // 销毁各个处理器
     Object.values(this.handlerMap).forEach(handler => {
@@ -1041,6 +1060,7 @@ class GlobalEventManager {
     
     this.isInitialized = false;
     this.eventListenersRegistered = false;
+    this.componentListenersRegistered = false;
     console.log('🗑️ 全局事件管理器已销毁，所有监听器已清理');
   }
 }
@@ -1150,17 +1170,20 @@ export const globalEventActions = {
 /**
  * 确保单例实例存在
  */
-function ensureInstance() {
+async function ensureInstance() {
   if (!globalEventManager) {
     globalEventManager = new GlobalEventManager();
+    // 异步初始化
+    await globalEventManager._initialize();
+  } else if (!globalEventManager.isInitialized) {
+    // 如果实例存在但未初始化，完成初始化
+    await globalEventManager._initialize();
   }
   return globalEventManager;
 }
 
 // 导出单例实例访问方法
-export const getGlobalEventManager = () => {
-  return ensureInstance();
-};
+export const getGlobalEventManager = ensureInstance;
 
 // 导出事件管理器和相关API
 export default {
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/IntegrationTester.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/IntegrationTester.js
index 7d1a176..48ae098 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/IntegrationTester.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/IntegrationTester.js
@@ -3,12 +3,12 @@
  * 对所有事件处理器进行集成测试、性能监控和优化建议
  */
 
-import { eventBus } from '../eventBus.js';
-import { panelHandler, PANEL_EVENT_TYPES } from './PanelHandler.js';
-import tabPageHandler, { TABPAGE_EVENT_TYPES } from './TabPageHandler.js';
-import areaHandler, { AREA_EVENT_TYPES } from './AreaHandler.js';
-import globalEventManager, { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager.js';
-import dragStateManager, { DRAG_STATE_TYPES, dragStateActions } from './DragStateManager.js';
+import { eventBus } from '../eventBus';
+import { panelHandler, PANEL_EVENT_TYPES } from './PanelHandler';
+import tabPageHandler, { TABPAGE_EVENT_TYPES } from './TabPageHandler';
+import areaHandler, { AREA_EVENT_TYPES } from './AreaHandler';
+import globalEventManager, { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager';
+import dragStateManager, { DRAG_STATE_TYPES, dragStateActions } from './DragStateManager';
 
 // 测试配置
 export const TEST_CONFIG = {
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/PanelHandler.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/PanelHandler.js
index 5587b51..1b6d8d0 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/PanelHandler.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/PanelHandler.js
@@ -1,4 +1,4 @@
-import { emitEvent, onEvent, onceEvent, registerHandler, unregisterHandler, getHandlerSnapshot } from '../eventBus.js'
+import { emitEvent, onEvent, onceEvent, registerHandler, unregisterHandler, getHandlerSnapshot } from '../eventBus'
 import { nanoid } from 'nanoid'
 
 // Panel事件类型常量
@@ -788,8 +788,28 @@ class PanelEventHandler {
   }
 }
 
+// 单例实例变量
+let panelHandler = null;
+
+/**
+ * 确保单例实例存在
+ * @returns {PanelEventHandler} PanelEventHandler实例
+ */
+function ensureInstance() {
+  if (!panelHandler) {
+    panelHandler = new PanelEventHandler();
+  }
+  return panelHandler;
+}
+
+// 导出单例实例访问方法
+export const getPanelHandler = ensureInstance;
+
 // 创建全局Panel事件处理器实例
-export const panelHandler = new PanelEventHandler()
+const panelHandlerInstance = ensureInstance();
+
+// 导出事件处理器实例
+export { panelHandlerInstance as panelHandler };
 
 // 便捷的操作函数
 export const panelActions = {
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/TabPageHandler.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/TabPageHandler.js
index 74dd850..e52a16b 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/TabPageHandler.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/TabPageHandler.js
@@ -3,7 +3,7 @@
  * 专门处理TabPage相关的所有事件，包括标签页拖拽、切换、关闭、激活等
  */
 
-import { eventBus } from '../eventBus.js';
+import { eventBus } from '../eventBus';
 
 // TabPage事件类型常量
 export const TABPAGE_EVENT_TYPES = {
@@ -577,8 +577,19 @@ class TabPageEventHandler {
   }
 }
 
-// 创建单例实例
-const tabPageHandler = new TabPageEventHandler();
+// 单例实例变量
+let tabPageHandler = null;
+
+/**
+ * 确保单例实例存在
+ * @returns {TabPageEventHandler} TabPageEventHandler实例
+ */
+function ensureInstance() {
+  if (!tabPageHandler) {
+    tabPageHandler = new TabPageEventHandler();
+  }
+  return tabPageHandler;
+}
 
 // TabPage便捷操作函数
 export const tabPageActions = {
@@ -678,7 +689,8 @@ export const tabPageActions = {
    * @param {Object} updates - 状态更新
    */
   updateState: (tabPageId, updates) => {
-    tabPageHandler.tabPageStateManager.updateState(tabPageId, updates);
+    const instance = ensureInstance();
+    instance.tabPageStateManager.updateState(tabPageId, updates);
   },
 
   /**
@@ -700,7 +712,10 @@ export const tabPageActions = {
 };
 
 // 导出事件处理器和相关API
-export default tabPageHandler;
+export default {
+  getInstance: ensureInstance,
+  actions: tabPageActions
+};
 
 // 便利的TabPage拖拽处理函数
 export const triggerTabPageDrag = {