解决事件泄漏问题

AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/AreaHandler.js

@@ -3,9 +3,9 @@
  * 专门处理Area相关的所有事件，包括浮动区域管理、拖拽、停靠、合并等
  */
 
-import { eventBus } from '../eventBus';
+import { eventBus, EVENT_TYPES } from '../eventBus';
 
-// Area事件类型常量
+// Area事件类型常量（仅包含EVENT_TYPES中没有的）
 export const AREA_EVENT_TYPES = {
   // 基础事件
   AREA_CREATED: 'area.created',
@@ -23,16 +23,8 @@ export const AREA_EVENT_TYPES = {
   AREA_RESTORE: 'area.restore',
   AREA_COLLAPSE: 'area.collapse',
   AREA_EXPAND: 'area.expand',
-  AREA_CLOSE: 'area.close',
   AREA_TOGGLE_TOOLBAR: 'area.toggleToolbar',
   
-  // 拖拽相关
-  AREA_DRAG_START: 'area.drag.start',
-  AREA_DRAG_MOVE: 'area.drag.move',
-  AREA_DRAG_END: 'area.drag.end',
-  AREA_DRAG_OVER: 'area.drag.over',
-  AREA_DRAG_LEAVE: 'area.drag.leave',
-  
   // 停靠相关
   AREA_DOCK_CENTER: 'area.dock.center',
   AREA_DOCK_EDGE: 'area.dock.edge',
@@ -759,12 +751,36 @@ class AreaEventHandler {
    * 注册事件监听器
    */
   _registerEventListeners() {
-    const events = Object.values(AREA_EVENT_TYPES);
-    events.forEach(eventType => {
+    // 监听 EVENT_TYPES 中的事件
+    const eventTypes = [
+      EVENT_TYPES.AREA_DRAG_START,
+      EVENT_TYPES.AREA_DRAG_MOVE,
+      EVENT_TYPES.AREA_DRAG_END,
+      EVENT_TYPES.AREA_DRAG_OVER,
+      EVENT_TYPES.AREA_DRAG_LEAVE,
+      EVENT_TYPES.AREA_CLOSE,
+      EVENT_TYPES.AREA_POSITION_UPDATE,
+      EVENT_TYPES.AREA_PANEL_CLOSED
+    ];
+    
+    eventTypes.forEach(eventType => {
       const listener = this._onAreaEvent;
       eventBus.on(eventType, listener, { 
         priority: 1, 
-        deduplication: { type: 'TTL_BASED', ttl: 100 } 
+        deduplication: { type: 'TTL_BASED', ttl: 100 },
+        componentId: 'area-handler'
+      });
+      this.areaListeners.set(eventType, listener);
+    });
+    
+    // 监听 AREA_EVENT_TYPES 中的事件
+    const areaEventTypes = Object.values(AREA_EVENT_TYPES);
+    areaEventTypes.forEach(eventType => {
+      const listener = this._onAreaEvent;
+      eventBus.on(eventType, listener, { 
+        priority: 1, 
+        deduplication: { type: 'TTL_BASED', ttl: 100 },
+        componentId: 'area-handler'
       });
       this.areaListeners.set(eventType, listener);
     });
@@ -775,17 +791,17 @@ class AreaEventHandler {
    * @param {Object} data - 事件数据
    */
   async _onAreaEvent(data) {
-    const { eventType } = data;
+    const eventType = data.eventType;
     
     try {
       switch (eventType) {
-        case AREA_EVENT_TYPES.AREA_DRAG_START:
+        case EVENT_TYPES.AREA_DRAG_START:
           await this._handleAreaDragStart(data);
           break;
-        case AREA_EVENT_TYPES.AREA_DRAG_MOVE:
+        case EVENT_TYPES.AREA_DRAG_MOVE:
           await this._handleAreaDragMove(data);
           break;
-        case AREA_EVENT_TYPES.AREA_DRAG_END:
+        case EVENT_TYPES.AREA_DRAG_END:
           await this._handleAreaDragEnd(data);
           break;
         case AREA_EVENT_TYPES.AREA_DOCK_CENTER:
@@ -806,13 +822,15 @@ class AreaEventHandler {
         case AREA_EVENT_TYPES.AREA_FLOATING_CREATE:
           await this._handleFloatingAreaCreate(data);
           break;
+        case AREA_EVENT_TYPES.AREA_ZINDEX_MANAGEMENT:
+          await this._handleAreaZIndexManagement(data);
+          break;
         default:
           // 记录其他事件但不处理
-          console.log(`📍 Area事件处理器: ${eventType}`, data);
+          console.log(`📍 Area事件处理器: ${eventType || 'unknown'}`, data);
       }
     } catch (error) {
       console.error(`❌ Area事件处理错误 (${eventType}):`, error);
-      eventBus.recordError(`areaHandler_${eventType}`, error);
     }
   }
 
@@ -884,7 +902,7 @@ class AreaEventHandler {
    * @param {Object} data - 事件数据
    */
   async _handleAreaDragEnd(data) {
-    const { areaId, event } = data;
+    const { areaId, event, finalPosition, left, top } = data;
     const dragState = this.areaStateManager.getDragState(areaId);
     
     if (!dragState) return;
@@ -896,7 +914,18 @@ class AreaEventHandler {
     // 清理拖拽状态
     dragState.isDragging = false;
     dragState.endTime = Date.now();
-    dragState.endPosition = { x: event.clientX, y: event.clientY };
+    
+    // 使用 finalPosition 或 left/top 作为结束位置
+    if (finalPosition) {
+      dragState.endPosition = { x: finalPosition.x, y: finalPosition.y };
+    } else if (left !== undefined && top !== undefined) {
+      dragState.endPosition = { x: left, y: top };
+    } else if (event) {
+      dragState.endPosition = { x: event.clientX, y: event.clientY };
+    } else {
+      dragState.endPosition = dragState.startPosition;
+    }
+    
     dragState.totalDistance = distance;
     dragState.duration = dragDuration;
     
@@ -1126,6 +1155,50 @@ class AreaEventHandler {
     });
   }
 
+  /**
+   * 处理Area层级管理事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaZIndexManagement(data) {
+    const { areaId, action, zIndex, reason } = data;
+    
+    try {
+      switch (action) {
+        case 'activate':
+          // 激活Area时更新z-index
+          this.activeAreas.add(areaId);
+          this.areaStateManager.updateState(areaId, {
+            lastActivatedAt: Date.now()
+          });
+          break;
+          
+        case 'create_floating':
+          // 创建浮动Area时设置z-index
+          if (zIndex) {
+            this.areaStateManager.updateState(areaId, {
+              zIndex,
+              lastActivatedAt: Date.now()
+            });
+          }
+          break;
+          
+        case 'update':
+          // 更新z-index
+          if (zIndex) {
+            this.areaStateManager.updateState(areaId, {
+              zIndex
+            });
+          }
+          break;
+          
+        default:
+          console.log(`📍 Area层级管理: ${action}`, data);
+      }
+    } catch (error) {
+      console.error(`❌ Area层级管理错误 (${action}):`, error);
+    }
+  }
+
   /**
    * 启动内存保护机制
    */
@@ -1233,6 +1306,12 @@ class AreaEventHandler {
 // 创建单例实例
 const areaHandler = new AreaEventHandler();
 
+/**
+ * 获取Area事件处理器实例
+ * @returns {AreaEventHandler} AreaEventHandler实例
+ */
+export const getAreaHandler = () => areaHandler;
+
 // Area便捷操作函数
 export const areaActions = {
   /**