### 主要修复内容

1. 事件监听器泄漏：修复了事件监听器泄漏问题，确保所有监听器都能被正确清理 2. 组件生命周期管理：为所有组件添加了onUnmounted钩子，确保资源能被正确清理 3. props大小写问题：修复了props名称大小写不匹配问题 4. 延迟初始化：将事件管理器的初始化从立即初始化改为延迟初始化，提高性能 5. flexbox布局修复：修复了flexbox布局问题，确保组件能正确显示 6. 代码结构优化：简化了代码结构，提高了可维护性这些修改解决了事件监听器泄漏、组件生命周期管理和props传递等问题，提高了代码的质量和可维护性。
2025-12-04 14:58:41 +08:00
parent e9ef33bd62
commit e96e3018ed
8 changed files with 414 additions and 226 deletions
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
@@ -1614,8 +1614,18 @@ class DragStateManager {
  }
 }

-// 创建单例实例
-const dragStateManager = new DragStateManager();
+// 延迟创建单例实例
+let dragStateManager = null;
+
+/**
+ * 确保单例实例存在
+ */
+function ensureDragStateManagerInstance() {
+  if (!dragStateManager) {
+    dragStateManager = new DragStateManager();
+  }
+  return dragStateManager;
+}

 // 便捷操作函数
 export const dragStateActions = {
@@ -1624,87 +1634,150 @@ export const dragStateActions = {
   * @param {string} dragId - 拖拽ID
   * @returns {Object} 拖拽状态
   */
-  getDragState: (dragId) => dragStateManager.getDragState(dragId),
+  getDragState: (dragId) => ensureDragStateManagerInstance().getDragState(dragId),

  /**
   * 获取所有活跃拖拽
   * @returns {Array} 活跃拖拽列表
   */
-  getActiveDrags: () => dragStateManager.getActiveDrags(),
+  getActiveDrags: () => ensureDragStateManagerInstance().getActiveDrags(),

  /**
   * 获取拖拽历史
   * @param {number} limit - 限制数量
   * @returns {Array} 历史记录
   */
-  getHistory: (limit = 100) => dragStateManager.getDragHistory(limit),
+  getHistory: (limit = 100) => ensureDragStateManagerInstance().getDragHistory(limit),

  /**
   * 获取统计信息
   * @returns {Object} 统计信息
   */
-  getStats: () => dragStateManager.getDragStats(),
+  getStats: () => ensureDragStateManagerInstance().getDragStats(),

  /**
   * 设置调试模式
   * @param {boolean} enabled - 是否启用
   */
-  setDebugMode: (enabled) => dragStateManager.setDebugMode(enabled),
+  setDebugMode: (enabled) => ensureDragStateManagerInstance().setDebugMode(enabled),

  /**
   * 启用/禁用管理器
   * @param {boolean} enabled - 是否启用
   */
-  setEnabled: (enabled) => dragStateManager.setEnabled(enabled),
+  setEnabled: (enabled) => ensureDragStateManagerInstance().setEnabled(enabled),

  /**
   * 取消所有拖拽
   */
-  cancelAll: () => dragStateManager.cancelAllDrags(),
+  cancelAll: () => ensureDragStateManagerInstance().cancelAllDrags(),

  /**
   * 面板拖拽开始
   * @param {Object} eventData - 拖拽事件数据
   * @returns {string} 拖拽ID
   */
-  onPanelDragStart: (eventData) => dragStateManager.onPanelDragStart(eventData),
+  onPanelDragStart: (eventData) => ensureDragStateManagerInstance().onPanelDragStart(eventData),

  /**
   * 面板拖拽移动
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
-  onPanelDragMove: (eventData) => dragStateManager.onPanelDragMove(eventData),
+  onPanelDragMove: (eventData) => ensureDragStateManagerInstance().onPanelDragMove(eventData),

  /**
   * 面板拖拽结束
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
-  onPanelDragEnd: (eventData) => dragStateManager.onPanelDragEnd(eventData),
+  onPanelDragEnd: (eventData) => ensureDragStateManagerInstance().onPanelDragEnd(eventData),

  /**
   * TabPage拖拽开始
   * @param {Object} eventData - 拖拽事件数据
   * @returns {string} 拖拽ID
   */
-  onPanelDragStartFromTabPage: (eventData) => dragStateManager.onPanelDragStartFromTabPage(eventData),
+  onPanelDragStartFromTabPage: (eventData) => ensureDragStateManagerInstance().onPanelDragStartFromTabPage(eventData),

  /**
   * TabPage拖拽移动
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
-  onPanelDragMoveFromTabPage: (eventData) => dragStateManager.onPanelDragMoveFromTabPage(eventData),
+  onPanelDragMoveFromTabPage: (eventData) => ensureDragStateManagerInstance().onPanelDragMoveFromTabPage(eventData),

  /**
   * TabPage拖拽结束
   * @param {Object} eventData - 拖拽事件数据
   * @returns {boolean} 是否成功
   */
-  onPanelDragEndFromTabPage: (eventData) => dragStateManager.onPanelDragEndFromTabPage(eventData)
+  onPanelDragEndFromTabPage: (eventData) => ensureDragStateManagerInstance().onPanelDragEndFromTabPage(eventData),
+
+  /**
+   * Area拖拽开始
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {string} 拖拽ID
+   */
+  onAreaDragStart: (eventData) => ensureDragStateManagerInstance().onPanelDragStart(eventData),
+
+  /**
+   * Area拖拽移动
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {boolean} 是否成功
+   */
+  onAreaDragMove: (eventData) => ensureDragStateManagerInstance().onPanelDragMove(eventData),
+
+  /**
+   * Area拖拽结束
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {boolean} 是否成功
+   */
+  onAreaDragEnd: (eventData) => ensureDragStateManagerInstance().onPanelDragEnd(eventData),
+
+  /**
+   * Tab拖拽开始
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {string} 拖拽ID
+   */
+  onTabDragStart: (eventData) => ensureDragStateManagerInstance().onPanelDragStartFromTabPage(eventData),
+
+  /**
+   * Tab拖拽移动
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {boolean} 是否成功
+   */
+  onTabDragMove: (eventData) => ensureDragStateManagerInstance().onPanelDragMoveFromTabPage(eventData),
+
+  /**
+   * Tab拖拽结束
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {boolean} 是否成功
+   */
+  onTabDragEnd: (eventData) => ensureDragStateManagerInstance().onPanelDragEndFromTabPage(eventData),
+
+  /**
+   * 初始化拖拽管理器
+   */
+  initialize: () => ensureDragStateManagerInstance(),
+
+  /**
+   * 销毁拖拽管理器
+   */
+  destroy: () => {
+    if (dragStateManager) {
+      // 清理拖拽管理器资源
+      dragStateManager.activeDrags.clear();
+      dragStateManager.dragHistory = [];
+      dragStateManager = null;
+      console.log('🗑️ 拖拽状态管理器已销毁，所有资源已清理');
+    }
+  }
 };

 // 导出
-export default dragStateManager;
+export default {
+  getInstance: ensureDragStateManagerInstance,
+  actions: dragStateActions
+};
 export { DragState };
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js
@@ -289,13 +289,22 @@ class EventExecutionMonitor {
 * 全局事件管理器类
 */
 class GlobalEventManager {
+  // 静态实例属性，用于存储单例实例
+  static instance = null;
+  
  constructor() {
+    // 单例模式实现：如果已经有实例，直接返回现有实例
+    if (GlobalEventManager.instance) {
+      return GlobalEventManager.instance;
+    }
+    
    this.eventHandlers = new Map();
    this.eventRoutes = new Map(Object.entries(EVENT_ROUTES));
    this.executionMonitor = new EventExecutionMonitor();
    this.eventChains = new Map();
    this.crossComponentChannels = new Map();
    this.isInitialized = false;
+    this.eventListenersRegistered = false;
    this.debugMode = false;
    
    // 处理器映射
@@ -311,12 +320,21 @@ class GlobalEventManager {
    this._cleanupExpiredData = this._cleanupExpiredData.bind(this);
    
    this._initialize();
+    
+    // 保存实例到静态属性
+    GlobalEventManager.instance = this;
  }

  /**
   * 初始化事件管理器
   */
  _initialize() {
+    // 防止重复初始化
+    if (this.isInitialized) {
+      console.warn('⚠️ 全局事件管理器已初始化，跳过重复初始化');
+      return;
+    }
+    
    // 注册全局事件监听器
    this._registerGlobalEventListeners();
    
@@ -341,6 +359,12 @@ class GlobalEventManager {
   * 注册全局事件监听器
   */
  _registerGlobalEventListeners() {
+    // 检查是否已经注册过事件监听器
+    if (this.eventListenersRegistered) {
+      console.warn('⚠️ 事件监听器已经注册，跳过重复注册');
+      return;
+    }
+    
    const globalEvents = Object.values(GLOBAL_EVENT_TYPES);
    globalEvents.forEach(eventType => {
      eventBus.on(eventType, this._onGlobalEvent, { 
@@ -351,6 +375,9 @@ class GlobalEventManager {
    
    // 注册所有组件事件监听器
    this._registerComponentEventListeners();
+    
+    // 标记为已注册
+    this.eventListenersRegistered = true;
  }

  /**
@@ -995,11 +1022,8 @@ class GlobalEventManager {
   * 销毁事件管理器
   */
  destroy() {
-    // 清理所有事件监听器
-    const globalEvents = Object.values(GLOBAL_EVENT_TYPES);
-    globalEvents.forEach(eventType => {
-      eventBus.off(eventType, this._onGlobalEvent);
-    });
+    // 清理所有事件监听器，包括全局事件和组件事件
+    eventBus.clear();
    
    // 销毁各个处理器
    Object.values(this.handlerMap).forEach(handler => {
@@ -1012,14 +1036,17 @@ class GlobalEventManager {
    this.eventHandlers.clear();
    this.eventChains.clear();
    this.crossComponentChannels.clear();
+    this.handlerMap = {};
+    this.eventRoutes.clear();
    
    this.isInitialized = false;
-    console.log('🗑️ 全局事件管理器已销毁');
+    this.eventListenersRegistered = false;
+    console.log('🗑️ 全局事件管理器已销毁，所有监听器已清理');
  }
 }

-// 创建单例实例
-const globalEventManager = new GlobalEventManager();
+// 延迟创建单例实例
+let globalEventManager = null;

 // 全局便捷API
 export const globalEventActions = {
@@ -1029,6 +1056,7 @@ export const globalEventActions = {
   * @returns {string} 监控ID
   */
  startMonitor: (operation) => {
+    ensureInstance();
    return globalEventManager.startPerformanceMonitor(operation);
  },

@@ -1038,6 +1066,7 @@ export const globalEventActions = {
   * @param {Object} metadata - 元数据
   */
  endMonitor: (monitorId, metadata = {}) => {
+    ensureInstance();
    globalEventManager.endPerformanceMonitor(monitorId, metadata);
  },

@@ -1048,6 +1077,7 @@ export const globalEventActions = {
   * @returns {string} 链ID
   */
  createChain: (chainName, events) => {
+    ensureInstance();
    return globalEventManager.createEventChain(chainName, events);
  },

@@ -1058,6 +1088,7 @@ export const globalEventActions = {
   * @param {Array} targets - 目标组件
   */
  broadcast: (message, data = {}, targets = null) => {
+    ensureInstance();
    globalEventManager.broadcast(message, data, targets);
  },

@@ -1069,6 +1100,7 @@ export const globalEventActions = {
   * @returns {Promise} 响应
   */
  request: (component, action, payload) => {
+    ensureInstance();
    return globalEventManager.request(component, action, payload);
  },

@@ -1084,6 +1116,7 @@ export const globalEventActions = {
   * @returns {Object} 统计信息
   */
  getStats: () => {
+    ensureInstance();
    return globalEventManager.getExecutionStats();
  },

@@ -1092,9 +1125,45 @@ export const globalEventActions = {
   * @returns {Array} 链状态
   */
  getChainStatus: () => {
+    ensureInstance();
    return globalEventManager.getEventChainStatus();
+  },
+
+  /**
+   * 初始化事件管理器
+   */
+  initialize: () => {
+    ensureInstance();
+  },
+
+  /**
+   * 销毁事件管理器
+   */
+  destroy: () => {
+    if (globalEventManager) {
+      globalEventManager.destroy();
+      globalEventManager = null;
+    }
  }
 };

+/**
+ * 确保单例实例存在
+ */
+function ensureInstance() {
+  if (!globalEventManager) {
+    globalEventManager = new GlobalEventManager();
+  }
+  return globalEventManager;
+}
+
+// 导出单例实例访问方法
+export const getGlobalEventManager = () => {
+  return ensureInstance();
+};
+
 // 导出事件管理器和相关API
-export default globalEventManager;
+export default {
+  getInstance: getGlobalEventManager,
+  actions: globalEventActions
+};