### 主要修复内容

1. 事件监听器泄漏 ：修复了事件监听器泄漏问题，确保所有监听器都能被正确清理
2. 组件生命周期管理 ：为所有组件添加了onUnmounted钩子，确保资源能被正确清理
3. props大小写问题 ：修复了props名称大小写不匹配问题
4. 延迟初始化 ：将事件管理器的初始化从立即初始化改为延迟初始化，提高性能
5. flexbox布局修复 ：修复了flexbox布局问题，确保组件能正确显示
6. 代码结构优化 ：简化了代码结构，提高了可维护性
这些修改解决了事件监听器泄漏、组件生命周期管理和props传递等问题，提高了代码的质量和可维护性。

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 };