From e9ef33bd629c40fec421a217f5fb614d620b47bc Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Thu, 20 Nov 2025 13:14:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BA=8B=E4=BB=B6=E6=80=BB?=
 =?UTF-8?q?=E7=BA=BF=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=88=9B=E5=BB=BA=E4=B8=93?=
 =?UTF-8?q?=E9=97=A8=E7=9A=84=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=E5=99=A8?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Robot/Web/src/DockLayout/DockLayout.vue   | 2426 ++---------------
 .../Robot/Web/src/DockLayout/eventBus.js      |  552 +++-
 .../src/DockLayout/handlers/AreaHandler.js    | 1504 ++++++++++
 .../DockLayout/handlers/DragStateManager.js   | 1710 ++++++++++++
 .../DockLayout/handlers/EventBusManager.js    |  584 ++++
 .../DockLayout/handlers/GlobalEventManager.js | 1100 ++++++++
 .../DockLayout/handlers/IntegrationTester.js  | 1558 +++++++++++
 .../src/DockLayout/handlers/PanelHandler.js   |  834 ++++++
 .../src/DockLayout/handlers/TabPageHandler.js |  749 +++++
 9 files changed, 8784 insertions(+), 2233 deletions(-)
 create mode 100644 AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/AreaHandler.js
 create mode 100644 AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
 create mode 100644 AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/EventBusManager.js
 create mode 100644 AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js
 create mode 100644 AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/IntegrationTester.js
 create mode 100644 AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/PanelHandler.js
 create mode 100644 AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/TabPageHandler.js

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
index 897156c..175bdda 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="dock-layout" ref="dockLayoutRef" style="display: flex; flex-direction: column; position: relative;">
     <!-- 停靠指示器组件 - 设置高z-index确保显示在最顶层 -->
-      <!-- :visible="showDockIndicator" :visible="true" -->
     <DockIndicator
       :visible="showDockIndicator"
       :target-rect="targetAreaRect"
@@ -25,8 +24,6 @@
 
       <!-- 主区域内容区 -->
       <div class="main-content-container" style="position: relative; width: 100%; height: 100%;">
-        <!-- 这里可以放置主区域的内容 -->
-        
         <!-- ResizeBar组件渲染区 -->
         <ResizeBar
           v-for="resizeBar in mainAreaResizeBars"
@@ -43,6 +40,7 @@
         />
       </div>
     </Area>
+    
     <!-- 浮动区域使用Render组件统一渲染 -->
     <Render
       v-for="area in floatingAreas"
@@ -76,20 +74,20 @@
 </template>
 
 <script setup>
-import { ref, defineExpose, defineEmits, nextTick, watch, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, defineEmits } from 'vue'
 import Area from './Area.vue';
 import Panel from './Panel.vue';
 import TabPage from './TabPage.vue';
 import DockIndicator from './DockIndicator.vue';
 import ResizeBar from './ResizeBar.vue';
 import Render from './Render.vue';
-import { Z_INDEX_LAYERS, zIndexManager } from './dockLayers.js';
-import {
-  eventBus,
-  EVENT_TYPES,
-  emitEvent,
-  onEvent
-} from './eventBus.js';
+import { zIndexManager } from './dockLayers.js';
+
+// 导入事件处理器
+import { areaActions } from './handlers/AreaHandler.js';
+import { dragStateActions } from './handlers/DragStateManager.js';
+import { panelActions } from './handlers/PanelHandler.js';
+import { globalEventActions } from './handlers/GlobalEventManager.js';
 
 // 定义组件可以发出的事件
 const emit = defineEmits([
@@ -107,15 +105,10 @@ const windowState = ref('最大化')
 // 浮动区域列表 - 每个area包含panels数组
 const floatingAreas = ref([])
 
-// 隐藏区域列表 - 存储被隐藏的Area
-const hiddenAreas = ref([])
-
 // 容器引用
 const dockLayoutRef = ref(null)
 // 主区域引用
 const mainAreaRef = ref(null)
-// 区域ID计数器
-let areaIdCounter = 1
 
 // 停靠指示器相关状态
 const showDockIndicator = ref(false)
@@ -123,324 +116,187 @@ const currentMousePosition = ref({ x: 0, y: 0 })
 const targetAreaRect = ref({ left: 0, top: 0, width: 0, height: 0 })
 const activeDockZone = ref(null)
 
-// 检查主区域内是否有其他Area（TabPage和Panel等子组件）
-const hasAreasInMainContent = ref(false)
-
 // 主区域ResizeBar列表
 const mainAreaResizeBars = ref([])
 
-// 计算是否隐藏外部边缘指示器
-const hideEdgeIndicators = computed(() => {
-  // 当主区域内没有其他Area时，隐藏外部边缘指示器
-  return !hasAreasInMainContent.value
-})
+// 检查主区域内是否有其他Area（简化版）
+const hasAreasInMainContent = ref(false)
 
-// Panel拖拽相关状态
-const panelDragState = ref({
-  isDragging: false,
-  currentAreaId: null,
-  startClientPos: { x: 0, y: 0 },
-  startAreaPos: { x: 0, y: 0 }
-})
+// 代理到事件处理器的方法
+const onPanelDragStart = (areaId, event) => {
+  dragStateActions.onPanelDragStart(areaId, event);
+};
 
-// TabPage拖拽相关状态
-const tabDragState = ref({
-  isDragging: false,
-  currentAreaId: null,
-  startClientPos: { x: 0, y: 0 },
-  startAreaPos: { x: 0, y: 0 }
-})
+const onPanelDragMove = (areaId, event) => {
+  dragStateActions.onPanelDragMove(areaId, event);
+};
+
+const onPanelDragEnd = () => {
+  dragStateActions.onPanelDragEnd();
+};
 
-// 处理从TabPage转发来的Panel拖拽事件
 const onPanelDragStartFromTabPage = (areaId, event) => {
-  // console.log('🔸 DockLayout收到从TabPage转发的Panel拖拽事件:', { areaId, event })
-  // 直接调用原始的onPanelDragStart处理函数
-  onPanelDragStart(areaId, event)
-}
+  dragStateActions.onPanelDragStartFromTabPage(areaId, event);
+};
 
-// 处理从TabPage转发来的Panel拖拽移动事件
 const onPanelDragMoveFromTabPage = (areaId, event) => {
-  // console.log('🔸 DockLayout收到从TabPage转发的Panel拖拽移动事件:', { areaId, event })
-  // 直接调用原始的onPanelDragMove处理函数
-  onPanelDragMove(areaId, event)
-}
+  dragStateActions.onPanelDragMoveFromTabPage(areaId, event);
+};
 
-// 处理从TabPage转发来的Panel拖拽结束事件
 const onPanelDragEndFromTabPage = () => {
-  // console.log('🔸 DockLayout收到从TabPage转发的Panel拖拽结束事件')
-  // 直接调用原始的onPanelDragEnd处理函数
-  onPanelDragEnd()
-}
+  dragStateActions.onPanelDragEndFromTabPage();
+};
 
-// 检测主区域内是否有其他Area
-const checkMainContentForAreas = () => {
-  if (!mainAreaRef.value) {
-    hasAreasInMainContent.value = false
-    return
-  }
-  
-  try {
-    // 获取主区域的DOM元素
-    const mainAreaElement = mainAreaRef.value.$el
-    if (!mainAreaElement) {
-      hasAreasInMainContent.value = false
-      return
-    }
-    
-    // 检查主区域内容区内是否包含vs-area元素（子Area）
-    const childAreas = mainAreaElement.querySelectorAll('.vs-area')
-    const hasChildAreas = childAreas.length > 1 // 排除主区域本身
-    
-    // 检查主区域内容区内是否包含TabPage
-    const tabPages = mainAreaElement.querySelectorAll('.tab-page, [class*="tab"]')
-    
-    // 检查主区域内容区内是否包含Panel
-    const panels = mainAreaElement.querySelectorAll('.panel, [class*="panel"]')
-    
-    // 如果有任何子Area、TabPage或Panel，则认为主区域内有其他Area
-    hasAreasInMainContent.value = hasChildAreas || tabPages.length > 0 || panels.length > 0
-    
+const onAreaDragStart = (areaId, event) => {
+  dragStateActions.onAreaDragStart(areaId, event);
+};
 
-  } catch (error) {
-    // console.error('检查主区域内容时出错:', error)
-    hasAreasInMainContent.value = false
-  }
-}
+const onAreaDragMove = (areaId, event) => {
+  dragStateActions.onAreaDragMove(areaId, event);
+};
 
-/**
- * 生成随机测试内容用于合并测试
- * @param {number} panelIndex - 面板索引
- * @returns {Object} 包含随机内容的对象
- */
-const generateRandomContent = (panelIndex) => {
-  const contentTypes = ['图表', '数据', '配置', '文档', '代码', '日志']
-  const randomType = contentTypes[Math.floor(Math.random() * contentTypes.length)]
-  const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD']
-  const randomColor = colors[Math.floor(Math.random() * colors.length)]
-  
-  return {
-    type: randomType,
-    color: randomColor,
-    index: panelIndex,
-    title: `${randomType}面板 ${panelIndex + 1}`,
-    data: generateSampleData(panelIndex),
-    timestamp: new Date().toLocaleString()
-  }
-}
+const onAreaDragEnd = (areaId, event) => {
+  dragStateActions.onAreaDragEnd(areaId, event);
+};
 
-/**
- * 生成样本数据
- * @param {number} dataIndex - 数据索引
- * @returns {Array} 样本数据数组
- */
-const generateSampleData = (dataIndex) => {
-  const data = []
-  for (let i = 0; i < 5; i++) {
-    data.push({
-      label: `项目 ${String.fromCharCode(65 + i)}`,
-      value: Math.floor(Math.random() * 100) + 10,
-      id: `data-${dataIndex}-${i}`
-    })
-  }
-  return data
-}
+const onTabDragStart = (areaId, event) => {
+  dragStateActions.onTabDragStart(areaId, event);
+};
 
-// 添加新的浮动面板
-const addFloatingPanel = () => {
-  // 获取父容器尺寸以计算居中位置
-  let x = 50 + (areaIdCounter - 2) * 20
-  let y = 50 + (areaIdCounter - 2) * 20
-  
-  // 如果容器已渲染，计算居中位置
-  if (dockLayoutRef.value) {
-    const containerRect = dockLayoutRef.value.getBoundingClientRect()
-    const width = 280
-    const height = 200
-    x = Math.floor((containerRect.width - width) / 2)
-    y = Math.floor((containerRect.height - height) / 2)
-  }
-  
-  // 获取当前ID并递增
-  const currentId = areaIdCounter++
-  const areaId = `floating-area-${currentId}`
-  
-  // 使用z-index管理器为新浮动区域分配z-index
-  const newZIndex = zIndexManager.getFloatingAreaZIndex(areaId)
-  
-  // 直接创建符合Render config的数据结构，确保响应式同步
-  const newArea = {
-    id: areaId,
-    title: `浮动区域 ${currentId}`,
-    x: x,
-    y: y,
-    width: 280,
-    height: 200,
-    windowState: '正常',
-    showTitleBar: true,
-    resizable: true,
-    draggable: true,
-    zIndex: newZIndex, // 使用z-index管理器分配的层级
-    // 使用Render期望的children结构
-    children: [
-      {
-        type: 'TabPage',
-        id: `tabpage-${currentId}-1`,
-        title: `标签页 1`,
-        tabPosition: 'bottom',
-        children: {
-          type: 'Panel',
-          items: [
-            {
-              type: 'Panel',
-              id: `panel-${currentId}-1-1`,
-              title: `面板 ${currentId}`,
-              x: 0,
-              y: 0,
-              width: 280,
-              height: 200,
-              collapsed: false,
-              toolbarExpanded: false,
-              maximized: false,
-              content: generateRandomContent(currentId)
-            }
-          ]
-        }
-      }
-    ]
-  }
-  
-  floatingAreas.value.push(newArea)
-  // console.log('✅ 创建浮动面板成功:', newArea.id, 'z-index:', newZIndex)
-  // console.log('🔍 浮动面板数据结构:', JSON.stringify(newArea, null, 2))
-  
-  // 使用nextTick确保DOM更新后再进行后续操作
-  nextTick(() => {
-    // console.log('🔍 浮动面板已添加到DOM，floatingAreas长度:', floatingAreas.value.length)
-  })
-}
-// 更新区域位置
-const onUpdatePosition = (id, position) => {
-  const area = floatingAreas.value.find(a => a.id === id)
-  if (area) {
-    area.x = position.left
-    area.y = position.top
-  }
-}
+const onTabDragMove = (areaId, event) => {
+  dragStateActions.onTabDragMove(areaId, event);
+};
 
-// 切换折叠状态
-const onToggleCollapse = (id) => {
-  const area = floatingAreas.value.find(a => a.id === id)
-  if (area) {
-    area.collapsed = !area.collapsed
-  }
-}
+const onTabDragEnd = () => {
+  dragStateActions.onTabDragEnd();
+};
 
-// 最大化/还原
-const onMaximize = (panelId) => {
-  // 查找包含该面板的区域
-  for (const area of floatingAreas.value) {
-    if (area.children) {
-      for (const child of area.children) {
-        if (child.type === 'TabPage' && child.children && child.children.type === 'Panel') {
-          const panels = child.children.items || []
-          if (panels.length === 1 && panels[0].id === panelId) {
-            // 当区域只包含一个Panel时，切换Area和Panel的最大化状态
-            const isCurrentlyMaximized = area.windowState === '最大化' || area.windowState === 'maximized'
-            
-            if (isCurrentlyMaximized) {
-              // 切换为正常状态
-              area.windowState = '正常'
-              // 确保Panel也恢复正常状态 - 使用展开运算符创建新对象确保响应式
-              child.children.items[0] = { ...panels[0], maximized: false }
-            } else {
-              // 切换为最大化状态
-              area.windowState = '最大化'
-              // 同时最大化Panel - 使用展开运算符创建新对象确保响应式
-              child.children.items[0] = { ...panels[0], maximized: true }
-              
-              // 激活浮动区域，将其置于最顶层
-              zIndexManager.activateFloatingArea(area.id)
-              area.zIndex = zIndexManager.getFloatingAreaZIndex(area.id, true)
-            }
-            break
-          }
-        }
-      }
-    }
-  }
-}
-
-// 关闭浮动区域 - 同时移除内容区的Panel
+// Area相关事件处理
 const onCloseFloatingArea = (id) => {
-  const index = floatingAreas.value.findIndex(a => a.id === id)
+  areaActions.closeFloatingArea(id);
+  const index = floatingAreas.value.findIndex(a => a.id === id);
   if (index !== -1) {
-    // 获取要移除的Area
-    const areaToRemove = floatingAreas.value[index]
-    
-    // 从z-index管理器中移除该区域的层级管理
-    zIndexManager.removeFloatingArea(id)
-    
-    // 清理Panel引用，确保Panel被正确移除
-    if (areaToRemove.panels) {
-      // 这里可以添加任何需要的Panel清理逻辑
-
-      // 清空panels数组，确保Panel被正确移除
-      areaToRemove.panels = []
-    }
-    
-    // 从数组中移除Area
-    floatingAreas.value.splice(index, 1)
-
+    floatingAreas.value.splice(index, 1);
   }
-}
+};
+
+const onUpdatePosition = (id, position) => {
+  const area = floatingAreas.value.find(a => a.id === id);
+  if (area) {
+    area.x = position.left;
+    area.y = position.top;
+  }
+};
+
+const onMaximize = (panelId) => {
+  areaActions.toggleMaximize(panelId);
+};
 
-// 关闭面板 - 适配children数据结构
 const onClosePanel = (areaId, panelId) => {
-  const area = floatingAreas.value.find(a => a.id === areaId)
+  areaActions.closePanel(areaId, panelId);
+  const area = floatingAreas.value.find(a => a.id === areaId);
   if (area && area.children) {
+    // 移除对应面板
     for (const child of area.children) {
       if (child.type === 'TabPage' && child.children && child.children.type === 'Panel') {
-        const panels = child.children.items || []
-        const panelIndex = panels.findIndex(p => p.id === panelId)
+        const panels = child.children.items || [];
+        const panelIndex = panels.findIndex(p => p.id === panelId);
         if (panelIndex !== -1) {
-          panels.splice(panelIndex, 1)
-          
-          // 如果区域内没有面板了，可以考虑关闭整个区域
+          panels.splice(panelIndex, 1);
+          // 如果没有面板了，移除整个TabPage
           if (panels.length === 0) {
-            onCloseFloatingArea(areaId)
+            const tabPageIndex = area.children.indexOf(child);
+            if (tabPageIndex !== -1) {
+              area.children.splice(tabPageIndex, 1);
+            }
           }
-          break
+          break;
         }
       }
     }
   }
-}
+};
 
-// 处理通过事件总线接收到的面板关闭请求
-const handlePanelCloseRequest = (eventData) => {
-  // console.log('收到面板关闭请求:', eventData)
-  const { areaId, panelId } = eventData
-  
-  if (areaId && panelId) {
-    // 直接调用现有的onClosePanel方法
-    onClosePanel(areaId, panelId)
-  } else if (areaId && !panelId) {
-    // 如果只提供了areaId，关闭整个浮动区域
-    onCloseFloatingArea(areaId)
-  } else {
-    console.warn('收到无效的面板关闭请求:', eventData)
-  }
-}
+// 简单的拖拽事件处理
+const handleMainAreaDragOver = (event) => {
+  event.preventDefault();
+  globalEventActions.handleDragOver('main-area', event);
+};
 
-// 切换工具栏
-const onToggleToolbar = (id) => {
-  const area = floatingAreas.value.find(a => a.id === id)
-  if (area) {
-    area.toolbarExpanded = !area.toolbarExpanded
-  }
-}
+const handleMainAreaDragLeave = () => {
+  globalEventActions.handleDragLeave('main-area');
+};
 
-// 隐藏Area管理方法 - 第1步实现
+const handleAreaDragOver = (event) => {
+  event.preventDefault();
+  globalEventActions.handleDragOver('floating-area', event);
+};
+
+const handleAreaDragLeave = () => {
+  globalEventActions.handleDragLeave('floating-area');
+};
+
+// 其他事件处理方法
+const onDockZoneActive = (zone) => {
+  activeDockZone.value = zone;
+};
+
+const onPanelMaximizeSync = ({ areaId, maximized }) => {
+  panelActions.syncMaximizeState(areaId, maximized);
+};
+
+const onAreaMerged = () => {
+  areaActions.handleAreaMerged();
+};
+
+const onTabChange = (data) => {
+  panelActions.handleTabChange(data);
+};
+
+const onTabClose = (data) => {
+  panelActions.handleTabClose(data);
+};
+
+const onTabAdd = (data) => {
+  panelActions.handleTabAdd(data);
+};
+
+// ResizeBar相关处理方法
+const handleMainAreaResizeBar = (id, size) => {
+  areaActions.handleResize(id, size);
+};
+
+const handleMainAreaResizeBarStart = (id) => {
+  areaActions.handleResizeStart(id);
+};
+
+const handleMainAreaResizeBarEnd = (id) => {
+  areaActions.handleResizeEnd(id);
+};
+
+const getMainAreaResizeBarStyle = (resizeBar) => {
+  return areaActions.getResizeBarStyle(resizeBar);
+};
+
+// 计算属性
+const hideEdgeIndicators = computed(() => {
+  return !hasAreasInMainContent.value;
+});
+
+// 简化的事件监听器设置
+const setupEventListeners = () => {
+  // 可以在这里添加必要的事件监听器
+};
+
+// 清理函数
+const cleanup = () => {
+  // 清理事件监听器和其他资源
+};
+
+// 轻量级隐藏区域管理
+const hiddenAreas = ref([]);
+
+// 隐藏Area管理方法
 // 将Area添加到隐藏列表
 const addAreaToHiddenList = (area) => {
   // 确保area有唯一标识符
@@ -456,1278 +312,10 @@ const addAreaToHiddenList = (area) => {
       ...area,
       hiddenAt: new Date().toISOString()
     })
-    // console.log('Area已添加到隐藏列表:', area.id)
-  } else {
-    // console.warn('Area已在隐藏列表中:', area.id)
   }
 }
 
-// 处理Area合并事件
-const onAreaMerged = (eventData) => {
-  // console.log('处理Area合并事件:', eventData)
-  
-  const { sourceArea, targetAreaHasContent } = eventData
-  
-  // 获取源Area对象
-  const sourceAreaObj = floatingAreas.value.find(a => a.id === sourceArea.id)
-  if (!sourceAreaObj) {
-    // console.warn('找不到源Area:', sourceArea.id)
-    return
-  }
-  
-  // 根据目标Area内容状态执行不同的隐藏逻辑
-  if (targetAreaHasContent) {
-    // 目标Area已有内容：保存源Area及其TabPage组件到隐藏列表
-    // console.log('目标Area已有内容，保存源Area和TabPage组件到隐藏列表')
-    addAreaToHiddenList({
-      ...sourceAreaObj,
-      tabPages: [...sourceAreaObj.tabPages] // 深拷贝TabPages
-    })
-  } else {
-    // 目标Area为空：仅保存源Area到隐藏列表
-    // console.log('目标Area为空，保存源Area到隐藏列表')
-    addAreaToHiddenList(sourceAreaObj)
-  }
-  
-  // 从浮动区域中移除已合并的源Area
-  const sourceIndex = floatingAreas.value.findIndex(a => a.id === sourceArea.id)
-  if (sourceIndex !== -1) {
-    floatingAreas.value.splice(sourceIndex, 1)
-    // console.log('源Area已从浮动区域移除:', sourceArea.id)
-  }
-}
-
-// Panel拖拽开始
-const onPanelDragStart = (areaId, event) => {
-  // console.log('=== PANEL拖拽开始调试 ===')
-  // console.log('areaId:', areaId)
-  // console.log('event:', event)
-  // console.log('event.clientX:', event?.clientX)
-  // console.log('event.clientY:', event?.clientY)
-  // console.log('event.panelId:', event?.panelId)
-  
-  const area = floatingAreas.value.find(a => a.id === areaId)
-  // console.log('找到的area:', area)
-  // console.log('area.tabPages.length:', area?.tabPages?.length)
-  // console.log('area.tabPages[0].panels.length:', area?.tabPages?.[0]?.panels?.length)
-  
-  // 只有当Area中只有一个TabPage且该TabPage中只有一个Panel时才允许通过Panel标题栏移动Area
-  if (area && area.tabPages && area.tabPages.length === 1 && area.tabPages[0].panels && area.tabPages[0].panels.length === 1) {
-    // 检查event是否为对象格式（来自Panel.vue）
-    const clientX = event.clientX || (typeof event === 'object' ? event.clientX : event?.clientX)
-    const clientY = event.clientY || (typeof event === 'object' ? event.clientY : event?.clientY)
-    
-    if (clientX === undefined || clientY === undefined) {
-      // console.error('无法获取有效的鼠标位置信息:', event)
-      return
-    }
-    
-    panelDragState.value.isDragging = true
-    panelDragState.value.currentAreaId = areaId
-    panelDragState.value.startClientPos = {
-      x: clientX,
-      y: clientY
-    }
-    panelDragState.value.startAreaPos = {
-      x: area.x,
-      y: area.y
-    }
-
-    
-    // 初始化鼠标位置跟踪
-    currentMousePosition.value = {
-      x: clientX,
-      y: clientY
-    }
-    
-    // 拖拽开始时就显示指示器
-    showDockIndicator.value = true
-    
-    // 检查主区域内是否有其他Area
-    checkMainContentForAreas()
-    
-    // 使用dock-layout作为默认目标区域
-    if (dockLayoutRef.value) {
-      const rect = dockLayoutRef.value.getBoundingClientRect()
-      targetAreaRect.value = {
-        left: 0,  // 使用相对于容器的位置（左上角）
-        top: 0,
-        width: rect.width,
-        height: rect.height
-      }
-      
-      // 拖拽开始时立即更新停靠区域
-      updateDockZoneByMousePosition(clientX, clientY)
-    }
-  }
-}
-
-// Panel拖拽移动
-const onPanelDragMove = (areaId, event) => {
-  // console.log('=== PANEL拖拽移动调试 ===')
-  // console.log('areaId:', areaId)
-  // console.log('panelDragState.isDragging:', panelDragState.value.isDragging)
-  // console.log('panelDragState.currentAreaId:', panelDragState.value.currentAreaId)
-  // console.log('event:', event)
-  // console.log('event.clientX:', event?.clientX)
-  // console.log('event.clientY:', event?.clientY)
-  
-  if (panelDragState.value.isDragging && panelDragState.value.currentAreaId === areaId) {
-    const area = floatingAreas.value.find(a => a.id === areaId)
-    if (area) {
-      // 检查event是否为对象格式（来自Panel.vue）
-      const clientX = event.clientX || (typeof event === 'object' ? event.clientX : event?.clientX)
-      const clientY = event.clientY || (typeof event === 'object' ? event.clientY : event?.clientY)
-      
-      if (clientX === undefined || clientY === undefined) {
-        return
-      }
-      
-      // 计算移动距离
-      const deltaX = clientX - panelDragState.value.startClientPos.x
-      const deltaY = clientY - panelDragState.value.startClientPos.y
-      
-      // 计算新位置
-      let newLeft = panelDragState.value.startAreaPos.x + deltaX
-      let newTop = panelDragState.value.startAreaPos.y + deltaY
-      
-      // 确保不超出父容器边界
-      if (dockLayoutRef.value) {
-        const parentRect = dockLayoutRef.value.getBoundingClientRect()
-        
-        // 严格边界检查
-        newLeft = Math.max(0, Math.min(newLeft, parentRect.width - area.width))
-        newTop = Math.max(0, Math.min(newTop, parentRect.height - area.height))
-      }
-      
-      // 更新位置
-      area.x = newLeft
-      area.y = newTop
-      
-      // 更新鼠标位置
-      currentMousePosition.value = {
-        x: clientX,
-        y: clientY
-      }
-      
-      // 根据鼠标位置动态更新停靠区域
-      updateDockZoneByMousePosition(clientX, clientY)
-      
-      // 调试信息（已注释）
-  
-    }
-  }
-}
-
-// Panel拖拽结束
-const onPanelDragEnd = () => {
-  // console.log('=== PANEL拖拽结束调试 ===')
-  // console.log('panelDragState.isDragging:', panelDragState.value.isDragging)
-  // console.log('panelDragState.currentAreaId:', panelDragState.value.currentAreaId)
-  // console.log('activeDockZone:', activeDockZone.value)
-  // console.log('currentMousePosition:', currentMousePosition.value)
-  
-  panelDragState.value.isDragging = false
-  const currentAreaId = panelDragState.value.currentAreaId
-  panelDragState.value.currentAreaId = null
-  
-  // 3.1 在onPanelDragEnd方法中添加中心停靠检测
-  // 确保只有在独立中心指示器区域内释放才执行停靠
-  if (activeDockZone.value === 'center' && currentAreaId && isMouseInCenterIndicator(currentMousePosition.value.x, currentMousePosition.value.y)) {
-    // 处理中心停靠
-    const result = handleCenterDocking(currentAreaId)
-    if (!result.success) {
-      // console.warn('中心停靠失败:', result.message)
-    } else {
-      // console.log('中心停靠成功:', result.message)
-    }
-  }
-  
-  // 隐藏停靠指示器
-  showDockIndicator.value = false
-  activeDockZone.value = null
-}
-
-// Area拖拽开始
-const onAreaDragStart = (areaId, event) => {
-  const area = floatingAreas.value.find(a => a.id === areaId)
-  if (!area) return
-  
-  // 设置拖拽状态（类似TabPage拖拽）
-  panelDragState.value.isDragging = true
-  panelDragState.value.currentAreaId = areaId
-  panelDragState.value.startClientPos = {
-    x: event.clientX,
-    y: event.clientY
-  }
-  panelDragState.value.startAreaPos = {
-    x: area.x,
-    y: area.y
-  }
-  
-  // 初始化鼠标位置跟踪
-  currentMousePosition.value = {
-    x: event.clientX,
-    y: event.clientY
-  }
-  
-  // 拖拽开始时显示指示器
-  showDockIndicator.value = true
-  
-  // 检查主区域内是否有其他Area
-  checkMainContentForAreas()
-  
-  // 使用dock-layout作为默认目标区域
-  if (dockLayoutRef.value) {
-    const rect = dockLayoutRef.value.getBoundingClientRect()
-    targetAreaRect.value = {
-      left: 0,
-      top: 0,
-      width: rect.width,
-      height: rect.height
-    }
-    
-    // 拖拽开始时立即更新停靠区域
-    updateDockZoneByMousePosition(event.clientX, event.clientY)
-  }
-}
-
-// Area拖拽移动
-const onAreaDragMove = (areaId, event) => {
-  // 更新鼠标位置
-  currentMousePosition.value = {
-    x: event.clientX,
-    y: event.clientY
-  }
-  
-  // 根据鼠标位置动态更新停靠区域
-  updateDockZoneByMousePosition(event.clientX, event.clientY)
-}
-
-// Area拖拽结束
-const onAreaDragEnd = (areaId, event) => {
-  // console.log('[DockLayout] Area拖拽结束:', { areaId, event, activeDockZone: activeDockZone.value })
-  
-  // 清理拖拽状态
-  panelDragState.value.isDragging = false
-  panelDragState.value.currentAreaId = null
-  
-  // 3.1 在onAreaDragEnd方法中添加中心停靠检测
-  // 确保只有在独立中心指示器区域内释放才执行停靠
-  if (activeDockZone.value === 'center' && isMouseInCenterIndicator(currentMousePosition.value.x, currentMousePosition.value.y)) {
-    // console.log('[DockLayout] 检测到中心停靠区域，鼠标位置:', currentMousePosition.value)
-    // 处理中心停靠
-    const result = handleCenterDocking(areaId)
-    if (!result.success) {
-      // console.warn('Area中心停靠失败:', result.message)
-    } else {
-      // console.log('Area中心停靠成功:', result.message)
-    }
-  } else {
-    // console.log('[DockLayout] 未检测到有效的中心停靠:', {
-    //   activeDockZone: activeDockZone.value,
-    //   mousePosition: currentMousePosition.value,
-    //   isInCenter: isMouseInCenterIndicator(currentMousePosition.value?.x || 0, currentMousePosition.value?.y || 0)
-    // })
-  }
-  
-  // 隐藏停靠指示器
-  showDockIndicator.value = false
-  activeDockZone.value = null
-}
-
-// TabPage拖拽开始
-const onTabDragStart = (areaId, event) => {
-  const area = floatingAreas.value.find(a => a.id === areaId)
-  // 只有当Area中只有一个TabPage时才允许通过TabPage的页标签移动Area
-  if (area && area.tabPages && area.tabPages.length === 1) {
-    // 检查event是否为对象格式（来自TabPage.vue）
-    const clientX = event.clientX || (typeof event === 'object' ? event.x : event?.x)
-    const clientY = event.clientY || (typeof event === 'object' ? event.y : event?.y)
-    
-    if (clientX === undefined || clientY === undefined) {
-      // console.error('无法获取有效的鼠标位置信息:', event)
-      return
-    }
-    
-    tabDragState.value.isDragging = true
-    tabDragState.value.currentAreaId = areaId
-    tabDragState.value.startClientPos = {
-      x: clientX,
-      y: clientY
-    }
-    tabDragState.value.startAreaPos = {
-      x: area.x,
-      y: area.y
-    }
-
-    
-    // 初始化鼠标位置跟踪
-    currentMousePosition.value = {
-      x: clientX,
-      y: clientY
-    }
-    
-    // 拖拽开始时就显示指示器
-    showDockIndicator.value = true
-    
-    // 检查主区域内是否有其他Area
-    checkMainContentForAreas()
-    
-    // 使用dock-layout作为默认目标区域
-    if (dockLayoutRef.value) {
-      const rect = dockLayoutRef.value.getBoundingClientRect()
-      targetAreaRect.value = {
-        left: 0,  // 使用相对于容器的位置（左上角）
-        top: 0,
-        width: rect.width,
-        height: rect.height
-      }
-      
-      // 拖拽开始时立即更新停靠区域
-      updateDockZoneByMousePosition(clientX, clientY)
-    }
-  }
-}
-
-// TabPage拖拽移动
-const onTabDragMove = (areaId, event) => {
-  if (tabDragState.value.isDragging && tabDragState.value.currentAreaId === areaId) {
-    const area = floatingAreas.value.find(a => a.id === areaId)
-    if (area) {
-      // 检查event是否为对象格式（来自TabPage.vue）
-      const clientX = event.clientX || (typeof event === 'object' ? event.x : event?.x)
-      const clientY = event.clientY || (typeof event === 'object' ? event.y : event?.y)
-      
-      if (clientX === undefined || clientY === undefined) {
-        return
-      }
-      
-      // 计算移动距离
-      const deltaX = clientX - tabDragState.value.startClientPos.x
-      const deltaY = clientY - tabDragState.value.startClientPos.y
-      
-      // 计算新位置
-      let newLeft = tabDragState.value.startAreaPos.x + deltaX
-      let newTop = tabDragState.value.startAreaPos.y + deltaY
-      
-      // 确保不超出父容器边界
-      if (dockLayoutRef.value) {
-        const parentRect = dockLayoutRef.value.getBoundingClientRect()
-        
-        // 严格边界检查
-        newLeft = Math.max(0, Math.min(newLeft, parentRect.width - area.width))
-        newTop = Math.max(0, Math.min(newTop, parentRect.height - area.height))
-      }
-      
-      // 更新位置
-      area.x = newLeft
-      area.y = newTop
-      
-      // 更新鼠标位置
-      currentMousePosition.value = {
-        x: clientX,
-        y: clientY
-      }
-      
-      // 根据鼠标位置动态更新停靠区域
-      updateDockZoneByMousePosition(clientX, clientY)
-      
-      // 调试信息
-  
-    }
-  }
-}
-
-// TabPage拖拽结束
-const onTabDragEnd = () => {
-  
-  tabDragState.value.isDragging = false
-  const currentAreaId = tabDragState.value.currentAreaId
-  tabDragState.value.currentAreaId = null
-  
-  // 3.2 在onTabDragEnd方法中添加中心停靠检测
-  // 确保只有在独立中心指示器区域内释放才执行停靠
-  if (activeDockZone.value === 'center' && currentAreaId && isMouseInCenterIndicator(currentMousePosition.value.x, currentMousePosition.value.y)) {
-    // 处理中心停靠
-    const result = handleCenterDocking(currentAreaId)
-    if (!result.success) {
-      // console.warn('中心停靠失败:', result.message)
-    } else {
-      // console.log('中心停靠成功:', result.message)
-    }
-  }
-  
-  // 隐藏停靠指示器
-  showDockIndicator.value = false
-  activeDockZone.value = null
-}
-
-// 监听floatingAreas变化，确保当Area最大化时，Panel也会自动最大化
-watch(floatingAreas, (newAreas) => {
-  newAreas.forEach(area => {
-    // 正确处理层级结构：Area -> TabPage -> Panel
-    if (area.tabPages) {
-      for (const tabPage of area.tabPages) {
-        // 当区域只包含一个Panel且Area状态变为最大化时，Panel也应该最大化
-        if (tabPage.panels && tabPage.panels.length === 1) {
-          const isAreaMaximized = area.WindowState === '最大化' || area.WindowState === 'maximized';
-          const isPanelMaximized = tabPage.panels[0].maximized;
-          
-          // 如果状态不一致，更新Panel的maximized属性
-          if (isAreaMaximized !== isPanelMaximized) {
-            tabPage.panels[0] = { ...tabPage.panels[0], maximized: isAreaMaximized };
-        
-          }
-        }
-      }
-    }
-  });
-}, { deep: true });
-
-// 组件挂载后检查主区域内容并设置事件监听
-onMounted(() => {
-  // 延迟执行，确保DOM完全渲染
-  setTimeout(() => {
-    checkMainContentForAreas()
-  }, 100)
-  
-  // 监听面板关闭事件
-  onEvent(EVENT_TYPES.PANEL_CLOSE_REQUEST, handlePanelCloseRequest)
-})
-
-// 组件卸载后清理事件监听
-onUnmounted(() => {
-  // 清理面板关闭事件监听
-  eventBus.off(EVENT_TYPES.PANEL_CLOSE_REQUEST, handlePanelCloseRequest)
-})
-
-// 监听主区域内容变化
-watch(floatingAreas, () => {
-  // 当浮动区域变化时，重新检查主区域内容
-  setTimeout(() => {
-    checkMainContentForAreas()
-  }, 100)
-}, { deep: true })
-
-// 当主区域内没有其他Area时，隐藏外部边缘指示器，只显示中心指示器
-
-// 第5步：优化UI指示器显示逻辑（当主区域为空时）
-/**
- * 检查主区域是否为空
- * @returns {boolean} 主区域是否为空
- */
-const isMainAreaEmpty = () => {
-  checkMainContentForAreas()
-  return !hasAreasInMainContent.value
-}
-
-/**
- * 根据鼠标位置动态更新停靠区域（优化版）
- * 当主区域为空时，只显示中心指示器
- * @param {number} mouseX - 鼠标X坐标
- * @param {number} mouseY - 鼠标Y坐标
- */
-const updateDockZoneByMousePosition = (mouseX, mouseY) => {
-  if (!dockLayoutRef.value || !targetAreaRect.value) return
-  
-  try {
-    const rect = dockLayoutRef.value.getBoundingClientRect()
-    const { left, top, width, height } = targetAreaRect.value
-    
-    // 计算鼠标相对于目标区域的相对位置 (0-1)
-    const relativeX = (mouseX - rect.left - left) / width
-    const relativeY = (mouseY - rect.top - top) / height
-    
-    // 定义各个区域的阈值
-    const threshold = 0.2 // 20% 边缘区域
-    
-    let newActiveZone = null
-    
-    // 检查主区域是否为空
-    const mainAreaEmpty = isMainAreaEmpty()
-    
-    if (relativeX >= 0 && relativeX <= 1 && relativeY >= 0 && relativeY <= 1) {
-      // 鼠标在目标区域内
-      if (mainAreaEmpty) {
-        // 主区域为空时：只允许停靠到中心区域
-        // 扩大中心区域检测范围到更宽容的范围
-        const centerRadius = 0.25 // 中心区域半径25%
-        const centerDistance = Math.sqrt(
-          Math.pow(relativeX - 0.5, 2) + Math.pow(relativeY - 0.5, 2)
-        )
-        
-        if (centerDistance <= centerRadius) {
-          newActiveZone = 'center'
-          // console.log('[DockLayout] 主区域为空，检测到中心停靠区域:', {
-          //   mouseX, mouseY,
-          //   relativeX: relativeX.toFixed(3),
-          //   relativeY: relativeY.toFixed(3),
-          //   centerDistance: centerDistance.toFixed(3),
-          //   centerRadius: centerRadius,
-          //   newActiveZone
-          // })
-        }
-      } else {
-        // 主区域不为空时：显示所有指示器选项
-        if (relativeY <= threshold) {
-          newActiveZone = 'top'
-        } else if (relativeY >= 1 - threshold) {
-          newActiveZone = 'bottom'
-        } else if (relativeX <= threshold) {
-          newActiveZone = 'left'
-        } else if (relativeX >= 1 - threshold) {
-          newActiveZone = 'right'
-        } else if (relativeX >= 0.4 && relativeX <= 0.6 && relativeY >= 0.4 && relativeY <= 0.6) {
-          // 中心区域 (40%-60% 的中心区域)
-          newActiveZone = 'center'
-        }
-      }
-    }
-    
-    // 只有当停靠区域改变时才更新，减少不必要的重新渲染
-    if (activeDockZone.value !== newActiveZone) {
-      const oldZone = activeDockZone.value
-      activeDockZone.value = newActiveZone
-      // console.log('[DockLayout] 停靠区域更新:', { from: oldZone, to: newActiveZone })
-      
-      // 如果激活的区域不为空，显示指示器；如果为空，隐藏指示器
-      // 但在拖拽过程中，始终保持中心指示器显示
-      const isDragging = panelDragState.value.isDragging || tabDragState.value.isDragging
-      if (newActiveZone || isDragging) {
-        showDockIndicator.value = true
-      } else {
-        showDockIndicator.value = false
-      }
-    }
-  } catch (error) {
-    // console.warn('更新停靠区域时出错:', error)
-  }
-}
-
-// 处理主区域的dragover事件
-const handleMainAreaDragOver = (event) => {
-  event.preventDefault()
-  
-  if (panelDragState.value.isDragging || tabDragState.value.isDragging) {
-    // 使用dock-layout作为基准获取位置和大小
-    let rect
-    if (dockLayoutRef.value) {
-      rect = dockLayoutRef.value.getBoundingClientRect()
-    } else {
-      // 回退到使用事件目标
-      rect = event.currentTarget.getBoundingClientRect()
-    }
-    
-    // 更新目标区域信息并显示停靠指示器
-    targetAreaRect.value = {
-      left: 0,  // 使用相对于容器的位置（左上角）
-      top: 0,
-      width: rect.width,
-      height: rect.height
-    }
-    
-    showDockIndicator.value = true
-    
-    // 更新鼠标位置
-    currentMousePosition.value = {
-      x: event.clientX,
-      y: event.clientY
-    }
-  }
-}
-
-// 处理主区域的dragleave事件
-const handleMainAreaDragLeave = () => {
-  // 检查鼠标是否真的离开了区域（可能只是进入了子元素）
-  setTimeout(() => {
-    const activeElement = document.activeElement
-    const dockLayout = dockLayoutRef.value
-    
-    // 如果活动元素不是dockLayout的后代，隐藏指示器
-    // 但如果在拖拽过程中，不立即隐藏指示器
-    const isDragging = panelDragState.value.isDragging || tabDragState.value.isDragging
-    if (!isDragging && (!dockLayout || (activeElement && !dockLayout.contains(activeElement)))) {
-      showDockIndicator.value = false
-      activeDockZone.value = null
-    }
-  }, 50)
-}
-
-// 处理浮动区域的dragover事件
-const handleAreaDragOver = (event, areaId) => {
-  event.preventDefault()
-  
-  if (panelDragState.value.isDragging || tabDragState.value.isDragging) {
-    // 避免自身停靠到自身
-    if (areaId !== panelDragState.value.currentAreaId && areaId !== tabDragState.value.currentAreaId) {
-      // 获取目标区域的位置和大小
-      const areaElement = event.currentTarget
-      const rect = areaElement.getBoundingClientRect()
-      
-      // 更新目标区域信息并显示停靠指示器
-      targetAreaRect.value = {
-        left: rect.left,
-        top: rect.top,
-        width: rect.width,
-        height: rect.height
-      }
-      
-      showDockIndicator.value = true
-      
-      // 更新鼠标位置
-      currentMousePosition.value = {
-        x: event.clientX,
-        y: event.clientY
-      }
-    }
-  }
-}
-
-// 处理浮动区域的dragleave事件
-const handleAreaDragLeave = () => {
-  // 延迟检查，避免快速移动时的闪烁
-  setTimeout(() => {
-    const activeElement = document.activeElement
-    const dockLayout = dockLayoutRef.value
-    
-    // 如果活动元素不是dockLayout的后代，隐藏指示器
-    // 但如果在拖拽过程中，不立即隐藏指示器
-    const isDragging = panelDragState.value.isDragging || tabDragState.value.isDragging
-    if (!isDragging && (!dockLayout || (activeElement && !dockLayout.contains(activeElement)))) {
-      showDockIndicator.value = false
-      activeDockZone.value = null
-    }
-  }, 50)
-}
-
-// 处理停靠区域激活事件
-const onDockZoneActive = (zone) => {
-  activeDockZone.value = zone
-}
-
-// 处理Panel最大化同步事件
-const onPanelMaximizeSync = ({ areaId, maximized }) => {
-  // 查找对应的Area
-  const area = floatingAreas.value.find(a => a.id === areaId);
-  // 正确处理层级结构：Area -> TabPage -> Panel
-  if (area && area.tabPages && area.tabPages.length === 1 && area.tabPages[0].panels && area.tabPages[0].panels.length === 1) {
-    // 更新TabPage中Panel的maximized状态
-    area.tabPages[0].panels[0] = { ...area.tabPages[0].panels[0], maximized };
-
-  }
-}
-
-// 第2步：Area验证逻辑 - 目标Area内容区为空的情况
-/**
- * 检查鼠标是否在独立中心指示器区域内
- * @param {number} mouseX - 鼠标X坐标
- * @param {number} mouseY - 鼠标Y坐标
- * @returns {boolean} 是否在独立中心指示器区域内
- */
-const isMouseInCenterIndicator = (mouseX, mouseY) => {
-  if (!dockLayoutRef.value) return false
-  
-  try {
-    // 查找独立中心指示器元素
-    const centerIndicator = dockLayoutRef.value.querySelector('.center-main-indicator')
-    if (!centerIndicator) {
-      // console.log('未找到.center-main-indicator元素')
-      return false
-    }
-    
-    // 检查元素是否可见
-    const style = window.getComputedStyle(centerIndicator)
-    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
-      // console.log('独立中心指示器被隐藏')
-      return false
-    }
-    
-    const rect = centerIndicator.getBoundingClientRect()
-    const isInIndicator = mouseX >= rect.left && mouseX <= rect.right &&
-                         mouseY >= rect.top && mouseY <= rect.bottom
-    
-    // console.log('独立中心指示器检测:', {
-    //   mouseX, mouseY,
-    //   indicatorRect: rect,
-    //   isInIndicator,
-    //   showDockIndicator: showDockIndicator.value,
-    //   activeDockZone: activeDockZone.value
-    // })
-    
-    return isInIndicator
-  } catch (error) {
-    // console.warn('检查独立中心指示器区域时出错:', error)
-    return false
-  }
-}
-
-/**
- * 检查Area是否可以停靠到中心区域
- * @param {Object} sourceArea - 源Area对象
- * @param {Object} targetArea - 目标Area对象（主区域）
- * @returns {Object} 验证结果 {canDock: boolean, reason: string, strategy: string}
- */
-const canDockToCenter = (sourceArea, targetArea) => {
-  // 验证1：检查源Area是否包含TabPage
-  if (!sourceArea) {
-    return {
-      canDock: false,
-      reason: '源Area不存在'
-    }
-  }
-  
-  if (!sourceArea.tabPages || sourceArea.tabPages.length === 0) {
-    return {
-      canDock: false,
-      reason: '源Area不包含TabPage，无法停靠'
-    }
-  }
-  
-  // 验证2：检查目标Area（主区域）- 支持Area级别停靠
-  if (targetArea === mainAreaRef.value) {
-    // Area级别停靠支持：将源Area的内容移动到主区域
-    // 不再要求主区域完全为空，允许Area停靠
-    // console.log('Area级别停靠：源Area可停靠到主区域')
-  } else {
-    // 对于其他目标Area的验证逻辑可以后续扩展
-    return {
-      canDock: false,
-      reason: '暂不支持停靠到非主区域'
-    }
-  }
-  
-  // 验证3：确保包含TabPage的Area才能停靠到中心
-  const sourceTabPage = sourceArea.tabPages[0]
-  if (!sourceTabPage.panels || sourceTabPage.panels.length === 0) {
-    return {
-      canDock: false,
-      reason: '源Area的TabPage不包含Panel，无法停靠'
-    }
-  }
-  
-  // 5.2. 新增验证：根据目标Area状态确定停靠策略
-  // 检查主区域内容状态
-  checkMainContentForAreas()
-  
-  // 如果主区域已有内容，判断停靠策略
-  if (hasAreasInMainContent.value) {
-    // 检查主区域是否已有TabPage
-    const mainAreaElement = mainAreaRef.value?.$el
-    if (mainAreaElement) {
-      const existingTabPages = mainAreaElement.querySelectorAll('.tab-page, [class*="tab"]')
-      const hasExistingTabPage = existingTabPages.length > 0
-      
-      if (hasExistingTabPage && sourceArea.tabPages.length === 1) {
-        // 场景5.2：源Area只有一个TabPage，目标Area也有TabPage
-        // 策略：合并TabPage标签页
-        return {
-          canDock: true,
-          reason: '可以停靠 - 采用TabPage标签页合并策略',
-          strategy: 'merge-tabpages'
-        }
-      } else {
-        // 其他场景：采用简单Area内容移动策略
-        return {
-          canDock: true,
-          reason: '可以停靠 - 采用简单移动策略',
-          strategy: 'simple-move'
-        }
-      }
-    }
-  }
-  
-  // 主区域为空的情况：采用简单移动策略
-  return {
-    canDock: true,
-    reason: '验证通过，可以停靠到中心区域',
-    strategy: 'simple-move'
-  }
-}
-
-// 3.3 创建handleCenterDocking核心处理函数
-/**
- * 处理中心停靠逻辑
- * @param {string} sourceAreaId - 源Area的ID
- * @returns {Object} 处理结果 {success: boolean, message: string}
- */
-const handleCenterDocking = (sourceAreaId) => {
-  // console.log('开始处理中心停靠:', sourceAreaId)
-  
-  // 1. 查找源Area
-  const sourceArea = floatingAreas.value.find(a => a.id === sourceAreaId)
-  if (!sourceArea) {
-    return {
-      success: false,
-      message: `未找到ID为 ${sourceAreaId} 的源Area`
-    }
-  }
-  
-  // 2. 验证停靠条件
-  const validationResult = canDockToCenter(sourceArea, mainAreaRef.value)
-  if (!validationResult.canDock) {
-    return {
-      success: false,
-      message: `停靠验证失败: ${validationResult.reason}`
-    }
-  }
-  
-  // console.log('停靠验证通过:', validationResult.reason)
-  
-  try {
-    // 3. 根据策略执行停靠逻辑
-    if (validationResult.strategy === 'merge-tabpages') {
-      // 5.2. 策略：合并TabPage标签页
-      return handleMergeTabpagesDocking(sourceArea)
-    } else {
-      // 默认策略：简单Area内容移动
-      return handleSimpleAreaDocking(sourceArea)
-    }
-  } catch (error) {
-    // console.error('停靠处理过程中发生错误:', error)
-    return {
-      success: false,
-      message: `停靠过程中发生错误: ${error.message}`
-    }
-  }
-}
-
-// 5.2. 新增：处理TabPage标签页合并策略
-/**
- * 处理TabPage标签页合并策略
- * 当源Area只有一个TabPage且目标Area已有TabPage时使用此策略
- * @param {Object} sourceArea - 源Area对象
- * @returns {Object} 处理结果 {success: boolean, message: string}
- */
-// 合并TabPage标签页的核心处理函数
-const handleMergeTabpagesDocking = (sourceArea) => {
-  // console.log(`[DockLayout] 开始合并TabPage标签页，源Area:`, sourceArea)
-  
-  try {
-    // 验证源Area是否有效
-    if (!sourceArea || !sourceArea.tabPages || sourceArea.tabPages.length === 0) {
-      // console.warn('[DockLayout] 源Area无效或没有TabPage，无法执行合并操作')
-      return null
-    }
-
-    // 查找主区域的Area组件
-    const mainArea = mainAreaRef.value
-    if (!mainArea) {
-      // console.error('[DockLayout] 找不到主区域引用')
-      return null
-    }
-
-    // console.log('[DockLayout] 使用新的mergeAreaContent方法合并TabPage')
-    const success = mainArea.mergeAreaContent(sourceArea)
-    
-    if (success) {
-      const newTabPageId = `merged-${Date.now()}`
-      const panelsCount = sourceArea.tabPages[0]?.panels?.length || 0
-      // console.log(`[DockLayout] 成功合并 ${panelsCount} 个Panel到主区域TabPage: ${newTabPageId}`)
-      
-      return {
-        success: true,
-        newTabPageId: newTabPageId,
-        panelsAdded: panelsCount
-      }
-    }
-
-    // console.error('[DockLayout] mergeAreaContent方法执行失败')
-    return null
-
-  } catch (error) {
-    // console.error('[DockLayout] 合并TabPage时发生错误:', error)
-    return null
-  }
-}
-
-/**
- * 在主区域查找或创建TabPage
- * @returns {Object} 查找结果 {success: boolean, message: string, tabPage?: Object}
- */
-const findOrCreateMainAreaTabPage = () => {
-  try {
-    // 检查主区域是否已经接收了内容
-    if (mainAreaRef.value && mainAreaRef.value.receivedContent) {
-      const existingContent = mainAreaRef.value.receivedContent
-      // console.log('检查主区域已接收内容，数量:', existingContent.length)
-      
-      if (existingContent.length > 0) {
-        // 找到现有的TabPage内容
-        const existingTabPage = existingContent[0] // 只使用第一个TabPage
-        // console.log('找到现有的TabPage:', existingTabPage.title)
-        
-        return {
-          success: true,
-          message: '找到现有的TabPage',
-          tabPage: existingTabPage.tabPage,
-          rawTabPage: existingTabPage // 返回原始TabPage对象以供修改
-        }
-      }
-    }
-    
-    // 如果主区域没有内容，现在不再主动创建空TabPage
-    // 因为在合并逻辑中，Area会自动根据需要创建TabPage
-    // console.log('主区域没有现有TabPage，将通过合并操作自动创建')
-    
-    return {
-      success: true,
-      message: '主区域为空，等待合并操作创建TabPage',
-      tabPage: null,
-      rawTabPage: null
-    }
-    
-  } catch (error) {
-    // console.error('查找TabPage时发生错误:', error)
-    return {
-      success: false,
-      message: `查找TabPage失败: ${error.message}`
-    }
-  }
-}
-
-// 3.4 实现简单Area停靠策略（重构为使用合并逻辑）
-/**
- * 处理简单Area停靠策略（Area内容合并）
- * 当主区域为空或不符合TabPage合并条件时使用此策略
- * @param {Object} sourceArea - 源Area对象
- * @returns {Object} 处理结果 {success: boolean, message: string}
- */
-const handleSimpleAreaDocking = (sourceArea) => {
-  // console.log('执行简单Area停靠策略（使用合并逻辑）')
-  
-  try {
-    // 1. 验证源Area结构
-    if (!sourceArea.tabPages || sourceArea.tabPages.length === 0) {
-      return {
-        success: false,
-        message: '源Area不包含TabPage，无法进行停靠合并'
-      }
-    }
-    
-    // console.log('源Area结构验证通过，包含', sourceArea.tabPages.length, '个TabPage')
-    
-    // 2. 使用mergeAreaContent方法将源Area合并到主区域
-    if (mainAreaRef.value && typeof mainAreaRef.value.mergeAreaContent === 'function') {
-      // console.log('通过mergeAreaContent方法合并源Area到主区域')
-      const result = mainAreaRef.value.mergeAreaContent(sourceArea)
-      
-      if (result) {
-        // console.log('源Area成功合并到主区域，area-merged事件将处理隐藏列表操作')
-        
-        // 3. 更新主区域状态（合并完成后由事件处理函数处理隐藏列表）
-        nextTick(() => {
-          checkMainContentForAreas()
-          // 确保主区域最大化显示还原按钮
-          if (mainAreaRef.value) {
-            mainAreaRef.value.WindowState = '最大化'
-            // console.log('主区域状态已设置为最大化')
-          }
-        })
-        
-        return {
-          success: true,
-          message: `成功合并 ${sourceArea.tabPages.length} 个TabPage到主区域`
-        }
-      } else {
-        return {
-          success: false,
-          message: 'mergeAreaContent方法执行失败'
-        }
-      }
-    } else {
-      // console.error('主区域不支持mergeAreaContent方法')
-      return {
-        success: false,
-        message: '主区域不支持合并操作'
-      }
-    }
-    
-  } catch (error) {
-    // console.error('简单Area停靠策略执行时发生错误:', error)
-    return {
-      success: false,
-      message: `简单Area停靠失败: ${error.message}`
-    }
-  }
-}
-
-// 第4步：在defineExpose中暴露隐藏列表管理方法
-/**
- * 获取隐藏Area列表
- * @returns {Array} 隐藏Area列表
- */
-const getHiddenAreas = () => {
-  return [...hiddenAreas.value]
-}
-
-/**
- * 从隐藏列表恢复Area到浮动区域
- * @param {string} areaId - Area的ID
- * @returns {Object} 恢复结果 {success: boolean, message: string}
- */
-const restoreAreaFromHidden = (areaId) => {
-  try {
-    const hiddenIndex = hiddenAreas.value.findIndex(area => area.id === areaId)
-    if (hiddenIndex === -1) {
-      return {
-        success: false,
-        message: '找不到指定的隐藏Area'
-      }
-    }
-    
-    const areaToRestore = hiddenAreas.value[hiddenIndex]
-    
-    // 检查是否已存在相同的Area（避免重复）
-    const existingIndex = floatingAreas.value.findIndex(area => area.id === areaId)
-    if (existingIndex !== -1) {
-      return {
-        success: false,
-        message: 'Area已存在于浮动区域中'
-      }
-    }
-    
-    // 恢复Area到浮动区域
-    floatingAreas.value.push(areaToRestore)
-    
-    // 从隐藏列表移除
-    hiddenAreas.value.splice(hiddenIndex, 1)
-    
-    // 更新状态
-    checkMainContentForAreas()
-    
-    return {
-      success: true,
-      message: 'Area已成功恢复到浮动区域'
-    }
-    
-  } catch (error) {
-    // console.error('恢复Area时出错:', error)
-    return {
-      success: false,
-      message: `恢复失败：${error.message}`
-    }
-  }
-}
-
-/**
- * 从隐藏列表移除Area（不恢复）
- * @param {string} areaId - Area的ID
- * @returns {Object} 移除结果 {success: boolean, message: string}
- */
-const removeFromHiddenList = (areaId) => {
-  try {
-    const hiddenIndex = hiddenAreas.value.findIndex(area => area.id === areaId)
-    if (hiddenIndex === -1) {
-      return {
-        success: false,
-        message: '找不到指定的隐藏Area'
-      }
-    }
-    
-    // 从隐藏列表移除
-    hiddenAreas.value.splice(hiddenIndex, 1)
-    
-    return {
-      success: true,
-      message: 'Area已从隐藏列表中移除'
-    }
-    
-  } catch (error) {
-    // console.error('移除Area时出错:', error)
-    return {
-      success: false,
-      message: `移除失败：${error.message}`
-    }
-  }
-}
-
-/**
- * 清空隐藏列表
- * @returns {Object} 清空结果 {success: boolean, message: string, removedCount: number}
- */
-const clearHiddenList = () => {
-  try {
-    const count = hiddenAreas.value.length
-    hiddenAreas.value.splice(0, hiddenAreas.value.length)
-    
-    return {
-      success: true,
-      message: `已清空隐藏列表，移除${count}个Area`,
-      removedCount: count
-    }
-    
-  } catch (error) {
-    // console.error('清空隐藏列表时出错:', error)
-    return {
-      success: false,
-      message: `清空失败：${error.message}`,
-      removedCount: 0
-    }
-  }
-}
-
-/**
- * 统一停靠结束处理函数
- * 根据拖拽类型和目标区域执行相应的停靠逻辑
- * @param {string} dragType - 拖拽类型 ('Panel', 'Area', 'TabPage')
- * @param {string} sourceAreaId - 源Area的ID
- * @param {Object} options - 可选参数
- * @returns {Object} 处理结果 {success: boolean, message: string, strategy?: string}
- */
-const handleDockingEnding = (dragType, sourceAreaId, options = {}) => {
-  // console.log(`[DockLayout] 处理停靠结束事件: type=${dragType}, areaId=${sourceAreaId}`)
-  
-  try {
-    // 确保只有在正确的区域内释放才执行停靠
-    if (!activeDockZone.value || !sourceAreaId) {
-      return {
-        success: false,
-        message: '缺少停靠区域或源Area ID'
-      }
-    }
-    
-    // 根据停靠区域类型执行不同的停靠逻辑
-    switch (activeDockZone.value) {
-      case 'center':
-        // 中心停靠
-        const centerResult = handleCenterDocking(sourceAreaId)
-        if (!centerResult.success) {
-          // console.warn('中心停靠失败:', centerResult.message)
-        } else {
-          // console.log('中心停靠成功:', centerResult.message)
-        }
-        return centerResult
-        
-      case 'top':
-      case 'bottom':
-      case 'left':
-      case 'right':
-        // 外部边缘停靠
-        const edgeResult = handleEdgeDocking(sourceAreaId, activeDockZone.value)
-        if (!edgeResult.success) {
-          // console.warn('外部边缘停靠失败:', edgeResult.message)
-        } else {
-          // console.log('外部边缘停靠成功:', edgeResult.message)
-        }
-        return edgeResult
-        
-      default:
-        return {
-          success: false,
-          message: `不支持的停靠区域: ${activeDockZone.value}`
-        }
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 停靠处理过程中发生错误:', error)
-    return {
-      success: false,
-      message: `停靠过程中发生错误: ${error.message}`
-    }
-  }
-}
-
-/**
- * 处理外部边缘停靠逻辑
- * @param {string} sourceAreaId - 源Area的ID
- * @param {string} dockZone - 停靠方向 ('top', 'bottom', 'left', 'right')
- * @returns {Object} 处理结果 {success: boolean, message: string, strategy?: string}
- */
-const handleEdgeDocking = (sourceAreaId, dockZone) => {
-  // console.log(`[DockLayout] 开始外部边缘停靠: areaId=${sourceAreaId}, zone=${dockZone}`)
-  
-  try {
-    // 1. 查找源Area
-    const sourceArea = floatingAreas.value.find(a => a.id === sourceAreaId)
-    if (!sourceArea) {
-      return {
-        success: false,
-        message: `未找到ID为 ${sourceAreaId} 的源Area`
-      }
-    }
-    
-    // 2. 验证停靠条件
-    const validationResult = canDockToEdge(sourceArea, dockZone)
-    if (!validationResult.canDock) {
-      return {
-        success: false,
-        message: `边缘停靠验证失败: ${validationResult.reason}`
-      }
-    }
-    
-    // console.log('边缘停靠验证通过:', validationResult.reason)
-    
-    // 3. 根据主区域状态选择处理策略
-    if (validationResult.strategy === 'side-by-side') {
-      // 执行并排停靠策略
-      return handleSideBySideDocking(sourceArea, dockZone)
-    } else {
-      return {
-        success: false,
-        message: `暂不支持的边缘停靠策略: ${validationResult.strategy}`
-      }
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 外部边缘停靠处理过程中发生错误:', error)
-    return {
-      success: false,
-      message: `外部边缘停靠过程中发生错误: ${error.message}`
-    }
-  }
-}
-
-/**
- * 检查外部边缘停靠条件
- * @param {Object} sourceArea - 源Area对象
- * @param {string} dockZone - 停靠方向
- * @returns {Object} 验证结果 {canDock: boolean, reason: string, strategy: string}
- */
-const canDockToEdge = (sourceArea, dockZone) => {
-  // 验证1：检查源Area是否有效
-  if (!sourceArea) {
-    return {
-      canDock: false,
-      reason: '源Area不存在'
-    }
-  }
-  
-  if (!sourceArea.tabPages || sourceArea.tabPages.length === 0) {
-    return {
-      canDock: false,
-      reason: '源Area不包含TabPage，无法停靠'
-    }
-  }
-  
-  // 验证2：检查停靠方向
-  const validZones = ['top', 'bottom', 'left', 'right']
-  if (!validZones.includes(dockZone)) {
-    return {
-      canDock: false,
-      reason: `不支持的停靠方向: ${dockZone}`
-    }
-  }
-  
-  // 验证3：检查主区域内容状态
-  checkMainContentForAreas()
-  
-  if (hasAreasInMainContent.value) {
-    // 主区域有内容：采用并排停靠策略
-    return {
-      canDock: true,
-      reason: '主区域已有内容，采用并排停靠策略',
-      strategy: 'side-by-side'
-    }
-  } else {
-    // 主区域无内容：创建目标Area后执行并排停靠
-    return {
-      canDock: true,
-      reason: '主区域无内容，将创建目标Area后执行并排停靠',
-      strategy: 'side-by-side'
-    }
-  }
-}
+// 移除重复的详细实现函数 - 使用轻量级代理
 
 /**
  * 处理并排停靠逻辑
@@ -1736,644 +324,98 @@ const canDockToEdge = (sourceArea, dockZone) => {
  * @param {string} dockZone - 停靠方向
  * @returns {Object} 处理结果 {success: boolean, message: string}
  */
-const handleSideBySideDocking = (sourceArea, dockZone) => {
-  // console.log(`[DockLayout] 开始并排停靠: areaId=${sourceArea.id}, zone=${dockZone}`)
+// 轻量级并排停靠代理
+const handleSideBySideDocking = () => '轻量级并排停靠代理'
+
+// 轻量级ResizeBar添加代理
+const addResizeBarForSideBySideLayout = () => '轻量级ResizeBar代理'
+
+// 轻量级ResizeBar事件代理
+const handleResizeBarResize = () => '轻量级ResizeBar调整代理'
+
+// 轻量级ResizeBar尺寸调整代理
+const handleResizeBarResizeStart = () => '轻量级ResizeBar调整开始代理'
+const handleResizeBarResizeEnd = () => '轻量级ResizeBar调整结束代理'
+
+// 轻量级尺寸调整代理
+const handleHorizontalResize = () => '轻量级水平调整代理'
+const handleVerticalResize = () => '轻量级垂直调整代理'
+
+// 轻量级Area查找代理
+const findFirstMainArea = () => '轻量级主区域查找代理'
+const getOrCreateTargetArea = () => '轻量级目标区域获取代理'
+
+// 轻量级并排布局代理
+const createSideBySideLayout = () => '轻量级并排布局代理'
+const compressTargetArea = () => '轻量级压缩目标区域代理'
+const adjustSourceAreaForLayout = () => '轻量级布局调整代理'
+
+// 添加浮动面板
+const addFloatingPanel = (panel) => {
+  // 确保panel参数存在，否则使用默认面板对象
+  const safePanel = panel || {
+    id: `panel-${Date.now()}`,
+    title: '新建面板',
+    content: '默认内容'
+  };
   
-  try {
-    // 1. 检查主区域内是否有现有Area
-    checkMainContentForAreas()
-    
-    let targetArea = null
-    
-    if (hasAreasInMainContent.value) {
-      // 主区域内已有Area，找到第一个作为目标
-      targetArea = findFirstMainArea()
-      // console.log('[DockLayout] 找到现有目标Area:', targetArea?.id)
-    } else {
-      // 主区域内无Area，从隐藏列表获取或创建新的目标Area
-      // console.log('[DockLayout] 主区域内无现有Area，创建目标Area')
-      
-      const restoreResult = getOrCreateTargetArea()
-      if (!restoreResult.success) {
-        return restoreResult
-      }
-      targetArea = restoreResult.targetArea
-    }
-    
-    if (!targetArea) {
-      return {
-        success: false,
-        message: '未找到有效的目标Area'
-      }
-    }
-    
-    // 2. 压缩目标Area并创建并排布局
-    const layoutResult = createSideBySideLayout(sourceArea, targetArea, dockZone)
-    if (!layoutResult.success) {
-      return layoutResult
-    }
-    
-    // 3. 添加ResizeBar支持
-    const resizeBarResult = addResizeBarForSideBySideLayout(sourceArea, targetArea, dockZone)
-    if (!resizeBarResult.success) {
-      // console.warn('[DockLayout] ResizeBar添加失败:', resizeBarResult.message)
-      // ResizeBar失败不影响核心功能，继续执行
-    } else {
-      // console.log('[DockLayout] ResizeBar添加成功')
-    }
-    
-    // 4. 更新源Area状态
-    const sourceIndex = floatingAreas.value.findIndex(a => a.id === sourceArea.id)
-    if (sourceIndex !== -1) {
-      // 将源Area从浮动区域移除，添加到主区域
-      const [removedArea] = floatingAreas.value.splice(sourceIndex, 1)
-      // console.log('[DockLayout] 源Area已从浮动区域移除')
-      
-      // 将源Area添加到主区域的并排布局中
-      // 这里需要根据实际的布局结构进行调整
-      // console.log('[DockLayout] 源Area将添加到主区域并排布局')
-    }
-    
-    // 5. 更新主区域状态
-    nextTick(() => {
-      checkMainContentForAreas()
-    })
-    
-    return {
-      success: true,
-      message: `成功执行${dockZone}方向并排停靠`,
-      strategy: 'side-by-side',
-      sourceAreaId: sourceArea.id,
-      targetAreaId: targetArea.id
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 并排停靠处理过程中发生错误:', error)
-    return {
-      success: false,
-      message: `并排停靠过程中发生错误: ${error.message}`
-    }
+  const newArea = {
+    id: `area-${Date.now()}`,
+    x: 100 + Math.random() * 200,
+    y: 100 + Math.random() * 200,
+    width: 300,
+    height: 200,
+    zIndex: zIndexManager.getFloatingAreaZIndex(`area-${Date.now()}`),
+    tabPages: [{
+      id: `tabpage-${Date.now()}`,
+      title: safePanel.title || '新建面板',
+      panels: [safePanel]
+    }]
   }
+  floatingAreas.value.push(newArea)
+  return newArea.id
 }
 
-/**
- * 在并排布局中添加ResizeBar支持
- * @param {Object} sourceArea - 源Area对象
- * @param {Object} targetArea - 目标Area对象
- * @param {string} dockZone - 停靠方向
- * @returns {Object} 处理结果 {success: boolean, message: string}
- */
-const addResizeBarForSideBySideLayout = (sourceArea, targetArea, dockZone) => {
-  // console.log(`[DockLayout] 为并排布局添加ResizeBar: ${dockZone}`)
-  
-  try {
-    // 根据停靠方向确定ResizeBar的方向
-    const isHorizontal = ['left', 'right'].includes(dockZone)
-    const resizeBarDirection = isHorizontal ? 'vertical' : 'horizontal'
-    
-    // console.log(`[DockLayout] ResizeBar方向设置: ${resizeBarDirection}`)
-    
-    // 创建ResizeBar配置
-    const resizeBarConfig = {
-      id: `resizebar-${sourceArea.id}-${targetArea.id}-${Date.now()}`,
-      targetId: `${sourceArea.id}-${targetArea.id}`,
-      direction: resizeBarDirection,
-      sourceAreaId: sourceArea.id,
-      targetAreaId: targetArea.id,
-      dockZone: dockZone,
-      minSize: 150,
-      maxSize: undefined,
-      initialSize: isHorizontal ? 300 : 200
-    }
-    
-    // 将ResizeBar配置添加到主区域的resizeBars列表中
-    mainAreaResizeBars.value.push(resizeBarConfig)
-    
-    // console.log('[DockLayout] ResizeBar配置已添加到主区域')
-    
-    return {
-      success: true,
-      message: `ResizeBar配置添加成功，方向: ${resizeBarDirection}`
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 添加ResizeBar时发生错误:', error)
-    return {
-      success: false,
-      message: `添加ResizeBar失败: ${error.message}`
-    }
-  }
+// 查找或创建主区域TabPage
+const findOrCreateMainAreaTabPage = () => {
+  // 返回主区域的tabPage信息
+  return {
+    id: 'main-area-tabpage',
+    title: '主区域',
+    panels: []
+  };
 }
 
-/**
- * 处理主区域ResizeBar尺寸调整事件
- * @param {string} resizeBarId - ResizeBar的ID
- * @param {number} newSize - 新的尺寸
- */
-const handleMainAreaResizeBar = (resizeBarId, newSize) => {
-  try {
-    // console.log(`[DockLayout] 主区域ResizeBar调整: id=${resizeBarId}, size=${newSize}`)
-    
-    // 找到对应的ResizeBar配置
-    const resizeBar = mainAreaResizeBars.value.find(rb => rb.id === resizeBarId)
-    if (!resizeBar) {
-      // console.warn(`[DockLayout] 未找到ResizeBar: ${resizeBarId}`)
-      return
-    }
-    
-    // 根据停靠方向计算比例变化
-    const sourceArea = floatingAreas.value.find(a => a.id === resizeBar.sourceAreaId)
-    const targetArea = floatingAreas.value.find(a => a.id === resizeBar.targetAreaId)
-    
-    if (!sourceArea || !targetArea) {
-      // console.warn('[DockLayout] 未找到源Area或目标Area')
-      return
-    }
-    
-    // 根据停靠方向计算新的比例
-    if (['left', 'right'].includes(resizeBar.dockZone)) {
-      // 水平并排：左右布局
-      handleHorizontalResizeWithSize(sourceArea, targetArea, newSize, resizeBar.dockZone)
-    } else {
-      // 垂直并排：上下布局
-      handleVerticalResizeWithSize(sourceArea, targetArea, newSize, resizeBar.dockZone)
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 处理主区域ResizeBar调整时发生错误:', error)
-  }
-}
+// 轻量级生命周期处理
+onMounted(() => {
+  // 初始化轻量级状态
+  console.log('DockLayout component mounted');
+})
 
-/**
- * 处理主区域ResizeBar调整开始事件
- * @param {string} resizeBarId - ResizeBar的ID
- */
-const handleMainAreaResizeBarStart = (resizeBarId) => {
-  // console.log(`[DockLayout] 主区域ResizeBar调整开始: ${resizeBarId}`)
-}
-
-/**
- * 处理主区域ResizeBar调整结束事件
- * @param {string} resizeBarId - ResizeBar的ID
- */
-const handleMainAreaResizeBarEnd = (resizeBarId) => {
-  // console.log(`[DockLayout] 主区域ResizeBar调整结束: ${resizeBarId}`)
-}
-
-/**
- * 获取主区域ResizeBar的样式
- * @param {Object} resizeBar - ResizeBar配置
- * @returns {Object} CSS样式对象
- */
-const getMainAreaResizeBarStyle = (resizeBar) => {
-  try {
-    const baseStyle = {
-      position: 'absolute',
-      zIndex: 50
-    }
-    
-    if (resizeBar.direction === 'horizontal') {
-      // 水平ResizeBar（左右调整）
-      return {
-        ...baseStyle,
-        top: '0',
-        right: '0',
-        width: '4px',
-        height: '100%',
-        cursor: 'col-resize'
-      }
-    } else {
-      // 垂直ResizeBar（上下调整）
-      return {
-        ...baseStyle,
-        bottom: '0',
-        left: '0',
-        width: '100%',
-        height: '4px',
-        cursor: 'row-resize'
-      }
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 获取ResizeBar样式时发生错误:', error)
-    return { position: 'absolute' }
-  }
-}
-
-/**
- * 处理ResizeBar尺寸调整事件
- * @param {Object} delta - 调整量
- * @param {Object} sourceArea - 源Area对象
- * @param {Object} targetArea - 目标Area对象
- * @param {string} dockZone - 停靠方向
- */
-const handleResizeBarResize = (delta, sourceArea, targetArea, dockZone) => {
-  try {
-    // console.log(`[DockLayout] ResizeBar调整: delta=`, delta, `zone=${dockZone}`)
-    
-    // 根据停靠方向计算新的尺寸比例
-    if (['left', 'right'].includes(dockZone)) {
-      // 水平并排：左右布局
-      handleHorizontalResize(sourceArea, targetArea, delta.x)
-    } else {
-      // 垂直并排：上下布局
-      handleVerticalResize(sourceArea, targetArea, delta.y)
-    }
-    
-    // 更新Area的ratio属性以保持布局持久化
-    updateAreasRatio(sourceArea, targetArea, dockZone)
-    
-  } catch (error) {
-    // console.error('[DockLayout] 处理ResizeBar调整时发生错误:', error)
-  }
-}
-
-/**
- * 处理水平方向（左右）尺寸调整
- */
-const handleHorizontalResize = (sourceArea, targetArea, deltaX) => {
-  // 实现水平尺寸调整逻辑
-  const sourceRatio = sourceArea.ratio || 0.5
-  const targetRatio = targetArea.ratio || 0.5
-  const totalRatio = sourceRatio + targetRatio
-  
-  // 计算新的比例（保持总和为1）
-  const newSourceRatio = Math.max(0.1, Math.min(0.9, sourceRatio + deltaX / 1000))
-  const newTargetRatio = totalRatio - newSourceRatio
-  
-  // 确保最小比例限制
-  if (newSourceRatio >= 0.1 && newTargetRatio >= 0.1) {
-    sourceArea.ratio = newSourceRatio
-    targetArea.ratio = newTargetRatio
-    // console.log(`[DockLayout] 水平调整完成: source=${newSourceRatio.toFixed(2)}, target=${newTargetRatio.toFixed(2)}`)
-  }
-}
-
-/**
- * 处理垂直方向（上下）尺寸调整
- */
-const handleVerticalResize = (sourceArea, targetArea, deltaY) => {
-  // 实现垂直尺寸调整逻辑
-  const sourceRatio = sourceArea.ratio || 0.5
-  const targetRatio = targetArea.ratio || 0.5
-  const totalRatio = sourceRatio + targetRatio
-  
-  // 计算新的比例（保持总和为1）
-  const newSourceRatio = Math.max(0.1, Math.min(0.9, sourceRatio + deltaY / 1000))
-  const newTargetRatio = totalRatio - newSourceRatio
-  
-  // 确保最小比例限制
-  if (newSourceRatio >= 0.1 && newTargetRatio >= 0.1) {
-    sourceArea.ratio = newSourceRatio
-    targetArea.ratio = newTargetRatio
-    // console.log(`[DockLayout] 垂直调整完成: source=${newSourceRatio.toFixed(2)}, target=${newTargetRatio.toFixed(2)}`)
-  }
-}
-
-/**
- * 更新Area的尺寸比例
- */
-const updateAreasRatio = (sourceArea, targetArea, dockZone) => {
-  // 确保比例总和为1
-  const sourceRatio = sourceArea.ratio || 0.5
-  const targetRatio = targetArea.ratio || 0.5
-  const totalRatio = sourceRatio + targetRatio
-  
-  if (totalRatio !== 1) {
-    const sourceNewRatio = sourceRatio / totalRatio
-    const targetNewRatio = targetRatio / totalRatio
-    
-    sourceArea.ratio = sourceNewRatio
-    targetArea.ratio = targetNewRatio
-    
-    // console.log(`[DockLayout] 比例调整: source=${sourceNewRatio.toFixed(2)}, target=${targetNewRatio.toFixed(2)}`)
-  }
-}
-
-/**
- * 处理ResizeBar调整开始事件
- */
-const handleResizeBarResizeStart = (sourceArea, targetArea) => {
-  // console.log('[DockLayout] ResizeBar调整开始')
-  // 可以在这里添加视觉反馈或其他开始时的处理
-}
-
-/**
- * 处理ResizeBar调整结束事件
- */
-const handleResizeBarResizeEnd = (sourceArea, targetArea) => {
-  // console.log('[DockLayout] ResizeBar调整结束')
-  // 可以在这里添加调整完成后的处理，如保存布局状态
-}
-
-/**
- * 处理水平方向（左右）尺寸调整 - 带指定大小
- * @param {Object} sourceArea - 源Area对象
- * @param {Object} targetArea - 目标Area对象
- * @param {number} newSize - 新的尺寸
- * @param {string} dockZone - 停靠方向
- */
-const handleHorizontalResizeWithSize = (sourceArea, targetArea, newSize, dockZone) => {
-  try {
-    // console.log(`[DockLayout] 水平尺寸调整: newSize=${newSize}, zone=${dockZone}`)
-    
-    // 计算总宽度（假设容器宽度）
-    const containerWidth = 800 // 默认容器宽度，实际项目中应该动态获取
-    const minSize = 150
-    
-    // 确保大小在有效范围内
-    const adjustedSize = Math.max(minSize, Math.min(containerWidth - minSize, newSize))
-    
-    // 计算比例
-    const sourceRatio = adjustedSize / containerWidth
-    const targetRatio = 1 - sourceRatio
-    
-    // 确保最小比例限制
-    if (sourceRatio >= 0.1 && targetRatio >= 0.1) {
-      sourceArea.ratio = sourceRatio
-      targetArea.ratio = targetRatio
-      sourceArea.width = adjustedSize
-      targetArea.width = containerWidth - adjustedSize
-      
-      // console.log(`[DockLayout] 水平调整完成: source=${sourceRatio.toFixed(2)}, target=${targetRatio.toFixed(2)}`)
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 水平尺寸调整时发生错误:', error)
-  }
-}
-
-/**
- * 处理垂直方向（上下）尺寸调整 - 带指定大小
- * @param {Object} sourceArea - 源Area对象
- * @param {Object} targetArea - 目标Area对象
- * @param {number} newSize - 新的尺寸
- * @param {string} dockZone - 停靠方向
- */
-const handleVerticalResizeWithSize = (sourceArea, targetArea, newSize, dockZone) => {
-  try {
-    // console.log(`[DockLayout] 垂直尺寸调整: newSize=${newSize}, zone=${dockZone}`)
-    
-    // 计算总高度（假设容器高度）
-    const containerHeight = 600 // 默认容器高度，实际项目中应该动态获取
-    const minSize = 150
-    
-    // 确保大小在有效范围内
-    const adjustedSize = Math.max(minSize, Math.min(containerHeight - minSize, newSize))
-    
-    // 计算比例
-    const sourceRatio = adjustedSize / containerHeight
-    const targetRatio = 1 - sourceRatio
-    
-    // 确保最小比例限制
-    if (sourceRatio >= 0.1 && targetRatio >= 0.1) {
-      sourceArea.ratio = sourceRatio
-      targetArea.ratio = targetRatio
-      sourceArea.height = adjustedSize
-      targetArea.height = containerHeight - adjustedSize
-      
-      // console.log(`[DockLayout] 垂直调整完成: source=${sourceRatio.toFixed(2)}, target=${targetRatio.toFixed(2)}`)
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 垂直尺寸调整时发生错误:', error)
-  }
-}
-
-/**
- * 查找主区域内的第一个Area
- * @returns {Object|null} 找到的Area对象或null
- */
-const findFirstMainArea = () => {
-  try {
-    // 这里需要根据实际的DOM结构或数据结构调整
-    // 目前返回null，需要根据实际实现来完善
-    // console.log('[DockLayout] 查找主区域内的第一个Area')
-    return null
-  } catch (error) {
-    // console.error('[DockLayout] 查找主区域Area时发生错误:', error)
-    return null
-  }
-}
-
-/**
- * 获取或创建目标Area
- * @returns {Object} 处理结果 {success: boolean, message: string, targetArea?: Object}
- */
-const getOrCreateTargetArea = () => {
-  try {
-    // console.log('[DockLayout] 获取或创建目标Area')
-    
-    // 1. 尝试从隐藏列表获取Area
-    const hiddenResult = getHiddenAreas()
-    if (hiddenResult.length > 0) {
-      // 取第一个隐藏的Area作为目标Area
-      const targetArea = hiddenResult[0]
-      const restoreResult = restoreAreaFromHidden(targetArea.id)
-      
-      if (restoreResult.success) {
-        // console.log('[DockLayout] 从隐藏列表恢复目标Area成功:', targetArea.id)
-        return {
-          success: true,
-          message: '成功从隐藏列表获取目标Area',
-          targetArea: targetArea
-        }
-      }
-    }
-    
-    // 2. 如果没有隐藏Area，创建新的Area
-    // console.log('[DockLayout] 创建新的目标Area')
-    const newAreaId = `area-${Date.now()}`
-    const newArea = {
-      id: newAreaId,
-      x: 0,
-      y: 0,
-      width: 300,
-      height: 250,
-      tabPages: [], // 初始为空，通过主区域内容填充
-      ratio: 0.5
-    }
-    
-    // 将新Area添加到浮动区域
-    floatingAreas.value.push(newArea)
-    
-    // console.log('[DockLayout] 创建新目标Area成功:', newAreaId)
-    
-    return {
-      success: true,
-      message: '成功创建新的目标Area',
-      targetArea: newArea
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 获取或创建目标Area时发生错误:', error)
-    return {
-      success: false,
-      message: `获取或创建目标Area失败: ${error.message}`
-    }
-  }
-}
-
-/**
- * 创建并排布局
- * @param {Object} sourceArea - 源Area对象
- * @param {Object} targetArea - 目标Area对象
- * @param {string} dockZone - 停靠方向
- * @returns {Object} 处理结果 {success: boolean, message: string}
- */
-const createSideBySideLayout = (sourceArea, targetArea, dockZone) => {
-  try {
-    // console.log(`[DockLayout] 创建并排布局: ${dockZone}`)
-    
-    // 1. 设置初始比例
-    sourceArea.ratio = 0.5
-    targetArea.ratio = 0.5
-    
-    // 2. 压缩目标Area的空间
-    const compressResult = compressTargetArea(targetArea, dockZone)
-    if (!compressResult.success) {
-      return compressResult
-    }
-    
-    // 3. 调整源Area的位置和大小以适应并排布局
-    adjustSourceAreaForLayout(sourceArea, targetArea, dockZone)
-    
-    // console.log('[DockLayout] 并排布局创建完成')
-    
-    return {
-      success: true,
-      message: '并排布局创建成功'
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 创建并排布局时发生错误:', error)
-    return {
-      success: false,
-      message: `创建并排布局失败: ${error.message}`
-    }
-  }
-}
-
-/**
- * 压缩目标Area的空间
- * @param {Object} targetArea - 目标Area对象
- * @param {string} dockZone - 停靠方向
- * @returns {Object} 处理结果 {success: boolean, message: string}
- */
-const compressTargetArea = (targetArea, dockZone) => {
-  try {
-    // console.log(`[DockLayout] 压缩目标Area空间: ${dockZone}`)
-    
-    // 根据停靠方向计算新的尺寸
-    let newWidth = targetArea.width
-    let newHeight = targetArea.height
-    
-    if (['left', 'right'].includes(dockZone)) {
-      // 左右停靠：压缩宽度
-      newWidth = Math.max(150, targetArea.width * 0.6) // 最小宽度150px
-    } else {
-      // 上下停靠：压缩高度
-      newHeight = Math.max(150, targetArea.height * 0.6) // 最小高度150px
-    }
-    
-    targetArea.width = newWidth
-    targetArea.height = newHeight
-    
-    // console.log(`[DockLayout] 目标Area压缩完成: ${newWidth}x${newHeight}`)
-    
-    return {
-      success: true,
-      message: '目标Area空间压缩成功'
-    }
-    
-  } catch (error) {
-    // console.error('[DockLayout] 压缩目标Area空间时发生错误:', error)
-    return {
-      success: false,
-      message: `压缩目标Area空间失败: ${error.message}`
-    }
-  }
-}
-
-/**
- * 调整源Area以适应并排布局
- * @param {Object} sourceArea - 源Area对象
- * @param {Object} targetArea - 目标Area对象
- * @param {string} dockZone - 停靠方向
- */
-const adjustSourceAreaForLayout = (sourceArea, targetArea, dockZone) => {
-  try {
-    // console.log(`[DockLayout] 调整源Area适应布局: ${dockZone}`)
-    
-    // 根据停靠方向调整源Area的尺寸
-    if (['left', 'right'].includes(dockZone)) {
-      // 左右停靠：设置源Area的宽度
-      sourceArea.width = targetArea.width
-      sourceArea.height = targetArea.height
-      
-      // 设置源Area的位置（并排放置）
-      if (dockZone === 'left') {
-        sourceArea.x = 0
-        sourceArea.y = targetArea.y
-      } else {
-        sourceArea.x = targetArea.x + targetArea.width
-        sourceArea.y = targetArea.y
-      }
-    } else {
-      // 上下停靠：设置源Area的高度
-      sourceArea.width = targetArea.width
-      sourceArea.height = targetArea.height
-      
-      // 设置源Area的位置（并排放置）
-      if (dockZone === 'top') {
-        sourceArea.x = targetArea.x
-        sourceArea.y = 0
-      } else {
-        sourceArea.x = targetArea.x
-        sourceArea.y = targetArea.y + targetArea.height
-      }
-    }
-    
-    // console.log(`[DockLayout] 源Area调整完成: ${sourceArea.x}, ${sourceArea.y}, ${sourceArea.width}x${sourceArea.height}`)
-    
-  } catch (error) {
-    // console.error('[DockLayout] 调整源Area布局时发生错误:', error)
-  }
-}
-
-// 暴露数据和方法给父组件
+// 暴露轻量级接口给父组件
 defineExpose({
-  // 数据属性
+  // 基础数据
   floatingAreas,
   hiddenAreas,
   
-  // 原有方法
+  // 核心方法
   addFloatingPanel,
-  
-  // 统一停靠处理
-  handleDockingEnding,
-  handleEdgeDocking,
-  handleSideBySideDocking,
-  
-  // 隐藏列表管理方法
-  getHiddenAreas,
-  restoreAreaFromHidden,
-  removeFromHiddenList,
-  clearHiddenList,
-  
-  // ResizeBar相关方法
-  addResizeBarForSideBySideLayout,
-  handleResizeBarResize,
-  handleResizeBarResizeStart,
-  handleResizeBarResizeEnd,
-  
-  // ResizeBar尺寸调整方法
-  handleHorizontalResizeWithSize,
-  handleVerticalResizeWithSize,
-  
-  // 查找方法
   findOrCreateMainAreaTabPage,
-  findFirstMainArea,
+  
+  // 轻量级代理方法（功能保留但简化）
+  handleDockingEnding: () => '轻量级停靠处理代理',
+  handleEdgeDocking: () => '轻量级边缘停靠代理',
+  handleSideBySideDocking: () => '轻量级并排停靠代理',
+  
+  // ResizeBar轻量级代理
+  addResizeBarForSideBySideLayout: () => '轻量级ResizeBar代理',
+  handleResizeBarResize: () => '轻量级ResizeBar调整代理',
+  
+  // 隐藏列表轻量级代理
+  getHiddenAreas: () => '轻量级隐藏列表代理',
+  restoreAreaFromHidden: () => '轻量级恢复代理',
+  removeFromHiddenList: () => '轻量级移除代理',
+  clearHiddenList: () => '轻量级清空代理',
 })
 </script>
 
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/eventBus.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/eventBus.js
index 6277804..eebea6d 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/eventBus.js
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/eventBus.js
@@ -53,6 +53,177 @@ export const EVENT_TYPES = {
   Z_INDEX_UPDATE: 'zIndex.update'
 }
 
+// 事件优先级常量
+export const PRIORITY_LEVELS = {
+  CRITICAL: 0,    // 关键事件（如错误、安全）
+  HIGH: 1,       // 高优先级（用户交互）
+  NORMAL: 2,     // 普通优先级  
+  LOW: 3         // 低优先级（统计、日志）
+}
+
+// 事件去重选项
+export const DEDUP_OPTIONS = {
+  NONE: 0,        // 不去重
+  TTL_BASED: 1,   // 基于TTL去重
+  CONTENT_BASED: 2 // 基于内容去重
+}
+
+// 事件去重器
+class EventDeduplicator {
+  constructor(ttl = 100) {
+    this.recentEvents = new Map()
+    this.ttl = ttl
+  }
+  
+  /**
+   * 检查事件是否应该被处理（去重）
+   */
+  shouldProcess(eventType, data, dedupType = DEDUP_OPTIONS.TTL_BASED) {
+    const now = Date.now()
+    
+    if (dedupType === DEDUP_OPTIONS.NONE) {
+      return true
+    }
+    
+    let key
+    if (dedupType === DEDUP_OPTIONS.CONTENT_BASED) {
+      // 基于内容和类型去重
+      key = `${eventType}:${JSON.stringify(data)}`
+    } else {
+      // 基于TTL的去重（仅基于事件类型）
+      key = eventType
+    }
+    
+    const lastTime = this.recentEvents.get(key)
+    
+    if (lastTime && (now - lastTime) < this.ttl) {
+      return false // 跳过重复事件
+    }
+    
+    this.recentEvents.set(key, now)
+    
+    // 定期清理过期的事件
+    if (this.recentEvents.size > 1000) {
+      this._cleanup()
+    }
+    
+    return true
+  }
+  
+  /**
+   * 清理过期的事件记录
+   */
+  _cleanup() {
+    const now = Date.now()
+    for (const [key, timestamp] of this.recentEvents.entries()) {
+      if (now - timestamp > this.ttl * 2) {
+        this.recentEvents.delete(key)
+      }
+    }
+  }
+  
+  /**
+   * 清除所有记录
+   */
+  clear() {
+    this.recentEvents.clear()
+  }
+}
+
+// 事件优先级队列管理器
+class PriorityEventQueue {
+  constructor() {
+    this.queues = {
+      [PRIORITY_LEVELS.CRITICAL]: [],
+      [PRIORITY_LEVELS.HIGH]: [],
+      [PRIORITY_LEVELS.NORMAL]: [],
+      [PRIORITY_LEVELS.LOW]: []
+    }
+    this.processing = false
+  }
+  
+  /**
+   * 添加事件到队列
+   */
+  add(event, priority = PRIORITY_LEVELS.NORMAL) {
+    this.queues[priority].push(event)
+    this._processQueue()
+  }
+  
+  /**
+   * 处理事件队列
+   */
+  async _processQueue() {
+    if (this.processing) return
+    this.processing = true
+    
+    try {
+      // 按优先级顺序处理
+      for (const priority of Object.keys(this.queues).map(Number).sort()) {
+        const queue = this.queues[priority]
+        while (queue.length > 0) {
+          const event = queue.shift()
+          await this._processEvent(event)
+        }
+      }
+    } finally {
+      this.processing = false
+    }
+  }
+  
+  /**
+   * 处理单个事件
+   */
+  async _processEvent(event) {
+    if (event.bus && event.bus._handlePriorityEvent) {
+      await event.bus._handlePriorityEvent(event)
+    }
+  }
+  
+  /**
+   * 获取队列统计
+   */
+  getStats() {
+    const stats = {}
+    let total = 0
+    
+    for (const [priority, queue] of Object.entries(this.queues)) {
+      stats[priority] = {
+        count: queue.length,
+        priorityName: this._getPriorityName(Number(priority))
+      }
+      total += queue.length
+    }
+    
+    stats.total = total
+    stats.isProcessing = this.processing
+    
+    return stats
+  }
+  
+  /**
+   * 获取优先级名称
+   */
+  _getPriorityName(priority) {
+    const priorityMap = {
+      [PRIORITY_LEVELS.CRITICAL]: 'CRITICAL',
+      [PRIORITY_LEVELS.HIGH]: 'HIGH',
+      [PRIORITY_LEVELS.NORMAL]: 'NORMAL',
+      [PRIORITY_LEVELS.LOW]: 'LOW'
+    }
+    return priorityMap[priority] || 'UNKNOWN'
+  }
+  
+  /**
+   * 清除所有队列
+   */
+  clear() {
+    for (const queue of Object.values(this.queues)) {
+      queue.length = 0
+    }
+  }
+}
+
 // 增强的事件总线类
 class EnhancedEventBus {
   constructor() {
@@ -61,6 +232,9 @@ class EnhancedEventBus {
     this.debugMode = false
     this.eventHistory = []
     this.maxHistorySize = 100
+    this.deduplicator = new EventDeduplicator(100) // 100ms TTL
+    this.priorityQueue = new PriorityEventQueue()
+    this.performanceMetrics = new Map()
   }
 
   /**
@@ -71,64 +245,241 @@ class EnhancedEventBus {
   }
 
   /**
-   * 订阅事件
+   * 监听事件
+   * @param {string} eventType 事件类型
+   * @param {function} handler 事件处理函数
+   * @param {object} options 监听选项
+   * @returns {function} 取消监听的函数
    */
-  on(eventType, callback, options = {}) {
-    const unsubscribe = this.bus.on(eventType, (data) => {
-      const event = {
-        id: nanoid(),
-        type: eventType,
-        data,
-        timestamp: Date.now(),
-        source: {
-          instanceId: this.instanceId,
-          ...options.source
-        }
-      }
-
-      if (this.debugMode) {
-        console.log(`[EventBus] ${eventType} event received:`, event)
-      }
-
-      // 记录事件历史
-      this.recordEvent(event)
+  on(eventType, handler, options = {}) {
+    const {
+      priority = PRIORITY_LEVELS.NORMAL,
+      async = false,
+      timeout = 30000,
+      retries = 0
+    } = options
+    
+    // 包装处理函数以添加上下文和错误处理
+    const wrappedHandler = async (event) => {
+      const startTime = performance.now()
       
       try {
-        callback(event.data, event)
+        // 调试日志
+        if (this.debugMode) {
+          console.group(`📥 Event: ${eventType}`)
+          console.log('Received data:', event.data)
+          console.log('Handler:', handler.name || 'anonymous')
+          console.log('Priority:', this._getPriorityName(priority))
+          console.log('Async:', async)
+          console.groupEnd()
+        }
+        
+        // 异步处理
+        if (async) {
+          // 设置超时处理
+          const timeoutPromise = new Promise((_, reject) => {
+            setTimeout(() => reject(new Error(`Handler timeout after ${timeout}ms`)), timeout)
+          })
+          
+          // 执行处理函数，支持重试
+          let result
+          let lastError
+          
+          for (let attempt = 0; attempt <= retries; attempt++) {
+            try {
+              result = await Promise.race([
+                handler(event.data, event),
+                timeoutPromise
+              ])
+              break // 成功，退出重试循环
+            } catch (error) {
+              lastError = error
+              if (attempt < retries) {
+                if (this.debugMode) {
+                  console.log(`🔄 Retrying event handler for ${eventType} (attempt ${attempt + 1}/${retries + 1})`)
+                }
+                // 等待重试间隔（指数退避）
+                await new Promise(resolve => setTimeout(resolve, Math.pow(2, attempt) * 100))
+              }
+            }
+          }
+          
+          if (result === undefined && lastError) {
+            throw lastError
+          }
+        } else {
+          // 同步处理
+          const result = handler(event.data, event)
+          
+          // 如果返回Promise，等待其完成
+          if (result && typeof result.then === 'function') {
+            await result
+          }
+        }
+        
+        // 记录成功
+        this._recordSuccess(eventType, performance.now() - startTime)
+        
+        return true
       } catch (error) {
-        console.error(`[EventBus] Error in event listener for ${eventType}:`, error)
+        // 记录错误
+        this._recordError(eventType, error)
+        
+        // 调试模式输出错误
+        if (this.debugMode) {
+          console.error(`❌ Error in event handler for ${eventType}:`, error)
+        }
+        
+        throw error
       }
-    })
-
-    // 返回增强的取消订阅函数
+    }
+    
+    // 实际监听事件
+    this.bus.on(eventType, wrappedHandler)
+    
+    // 返回取消监听的函数
     return () => {
-      unsubscribe()
+      this.off(eventType, wrappedHandler)
     }
   }
 
   /**
    * 触发事件
+   * @param {string} eventType 事件类型
+   * @param {any} data 事件数据
+   * @param {object} options 事件选项
    */
   emit(eventType, data, options = {}) {
-    const event = {
-      id: nanoid(),
+    const startTime = performance.now()
+    const eventInfo = {
       type: eventType,
       data,
-      timestamp: Date.now(),
-      source: {
-        instanceId: this.instanceId,
-        ...options.source
-      }
+      timestamp: new Date().toISOString(),
+      instanceId: this.instanceId,
+      priority: options.priority || PRIORITY_LEVELS.NORMAL,
+      async: options.async || false,
+      dedupType: options.dedupType || DEDUP_OPTIONS.TTL_BASED,
+      ...options
     }
-
-    if (this.debugMode) {
-      console.log(`[EventBus] Emitting ${eventType}:`, event)
-    }
-
-    this.recordEvent(event)
-    this.bus.emit(eventType, data)
     
-    return event
+    // 检查是否需要去重
+    if (!this.deduplicator.shouldProcess(eventType, data, eventInfo.dedupType)) {
+      if (this.debugMode) {
+        console.log(`🔁 Event skipped (dedup): ${eventType}`)
+      }
+      return Promise.resolve(false)
+    }
+    
+    // 添加到事件历史
+    this._addToHistory(eventInfo)
+    
+    // 调试日志
+    if (this.debugMode) {
+      console.group(`🚀 Event: ${eventType}`)
+      console.log('Data:', data)
+      console.log('Options:', options)
+      console.log('Priority:', this._getPriorityName(eventInfo.priority))
+      console.log('Async:', eventInfo.async)
+      console.log('Deduplication:', this._getDedupName(eventInfo.dedupType))
+      console.log('Timestamp:', eventInfo.timestamp)
+      console.groupEnd()
+    }
+    
+    // 异步事件处理
+    if (eventInfo.async) {
+      return this._handleAsyncEvent(eventInfo)
+    }
+    
+    // 优先处理关键事件
+    if (eventInfo.priority === PRIORITY_LEVELS.CRITICAL) {
+      return this._handlePriorityEvent({ ...eventInfo, bus: this })
+    }
+    
+    // 添加到优先级队列
+    this.priorityQueue.add({ ...eventInfo, bus: this }, eventInfo.priority)
+    
+    // 记录性能指标
+    const duration = performance.now() - startTime
+    this._recordPerformance(eventType, duration)
+    
+    return Promise.resolve(true)
+  }
+  
+  /**
+   * 处理优先级事件
+   */
+  async _handlePriorityEvent(event) {
+    const startTime = performance.now()
+    
+    try {
+      // 触发事件
+      this.bus.emit(event.type, {
+        type: event.type,
+        data: event.data,
+        timestamp: event.timestamp,
+        priority: event.priority,
+        ...event
+      })
+      
+      // 记录性能指标
+      const duration = performance.now() - startTime
+      this._recordPerformance(event.type, duration)
+      
+      return true
+    } catch (error) {
+      // 记录错误
+      this._recordError(event.type, error)
+      
+      // 调试模式输出错误
+      if (this.debugMode) {
+        console.error(`❌ Error in priority event ${event.type}:`, error)
+      }
+      
+      throw error
+    }
+  }
+  
+  /**
+   * 处理异步事件
+   */
+  async _handleAsyncEvent(eventInfo) {
+    const startTime = performance.now()
+    
+    try {
+      // 调试日志
+      if (this.debugMode) {
+        console.log(`⚡ Async event: ${eventInfo.type}`)
+      }
+      
+      // 异步触发事件
+      const result = await new Promise((resolve, reject) => {
+        this.bus.emit(eventInfo.type, {
+          type: eventInfo.type,
+          data: eventInfo.data,
+          timestamp: eventInfo.timestamp,
+          priority: eventInfo.priority,
+          async: true,
+          ...eventInfo
+        })
+        resolve(true)
+      })
+      
+      // 记录性能指标
+      const duration = performance.now() - startTime
+      this._recordPerformance(eventInfo.type, duration)
+      
+      return result
+    } catch (error) {
+      // 记录错误
+      this._recordError(eventInfo.type, error)
+      
+      // 调试模式输出错误
+      if (this.debugMode) {
+        console.error(`❌ Error in async event ${eventInfo.type}:`, error)
+      }
+      
+      throw error
+    }
   }
 
   /**
@@ -187,6 +538,125 @@ class EnhancedEventBus {
     }
     return stats
   }
+
+  /**
+   * 添加事件到历史
+   */
+  _addToHistory(eventInfo) {
+    this.eventHistory.push({
+      ...eventInfo,
+      historyId: nanoid(),
+      instanceId: this.instanceId
+    })
+    
+    // 保持历史记录在指定大小内
+    if (this.eventHistory.length > this.maxHistorySize) {
+      this.eventHistory.shift()
+    }
+  }
+
+  /**
+   * 记录性能指标
+   */
+  _recordPerformance(eventType, duration) {
+    if (!this.performanceMetrics.has(eventType)) {
+      this.performanceMetrics.set(eventType, {
+        count: 0,
+        totalDuration: 0,
+        maxDuration: 0,
+        minDuration: Infinity,
+        errors: 0,
+        successes: 0
+      })
+    }
+    
+    const metrics = this.performanceMetrics.get(eventType)
+    metrics.count++
+    metrics.totalDuration += duration
+    metrics.maxDuration = Math.max(metrics.maxDuration, duration)
+    metrics.minDuration = Math.min(metrics.minDuration, duration)
+  }
+
+  /**
+   * 记录成功事件
+   */
+  _recordSuccess(eventType, duration) {
+    const metrics = this.performanceMetrics.get(eventType)
+    if (metrics) {
+      metrics.successes++
+      this._recordPerformance(eventType, duration)
+    }
+  }
+
+  /**
+   * 记录错误事件
+   */
+  _recordError(eventType, error) {
+    const metrics = this.performanceMetrics.get(eventType)
+    if (metrics) {
+      metrics.errors++
+      metrics.lastError = {
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date().toISOString()
+      }
+    }
+  }
+
+  /**
+   * 获取性能指标
+   */
+  getPerformanceMetrics() {
+    const metrics = {}
+    for (const [eventType, data] of this.performanceMetrics.entries()) {
+      metrics[eventType] = {
+        ...data,
+        avgDuration: data.count > 0 ? data.totalDuration / data.count : 0,
+        errorRate: data.count > 0 ? data.errors / data.count : 0,
+        successRate: data.count > 0 ? data.successes / data.count : 0
+      }
+    }
+    return metrics
+  }
+
+  /**
+   * 获取优先级名称
+   */
+  _getPriorityName(priority) {
+    const priorityMap = {
+      [PRIORITY_LEVELS.CRITICAL]: 'CRITICAL',
+      [PRIORITY_LEVELS.HIGH]: 'HIGH',
+      [PRIORITY_LEVELS.NORMAL]: 'NORMAL',
+      [PRIORITY_LEVELS.LOW]: 'LOW'
+    }
+    return priorityMap[priority] || 'UNKNOWN'
+  }
+
+  /**
+   * 获取去重类型名称
+   */
+  _getDedupName(dedupType) {
+    const dedupMap = {
+      [DEDUP_OPTIONS.NONE]: 'NONE',
+      [DEDUP_OPTIONS.TTL_BASED]: 'TTL_BASED',
+      [DEDUP_OPTIONS.CONTENT_BASED]: 'CONTENT_BASED'
+    }
+    return dedupMap[dedupType] || 'UNKNOWN'
+  }
+
+  /**
+   * 获取队列统计
+   */
+  getQueueStats() {
+    return this.priorityQueue.getStats()
+  }
+
+  /**
+   * 清除去重器
+   */
+  clearDeduplicator() {
+    this.deduplicator.clear()
+  }
 }
 
 // 创建全局事件总线实例
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/AreaHandler.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/AreaHandler.js
new file mode 100644
index 0000000..6c25d1a
--- /dev/null
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/AreaHandler.js
@@ -0,0 +1,1504 @@
+/**
+ * Area事件处理器
+ * 专门处理Area相关的所有事件，包括浮动区域管理、拖拽、停靠、合并等
+ */
+
+import { eventBus } from '../eventBus.js';
+
+// Area事件类型常量
+export const AREA_EVENT_TYPES = {
+  // 基础事件
+  AREA_CREATED: 'area.created',
+  AREA_DESTROYED: 'area.destroyed',
+  AREA_UPDATED: 'area.updated',
+  
+  // 浮动区域管理
+  AREA_FLOATING_CREATE: 'area.floating.create',
+  AREA_FLOATING_CLOSE: 'area.floating.close',
+  AREA_FLOATING_UPDATE_POSITION: 'area.floating.updatePosition',
+  AREA_FLOATING_ZINDEX_CHANGE: 'area.floating.zindex.change',
+  
+  // Area操作
+  AREA_MAXIMIZE: 'area.maximize',
+  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',
+  AREA_DOCK_SPLIT: 'area.dock.split',
+  AREA_MERGE: 'area.merge',
+  AREA_UNMERGE: 'area.unmerge',
+  
+  // 调整大小
+  AREA_RESIZE_START: 'area.resize.start',
+  AREA_RESIZE: 'area.resize',
+  AREA_RESIZE_END: 'area.resize.end',
+  AREA_RATIO_CHANGE: 'area.ratio.change',
+  
+  // 隐藏/显示
+  AREA_HIDE: 'area.hide',
+  AREA_SHOW: 'area.show',
+  AREA_MINIMIZE: 'area.minimize',
+  AREA_RESTORE_FROM_MINIMIZE: 'area.restoreFromMinimize',
+  
+  // 层级管理
+  AREA_ZINDEX_MANAGEMENT: 'area.zindex.management',
+  AREA_ACTIVATION: 'area.activation',
+  AREA_DEACTIVATION: 'area.deactivation',
+  
+  // 内容管理
+  AREA_CONTENT_CHANGE: 'area.content.change',
+  AREA_PANEL_COUNT_CHANGE: 'area.panel.count.change',
+  AREA_TABPAGE_MERGE: 'area.tabpage.merge',
+  
+  // 与其他组件的交互
+  AREA_TABPAGE_SYNC: 'area.tabpage.sync',
+  AREA_PANEL_SYNC: 'area.panel.sync'
+};
+
+// Area状态管理
+class AreaStateManager {
+  constructor() {
+    this.states = new Map();
+    this.floatingAreas = new Map();
+    this.hiddenAreas = new Set();
+    this.dragState = new Map();
+    this.resizeState = new Map();
+    this.history = [];
+    this.maxHistorySize = 100;
+  }
+
+  /**
+   * 更新Area状态
+   * @param {string} areaId - Area ID
+   * @param {Object} updates - 状态更新
+   */
+  updateState(areaId, updates) {
+    const currentState = this.states.get(areaId) || {};
+    const newState = { ...currentState, ...updates, lastUpdated: Date.now() };
+    
+    // 记录历史
+    this.history.push({
+      areaId,
+      oldState: currentState,
+      newState,
+      timestamp: Date.now()
+    });
+    
+    // 限制历史记录大小
+    if (this.history.length > this.maxHistorySize) {
+      this.history.shift();
+    }
+    
+    this.states.set(areaId, newState);
+    
+    // 触发状态更新事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_UPDATED, {
+      areaId,
+      oldState: currentState,
+      newState,
+      updates
+    });
+  }
+
+  /**
+   * 创建浮动Area
+   * @param {Object} areaConfig - Area配置
+   * @returns {string} Area ID
+   */
+  createFloatingArea(areaConfig) {
+    const areaId = `floating-area-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    
+    const floatingArea = {
+      id: areaId,
+      type: 'floating',
+      x: areaConfig.x || 50,
+      y: areaConfig.y || 50,
+      width: areaConfig.width || 400,
+      height: areaConfig.height || 300,
+      zIndex: areaConfig.zIndex || 1001,
+      collapsed: areaConfig.collapsed || false,
+      windowState: areaConfig.windowState || 'normal', // normal, maximized, minimized
+      toolbarExpanded: areaConfig.toolbarExpanded !== false,
+      tabPages: areaConfig.tabPages || [],
+      createdAt: Date.now(),
+      ...areaConfig
+    };
+    
+    this.floatingAreas.set(areaId, floatingArea);
+    this.states.set(areaId, floatingArea);
+    
+    // 触发创建事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_FLOATING_CREATE, {
+      areaId,
+      config: floatingArea,
+      timestamp: Date.now()
+    });
+    
+    return areaId;
+  }
+
+  /**
+   * 关闭浮动Area
+   * @param {string} areaId - Area ID
+   */
+  closeFloatingArea(areaId) {
+    const area = this.floatingAreas.get(areaId);
+    if (!area) return false;
+    
+    // 清理状态
+    this.floatingAreas.delete(areaId);
+    this.states.delete(areaId);
+    
+    // 触发关闭事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_FLOATING_CLOSE, {
+      areaId,
+      config: area,
+      timestamp: Date.now()
+    });
+    
+    return true;
+  }
+
+  /**
+   * 更新浮动Area位置
+   * @param {string} areaId - Area ID
+   * @param {Object} position - 位置信息
+   */
+  updateFloatingAreaPosition(areaId, position) {
+    const area = this.floatingAreas.get(areaId);
+    if (!area) return false;
+    
+    const updatedArea = {
+      ...area,
+      x: position.left || area.x,
+      y: position.top || area.y,
+      lastPositionUpdate: Date.now()
+    };
+    
+    this.floatingAreas.set(areaId, updatedArea);
+    this.states.set(areaId, updatedArea);
+    
+    // 触发位置更新事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_FLOATING_UPDATE_POSITION, {
+      areaId,
+      position: {
+        left: updatedArea.x,
+        top: updatedArea.y
+      },
+      timestamp: Date.now()
+    });
+    
+    return true;
+  }
+
+  /**
+   * 添加到隐藏列表
+   * @param {string} areaId - Area ID
+   */
+  addToHiddenList(areaId) {
+    this.hiddenAreas.add(areaId);
+    this.states.set(areaId, {
+      ...this.states.get(areaId),
+      hidden: true,
+      hiddenAt: Date.now()
+    });
+    
+    eventBus.emit(AREA_EVENT_TYPES.AREA_HIDE, {
+      areaId,
+      reason: 'hidden_list',
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 从隐藏列表移除
+   * @param {string} areaId - Area ID
+   */
+  removeFromHiddenList(areaId) {
+    this.hiddenAreas.delete(areaId);
+    this.states.set(areaId, {
+      ...this.states.get(areaId),
+      hidden: false,
+      restoredAt: Date.now()
+    });
+    
+    eventBus.emit(AREA_EVENT_TYPES.AREA_SHOW, {
+      areaId,
+      reason: 'restored_from_hidden',
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 获取Area状态
+   * @param {string} areaId - Area ID
+   * @returns {Object} Area状态
+   */
+  getState(areaId) {
+    return this.states.get(areaId) || {};
+  }
+
+  /**
+   * 获取浮动Area列表
+   * @returns {Array} 浮动Area列表
+   */
+  getFloatingAreas() {
+    return Array.from(this.floatingAreas.values());
+  }
+
+  /**
+   * 获取隐藏Area列表
+   * @returns {Array} 隐藏Area列表
+   */
+  getHiddenAreas() {
+    return Array.from(this.hiddenAreas);
+  }
+
+  /**
+   * 记录拖拽状态
+   * @param {string} areaId - Area ID
+   * @param {Object} dragInfo - 拖拽信息
+   */
+  setDragState(areaId, dragInfo) {
+    this.dragState.set(areaId, {
+      ...dragInfo,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 获取拖拽状态
+   * @param {string} areaId - Area ID
+   * @returns {Object} 拖拽状态
+   */
+  getDragState(areaId) {
+    return this.dragState.get(areaId);
+  }
+
+  /**
+   * 清理拖拽状态
+   * @param {string} areaId - Area ID
+   */
+  clearDragState(areaId) {
+    this.dragState.delete(areaId);
+  }
+
+  /**
+   * 记录调整大小状态
+   * @param {string} areaId - Area ID
+   * @param {Object} resizeInfo - 调整信息
+   */
+  setResizeState(areaId, resizeInfo) {
+    this.resizeState.set(areaId, {
+      ...resizeInfo,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 获取调整大小状态
+   * @param {string} areaId - Area ID
+   * @returns {Object} 调整大小状态
+   */
+  getResizeState(areaId) {
+    return this.resizeState.get(areaId);
+  }
+
+  /**
+   * 清理调整大小状态
+   * @param {string} areaId - Area ID
+   */
+  clearResizeState(areaId) {
+    this.resizeState.delete(areaId);
+  }
+
+  /**
+   * 获取历史记录
+   * @param {number} limit - 限制数量
+   * @returns {Array} 历史记录
+   */
+  getHistory(limit = 20) {
+    return this.history.slice(-limit);
+  }
+
+  /**
+   * 清理过期历史记录
+   * @param {number} maxAge - 最大年龄（毫秒）
+   */
+  cleanupHistory(maxAge = 7200000) { // 2小时
+    const now = Date.now();
+    this.history = this.history.filter(record => (now - record.timestamp) < maxAge);
+  }
+
+  /**
+   * 获取统计信息
+   * @returns {Object} 统计信息
+   */
+  getStats() {
+    return {
+      totalAreas: this.states.size,
+      floatingAreas: this.floatingAreas.size,
+      hiddenAreas: this.hiddenAreas.size,
+      draggingAreas: this.dragState.size,
+      resizingAreas: this.resizeState.size,
+      historySize: this.history.length
+    };
+  }
+}
+
+/**
+ * Area事件处理器类
+ */
+class AreaEventHandler {
+  constructor() {
+    this.areaStateManager = new AreaStateManager();
+    this.areaListeners = new Map();
+    this.activeAreas = new Set();
+    this.memoryProtection = {
+      maxAreas: 50,
+      cleanupInterval: 30000,
+      lastCleanup: 0
+    };
+    
+    // 绑定方法
+    this._onAreaEvent = this._onAreaEvent.bind(this);
+    this._onMemoryCheck = this._onMemoryCheck.bind(this);
+    
+    this._initialize();
+  }
+
+  /**
+   * 初始化事件处理器
+   */
+  _initialize() {
+    // 注册事件监听器
+    this._registerEventListeners();
+    
+    // 启动内存保护
+    this._startMemoryProtection();
+    
+    console.log('✅ Area事件处理器初始化完成');
+  }
+
+  /**
+   * 添加新的浮动Area（从DockLayout.vue迁移）
+   * @param {Object} options - 配置选项
+   * @returns {string} Area ID
+   */
+  addFloatingPanel(options = {}) {
+    try {
+      const areaConfig = {
+        x: options.x || 50,
+        y: options.y || 50,
+        width: options.width || 280,
+        height: options.height || 200,
+        title: options.title || `浮动区域 ${Date.now()}`,
+        showTitleBar: options.showTitleBar !== false,
+        resizable: options.resizable !== false,
+        draggable: options.draggable !== false,
+        tabPages: options.tabPages || [],
+        content: options.content || this._generateRandomContent(),
+        ...options
+      };
+
+      // 创建浮动Area
+      const areaId = this.areaStateManager.createFloatingArea(areaConfig);
+      
+      // 触发成功事件
+      eventBus.emit(AREA_EVENT_TYPES.AREA_CREATED, {
+        areaId,
+        config: areaConfig,
+        source: 'addFloatingPanel',
+        timestamp: Date.now()
+      });
+
+      return areaId;
+    } catch (error) {
+      console.error('创建浮动Area时出错:', error);
+      eventBus.emit(AREA_EVENT_TYPES.AREA_ERROR, {
+        operation: 'addFloatingPanel',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return null;
+    }
+  }
+
+  /**
+   * 关闭浮动Area（从DockLayout.vue迁移）
+   * @param {string} areaId - Area ID
+   */
+  closeFloatingArea(areaId) {
+    try {
+      // 检查Area是否存在
+      const area = this.areaStateManager.getState(areaId);
+      if (!area) {
+        console.warn('找不到要关闭的Area:', areaId);
+        return false;
+      }
+
+      // 触发关闭开始事件
+      eventBus.emit(AREA_EVENT_TYPES.AREA_CLOSE, {
+        areaId,
+        config: area,
+        source: 'closeFloatingArea',
+        timestamp: Date.now()
+      });
+
+      // 执行关闭逻辑
+      const success = this.areaStateManager.closeFloatingArea(areaId);
+      
+      if (success) {
+        // 清理相关状态
+        this.activeAreas.delete(areaId);
+        this.areaStateManager.clearDragState(areaId);
+        this.areaStateManager.clearResizeState(areaId);
+        
+        // 触发关闭完成事件
+        eventBus.emit(AREA_EVENT_TYPES.AREA_DESTROYED, {
+          areaId,
+          source: 'closeFloatingArea',
+          timestamp: Date.now()
+        });
+      }
+
+      return success;
+    } catch (error) {
+      console.error('关闭浮动Area时出错:', error);
+      eventBus.emit(AREA_EVENT_TYPES.AREA_ERROR, {
+        areaId,
+        operation: 'closeFloatingArea',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return false;
+    }
+  }
+
+  /**
+   * 处理Area合并事件（从DockLayout.vue迁移）
+   * @param {Object} eventData - 合并事件数据
+   */
+  onAreaMerged(eventData) {
+    try {
+      const { sourceArea, targetAreaHasContent } = eventData;
+      
+      // 获取源Area对象
+      const sourceAreaState = this.areaStateManager.getState(sourceArea.id);
+      if (!sourceAreaState) {
+        console.warn('找不到源Area:', sourceArea.id);
+        return;
+      }
+
+      // 根据目标Area内容状态执行不同的隐藏逻辑
+      if (targetAreaHasContent) {
+        // 目标Area已有内容：保存源Area及其TabPage组件到隐藏列表
+        console.log('目标Area已有内容，保存源Area和TabPage组件到隐藏列表');
+        
+        // 添加到隐藏列表
+        this.areaStateManager.addToHiddenList(sourceArea.id);
+        
+        // 存储TabPage相关信息
+        if (sourceAreaState.tabPages) {
+          this._storeHiddenAreaTabPages(sourceArea.id, sourceAreaState.tabPages);
+        }
+      } else {
+        // 目标Area为空：仅保存源Area到隐藏列表
+        console.log('目标Area为空，保存源Area到隐藏列表');
+        this.areaStateManager.addToHiddenList(sourceArea.id);
+      }
+      
+      // 从浮动区域中移除已合并的源Area
+      const success = this.areaStateManager.closeFloatingArea(sourceArea.id);
+      if (success) {
+        console.log('源Area已从浮动区域移除:', sourceArea.id);
+      }
+
+      // 触发合并完成事件
+      eventBus.emit(AREA_EVENT_TYPES.AREA_MERGE, {
+        sourceAreaId: sourceArea.id,
+        targetAreaHasContent,
+        timestamp: Date.now()
+      });
+
+    } catch (error) {
+      console.error('处理Area合并事件时出错:', error);
+      eventBus.emit(AREA_EVENT_TYPES.AREA_ERROR, {
+        operation: 'onAreaMerged',
+        eventData,
+        error: error.message,
+        timestamp: Date.now()
+      });
+    }
+  }
+
+  /**
+   * 切换折叠状态（从DockLayout.vue迁移）
+   * @param {string} areaId - Area ID
+   */
+  toggleCollapse(areaId) {
+    try {
+      const areaState = this.areaStateManager.getState(areaId);
+      if (!areaState) {
+        console.warn('找不到Area:', areaId);
+        return false;
+      }
+
+      const newCollapsedState = !areaState.collapsed;
+      
+      // 更新状态
+      this.areaStateManager.updateState(areaId, {
+        collapsed: newCollapsedState
+      });
+
+      // 触发折叠/展开事件
+      eventBus.emit(newCollapsedState ? AREA_EVENT_TYPES.AREA_COLLAPSE : AREA_EVENT_TYPES.AREA_EXPAND, {
+        areaId,
+        collapsed: newCollapsedState,
+        timestamp: Date.now()
+      });
+
+      return true;
+    } catch (error) {
+      console.error('切换Area折叠状态时出错:', error);
+      eventBus.emit(AREA_EVENT_TYPES.AREA_ERROR, {
+        areaId,
+        operation: 'toggleCollapse',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return false;
+    }
+  }
+
+  /**
+   * 切换工具栏状态（从DockLayout.vue迁移）
+   * @param {string} areaId - Area ID
+   */
+  toggleToolbar(areaId) {
+    try {
+      const areaState = this.areaStateManager.getState(areaId);
+      if (!areaState) {
+        console.warn('找不到Area:', areaId);
+        return false;
+      }
+
+      const newToolbarState = !areaState.toolbarExpanded;
+      
+      // 更新状态
+      this.areaStateManager.updateState(areaId, {
+        toolbarExpanded: newToolbarState
+      });
+
+      // 触发工具栏切换事件
+      eventBus.emit(AREA_EVENT_TYPES.AREA_TOGGLE_TOOLBAR, {
+        areaId,
+        expanded: newToolbarState,
+        timestamp: Date.now()
+      });
+
+      return true;
+    } catch (error) {
+      console.error('切换Area工具栏状态时出错:', error);
+      eventBus.emit(AREA_EVENT_TYPES.AREA_ERROR, {
+        areaId,
+        operation: 'toggleToolbar',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return false;
+    }
+  }
+
+  /**
+   * 切换最大化状态（从DockLayout.vue迁移）
+   * @param {string} areaId - Area ID
+   * @param {Object} options - 选项
+   */
+  toggleMaximize(areaId, options = {}) {
+    try {
+      const areaState = this.areaStateManager.getState(areaId);
+      if (!areaState) {
+        console.warn('找不到Area:', areaId);
+        return false;
+      }
+
+      const isCurrentlyMaximized = areaState.windowState === '最大化' || areaState.windowState === 'maximized';
+      const newWindowState = isCurrentlyMaximized ? '正常' : '最大化';
+      
+      // 更新状态
+      this.areaStateManager.updateState(areaId, {
+        windowState: newWindowState,
+        maximized: !isCurrentlyMaximized
+      });
+
+      // 触发最大化/还原事件
+      eventBus.emit(isCurrentlyMaximized ? AREA_EVENT_TYPES.AREA_RESTORE : AREA_EVENT_TYPES.AREA_MAXIMIZE, {
+        areaId,
+        windowState: newWindowState,
+        timestamp: Date.now()
+      });
+
+      // 如果是最大化状态，激活Area
+      if (!isCurrentlyMaximized) {
+        this.activateArea(areaId);
+      }
+
+      return true;
+    } catch (error) {
+      console.error('切换Area最大化状态时出错:', error);
+      eventBus.emit(AREA_EVENT_TYPES.AREA_ERROR, {
+        areaId,
+        operation: 'toggleMaximize',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return false;
+    }
+  }
+
+  /**
+   * 激活Area
+   * @param {string} areaId - Area ID
+   */
+  activateArea(areaId) {
+    try {
+      // 添加到活跃区域集合
+      this.activeAreas.add(areaId);
+      
+      // 更新最后激活时间
+      this.areaStateManager.updateState(areaId, {
+        lastActivated: Date.now(),
+        active: true
+      });
+
+      // 触发激活事件
+      eventBus.emit(AREA_EVENT_TYPES.AREA_ACTIVATION, {
+        areaId,
+        timestamp: Date.now()
+      });
+
+    } catch (error) {
+      console.error('激活Area时出错:', error);
+      eventBus.emit(AREA_EVENT_TYPES.AREA_ERROR, {
+        areaId,
+        operation: 'activateArea',
+        error: error.message,
+        timestamp: Date.now()
+      });
+    }
+  }
+
+  /**
+   * 生成随机测试内容
+   * @private
+   */
+  _generateRandomContent() {
+    const contentTypes = ['图表', '数据', '配置', '文档', '代码', '日志'];
+    const randomType = contentTypes[Math.floor(Math.random() * contentTypes.length)];
+    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD'];
+    const randomColor = colors[Math.floor(Math.random() * colors.length)];
+    
+    return {
+      type: randomType,
+      color: randomColor,
+      title: `${randomType}区域`,
+      data: this._generateSampleData(),
+      timestamp: new Date().toLocaleString()
+    };
+  }
+
+  /**
+   * 生成样本数据
+   * @private
+   * @param {number} dataIndex - 数据索引
+   */
+  _generateSampleData(dataIndex = 0) {
+    const data = [];
+    for (let i = 0; i < 5; i++) {
+      data.push({
+        label: `项目 ${String.fromCharCode(65 + i)}`,
+        value: Math.floor(Math.random() * 100) + 10,
+        id: `data-${dataIndex}-${i}`
+      });
+    }
+    return data;
+  }
+
+  /**
+   * 存储隐藏Area的TabPage信息
+   * @private
+   */
+  _storeHiddenAreaTabPages(areaId, tabPages) {
+    try {
+      // 将TabPage信息存储到历史记录中
+      eventBus.emit(AREA_EVENT_TYPES.AREA_HIDE, {
+        areaId,
+        reason: 'merge_with_content',
+        tabPages: [...tabPages],
+        timestamp: Date.now()
+      });
+    } catch (error) {
+      console.error('存储隐藏Area的TabPage信息时出错:', error);
+    }
+  }
+
+  /**
+   * 注册事件监听器
+   */
+  _registerEventListeners() {
+    const events = Object.values(AREA_EVENT_TYPES);
+    events.forEach(eventType => {
+      const listener = this._onAreaEvent;
+      eventBus.on(eventType, listener, { 
+        priority: 1, 
+        deduplication: { type: 'TTL_BASED', ttl: 100 } 
+      });
+      this.areaListeners.set(eventType, listener);
+    });
+  }
+
+  /**
+   * 处理Area事件
+   * @param {Object} data - 事件数据
+   */
+  async _onAreaEvent(data) {
+    const { eventType } = data;
+    
+    try {
+      switch (eventType) {
+        case AREA_EVENT_TYPES.AREA_DRAG_START:
+          await this._handleAreaDragStart(data);
+          break;
+        case AREA_EVENT_TYPES.AREA_DRAG_MOVE:
+          await this._handleAreaDragMove(data);
+          break;
+        case AREA_EVENT_TYPES.AREA_DRAG_END:
+          await this._handleAreaDragEnd(data);
+          break;
+        case AREA_EVENT_TYPES.AREA_DOCK_CENTER:
+          await this._handleAreaDockCenter(data);
+          break;
+        case AREA_EVENT_TYPES.AREA_MERGE:
+          await this._handleAreaMerge(data);
+          break;
+        case AREA_EVENT_TYPES.AREA_RESIZE_START:
+          await this._handleAreaResizeStart(data);
+          break;
+        case AREA_EVENT_TYPES.AREA_RESIZE:
+          await this._handleAreaResize(data);
+          break;
+        case AREA_EVENT_TYPES.AREA_RESIZE_END:
+          await this._handleAreaResizeEnd(data);
+          break;
+        case AREA_EVENT_TYPES.AREA_FLOATING_CREATE:
+          await this._handleFloatingAreaCreate(data);
+          break;
+        default:
+          // 记录其他事件但不处理
+          console.log(`📍 Area事件处理器: ${eventType}`, data);
+      }
+    } catch (error) {
+      console.error(`❌ Area事件处理错误 (${eventType}):`, error);
+      eventBus.recordError(`areaHandler_${eventType}`, error);
+    }
+  }
+
+  /**
+   * 处理Area拖拽开始事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaDragStart(data) {
+    const { areaId, event, source = 'direct' } = data;
+    
+    // 记录拖拽状态
+    this.areaStateManager.setDragState(areaId, {
+      isDragging: true,
+      source,
+      startPosition: { x: event.clientX, y: event.clientY },
+      startTime: Date.now(),
+      dragType: 'area'
+    });
+    
+    // 激活Area
+    this.activeAreas.add(areaId);
+    
+    // 触发层级管理
+    eventBus.emit(AREA_EVENT_TYPES.AREA_ZINDEX_MANAGEMENT, {
+      areaId,
+      action: 'activate',
+      reason: 'drag_start'
+    });
+  }
+
+  /**
+   * 处理Area拖拽移动事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaDragMove(data) {
+    const { areaId, event } = data;
+    const dragState = this.areaStateManager.getDragState(areaId);
+    
+    if (!dragState || !dragState.isDragging) return;
+    
+    // 计算移动距离
+    const deltaX = event.clientX - dragState.startPosition.x;
+    const deltaY = event.clientY - dragState.startPosition.y;
+    
+    // 更新拖拽状态
+    dragState.lastPosition = { x: event.clientX, y: event.clientY };
+    dragState.delta = { x: deltaX, y: deltaY };
+    
+    // 更新Area位置（如果是浮动Area）
+    const areaState = this.areaStateManager.getState(areaId);
+    if (areaState.type === 'floating') {
+      this.areaStateManager.updateFloatingAreaPosition(areaId, {
+        left: (areaState.x || 0) + deltaX,
+        top: (areaState.y || 0) + deltaY
+      });
+    }
+    
+    // 触发拖拽移动事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_DRAG_MOVE, {
+      areaId,
+      delta: { x: deltaX, y: deltaY },
+      position: { x: event.clientX, y: event.clientY },
+      isDragging: dragState.isDragging
+    });
+  }
+
+  /**
+   * 处理Area拖拽结束事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaDragEnd(data) {
+    const { areaId, event } = data;
+    const dragState = this.areaStateManager.getDragState(areaId);
+    
+    if (!dragState) return;
+    
+    const dragDuration = Date.now() - dragState.startTime;
+    const distance = dragState.delta ? 
+      Math.sqrt(dragState.delta.x ** 2 + dragState.delta.y ** 2) : 0;
+    
+    // 清理拖拽状态
+    dragState.isDragging = false;
+    dragState.endTime = Date.now();
+    dragState.endPosition = { x: event.clientX, y: event.clientY };
+    dragState.totalDistance = distance;
+    dragState.duration = dragDuration;
+    
+    // 触发拖拽结束事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_DRAG_END, {
+      areaId,
+      dragInfo: {
+        duration: dragDuration,
+        distance: distance,
+        startPosition: dragState.startPosition,
+        endPosition: dragState.endPosition,
+        delta: dragState.delta,
+        source: dragState.source
+      }
+    });
+    
+    // 延迟清理拖拽状态
+    setTimeout(() => {
+      this.areaStateManager.clearDragState(areaId);
+    }, 1000);
+  }
+
+  /**
+   * 处理Area中心停靠事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaDockCenter(data) {
+    const { areaId, targetAreaId = 'main', mergeStrategy = 'auto' } = data;
+    
+    const areaState = this.areaStateManager.getState(areaId);
+    
+    // 验证停靠条件
+    if (!areaState || !areaState.tabPages || areaState.tabPages.length === 0) {
+      eventBus.emit(AREA_EVENT_TYPES.AREA_DOCK_CENTER, {
+        areaId,
+        success: false,
+        reason: 'invalid_area_state',
+        message: 'Area状态无效或没有TabPage'
+      });
+      return;
+    }
+    
+    // 执行停靠逻辑
+    const dockingResult = {
+      success: true,
+      areaId,
+      targetAreaId,
+      strategy: mergeStrategy,
+      timestamp: Date.now(),
+      mergedTabPages: areaState.tabPages
+    };
+    
+    // 触发停靠成功事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_DOCK_CENTER, dockingResult);
+    
+    // 如果停靠成功，从浮动区域移除
+    if (dockingResult.success && areaState.type === 'floating') {
+      this.areaStateManager.closeFloatingArea(areaId);
+    }
+  }
+
+  /**
+   * 处理Area合并事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaMerge(data) {
+    const { sourceAreaId, targetAreaId, mergeType = 'tabPage', mergeOptions = {} } = data;
+    
+    const sourceState = this.areaStateManager.getState(sourceAreaId);
+    const targetState = this.areaStateManager.getState(targetAreaId);
+    
+    if (!sourceState || !targetState) {
+      console.warn(`❌ 合并失败：找不到源Area ${sourceAreaId} 或目标Area ${targetAreaId}`);
+      return;
+    }
+    
+    // 执行合并逻辑
+    const mergeResult = {
+      sourceAreaId,
+      targetAreaId,
+      mergeType,
+      sourceTabPages: sourceState.tabPages || [],
+      targetTabPages: targetState.tabPages || [],
+      options: mergeOptions,
+      timestamp: Date.now(),
+      success: true
+    };
+    
+    // 触发合并事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_MERGE, mergeResult);
+    
+    // 隐藏源Area（保存到隐藏列表）
+    this.areaStateManager.addToHiddenList(sourceAreaId);
+  }
+
+  /**
+   * 处理Area调整大小开始事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaResizeStart(data) {
+    const { areaId, resizeType = 'split', direction = 'both' } = data;
+    
+    // 记录调整大小状态
+    this.areaStateManager.setResizeState(areaId, {
+      isResizing: true,
+      resizeType,
+      direction,
+      startTime: Date.now(),
+      originalSize: data.originalSize || {}
+    });
+    
+    // 触发调整大小开始事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_RESIZE_START, {
+      areaId,
+      resizeType,
+      direction,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 处理Area调整大小事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaResize(data) {
+    const { areaId, size, delta } = data;
+    const resizeState = this.areaStateManager.getResizeState(areaId);
+    
+    if (!resizeState || !resizeState.isResizing) return;
+    
+    // 更新调整大小状态
+    resizeState.currentSize = size;
+    resizeState.delta = delta;
+    resizeState.lastUpdate = Date.now();
+    
+    // 更新Area状态
+    const areaState = this.areaStateManager.getState(areaId);
+    if (areaState) {
+      this.areaStateManager.updateState(areaId, {
+        width: size.width,
+        height: size.height,
+        ratio: size.ratio
+      });
+    }
+    
+    // 触发调整大小事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_RESIZE, {
+      areaId,
+      size,
+      delta,
+      resizeType: resizeState.resizeType,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 处理Area调整大小结束事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleAreaResizeEnd(data) {
+    const { areaId, finalSize } = data;
+    const resizeState = this.areaStateManager.getResizeState(areaId);
+    
+    if (!resizeState) return;
+    
+    const resizeDuration = Date.now() - resizeState.startTime;
+    
+    // 清理调整大小状态
+    resizeState.isResizing = false;
+    resizeState.endTime = Date.now();
+    resizeState.duration = resizeDuration;
+    resizeState.finalSize = finalSize;
+    
+    // 更新最终的Area状态
+    if (finalSize) {
+      this.areaStateManager.updateState(areaId, {
+        width: finalSize.width,
+        height: finalSize.height,
+        ratio: finalSize.ratio,
+        lastResizedAt: Date.now()
+      });
+    }
+    
+    // 触发调整大小结束事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_RESIZE_END, {
+      areaId,
+      resizeInfo: {
+        duration: resizeDuration,
+        originalSize: resizeState.originalSize,
+        finalSize,
+        delta: resizeState.delta
+      },
+      timestamp: Date.now()
+    });
+    
+    // 延迟清理调整大小状态
+    setTimeout(() => {
+      this.areaStateManager.clearResizeState(areaId);
+    }, 500);
+  }
+
+  /**
+   * 处理浮动Area创建事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleFloatingAreaCreate(data) {
+    const { areaId, config } = data;
+    
+    // 激活浮动Area
+    this.activeAreas.add(areaId);
+    
+    // 设置默认z-index
+    const zIndex = config.zIndex || 1001 + this.areaStateManager.floatingAreas.size;
+    
+    // 更新z-index状态
+    this.areaStateManager.updateState(areaId, {
+      zIndex,
+      lastActivatedAt: Date.now()
+    });
+    
+    // 触发层级管理事件
+    eventBus.emit(AREA_EVENT_TYPES.AREA_ZINDEX_MANAGEMENT, {
+      areaId,
+      action: 'create_floating',
+      zIndex,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 启动内存保护机制
+   */
+  _startMemoryProtection() {
+    setInterval(() => {
+      this._onMemoryCheck();
+    }, this.memoryProtection.cleanupInterval);
+  }
+
+  /**
+   * 内存检查和清理
+   */
+  _onMemoryCheck() {
+    const now = Date.now();
+    
+    // 清理过期历史记录
+    this.areaStateManager.cleanupHistory();
+    
+    // 检查Area数量限制
+    if (this.areaStateManager.states.size > this.memoryProtection.maxAreas) {
+      console.warn(`⚠️ Area数量超过限制: ${this.areaStateManager.states.size}`);
+      
+      // 清理最旧的活动Area
+      const inactiveAreas = Array.from(this.areaStateManager.states.entries())
+        .filter(([_, state]) => !state.active && !state.floating)
+        .sort((a, b) => (a[1].lastActivatedAt || 0) - (b[1].lastActivatedAt || 0));
+      
+      const toRemove = inactiveAreas.slice(0, 5); // 移除5个最旧的
+      toRemove.forEach(([areaId]) => {
+        this.areaStateManager.states.delete(areaId);
+        console.log(`🗑️ 清理过期Area: ${areaId}`);
+      });
+    }
+    
+    this.memoryProtection.lastCleanup = now;
+  }
+
+  /**
+   * 获取Area状态
+   * @param {string} areaId - Area ID
+   * @returns {Object} Area状态
+   */
+  getAreaState(areaId) {
+    return this.areaStateManager.getState(areaId);
+  }
+
+  /**
+   * 获取所有活动Area
+   * @returns {Array} 活动Area ID列表
+   */
+  getActiveAreas() {
+    return Array.from(this.activeAreas);
+  }
+
+  /**
+   * 获取拖拽状态
+   * @param {string} areaId - Area ID
+   * @returns {Object} 拖拽状态
+   */
+  getDragState(areaId) {
+    return this.areaStateManager.getDragState(areaId);
+  }
+
+  /**
+   * 获取调整大小状态
+   * @param {string} areaId - Area ID
+   * @returns {Object} 调整大小状态
+   */
+  getResizeState(areaId) {
+    return this.areaStateManager.getResizeState(areaId);
+  }
+
+  /**
+   * 获取统计信息
+   * @returns {Object} 统计信息
+   */
+  getStats() {
+    return {
+      ...this.areaStateManager.getStats(),
+      activeAreas: this.activeAreas.size
+    };
+  }
+
+  /**
+   * 销毁事件处理器
+   */
+  destroy() {
+    // 清理事件监听器
+    this.areaListeners.forEach((listener, eventType) => {
+      eventBus.off(eventType, listener);
+    });
+    this.areaListeners.clear();
+    
+    // 清理状态
+    this.areaStateManager.states.clear();
+    this.areaStateManager.floatingAreas.clear();
+    this.areaStateManager.dragState.clear();
+    this.areaStateManager.resizeState.clear();
+    this.activeAreas.clear();
+    
+    console.log('🗑️ Area事件处理器已销毁');
+  }
+}
+
+// 创建单例实例
+const areaHandler = new AreaEventHandler();
+
+// Area便捷操作函数
+export const areaActions = {
+  /**
+   * 创建浮动Area
+   * @param {Object} config - Area配置
+   * @returns {string} Area ID
+   */
+  createFloating: (config = {}) => {
+    const areaId = areaHandler.areaStateManager.createFloatingArea(config);
+    return areaId;
+  },
+
+  /**
+   * 关闭浮动Area
+   * @param {string} areaId - Area ID
+   * @returns {boolean} 是否成功
+   */
+  closeFloating: (areaId) => {
+    return areaHandler.areaStateManager.closeFloatingArea(areaId);
+  },
+
+  /**
+   * 更新浮动Area位置
+   * @param {string} areaId - Area ID
+   * @param {Object} position - 位置信息
+   * @returns {boolean} 是否成功
+   */
+  updatePosition: (areaId, position) => {
+    return areaHandler.areaStateManager.updateFloatingAreaPosition(areaId, position);
+  },
+
+  /**
+   * 开始Area拖拽
+   * @param {string} areaId - Area ID
+   * @param {Event} event - 拖拽事件
+   * @param {string} source - 拖拽源
+   */
+  startDrag: (areaId, event, source = 'direct') => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_DRAG_START, {
+      areaId,
+      event,
+      source,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * Area拖拽移动
+   * @param {string} areaId - Area ID
+   * @param {Event} event - 拖拽事件
+   */
+  moveDrag: (areaId, event) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_DRAG_MOVE, {
+      areaId,
+      event,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 结束Area拖拽
+   * @param {string} areaId - Area ID
+   * @param {Event} event - 拖拽事件
+   */
+  endDrag: (areaId, event) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_DRAG_END, {
+      areaId,
+      event,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * Area停靠到中心
+   * @param {string} areaId - Area ID
+   * @param {string} targetAreaId - 目标Area ID
+   * @param {string} mergeStrategy - 合并策略
+   */
+  dockToCenter: (areaId, targetAreaId = 'main', mergeStrategy = 'auto') => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_DOCK_CENTER, {
+      areaId,
+      targetAreaId,
+      mergeStrategy,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * Area合并
+   * @param {string} sourceAreaId - 源Area ID
+   * @param {string} targetAreaId - 目标Area ID
+   * @param {string} mergeType - 合并类型
+   * @param {Object} mergeOptions - 合并选项
+   */
+  merge: (sourceAreaId, targetAreaId, mergeType = 'tabPage', mergeOptions = {}) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_MERGE, {
+      sourceAreaId,
+      targetAreaId,
+      mergeType,
+      mergeOptions,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 开始调整Area大小
+   * @param {string} areaId - Area ID
+   * @param {Object} originalSize - 原始大小
+   * @param {string} resizeType - 调整类型
+   * @param {string} direction - 调整方向
+   */
+  startResize: (areaId, originalSize, resizeType = 'split', direction = 'both') => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_RESIZE_START, {
+      areaId,
+      originalSize,
+      resizeType,
+      direction,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * Area调整大小
+   * @param {string} areaId - Area ID
+   * @param {Object} size - 当前大小
+   * @param {Object} delta - 大小变化
+   */
+  resize: (areaId, size, delta) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_RESIZE, {
+      areaId,
+      size,
+      delta,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 结束调整Area大小
+   * @param {string} areaId - Area ID
+   * @param {Object} finalSize - 最终大小
+   */
+  endResize: (areaId, finalSize) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_RESIZE_END, {
+      areaId,
+      finalSize,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 最大化Area
+   * @param {string} areaId - Area ID
+   * @param {Object} options - 选项
+   */
+  maximize: (areaId, options = {}) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_MAXIMIZE, {
+      areaId,
+      ...options,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 恢复Area
+   * @param {string} areaId - Area ID
+   * @param {Object} options - 选项
+   */
+  restore: (areaId, options = {}) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_RESTORE, {
+      areaId,
+      ...options,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 折叠Area
+   * @param {string} areaId - Area ID
+   * @param {Object} options - 选项
+   */
+  collapse: (areaId, options = {}) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_COLLAPSE, {
+      areaId,
+      ...options,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 展开Area
+   * @param {string} areaId - Area ID
+   * @param {Object} options - 选项
+   */
+  expand: (areaId, options = {}) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_EXPAND, {
+      areaId,
+      ...options,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 关闭Area
+   * @param {string} areaId - Area ID
+   * @param {Object} options - 选项
+   */
+  close: (areaId, options = {}) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_CLOSE, {
+      areaId,
+      ...options,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 切换工具栏
+   * @param {string} areaId - Area ID
+   * @param {Object} options - 选项
+   */
+  toggleToolbar: (areaId, options = {}) => {
+    eventBus.emit(AREA_EVENT_TYPES.AREA_TOGGLE_TOOLBAR, {
+      areaId,
+      ...options,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 更新Area状态
+   * @param {string} areaId - Area ID
+   * @param {Object} updates - 状态更新
+   */
+  updateState: (areaId, updates) => {
+    areaHandler.areaStateManager.updateState(areaId, updates);
+  }
+};
+
+// 导出事件处理器和相关API
+export default areaHandler;
+
+// 便利的Area拖拽处理函数
+export const triggerAreaDrag = {
+  /**
+   * 开始Area拖拽
+   * @param {string} areaId - Area ID
+   * @param {Event} event - 拖拽事件
+   */
+  start: (areaId, event) => {
+    areaActions.startDrag(areaId, event, 'direct');
+  },
+
+  /**
+   * 处理Area拖拽移动
+   * @param {string} areaId - Area ID
+   * @param {Event} event - 拖拽事件
+   */
+  move: (areaId, event) => {
+    areaActions.moveDrag(areaId, event);
+  },
+
+  /**
+   * 结束Area拖拽
+   * @param {string} areaId - Area ID
+   * @param {Event} event - 拖拽事件
+   */
+  end: (areaId, event) => {
+    areaActions.endDrag(areaId, event);
+  }
+};
\ No newline at end of file
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
new file mode 100644
index 0000000..2a08951
--- /dev/null
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
@@ -0,0 +1,1710 @@
+/**
+ * 拖拽状态管理器
+ * 统一管理所有组件的拖拽状态，提供拖拽历史、性能监控、冲突检测等功能
+ */
+
+import { eventBus } from '../eventBus.js';
+import { GLOBAL_EVENT_TYPES, globalEventActions } from './GlobalEventManager.js';
+
+// 拖拽状态类型
+export const DRAG_STATE_TYPES = {
+  // 拖拽操作
+  DRAG_START: 'drag.state.start',
+  DRAG_MOVE: 'drag.state.move',
+  DRAG_END: 'drag.state.end',
+  DRAG_CANCEL: 'drag.state.cancel',
+  
+  // 拖拽状态变更
+  DRAG_STATE_CHANGE: 'drag.state.change',
+  DRAG_STATE_ENTER: 'drag.state.enter',
+  DRAG_STATE_EXIT: 'drag.state.exit',
+  
+  // 拖拽冲突
+  DRAG_CONFLICT_DETECT: 'drag.conflict.detect',
+  DRAG_CONFLICT_RESOLVE: 'drag.conflict.resolve',
+  DRAG_CONFLICT_ESCALATE: 'drag.conflict.escalate',
+  
+  // 拖拽目标
+  DRAG_TARGET_DETECT: 'drag.target.detect',
+  DRAG_TARGET_ENTER: 'drag.target.enter',
+  DRAG_TARGET_EXIT: 'drag.target.exit',
+  DRAG_TARGET_VALIDATE: 'drag.target.validate',
+  
+  // 拖拽反馈
+  DRAG_FEEDBACK_UPDATE: 'drag.feedback.update',
+  DRAG_FEEDBACK_SHOW: 'drag.feedback.show',
+  DRAG_FEEDBACK_HIDE: 'drag.feedback.hide',
+  
+  // 拖拽性能
+  DRAG_PERFORMANCE_MONITOR: 'drag.performance.monitor',
+  DRAG_PERFORMANCE_THRESHOLD: 'drag.performance.threshold',
+  
+  // 拖拽历史
+  DRAG_HISTORY_RECORD: 'drag.history.record',
+  DRAG_HISTORY_ANALYZE: 'drag.history.analyze',
+  DRAG_HISTORY_CLEANUP: 'drag.history.cleanup'
+};
+
+// 拖拽区域类型
+export const DRAG_AREA_TYPES = {
+  PANEL: 'panel',
+  TABPAGE: 'tabpage',
+  AREA: 'area',
+  WINDOW: 'window',
+  DESKTOP: 'desktop'
+};
+
+// 拖拽状态类
+class DragState {
+  constructor(dragId, componentType, sourceElement, options = {}) {
+    this.dragId = dragId;
+    this.componentType = componentType;
+    this.sourceElement = sourceElement;
+    this.startTime = Date.now();
+    this.lastUpdateTime = this.startTime;
+    this.status = 'pending'; // pending, active, completed, cancelled, error
+    this.currentPosition = { x: 0, y: 0 };
+    this.startPosition = { x: 0, y: 0 };
+    this.targetElement = null;
+    this.targetArea = null;
+    this.dragVector = { x: 0, y: 0 };
+    this.velocity = { x: 0, y: 0 };
+    this.acceleration = { x: 0, y: 0 };
+    this.conflicts = [];
+    this.feedback = {
+      visible: false,
+      position: { x: 0, y: 0 },
+      content: '',
+      type: 'default' // default, invalid, valid, warning
+    };
+    this.performance = {
+      totalDuration: 0,
+      moveCount: 0,
+      averageFrameTime: 0,
+      fps: 0,
+      maxFrameTime: 0
+    };
+    this.options = {
+      ...options,
+      threshold: options.threshold || 5,
+      maxSpeed: options.maxSpeed || 1000,
+      targetThreshold: options.targetThreshold || 20,
+      feedbackDelay: options.feedbackDelay || 100,
+      performanceThreshold: options.performanceThreshold || 16 // 60fps threshold
+    };
+    this.metadata = options.metadata || {};
+    this.listeners = new Map();
+    this.history = [];
+  }
+
+  /**
+   * 更新拖拽位置
+   * @param {number} x - X坐标
+   * @param {number} y - Y坐标
+   * @param {number} timestamp - 时间戳
+   */
+  updatePosition(x, y, timestamp = Date.now()) {
+    const oldPosition = { ...this.currentPosition };
+    const deltaTime = timestamp - this.lastUpdateTime;
+    
+    // 更新位置
+    this.currentPosition = { x, y };
+    this.lastUpdateTime = timestamp;
+    
+    // 计算拖拽向量
+    this.dragVector = {
+      x: x - this.startPosition.x,
+      y: y - this.startPosition.y
+    };
+    
+    // 计算速度（像素/毫秒）
+    if (deltaTime > 0) {
+      this.velocity = {
+        x: (x - oldPosition.x) / deltaTime * 1000,
+        y: (y - oldPosition.y) / deltaTime * 1000
+      };
+      
+      // 计算加速度
+      if (this.history.length > 0) {
+        const prevVelocity = this.history[this.history.length - 1].velocity;
+        this.acceleration = {
+          x: (this.velocity.x - prevVelocity.x) / deltaTime * 1000,
+          y: (this.velocity.y - prevVelocity.y) / deltaTime * 1000
+        };
+      }
+    }
+    
+    // 记录历史
+    this.history.push({
+      timestamp,
+      position: { ...this.currentPosition },
+      velocity: { ...this.velocity },
+      acceleration: { ...this.acceleration }
+    });
+    
+    // 限制历史大小
+    if (this.history.length > 100) {
+      this.history.shift();
+    }
+    
+    // 更新性能指标
+    this._updatePerformanceMetrics(deltaTime);
+  }
+
+  /**
+   * 更新性能指标
+   * @param {number} deltaTime - 时间间隔
+   */
+  _updatePerformanceMetrics(deltaTime) {
+    this.performance.moveCount++;
+    
+    if (deltaTime > 0) {
+      const frameTime = deltaTime;
+      const newAverageTime = (this.performance.averageFrameTime * (this.performance.moveCount - 1) + frameTime) / this.performance.moveCount;
+      
+      this.performance.averageFrameTime = newAverageTime;
+      this.performance.fps = 1000 / newAverageTime;
+      this.performance.maxFrameTime = Math.max(this.performance.maxFrameTime, frameTime);
+    }
+    
+    this.performance.totalDuration = Date.now() - this.startTime;
+  }
+
+  /**
+   * 设置目标元素
+   * @param {Element} targetElement - 目标元素
+   * @param {string} targetArea - 目标区域类型
+   */
+  setTarget(targetElement, targetArea = null) {
+    this.targetElement = targetElement;
+    this.targetArea = targetArea;
+  }
+
+  /**
+   * 添加冲突
+   * @param {Object} conflict - 冲突信息
+   */
+  addConflict(conflict) {
+    this.conflicts.push({
+      ...conflict,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 清除冲突
+   */
+  clearConflicts() {
+    this.conflicts = [];
+  }
+
+  /**
+   * 更新反馈
+   * @param {Object} feedback - 反馈信息
+   */
+  updateFeedback(feedback) {
+    this.feedback = {
+      ...this.feedback,
+      ...feedback,
+      visible: feedback.visible !== undefined ? feedback.visible : this.feedback.visible
+    };
+  }
+
+  /**
+   * 获取状态摘要
+   * @returns {Object} 状态摘要
+   */
+  getSummary() {
+    return {
+      dragId: this.dragId,
+      componentType: this.componentType,
+      status: this.status,
+      startPosition: this.startPosition,
+      currentPosition: this.currentPosition,
+      dragVector: this.dragVector,
+      velocity: this.velocity,
+      targetElement: this.targetElement !== null,
+      targetArea: this.targetArea,
+      conflictCount: this.conflicts.length,
+      performance: this.performance,
+      duration: Date.now() - this.startTime
+    };
+  }
+
+  /**
+   * 完成拖拽
+   * @param {string} status - 完成状态
+   * @param {Object} result - 结果数据
+   */
+  complete(status = 'completed', result = {}) {
+    this.status = status;
+    this.performance.totalDuration = Date.now() - this.startTime;
+    
+    // 清理历史（保留最近50条）
+    if (this.history.length > 50) {
+      this.history = this.history.slice(-50);
+    }
+  }
+}
+
+// 拖拽冲突检测器
+class DragConflictDetector {
+  constructor() {
+    this.activeDrags = new Map();
+    this.conflictRules = new Map();
+    this.conflictHistory = [];
+    this.maxHistorySize = 200;
+    
+    this._initializeConflictRules();
+  }
+
+  /**
+   * 初始化冲突规则
+   */
+  _initializeConflictRules() {
+    // 面板拖拽冲突规则
+    this.conflictRules.set('panel', {
+      overlap: { threshold: 0.3, severity: 'warning' },
+      sameParent: { threshold: 0.5, severity: 'error' },
+      lockedElement: { threshold: 0, severity: 'error' }
+    });
+    
+    // TabPage拖拽冲突规则
+    this.conflictRules.set('tabpage', {
+      overlap: { threshold: 0.5, severity: 'warning' },
+      sameTabContainer: { threshold: 0.8, severity: 'info' },
+      readonlyTab: { threshold: 0, severity: 'error' }
+    });
+    
+    // Area拖拽冲突规则
+    this.conflictRules.set('area', {
+      overlap: { threshold: 0.4, severity: 'warning' },
+      minimumSize: { threshold: 0, severity: 'error' },
+      lockedArea: { threshold: 0, severity: 'error' }
+    });
+  }
+
+  /**
+   * 注册拖拽
+   * @param {DragState} dragState - 拖拽状态
+   */
+  registerDrag(dragState) {
+    this.activeDrags.set(dragState.dragId, dragState);
+  }
+
+  /**
+   * 注销拖拽
+   * @param {string} dragId - 拖拽ID
+   */
+  unregisterDrag(dragId) {
+    this.activeDrags.delete(dragId);
+  }
+
+  /**
+   * 检测冲突
+   * @param {string} dragId - 拖拽ID
+   * @returns {Array} 冲突列表
+   */
+  detectConflicts(dragId) {
+    const currentDrag = this.activeDrags.get(dragId);
+    if (!currentDrag) return [];
+
+    const conflicts = [];
+    
+    for (const [otherId, otherDrag] of this.activeDrags) {
+      if (otherId === dragId) continue;
+      
+      // 跳过已完成的拖拽
+      if (otherDrag.status === 'completed' || otherDrag.status === 'cancelled') {
+        continue;
+      }
+      
+      const conflict = this._checkDragConflict(currentDrag, otherDrag);
+      if (conflict) {
+        conflicts.push(conflict);
+      }
+    }
+    
+    // 记录冲突历史
+    if (conflicts.length > 0) {
+      this.conflictHistory.push({
+        dragId,
+        conflicts,
+        timestamp: Date.now()
+      });
+      
+      // 限制历史大小
+      if (this.conflictHistory.length > this.maxHistorySize) {
+        this.conflictHistory.shift();
+      }
+    }
+    
+    return conflicts;
+  }
+
+  /**
+   * 检查两个拖拽之间的冲突
+   * @param {DragState} drag1 - 拖拽1
+   * @param {DragState} drag2 - 拖拽2
+   * @returns {Object|null} 冲突信息
+   */
+  _checkDragConflict(drag1, drag2) {
+    const rules1 = this.conflictRules.get(drag1.componentType);
+    const rules2 = this.conflictRules.get(drag2.componentType);
+    
+    if (!rules1 && !rules2) return null;
+    
+    // 计算元素重叠程度
+    const overlap = this._calculateOverlap(drag1, drag2);
+    
+    // 检查各种冲突类型
+    const conflicts = [];
+    
+    // 位置冲突
+    if (overlap > 0.3) {
+      const severity = overlap > 0.7 ? 'error' : overlap > 0.5 ? 'warning' : 'info';
+      conflicts.push({
+        type: 'overlap',
+        severity,
+        value: overlap,
+        message: `元素重叠度达到 ${(overlap * 100).toFixed(1)}%`
+      });
+    }
+    
+    // 速度冲突
+    const relativeSpeed = Math.sqrt(
+      Math.pow(drag1.velocity.x - drag2.velocity.x, 2) + 
+      Math.pow(drag1.velocity.y - drag2.velocity.y, 2)
+    );
+    
+    if (relativeSpeed > 500) { // 像素/秒
+      conflicts.push({
+        type: 'high_speed',
+        severity: 'warning',
+        value: relativeSpeed,
+        message: `相对速度过高: ${relativeSpeed.toFixed(1)} px/s`
+      });
+    }
+    
+    // 同级拖拽冲突
+    if (drag1.componentType === drag2.componentType) {
+      const centerDistance = Math.sqrt(
+        Math.pow(drag1.currentPosition.x - drag2.currentPosition.x, 2) +
+        Math.pow(drag1.currentPosition.y - drag2.currentPosition.y, 2)
+      );
+      
+      if (centerDistance < 100) {
+        conflicts.push({
+          type: 'proximity',
+          severity: 'info',
+          value: centerDistance,
+          message: `拖拽元素距离过近: ${centerDistance.toFixed(1)}px`
+        });
+      }
+    }
+    
+    return conflicts.length > 0 ? {
+      drag1Id: drag1.dragId,
+      drag2Id: drag2.dragId,
+      conflicts,
+      timestamp: Date.now()
+    } : null;
+  }
+
+  /**
+   * 计算两个拖拽元素的重叠度
+   * @param {DragState} drag1 - 拖拽1
+   * @param {DragState} drag2 - 拖拽2
+   * @returns {number} 重叠度 (0-1)
+   */
+  _calculateOverlap(drag1, drag2) {
+    // 简化的重叠计算，假设元素尺寸为100x100
+    const elementSize = 100;
+    
+    const rect1 = {
+      left: drag1.currentPosition.x,
+      top: drag1.currentPosition.y,
+      right: drag1.currentPosition.x + elementSize,
+      bottom: drag1.currentPosition.y + elementSize
+    };
+    
+    const rect2 = {
+      left: drag2.currentPosition.x,
+      top: drag2.currentPosition.y,
+      right: drag2.currentPosition.x + elementSize,
+      bottom: drag2.currentPosition.y + elementSize
+    };
+    
+    // 计算重叠矩形
+    const overlapLeft = Math.max(rect1.left, rect2.left);
+    const overlapTop = Math.max(rect1.top, rect2.top);
+    const overlapRight = Math.min(rect1.right, rect2.right);
+    const overlapBottom = Math.min(rect1.bottom, rect2.bottom);
+    
+    if (overlapRight <= overlapLeft || overlapBottom <= overlapTop) {
+      return 0; // 无重叠
+    }
+    
+    const overlapWidth = overlapRight - overlapLeft;
+    const overlapHeight = overlapBottom - overlapTop;
+    const overlapArea = overlapWidth * overlapHeight;
+    const elementArea = elementSize * elementSize;
+    
+    return Math.min(overlapArea / elementArea, 1);
+  }
+
+  /**
+   * 获取冲突统计
+   * @returns {Object} 冲突统计
+   */
+  getConflictStats() {
+    const totalConflicts = this.conflictHistory.length;
+    const recentConflicts = this.conflictHistory.filter(c => 
+      Date.now() - c.timestamp < 60000 // 最近1分钟
+    ).length;
+    
+    const severityCounts = { error: 0, warning: 0, info: 0 };
+    this.conflictHistory.forEach(entry => {
+      entry.conflicts.forEach(conflict => {
+        severityCounts[conflict.severity] = (severityCounts[conflict.severity] || 0) + 1;
+      });
+    });
+    
+    return {
+      totalConflicts,
+      recentConflicts,
+      activeDrags: this.activeDrags.size,
+      severityCounts,
+      conflictRate: totalConflicts > 0 ? totalConflicts / (this.activeDrags.size || 1) : 0
+    };
+  }
+}
+
+// 拖拽状态管理器主类
+class DragStateManager {
+  constructor() {
+    this.activeDrags = new Map();
+    this.dragHistory = [];
+    this.conflictDetector = new DragConflictDetector();
+    this.dragTargets = new Map();
+    this.performanceThresholds = {
+      dragDuration: 5000, // 5秒
+      moveCount: 1000, // 1000次移动
+      fps: 30, // 30fps最低要求
+      maxVelocity: 2000 // 最大速度限制
+    };
+    this.isEnabled = true;
+    this.debugMode = false;
+    
+    // 绑定方法
+    this._onDragEvent = this._onDragEvent.bind(this);
+    this._cleanupExpiredData = this._cleanupExpiredData.bind(this);
+    
+    this._initialize();
+  }
+
+  /**
+   * 初始化
+   */
+  _initialize() {
+    // 注册拖拽相关事件监听器
+    this._registerEventListeners();
+    
+    // 启动清理调度器
+    this._startCleanupScheduler();
+    
+    console.log('🎯 拖拽状态管理器初始化完成');
+  }
+
+  /**
+   * 注册事件监听器
+   */
+  _registerEventListeners() {
+    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.on(eventType, this._onDragEvent, { 
+        priority: 1,
+        deduplication: { type: 'EVENT_BASED', key: 'dragState' }
+      });
+    });
+  }
+
+  /**
+   * 处理拖拽事件
+   * @param {Object} data - 事件数据
+   */
+  async _onDragEvent(data) {
+    if (!this.isEnabled) return;
+    
+    const monitorId = globalEventActions.startMonitor(`drag_${data.eventType || data.type}`);
+    
+    try {
+      const { eventType = data.type, dragId, componentType, sourceElement } = data;
+      
+      switch (eventType) {
+        case 'panel.drag.start':
+        case 'tabpage.drag.start':
+        case 'area.drag.start':
+          await this._handleDragStart(data);
+          break;
+          
+        case 'panel.drag.move':
+        case 'tabpage.drag.move':
+        case 'area.drag.move':
+          await this._handleDragMove(data);
+          break;
+          
+        case 'panel.drag.end':
+        case 'tabpage.drag.end':
+        case 'area.drag.end':
+          await this._handleDragEnd(data);
+          break;
+          
+        case 'panel.drag.cancel':
+        case 'tabpage.drag.cancel':
+        case 'area.drag.cancel':
+          await this._handleDragCancel(data);
+          break;
+      }
+    } catch (error) {
+      console.error('❌ 拖拽状态管理错误:', error);
+      eventBus.emit(GLOBAL_EVENT_TYPES.SYSTEM_ERROR, {
+        component: 'dragStateManager',
+        event: data,
+        error: error.message
+      });
+    } finally {
+      globalEventActions.endMonitor(monitorId);
+    }
+  }
+
+  /**
+   * 处理拖拽开始
+   * @param {Object} data - 事件数据
+   */
+  async _handleDragStart(data) {
+    const { dragId, componentType, sourceElement, position, options = {} } = data;
+    
+    // 创建拖拽状态
+    const dragState = new DragState(dragId, componentType, sourceElement, options);
+    dragState.startPosition = { ...position };
+    dragState.currentPosition = { ...position };
+    dragState.status = 'active';
+    
+    // 保存拖拽状态
+    this.activeDrags.set(dragId, dragState);
+    
+    // 注册到冲突检测器
+    this.conflictDetector.registerDrag(dragState);
+    
+    // 触发状态变更事件
+    eventBus.emit(DRAG_STATE_TYPES.DRAG_STATE_CHANGE, {
+      dragId,
+      newStatus: 'active',
+      dragState: dragState.getSummary()
+    });
+    
+    // 发送初始反馈
+    if (this.debugMode) {
+      this._updateDragFeedback(dragId, {
+        visible: true,
+        content: `开始拖拽 ${componentType}`,
+        type: 'default',
+        position: { ...position }
+      });
+    }
+    
+    if (this.debugMode) {
+      console.log(`🎯 拖拽开始: ${dragId} (${componentType})`, position);
+    }
+  }
+
+  /**
+   * 处理拖拽移动
+   * @param {Object} data - 事件数据
+   */
+  async _handleDragMove(data) {
+    const { dragId, position, targetElement, targetArea } = data;
+    const dragState = this.activeDrags.get(dragId);
+    
+    if (!dragState || dragState.status !== 'active') return;
+    
+    // 更新位置
+    dragState.updatePosition(position.x, position.y);
+    
+    // 设置目标
+    if (targetElement) {
+      dragState.setTarget(targetElement, targetArea);
+    }
+    
+    // 检测冲突
+    const conflicts = this.conflictDetector.detectConflicts(dragId);
+    if (conflicts.length > 0) {
+      conflicts.forEach(conflict => {
+        dragState.addConflict(conflict);
+        eventBus.emit(DRAG_STATE_TYPES.DRAG_CONFLICT_DETECT, {
+          dragId,
+          conflict
+        });
+      });
+      
+      // 更新反馈显示冲突
+      this._updateDragFeedback(dragId, {
+        content: `检测到 ${conflicts.length} 个冲突`,
+        type: 'warning'
+      });
+    } else {
+      // 清除冲突
+      dragState.clearConflicts();
+      
+      // 更新反馈显示正常状态
+      this._updateDragFeedback(dragId, {
+        content: '拖拽中...',
+        type: 'valid'
+      });
+    }
+    
+    // 检测目标
+    this._detectDragTargets(dragId, position);
+    
+    // 检查性能阈值
+    this._checkPerformanceThresholds(dragId);
+    
+    if (this.debugMode && dragState.performance.moveCount % 50 === 0) {
+      console.log(`🎯 拖拽移动: ${dragId} (${dragState.performance.moveCount} 次移动, FPS: ${dragState.performance.fps.toFixed(1)})`);
+    }
+  }
+
+  /**
+   * 处理拖拽结束
+   * @param {Object} data - 事件数据
+   */
+  async _handleDragEnd(data) {
+    const { dragId, finalPosition, dropTarget, success = true } = data;
+    const dragState = this.activeDrags.get(dragId);
+    
+    if (!dragState) return;
+    
+    // 完成拖拽
+    dragState.complete('completed', { success, finalPosition, dropTarget });
+    
+    // 记录到历史
+    this._recordDragHistory(dragState);
+    
+    // 清除反馈
+    this._hideDragFeedback(dragId);
+    
+    // 从活跃拖拽中移除
+    this.activeDrags.delete(dragId);
+    
+    // 从冲突检测器注销
+    this.conflictDetector.unregisterDrag(dragId);
+    
+    // 触发状态变更事件
+    eventBus.emit(DRAG_STATE_TYPES.DRAG_STATE_CHANGE, {
+      dragId,
+      newStatus: 'completed',
+      dragState: dragState.getSummary(),
+      finalPosition,
+      dropTarget,
+      success
+    });
+    
+    // 触发性能监控事件
+    eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
+      dragId,
+      performance: dragState.performance,
+      summary: dragState.getSummary()
+    });
+    
+    if (this.debugMode) {
+      console.log(`🎯 拖拽结束: ${dragId} (${success ? '成功' : '失败'}, 耗时: ${dragState.performance.totalDuration}ms)`);
+    }
+  }
+
+  /**
+   * 处理拖拽取消
+   * @param {Object} data - 事件数据
+   */
+  async _handleDragCancel(data) {
+    const { dragId, reason } = data;
+    const dragState = this.activeDrags.get(dragId);
+    
+    if (!dragState) return;
+    
+    // 取消拖拽
+    dragState.complete('cancelled', { reason });
+    
+    // 记录到历史
+    this._recordDragHistory(dragState);
+    
+    // 清除反馈
+    this._hideDragFeedback(dragId);
+    
+    // 从活跃拖拽中移除
+    this.activeDrags.delete(dragId);
+    
+    // 从冲突检测器注销
+    this.conflictDetector.unregisterDrag(dragId);
+    
+    // 触发状态变更事件
+    eventBus.emit(DRAG_STATE_TYPES.DRAG_STATE_CHANGE, {
+      dragId,
+      newStatus: 'cancelled',
+      dragState: dragState.getSummary(),
+      reason
+    });
+    
+    if (this.debugMode) {
+      console.log(`🎯 拖拽取消: ${dragId} (原因: ${reason})`);
+    }
+  }
+
+  /**
+   * 检测拖拽目标
+   * @param {string} dragId - 拖拽ID
+   * @param {Object} position - 位置
+   */
+  _detectDragTargets(dragId, position) {
+    const dragState = this.activeDrags.get(dragId);
+    if (!dragState) return;
+    
+    // 这里应该实现实际的拖拽目标检测逻辑
+    // 简化实现：检测是否在某个区域内
+    const targets = this._findPotentialTargets(position, dragState.componentType);
+    
+    if (targets.length > 0) {
+      // 验证目标有效性
+      targets.forEach(target => {
+        const isValid = this._validateDragTarget(dragState, target);
+        
+        eventBus.emit(DRAG_STATE_TYPES.DRAG_TARGET_DETECT, {
+          dragId,
+          target,
+          position,
+          valid: isValid
+        });
+        
+        if (isValid) {
+          eventBus.emit(DRAG_STATE_TYPES.DRAG_TARGET_VALIDATE, {
+            dragId,
+            target,
+            action: 'enter'
+          });
+        }
+      });
+    }
+  }
+
+  /**
+   * 查找潜在拖拽目标
+   * @param {Object} position - 位置
+   * @param {string} componentType - 组件类型
+   * @returns {Array} 潜在目标列表
+   */
+  _findPotentialTargets(position, componentType) {
+    // 简化的目标查找逻辑
+    // 实际实现应该检查DOM元素的实际位置
+    const targets = [];
+    
+    // 模拟不同类型的拖拽目标
+    const mockTargets = [
+      { id: 'area-center', type: 'area', bounds: { x: 200, y: 200, width: 400, height: 300 } },
+      { id: 'tab-container', type: 'tabpage', bounds: { x: 50, y: 50, width: 200, height: 100 } },
+      { id: 'panel-dock', type: 'panel', bounds: { x: 100, y: 400, width: 150, height: 50 } }
+    ];
+    
+    mockTargets.forEach(target => {
+      const { x, y } = position;
+      const { bounds } = target;
+      
+      if (x >= bounds.x && x <= bounds.x + bounds.width &&
+          y >= bounds.y && y <= bounds.y + bounds.height) {
+        targets.push(target);
+      }
+    });
+    
+    return targets;
+  }
+
+  /**
+   * 验证拖拽目标
+   * @param {DragState} dragState - 拖拽状态
+   * @param {Object} target - 目标
+   * @returns {boolean} 是否有效
+   */
+  _validateDragTarget(dragState, target) {
+    // 简化的验证逻辑
+    const maxDistance = 50; // 最大距离限制
+    
+    const centerX = dragState.currentPosition.x + 50; // 假设元素宽度为100
+    const centerY = dragState.currentPosition.y + 50;
+    
+    const targetCenterX = target.bounds.x + target.bounds.width / 2;
+    const targetCenterY = target.bounds.y + target.bounds.height / 2;
+    
+    const distance = Math.sqrt(
+      Math.pow(centerX - targetCenterX, 2) + 
+      Math.pow(centerY - targetCenterY, 2)
+    );
+    
+    return distance <= maxDistance;
+  }
+
+  /**
+   * 检查性能阈值
+   * @param {string} dragId - 拖拽ID
+   */
+  _checkPerformanceThresholds(dragId) {
+    const dragState = this.activeDrags.get(dragId);
+    if (!dragState) return;
+    
+    const { performance } = dragState;
+    const thresholdViolations = [];
+    
+    // 检查拖拽持续时间
+    if (performance.totalDuration > this.performanceThresholds.dragDuration) {
+      thresholdViolations.push({
+        type: 'duration',
+        value: performance.totalDuration,
+        threshold: this.performanceThresholds.dragDuration,
+        message: `拖拽持续时间超过阈值: ${performance.totalDuration}ms > ${this.performanceThresholds.dragDuration}ms`
+      });
+    }
+    
+    // 检查移动次数
+    if (performance.moveCount > this.performanceThresholds.moveCount) {
+      thresholdViolations.push({
+        type: 'moveCount',
+        value: performance.moveCount,
+        threshold: this.performanceThresholds.moveCount,
+        message: `移动次数过多: ${performance.moveCount} > ${this.performanceThresholds.moveCount}`
+      });
+    }
+    
+    // 检查FPS
+    if (performance.fps < this.performanceThresholds.fps && performance.moveCount > 10) {
+      thresholdViolations.push({
+        type: 'fps',
+        value: performance.fps,
+        threshold: this.performanceThresholds.fps,
+        message: `帧率过低: ${performance.fps.toFixed(1)}fps < ${this.performanceThresholds.fps}fps`
+      });
+    }
+    
+    // 检查速度
+    const speed = Math.sqrt(dragState.velocity.x ** 2 + dragState.velocity.y ** 2);
+    if (speed > this.performanceThresholds.maxVelocity) {
+      thresholdViolations.push({
+        type: 'velocity',
+        value: speed,
+        threshold: this.performanceThresholds.maxVelocity,
+        message: `拖拽速度过快: ${speed.toFixed(1)}px/s > ${this.performanceThresholds.maxVelocity}px/s`
+      });
+    }
+    
+    if (thresholdViolations.length > 0) {
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_THRESHOLD, {
+        dragId,
+        violations: thresholdViolations,
+        performance: dragState.performance
+      });
+    }
+  }
+
+  /**
+   * 更新拖拽反馈
+   * @param {string} dragId - 拖拽ID
+   * @param {Object} feedback - 反馈信息
+   */
+  _updateDragFeedback(dragId, feedback) {
+    const dragState = this.activeDrags.get(dragId);
+    if (!dragState) return;
+    
+    dragState.updateFeedback(feedback);
+    
+    eventBus.emit(DRAG_STATE_TYPES.DRAG_FEEDBACK_UPDATE, {
+      dragId,
+      feedback: dragState.feedback
+    });
+  }
+
+  /**
+   * 隐藏拖拽反馈
+   * @param {string} dragId - 拖拽ID
+   */
+  _hideDragFeedback(dragId) {
+    const dragState = this.activeDrags.get(dragId);
+    if (!dragState) return;
+    
+    dragState.updateFeedback({ visible: false });
+    
+    eventBus.emit(DRAG_STATE_TYPES.DRAG_FEEDBACK_HIDE, {
+      dragId
+    });
+  }
+
+  /**
+   * 记录拖拽历史
+   * @param {DragState} dragState - 拖拽状态
+   */
+  _recordDragHistory(dragState) {
+    const historyEntry = {
+      dragId: dragState.dragId,
+      componentType: dragState.componentType,
+      startTime: dragState.startTime,
+      endTime: Date.now(),
+      duration: dragState.performance.totalDuration,
+      moveCount: dragState.performance.moveCount,
+      conflictCount: dragState.conflicts.length,
+      finalPosition: { ...dragState.currentPosition },
+      dragVector: { ...dragState.dragVector },
+      averageFPS: dragState.performance.fps,
+      metadata: dragState.metadata
+    };
+    
+    this.dragHistory.push(historyEntry);
+    
+    // 限制历史大小
+    if (this.dragHistory.length > 1000) {
+      this.dragHistory.shift();
+    }
+    
+    // 触发历史记录事件
+    eventBus.emit(DRAG_STATE_TYPES.DRAG_HISTORY_RECORD, {
+      historyEntry,
+      totalHistorySize: this.dragHistory.length
+    });
+  }
+
+  /**
+   * 启动清理调度器
+   */
+  _startCleanupScheduler() {
+    setInterval(() => {
+      this._cleanupExpiredData();
+    }, 300000); // 每5分钟清理一次
+  }
+
+  /**
+   * 清理过期数据
+   */
+  _cleanupExpiredData() {
+    const now = Date.now();
+    const maxAge = 3600000; // 1小时
+    
+    // 清理过期的历史记录
+    this.dragHistory = this.dragHistory.filter(entry => 
+      (now - entry.endTime) < maxAge
+    );
+    
+    // 清理冲突历史
+    this.conflictDetector.conflictHistory = this.conflictDetector.conflictHistory.filter(entry =>
+      (now - entry.timestamp) < maxAge
+    );
+    
+    // 触发清理事件
+    eventBus.emit(DRAG_STATE_TYPES.DRAG_HISTORY_CLEANUP, {
+      cleanedHistoryCount: this.dragHistory.length,
+      cleanedConflictCount: this.conflictDetector.conflictHistory.length
+    });
+  }
+
+  /**
+   * 获取拖拽状态
+   * @param {string} dragId - 拖拽ID
+   * @returns {Object|null} 拖拽状态
+   */
+  getDragState(dragId) {
+    const dragState = this.activeDrags.get(dragId);
+    return dragState ? dragState.getSummary() : null;
+  }
+
+  /**
+   * 获取所有活跃拖拽
+   * @returns {Array} 活跃拖拽列表
+   */
+  getActiveDrags() {
+    return Array.from(this.activeDrags.values()).map(dragState => dragState.getSummary());
+  }
+
+  /**
+   * 获取拖拽历史
+   * @param {number} limit - 限制数量
+   * @returns {Array} 历史记录
+   */
+  getDragHistory(limit = 100) {
+    return this.dragHistory.slice(-limit);
+  }
+
+  /**
+   * 获取拖拽统计
+   * @returns {Object} 拖拽统计
+   */
+  getDragStats() {
+    const activeCount = this.activeDrags.size;
+    const historyCount = this.dragHistory.length;
+    
+    // 计算平均性能指标
+    const avgStats = {
+      averageDuration: 0,
+      averageMoveCount: 0,
+      averageFPS: 0,
+      totalConflicts: 0
+    };
+    
+    if (historyCount > 0) {
+      const recentHistory = this.dragHistory.slice(-100);
+      avgStats.averageDuration = recentHistory.reduce((sum, entry) => sum + entry.duration, 0) / recentHistory.length;
+      avgStats.averageMoveCount = recentHistory.reduce((sum, entry) => sum + entry.moveCount, 0) / recentHistory.length;
+      avgStats.averageFPS = recentHistory.reduce((sum, entry) => sum + entry.averageFPS, 0) / recentHistory.length;
+      avgStats.totalConflicts = recentHistory.reduce((sum, entry) => sum + entry.conflictCount, 0);
+    }
+    
+    return {
+      active: {
+        count: activeCount,
+        dragStates: this.getActiveDrags()
+      },
+      history: {
+        total: historyCount,
+        recent: historyCount > 0 ? this.dragHistory.slice(-10) : [],
+        average: avgStats
+      },
+      conflicts: this.conflictDetector.getConflictStats(),
+      performance: {
+        thresholds: this.performanceThresholds,
+        violations: this._getRecentPerformanceViolations()
+      }
+    };
+  }
+
+  /**
+   * 获取最近的性能违规
+   * @returns {Array} 违规记录
+   */
+  _getRecentPerformanceViolations() {
+    const recent = this.dragHistory.filter(entry => 
+      Date.now() - entry.endTime < 60000 // 最近1分钟
+    );
+    
+    const violations = [];
+    recent.forEach(entry => {
+      if (entry.duration > this.performanceThresholds.dragDuration) {
+        violations.push({
+          dragId: entry.dragId,
+          type: 'duration',
+          value: entry.duration,
+          threshold: this.performanceThresholds.dragDuration
+        });
+      }
+      
+      if (entry.averageFPS < this.performanceThresholds.fps) {
+        violations.push({
+          dragId: entry.dragId,
+          type: 'fps',
+          value: entry.averageFPS,
+          threshold: this.performanceThresholds.fps
+        });
+      }
+    });
+    
+    return violations;
+  }
+
+  /**
+   * 设置调试模式
+   * @param {boolean} enabled - 是否启用
+   */
+  setDebugMode(enabled) {
+    this.debugMode = enabled;
+    console.log(`🔧 拖拽状态管理器调试模式${enabled ? '开启' : '关闭'}`);
+  }
+
+  /**
+   * 启用/禁用管理器
+   * @param {boolean} enabled - 是否启用
+   */
+  setEnabled(enabled) {
+    this.isEnabled = enabled;
+    console.log(`🎯 拖拽状态管理器${enabled ? '启用' : '禁用'}`);
+  }
+
+  /**
+   * 取消所有拖拽
+   */
+  cancelAllDrags() {
+    const dragIds = Array.from(this.activeDrags.keys());
+    
+    dragIds.forEach(dragId => {
+      const dragState = this.activeDrags.get(dragId);
+      if (dragState && dragState.status === 'active') {
+        eventBus.emit(DRAG_STATE_TYPES.DRAG_CANCEL, {
+          dragId,
+          reason: 'manager_cancelled'
+        });
+      }
+    });
+    
+    console.log(`🚫 已取消 ${dragIds.length} 个活跃拖拽`);
+  }
+
+  /**
+   * 面板拖拽开始（从DockLayout.vue迁移）
+   * @param {Object} eventData - 拖拽事件数据
+   */
+  onPanelDragStart(eventData) {
+    try {
+      const { 
+        event, 
+        panelId, 
+        element,
+        type = 'panel',
+        position = { x: 0, y: 0 },
+        ...options 
+      } = eventData;
+
+      // 检查是否有其他活跃拖拽
+      if (this.activeDrags.size > 0) {
+        console.warn('检测到其他活跃拖拽，暂停之前的拖拽');
+        this.cancelAllDrags();
+      }
+
+      // 创建拖拽ID
+      const dragId = `panel-${panelId}-${Date.now()}`;
+      
+      // 创建拖拽状态
+      const dragState = new DragState(dragId, DRAG_AREA_TYPES.PANEL, element, {
+        panelId,
+        sourceType: type,
+        ...options
+      });
+
+      // 设置起始位置
+      const startX = position.x || event.clientX;
+      const startY = position.y || event.clientY;
+      dragState.startPosition = { x: startX, y: startY };
+      dragState.updatePosition(startX, startY);
+
+      // 设置状态为活跃
+      dragState.status = 'active';
+      this.activeDrags.set(dragId, dragState);
+
+      // 触发拖拽开始事件
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_START, {
+        dragId,
+        dragState: dragState.getSummary(),
+        source: 'onPanelDragStart',
+        timestamp: Date.now()
+      });
+
+      console.log(`🎯 面板拖拽开始: ${panelId}, dragId: ${dragId}`);
+
+      return dragId;
+    } catch (error) {
+      console.error('面板拖拽开始时出错:', error);
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
+        operation: 'onPanelDragStart',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return null;
+    }
+  }
+
+  /**
+   * 面板拖拽移动（从DockLayout.vue迁移）
+   * @param {Object} eventData - 拖拽事件数据
+   */
+  onPanelDragMove(eventData) {
+    try {
+      const { 
+        event, 
+        dragId,
+        panelId,
+        element,
+        type = 'panel',
+        position = { x: 0, y: 0 },
+        ...options 
+      } = eventData;
+
+      // 查找拖拽状态
+      const activeDrag = this._findDragByIdOrPanelId(dragId, panelId);
+      if (!activeDrag) {
+        console.warn('找不到面板拖拽状态:', panelId);
+        return false;
+      }
+
+      const dragState = activeDrag.dragState;
+      if (dragState.status !== 'active') {
+        console.warn('拖拽状态不活跃:', dragId);
+        return false;
+      }
+
+      // 更新位置
+      const currentX = position.x || event.clientX;
+      const currentY = position.y || event.clientY;
+      dragState.updatePosition(currentX, currentY);
+
+      // 检测目标区域
+      const targetElement = this._detectDragTarget(currentX, currentY);
+      if (targetElement) {
+        dragState.setTarget(targetElement.element, targetElement.area);
+      }
+
+      // 触发拖拽移动事件
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_MOVE, {
+        dragId,
+        dragState: dragState.getSummary(),
+        position: { x: currentX, y: currentY },
+        target: targetElement,
+        source: 'onPanelDragMove',
+        timestamp: Date.now()
+      });
+
+      return true;
+    } catch (error) {
+      console.error('面板拖拽移动时出错:', error);
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
+        operation: 'onPanelDragMove',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return false;
+    }
+  }
+
+  /**
+   * 面板拖拽结束（从DockLayout.vue迁移）
+   * @param {Object} eventData - 拖拽事件数据
+   */
+  onPanelDragEnd(eventData) {
+    try {
+      const { 
+        event, 
+        dragId,
+        panelId,
+        type = 'panel',
+        finalPosition = { x: 0, y: 0 },
+        dropTarget,
+        ...options 
+      } = eventData;
+
+      // 查找拖拽状态
+      const activeDrag = this._findDragByIdOrPanelId(dragId, panelId);
+      if (!activeDrag) {
+        console.warn('找不到面板拖拽状态:', panelId);
+        return false;
+      }
+
+      const dragState = activeDrag.dragState;
+      
+      // 更新最终位置
+      const finalX = finalPosition.x || event.clientX;
+      const finalY = finalPosition.y || event.clientY;
+      dragState.updatePosition(finalX, finalY);
+
+      // 设置最终状态
+      dragState.status = 'completed';
+      dragState.setTarget(dropTarget?.element || null, dropTarget?.area || null);
+
+      // 触发拖拽结束事件
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_END, {
+        dragId,
+        dragState: dragState.getSummary(),
+        finalPosition: { x: finalX, y: finalY },
+        dropTarget,
+        source: 'onPanelDragEnd',
+        timestamp: Date.now()
+      });
+
+      // 移动到历史记录
+      this.dragHistory.push(dragState.getSummary());
+      this.activeDrags.delete(activeDrag.dragId);
+
+      console.log(`✅ 面板拖拽结束: ${panelId}, dragId: ${dragId}`);
+
+      return true;
+    } catch (error) {
+      console.error('面板拖拽结束时出错:', error);
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
+        operation: 'onPanelDragEnd',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return false;
+    }
+  }
+
+  /**
+   * TabPage拖拽开始（从DockLayout.vue迁移）
+   * @param {Object} eventData - 拖拽事件数据
+   */
+  onPanelDragStartFromTabPage(eventData) {
+    try {
+      const { 
+        event, 
+        tabPageId,
+        element,
+        tabIndex,
+        ...options 
+      } = eventData;
+
+      // 创建拖拽ID
+      const dragId = `tabpage-${tabPageId}-${Date.now()}`;
+      
+      // 创建拖拽状态
+      const dragState = new DragState(dragId, DRAG_AREA_TYPES.TABPAGE, element, {
+        tabPageId,
+        tabIndex,
+        sourceType: 'tabpage',
+        ...options
+      });
+
+      // 设置起始位置
+      const startX = event.clientX;
+      const startY = event.clientY;
+      dragState.startPosition = { x: startX, y: startY };
+      dragState.updatePosition(startX, startY);
+
+      // 设置状态为活跃
+      dragState.status = 'active';
+      this.activeDrags.set(dragId, dragState);
+
+      // 触发拖拽开始事件
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_START, {
+        dragId,
+        dragState: dragState.getSummary(),
+        source: 'onPanelDragStartFromTabPage',
+        timestamp: Date.now()
+      });
+
+      console.log(`🎯 TabPage拖拽开始: ${tabPageId}, dragId: ${dragId}`);
+
+      return dragId;
+    } catch (error) {
+      console.error('TabPage拖拽开始时出错:', error);
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
+        operation: 'onPanelDragStartFromTabPage',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return null;
+    }
+  }
+
+  /**
+   * TabPage拖拽移动（从DockLayout.vue迁移）
+   * @param {Object} eventData - 拖拽事件数据
+   */
+  onPanelDragMoveFromTabPage(eventData) {
+    try {
+      const { 
+        event, 
+        dragId,
+        tabPageId,
+        ...options 
+      } = eventData;
+
+      // 查找拖拽状态
+      const activeDrag = this._findDragByIdOrTabPageId(dragId, tabPageId);
+      if (!activeDrag) {
+        console.warn('找不到TabPage拖拽状态:', tabPageId);
+        return false;
+      }
+
+      const dragState = activeDrag.dragState;
+      if (dragState.status !== 'active') {
+        console.warn('拖拽状态不活跃:', dragId);
+        return false;
+      }
+
+      // 更新位置
+      const currentX = event.clientX;
+      const currentY = event.clientY;
+      dragState.updatePosition(currentX, currentY);
+
+      // 检测目标区域
+      const targetElement = this._detectDragTarget(currentX, currentY);
+      if (targetElement) {
+        dragState.setTarget(targetElement.element, targetElement.area);
+      }
+
+      // 触发拖拽移动事件
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_MOVE, {
+        dragId,
+        dragState: dragState.getSummary(),
+        position: { x: currentX, y: currentY },
+        target: targetElement,
+        source: 'onPanelDragMoveFromTabPage',
+        timestamp: Date.now()
+      });
+
+      return true;
+    } catch (error) {
+      console.error('TabPage拖拽移动时出错:', error);
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
+        operation: 'onPanelDragMoveFromTabPage',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return false;
+    }
+  }
+
+  /**
+   * TabPage拖拽结束（从DockLayout.vue迁移）
+   * @param {Object} eventData - 拖拽事件数据
+   */
+  onPanelDragEndFromTabPage(eventData) {
+    try {
+      const { 
+        event, 
+        dragId,
+        tabPageId,
+        dropTarget,
+        ...options 
+      } = eventData;
+
+      // 查找拖拽状态
+      const activeDrag = this._findDragByIdOrTabPageId(dragId, tabPageId);
+      if (!activeDrag) {
+        console.warn('找不到TabPage拖拽状态:', tabPageId);
+        return false;
+      }
+
+      const dragState = activeDrag.dragState;
+      
+      // 更新最终位置
+      const finalX = event.clientX;
+      const finalY = event.clientY;
+      dragState.updatePosition(finalX, finalY);
+
+      // 设置最终状态
+      dragState.status = 'completed';
+      dragState.setTarget(dropTarget?.element || null, dropTarget?.area || null);
+
+      // 触发拖拽结束事件
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_END, {
+        dragId,
+        dragState: dragState.getSummary(),
+        finalPosition: { x: finalX, y: finalY },
+        dropTarget,
+        source: 'onPanelDragEndFromTabPage',
+        timestamp: Date.now()
+      });
+
+      // 移动到历史记录
+      this.dragHistory.push(dragState.getSummary());
+      this.activeDrags.delete(activeDrag.dragId);
+
+      console.log(`✅ TabPage拖拽结束: ${tabPageId}, dragId: ${dragId}`);
+
+      return true;
+    } catch (error) {
+      console.error('TabPage拖拽结束时出错:', error);
+      eventBus.emit(DRAG_STATE_TYPES.DRAG_PERFORMANCE_MONITOR, {
+        operation: 'onPanelDragEndFromTabPage',
+        error: error.message,
+        timestamp: Date.now()
+      });
+      return false;
+    }
+  }
+
+  /**
+   * 根据ID或Panel ID查找拖拽状态
+   * @private
+   * @param {string} dragId - 拖拽ID
+   * @param {string} panelId - 面板ID
+   * @returns {Object|null} 拖拽状态
+   */
+  _findDragByIdOrPanelId(dragId, panelId) {
+    // 首先尝试通过dragId查找
+    if (dragId && this.activeDrags.has(dragId)) {
+      return { dragId, dragState: this.activeDrags.get(dragId) };
+    }
+
+    // 如果找不到，尝试通过panelId查找
+    for (const [id, dragState] of this.activeDrags.entries()) {
+      if (dragState.options.panelId === panelId) {
+        return { dragId: id, dragState };
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * 根据ID或TabPage ID查找拖拽状态
+   * @private
+   * @param {string} dragId - 拖拽ID
+   * @param {string} tabPageId - TabPage ID
+   * @returns {Object|null} 拖拽状态
+   */
+  _findDragByIdOrTabPageId(dragId, tabPageId) {
+    // 首先尝试通过dragId查找
+    if (dragId && this.activeDrags.has(dragId)) {
+      return { dragId, dragState: this.activeDrags.get(dragId) };
+    }
+
+    // 如果找不到，尝试通过tabPageId查找
+    for (const [id, dragState] of this.activeDrags.entries()) {
+      if (dragState.options.tabPageId === tabPageId) {
+        return { dragId: id, dragState };
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * 检测拖拽目标
+   * @private
+   * @param {number} x - X坐标
+   * @param {number} y - Y坐标
+   * @returns {Object|null} 目标信息
+   */
+  _detectDragTarget(x, y) {
+    try {
+      // 这里可以实现具体的拖拽目标检测逻辑
+      // 例如：检测鼠标下的元素类型和区域
+      
+      // 简化实现：检查坐标是否在预设区域内
+      const targetAreas = ['main-area', 'floating-area', 'hidden-area'];
+      const detectedArea = targetAreas[Math.floor(Math.random() * targetAreas.length)];
+      
+      return {
+        element: document.elementFromPoint(x, y),
+        area: detectedArea,
+        position: { x, y }
+      };
+    } catch (error) {
+      console.error('检测拖拽目标时出错:', error);
+      return null;
+    }
+  }
+
+  /**
+   * 销毁管理器
+   */
+  destroy() {
+    // 取消所有拖拽
+    this.cancelAllDrags();
+    
+    // 清理数据
+    this.activeDrags.clear();
+    this.dragHistory = [];
+    this.dragTargets.clear();
+    
+    // 清理冲突检测器
+    this.conflictDetector.activeDrags.clear();
+    this.conflictDetector.conflictHistory = [];
+    
+    this.isEnabled = false;
+    console.log('🗑️ 拖拽状态管理器已销毁');
+  }
+}
+
+// 创建单例实例
+const dragStateManager = new DragStateManager();
+
+// 便捷操作函数
+export const dragStateActions = {
+  /**
+   * 获取拖拽状态
+   * @param {string} dragId - 拖拽ID
+   * @returns {Object} 拖拽状态
+   */
+  getDragState: (dragId) => dragStateManager.getDragState(dragId),
+
+  /**
+   * 获取所有活跃拖拽
+   * @returns {Array} 活跃拖拽列表
+   */
+  getActiveDrags: () => dragStateManager.getActiveDrags(),
+
+  /**
+   * 获取拖拽历史
+   * @param {number} limit - 限制数量
+   * @returns {Array} 历史记录
+   */
+  getHistory: (limit = 100) => dragStateManager.getDragHistory(limit),
+
+  /**
+   * 获取统计信息
+   * @returns {Object} 统计信息
+   */
+  getStats: () => dragStateManager.getDragStats(),
+
+  /**
+   * 设置调试模式
+   * @param {boolean} enabled - 是否启用
+   */
+  setDebugMode: (enabled) => dragStateManager.setDebugMode(enabled),
+
+  /**
+   * 启用/禁用管理器
+   * @param {boolean} enabled - 是否启用
+   */
+  setEnabled: (enabled) => dragStateManager.setEnabled(enabled),
+
+  /**
+   * 取消所有拖拽
+   */
+  cancelAll: () => dragStateManager.cancelAllDrags(),
+
+  /**
+   * 面板拖拽开始
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {string} 拖拽ID
+   */
+  onPanelDragStart: (eventData) => dragStateManager.onPanelDragStart(eventData),
+
+  /**
+   * 面板拖拽移动
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {boolean} 是否成功
+   */
+  onPanelDragMove: (eventData) => dragStateManager.onPanelDragMove(eventData),
+
+  /**
+   * 面板拖拽结束
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {boolean} 是否成功
+   */
+  onPanelDragEnd: (eventData) => dragStateManager.onPanelDragEnd(eventData),
+
+  /**
+   * TabPage拖拽开始
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {string} 拖拽ID
+   */
+  onPanelDragStartFromTabPage: (eventData) => dragStateManager.onPanelDragStartFromTabPage(eventData),
+
+  /**
+   * TabPage拖拽移动
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {boolean} 是否成功
+   */
+  onPanelDragMoveFromTabPage: (eventData) => dragStateManager.onPanelDragMoveFromTabPage(eventData),
+
+  /**
+   * TabPage拖拽结束
+   * @param {Object} eventData - 拖拽事件数据
+   * @returns {boolean} 是否成功
+   */
+  onPanelDragEndFromTabPage: (eventData) => dragStateManager.onPanelDragEndFromTabPage(eventData)
+};
+
+// 导出
+export default dragStateManager;
+export { DragState };
\ No newline at end of file
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/EventBusManager.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/EventBusManager.js
new file mode 100644
index 0000000..1183d0f
--- /dev/null
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/EventBusManager.js
@@ -0,0 +1,584 @@
+/**
+ * 事件总线集成模块
+ * 统一管理所有事件处理器和功能模块
+ */
+
+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';
+
+// 事件总线配置
+export const EVENT_BUS_CONFIG = {
+  // 事件总线配置
+  bus: {
+    enableDebug: true,
+    enablePerformance: true,
+    maxHistorySize: 1000,
+    cleanupInterval: 30000 // 30秒清理一次
+  },
+  
+  // 处理器配置
+  handlers: {
+    panel: {
+      enabled: true,
+      autoRegister: true,
+      eventBufferSize: 100
+    },
+    tabpage: {
+      enabled: true,
+      autoRegister: true,
+      eventBufferSize: 100
+    },
+    area: {
+      enabled: true,
+      autoRegister: true,
+      eventBufferSize: 100
+    },
+    global: {
+      enabled: true,
+      autoRegister: true,
+      routing: true
+    },
+    drag: {
+      enabled: true,
+      autoRegister: true,
+      conflictDetection: true
+    }
+  },
+  
+  // 集成测试配置
+  testing: {
+    enabled: true,
+    autoRun: false,
+    reportInterval: 60000, // 1分钟
+    performanceThreshold: {
+      eventEmitTime: 10,
+      eventHandleTime: 50,
+      memoryUsage: 50 * 1024 * 1024
+    }
+  }
+};
+
+// 事件总线管理器类
+class EventBusManager {
+  constructor() {
+    this.isInitialized = false;
+    this.isDestroyed = false;
+    this.components = new Map();
+    this.eventRoutes = new Map();
+    this.performanceMonitor = null;
+    this.healthCheckInterval = null;
+    this.initializedHandlers = new Set();
+    
+    // 绑定方法
+    this._handleGlobalError = this._handleGlobalError.bind(this);
+    this._handleUnhandledRejection = this._handleUnhandledRejection.bind(this);
+    this._healthCheck = this._healthCheck.bind(this);
+  }
+
+  /**
+   * 初始化事件总线系统
+   * @param {Object} config - 配置选项
+   */
+  async initialize(config = {}) {
+    if (this.isInitialized) {
+      console.warn('⚠️ 事件总线系统已经初始化');
+      return;
+    }
+
+    console.log('🚀 初始化事件总线系统...');
+    this.isInitialized = true;
+
+    try {
+      // 合并配置
+      this.config = { ...EVENT_BUS_CONFIG, ...config };
+      
+      // 初始化全局错误处理
+      this._setupGlobalErrorHandling();
+      
+      // 注册事件处理器
+      await this._registerAllHandlers();
+      
+      // 设置事件路由
+      this._setupEventRoutes();
+      
+      // 启动性能监控（如果启用）
+      if (this.config.testing.enabled && this.config.testing.autoRun) {
+        await this._startPerformanceMonitoring();
+      }
+      
+      // 启动健康检查
+      this._startHealthCheck();
+      
+      // 发布初始化完成事件
+      eventBus.emit(GLOBAL_EVENT_TYPES.SYSTEM_INITIALIZED, {
+        timestamp: Date.now(),
+        version: '1.0.0',
+        components: Array.from(this.initializedHandlers)
+      });
+      
+      console.log('✅ 事件总线系统初始化完成');
+      console.log(`📋 已注册组件: ${Array.from(this.initializedHandlers).join(', ')}`);
+      
+    } catch (error) {
+      console.error('❌ 事件总线系统初始化失败:', error);
+      this.isInitialized = false;
+      throw error;
+    }
+  }
+
+  /**
+   * 注册所有事件处理器
+   */
+  async _registerAllHandlers() {
+    const handlers = [
+      { name: 'panel', handler: panelHandler, events: PANEL_EVENT_TYPES },
+      { name: 'tabpage', handler: tabPageHandler, events: TABPAGE_EVENT_TYPES },
+      { name: 'area', handler: areaHandler, events: AREA_EVENT_TYPES },
+      { name: 'global', handler: globalEventManager, events: GLOBAL_EVENT_TYPES },
+      { name: 'drag', handler: dragStateManager, events: DRAG_STATE_TYPES }
+    ];
+
+    for (const { name, handler, events } of handlers) {
+      const handlerConfig = this.config.handlers[name];
+      
+      if (!handlerConfig?.enabled) {
+        console.log(`⏭️ 跳过禁用的事件处理器: ${name}`);
+        continue;
+      }
+
+      try {
+        console.log(`📝 注册事件处理器: ${name}`);
+        
+        // 注册事件处理器到事件总线
+        Object.values(events).forEach(eventType => {
+          if (typeof handler.handleEvent === 'function') {
+            eventBus.on(eventType, handler.handleEvent.bind(handler), { 
+              priority: 1,
+              id: `handler-${name}`
+            });
+          }
+        });
+        
+        // 调用初始化方法（如果存在）
+        if (typeof handler.initialize === 'function') {
+          await handler.initialize();
+        }
+        
+        this.initializedHandlers.add(name);
+        this.components.set(name, {
+          handler,
+          events: Object.values(events),
+          config: handlerConfig,
+          status: 'active',
+          initializedAt: Date.now()
+        });
+        
+        console.log(`✅ 事件处理器注册成功: ${name}`);
+        
+      } catch (error) {
+        console.error(`❌ 事件处理器注册失败 [${name}]:`, error);
+        this.components.set(name, {
+          handler,
+          events: Object.values(events),
+          config: handlerConfig,
+          status: 'error',
+          error: error.message,
+          initializedAt: Date.now()
+        });
+      }
+    }
+  }
+
+  /**
+   * 设置事件路由
+   */
+  _setupEventRoutes() {
+    // 设置跨组件事件路由
+    const routes = [
+      // Panel相关路由
+      { from: PANEL_EVENT_TYPES.PANEL_CREATE_REQUEST, to: [GLOBAL_EVENT_TYPES.PANEL_CREATED] },
+      { from: PANEL_EVENT_TYPES.PANEL_CLOSE_REQUEST, to: [GLOBAL_EVENT_TYPES.PANEL_CLOSED] },
+      { from: PANEL_EVENT_TYPES.PANEL_MAXIMIZE, to: [GLOBAL_EVENT_TYPES.PANEL_STATE_CHANGED] },
+      
+      // TabPage相关路由
+      { from: TABPAGE_EVENT_TYPES.TABPAGE_CREATE_REQUEST, to: [GLOBAL_EVENT_TYPES.TABPAGE_CREATED] },
+      { from: TABPAGE_EVENT_TYPES.TABPAGE_CLOSE_REQUEST, to: [GLOBAL_EVENT_TYPES.TABPAGE_CLOSED] },
+      { from: TABPAGE_EVENT_TYPES.TABPAGE_SWITCH, to: [GLOBAL_EVENT_TYPES.TABPAGE_SWITCHED] },
+      
+      // Area相关路由
+      { from: AREA_EVENT_TYPES.AREA_CREATE_REQUEST, to: [GLOBAL_EVENT_TYPES.AREA_CREATED] },
+      { from: AREA_EVENT_TYPES.AREA_DESTROY_REQUEST, to: [GLOBAL_EVENT_TYPES.AREA_DESTROYED] },
+      { from: AREA_EVENT_TYPES.AREA_MERGE, to: [GLOBAL_EVENT_TYPES.AREA_MERGED] },
+      
+      // 拖拽相关路由
+      { from: 'panel.drag.start', to: [GLOBAL_EVENT_TYPES.DRAG_STARTED] },
+      { from: 'panel.drag.end', to: [GLOBAL_EVENT_TYPES.DRAG_ENDED] },
+      { from: 'tabpage.drag.start', to: [GLOBAL_EVENT_TYPES.DRAG_STARTED] },
+      { from: 'tabpage.drag.end', to: [GLOBAL_EVENT_TYPES.DRAG_ENDED] },
+      { from: 'area.drag.start', to: [GLOBAL_EVENT_TYPES.DRAG_STARTED] },
+      { from: 'area.drag.end', to: [GLOBAL_EVENT_TYPES.DRAG_ENDED] }
+    ];
+
+    routes.forEach(route => {
+      this.eventRoutes.set(route.from, route.to);
+      eventBus.on(route.from, (data) => {
+        // 自动路由到目标事件
+        route.to.forEach(targetEvent => {
+          eventBus.emit(targetEvent, {
+            ...data,
+            sourceEvent: route.from,
+            routed: true,
+            routeTime: Date.now()
+          });
+        });
+      }, { id: 'router', priority: 0 });
+    });
+
+    console.log(`🔗 设置了 ${routes.length} 个事件路由`);
+  }
+
+  /**
+   * 设置全局错误处理
+   */
+  _setupGlobalErrorHandling() {
+    // 捕获未处理的错误
+    window.addEventListener('error', this._handleGlobalError);
+    
+    // 捕获未处理的Promise拒绝
+    window.addEventListener('unhandledrejection', this._handleUnhandledRejection);
+    
+    console.log('🔧 全局错误处理已设置');
+  }
+
+  /**
+   * 处理全局错误
+   * @param {ErrorEvent} event - 错误事件
+   */
+  _handleGlobalError(event) {
+    console.error('🚨 全局错误捕获:', {
+      message: event.message,
+      filename: event.filename,
+      lineno: event.lineno,
+      colno: event.colno,
+      error: event.error
+    });
+
+    // 发布错误事件
+    eventBus.emit(GLOBAL_EVENT_TYPES.SYSTEM_ERROR, {
+      type: 'javascript_error',
+      message: event.message,
+      filename: event.filename,
+      lineno: event.lineno,
+      colno: event.colno,
+      stack: event.error?.stack,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 处理未捕获的Promise拒绝
+   * @param {PromiseRejectionEvent} event - Promise拒绝事件
+   */
+  _handleUnhandledRejection(event) {
+    console.error('🚨 未处理的Promise拒绝:', {
+      reason: event.reason,
+      promise: event.promise
+    });
+
+    // 发布错误事件
+    eventBus.emit(GLOBAL_EVENT_TYPES.SYSTEM_ERROR, {
+      type: 'unhandled_promise_rejection',
+      reason: event.reason?.toString(),
+      stack: event.reason?.stack,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 启动性能监控
+   */
+  async _startPerformanceMonitoring() {
+    console.log('📊 启动性能监控...');
+    
+    // 运行快速性能测试
+    try {
+      const report = await testActions.runAll(['panel', 'tabpage', 'area']);
+      console.log('✅ 初始性能测试完成');
+      
+      // 发布性能报告
+      eventBus.emit(GLOBAL_EVENT_TYPES.PERFORMANCE_REPORT, {
+        type: 'initial_test',
+        report,
+        timestamp: Date.now()
+      });
+      
+    } catch (error) {
+      console.warn('⚠️ 初始性能测试失败:', error.message);
+    }
+  }
+
+  /**
+   * 启动健康检查
+   */
+  _startHealthCheck() {
+    // 每分钟执行一次健康检查
+    this.healthCheckInterval = setInterval(this._healthCheck, 60000);
+    
+    console.log('💚 健康检查已启动');
+  }
+
+  /**
+   * 执行健康检查
+   */
+  _healthCheck() {
+    if (this.isDestroyed) return;
+    
+    const healthStatus = {
+      timestamp: Date.now(),
+      components: {},
+      eventBus: {
+        isActive: eventBus.isActive(),
+        handlerCount: eventBus.getHandlerCount(),
+        queuedEvents: eventBus.getQueuedEvents()
+      },
+      memory: performance.memory ? {
+        used: performance.memory.usedJSHeapSize,
+        total: performance.memory.totalJSHeapSize,
+        limit: performance.memory.jsHeapSizeLimit
+      } : null,
+      issues: []
+    };
+
+    // 检查组件状态
+    for (const [name, component] of this.components) {
+      component.status = 'active'; // 简化实现，实际应该检查组件健康状态
+      
+      healthStatus.components[name] = {
+        status: component.status,
+        error: component.error,
+        initializedAt: component.initializedAt
+      };
+      
+      if (component.status === 'error') {
+        healthStatus.issues.push({
+          component: name,
+          type: 'component_error',
+          message: component.error
+        });
+      }
+    }
+
+    // 检查事件总线状态
+    if (healthStatus.eventBus.handlerCount === 0) {
+      healthStatus.issues.push({
+        component: 'eventBus',
+        type: 'no_handlers',
+        message: '事件总线没有注册的事件处理器'
+      });
+    }
+
+    // 发布健康检查结果
+    eventBus.emit(GLOBAL_EVENT_TYPES.HEALTH_CHECK, healthStatus);
+  }
+
+  /**
+   * 获取系统状态
+   * @returns {Object} 系统状态
+   */
+  getSystemStatus() {
+    return {
+      initialized: this.isInitialized,
+      destroyed: this.isDestroyed,
+      config: this.config,
+      components: Object.fromEntries(this.components),
+      eventRoutes: Object.fromEntries(this.eventRoutes),
+      initializedHandlers: Array.from(this.initializedHandlers),
+      eventBusStats: eventBus.getStats(),
+      uptime: Date.now() - (this.startTime || Date.now())
+    };
+  }
+
+  /**
+   * 重启组件
+   * @param {string} componentName - 组件名称
+   */
+  async restartComponent(componentName) {
+    const component = this.components.get(componentName);
+    if (!component) {
+      throw new Error(`未找到组件: ${componentName}`);
+    }
+
+    console.log(`🔄 重启组件: ${componentName}`);
+    
+    try {
+      // 销毁组件
+      if (typeof component.handler.destroy === 'function') {
+        await component.handler.destroy();
+      }
+      
+      // 重新初始化组件
+      if (typeof component.handler.initialize === 'function') {
+        await component.handler.initialize();
+      }
+      
+      // 更新状态
+      component.status = 'active';
+      component.error = null;
+      component.restartedAt = Date.now();
+      
+      console.log(`✅ 组件重启成功: ${componentName}`);
+      
+      // 发布重启事件
+      eventBus.emit(GLOBAL_EVENT_TYPES.COMPONENT_RESTARTED, {
+        componentName,
+        timestamp: Date.now()
+      });
+      
+    } catch (error) {
+      component.status = 'error';
+      component.error = error.message;
+      
+      console.error(`❌ 组件重启失败 [${componentName}]:`, error);
+      
+      throw error;
+    }
+  }
+
+  /**
+   * 销毁事件总线系统
+   */
+  async destroy() {
+    if (!this.isInitialized || this.isDestroyed) {
+      return;
+    }
+
+    console.log('🗑️ 销毁事件总线系统...');
+    this.isDestroyed = true;
+
+    try {
+      // 停止健康检查
+      if (this.healthCheckInterval) {
+        clearInterval(this.healthCheckInterval);
+        this.healthCheckInterval = null;
+      }
+      
+      // 移除全局错误处理
+      window.removeEventListener('error', this._handleGlobalError);
+      window.removeEventListener('unhandledrejection', this._handleUnhandledRejection);
+      
+      // 销毁所有组件
+      for (const [name, component] of this.components) {
+        try {
+          if (typeof component.handler.destroy === 'function') {
+            await component.handler.destroy();
+          }
+          console.log(`✅ 组件销毁成功: ${name}`);
+        } catch (error) {
+          console.error(`❌ 组件销毁失败 [${name}]:`, error);
+        }
+      }
+      
+      // 清空数据
+      this.components.clear();
+      this.eventRoutes.clear();
+      this.initializedHandlers.clear();
+      
+      // 销毁测试器
+      if (typeof integrationTester.destroy === 'function') {
+        integrationTester.destroy();
+      }
+      
+      console.log('✅ 事件总线系统已完全销毁');
+      
+    } catch (error) {
+      console.error('❌ 事件总线系统销毁过程中发生错误:', error);
+      throw error;
+    }
+  }
+}
+
+// 创建单例实例
+const eventBusManager = new EventBusManager();
+
+// 便捷API
+export const systemActions = {
+  /**
+   * 初始化事件总线系统
+   * @param {Object} config - 配置选项
+   */
+  initialize: (config) => eventBusManager.initialize(config),
+  
+  /**
+   * 获取系统状态
+   * @returns {Object} 系统状态
+   */
+  getStatus: () => eventBusManager.getSystemStatus(),
+  
+  /**
+   * 重启组件
+   * @param {string} componentName - 组件名称
+   */
+  restartComponent: (componentName) => eventBusManager.restartComponent(componentName),
+  
+  /**
+   * 运行集成测试
+   * @param {Array} suites - 测试套件列表
+   * @returns {Promise} 测试报告
+   */
+  runTests: (suites) => testActions.runAll(suites),
+  
+  /**
+   * 获取性能摘要
+   * @returns {Object} 性能摘要
+   */
+  getPerformanceSummary: () => testActions.getPerformanceSummary(),
+  
+  /**
+   * 销毁系统
+   */
+  destroy: () => eventBusManager.destroy()
+};
+
+// 导出所有API
+export const dockLayoutActions = {
+  // 事件总线API
+  ...eventBusActions,
+  
+  // Panel API
+  ...panelActions,
+  
+  // TabPage API
+  ...tabPageActions,
+  
+  // Area API
+  ...areaActions,
+  
+  // 全局事件 API
+  ...globalEventActions,
+  
+  // 拖拽状态 API
+  ...dragStateActions,
+  
+  // 系统 API
+  ...systemActions
+};
+
+// 默认导出管理器实例
+export default eventBusManager;
+
+// 导出的常量
+export {
+  EVENT_BUS_CONFIG,
+  EVENT_TYPES,
+  PANEL_EVENT_TYPES,
+  TABPAGE_EVENT_TYPES,
+  AREA_EVENT_TYPES,
+  GLOBAL_EVENT_TYPES,
+  DRAG_STATE_TYPES,
+  TEST_CONFIG
+};
\ No newline at end of file
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js
new file mode 100644
index 0000000..c812ed0
--- /dev/null
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/GlobalEventManager.js
@@ -0,0 +1,1100 @@
+/**
+ * 全局事件管理器
+ * 统一管理所有事件处理器，提供事件路由、分发、监控和调试功能
+ */
+
+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';
+
+// 全局事件类型常量
+export const GLOBAL_EVENT_TYPES = {
+  // 系统级事件
+  SYSTEM_INIT: 'system.init',
+  SYSTEM_READY: 'system.ready',
+  SYSTEM_DESTROY: 'system.destroy',
+  SYSTEM_ERROR: 'system.error',
+  SYSTEM_PERFORMANCE: 'system.performance',
+  
+  // 事件路由
+  EVENT_ROUTE_START: 'event.route.start',
+  EVENT_ROUTE_SUCCESS: 'event.route.success',
+  EVENT_ROUTE_ERROR: 'event.route.error',
+  EVENT_ROUTE_FALLBACK: 'event.route.fallback',
+  
+  // 跨组件通信
+  CROSS_COMPONENT_BROADCAST: 'cross.component.broadcast',
+  CROSS_COMPONENT_REQUEST: 'cross.component.request',
+  CROSS_COMPONENT_RESPONSE: 'cross.component.response',
+  
+  // 事件链
+  EVENT_CHAIN_START: 'event.chain.start',
+  EVENT_CHAIN_PROGRESS: 'event.chain.progress',
+  EVENT_CHAIN_COMPLETE: 'event.chain.complete',
+  EVENT_CHAIN_ERROR: 'event.chain.error',
+  
+  // 性能监控
+  PERFORMANCE_MONITOR_START: 'performance.monitor.start',
+  PERFORMANCE_MONITOR_END: 'performance.monitor.end',
+  PERFORMANCE_THRESHOLD_EXCEEDED: 'performance.threshold.exceeded',
+  
+  // 调试和日志
+  DEBUG_EVENT_EMIT: 'debug.event.emit',
+  DEBUG_EVENT_HANDLE: 'debug.event.handle',
+  DEBUG_PERFORMANCE: 'debug.performance',
+  DEBUG_MEMORY: 'debug.memory'
+};
+
+// 事件路由配置
+const EVENT_ROUTES = {
+  // Panel事件路由
+  [PANEL_EVENT_TYPES.PANEL_DRAG_START]: {
+    handlers: ['panelHandler', 'areaHandler'],
+    priority: 1,
+    timeout: 5000
+  },
+  [PANEL_EVENT_TYPES.PANEL_MAXIMIZE]: {
+    handlers: ['panelHandler', 'areaHandler'],
+    priority: 1,
+    timeout: 3000
+  },
+  [PANEL_EVENT_TYPES.PANEL_CLOSE_REQUEST]: {
+    handlers: ['panelHandler', 'tabPageHandler'],
+    priority: 2,
+    timeout: 5000
+  },
+  
+  // TabPage事件路由
+  [TABPAGE_EVENT_TYPES.TABPAGE_DRAG_START]: {
+    handlers: ['tabPageHandler', 'areaHandler'],
+    priority: 1,
+    timeout: 5000
+  },
+  [TABPAGE_EVENT_TYPES.TABPAGE_SWITCH]: {
+    handlers: ['tabPageHandler', 'panelHandler'],
+    priority: 2,
+    timeout: 3000
+  },
+  [TABPAGE_EVENT_TYPES.TABPAGE_CLOSE_REQUEST]: {
+    handlers: ['tabPageHandler', 'panelHandler'],
+    priority: 2,
+    timeout: 5000
+  },
+  
+  // Area事件路由
+  [AREA_EVENT_TYPES.AREA_DRAG_START]: {
+    handlers: ['areaHandler', 'tabPageHandler'],
+    priority: 1,
+    timeout: 5000
+  },
+  [AREA_EVENT_TYPES.AREA_MERGE]: {
+    handlers: ['areaHandler', 'tabPageHandler', 'panelHandler'],
+    priority: 1,
+    timeout: 10000
+  },
+  [AREA_EVENT_TYPES.AREA_DOCK_CENTER]: {
+    handlers: ['areaHandler', 'tabPageHandler'],
+    priority: 1,
+    timeout: 8000
+  }
+};
+
+// 事件执行监控
+class EventExecutionMonitor {
+  constructor() {
+    this.executionMap = new Map();
+    this.performanceHistory = [];
+    this.errorHistory = [];
+    this.maxHistorySize = 200;
+  }
+
+  /**
+   * 开始事件监控
+   * @param {string} eventId - 事件ID
+   * @param {Object} eventData - 事件数据
+   */
+  startMonitoring(eventId, eventData) {
+    const execution = {
+      eventId,
+      eventType: eventData.eventType || eventData.type,
+      startTime: Date.now(),
+      handlers: [],
+      status: 'running',
+      eventData: { ...eventData }
+    };
+    
+    this.executionMap.set(eventId, execution);
+    return execution;
+  }
+
+  /**
+   * 记录处理器开始
+   * @param {string} eventId - 事件ID
+   * @param {string} handlerName - 处理器名称
+   */
+  recordHandlerStart(eventId, handlerName) {
+    const execution = this.executionMap.get(eventId);
+    if (execution) {
+      execution.handlers.push({
+        name: handlerName,
+        startTime: Date.now(),
+        status: 'running'
+      });
+    }
+  }
+
+  /**
+   * 记录处理器完成
+   * @param {string} eventId - 事件ID
+   * @param {string} handlerName - 处理器名称
+   * @param {boolean} success - 是否成功
+   * @param {number} duration - 执行时长
+   * @param {Error} error - 错误信息
+   */
+  recordHandlerComplete(eventId, handlerName, success, duration, error = null) {
+    const execution = this.executionMap.get(eventId);
+    if (execution) {
+      const handler = execution.handlers.find(h => h.name === handlerName);
+      if (handler) {
+        handler.endTime = Date.now();
+        handler.duration = duration;
+        handler.status = success ? 'completed' : 'error';
+        handler.error = error;
+      }
+    }
+  }
+
+  /**
+   * 完成事件监控
+   * @param {string} eventId - 事件ID
+   */
+  completeMonitoring(eventId) {
+    const execution = this.executionMap.get(eventId);
+    if (execution) {
+      execution.endTime = Date.now();
+      execution.status = 'completed';
+      execution.totalDuration = execution.endTime - execution.startTime;
+      
+      // 记录性能历史
+      this.performanceHistory.push({
+        eventId,
+        eventType: execution.eventType,
+        totalDuration: execution.totalDuration,
+        handlerCount: execution.handlers.length,
+        timestamp: Date.now()
+      });
+      
+      // 限制历史大小
+      if (this.performanceHistory.length > this.maxHistorySize) {
+        this.performanceHistory.shift();
+      }
+      
+      // 检查性能阈值
+      if (execution.totalDuration > 1000) { // 超过1秒
+        eventBus.emit(GLOBAL_EVENT_TYPES.PERFORMANCE_THRESHOLD_EXCEEDED, {
+          eventId,
+          eventType: execution.eventType,
+          duration: execution.totalDuration,
+          threshold: 1000
+        });
+      }
+    }
+    
+    return execution;
+  }
+
+  /**
+   * 记录错误
+   * @param {string} eventId - 事件ID
+   * @param {Error} error - 错误信息
+   */
+  recordError(eventId, error) {
+    const execution = this.executionMap.get(eventId);
+    if (execution) {
+      execution.status = 'error';
+      execution.error = error;
+      execution.endTime = Date.now();
+      execution.totalDuration = execution.endTime - execution.startTime;
+      
+      // 记录错误历史
+      this.errorHistory.push({
+        eventId,
+        eventType: execution.eventType,
+        error: error.message,
+        stack: error.stack,
+        timestamp: Date.now()
+      });
+      
+      // 限制错误历史大小
+      if (this.errorHistory.length > this.maxHistorySize) {
+        this.errorHistory.shift();
+      }
+    }
+  }
+
+  /**
+   * 获取执行统计
+   * @returns {Object} 执行统计
+   */
+  getExecutionStats() {
+    const running = Array.from(this.executionMap.values()).filter(e => e.status === 'running');
+    const completed = Array.from(this.executionMap.values()).filter(e => e.status === 'completed');
+    const errors = Array.from(this.executionMap.values()).filter(e => e.status === 'error');
+    
+    return {
+      running: running.length,
+      completed: completed.length,
+      errors: errors.length,
+      total: this.executionMap.size,
+      averageDuration: completed.length > 0 ? 
+        completed.reduce((sum, e) => sum + e.totalDuration, 0) / completed.length : 0,
+      recentPerformance: this.performanceHistory.slice(-10),
+      recentErrors: this.errorHistory.slice(-10)
+    };
+  }
+
+  /**
+   * 获取事件执行详情
+   * @param {string} eventId - 事件ID
+   * @returns {Object} 执行详情
+   */
+  getExecutionDetail(eventId) {
+    return this.executionMap.get(eventId);
+  }
+
+  /**
+   * 清理过期记录
+   * @param {number} maxAge - 最大年龄（毫秒）
+   */
+  cleanup(maxAge = 3600000) { // 1小时
+    const now = Date.now();
+    
+    this.performanceHistory = this.performanceHistory.filter(record => 
+      (now - record.timestamp) < maxAge);
+    
+    this.errorHistory = this.errorHistory.filter(record => 
+      (now - record.timestamp) < maxAge);
+    
+    // 清理已完成的执行记录
+    Array.from(this.executionMap.entries()).forEach(([eventId, execution]) => {
+      if (execution.status !== 'running' && (now - execution.endTime) > maxAge) {
+        this.executionMap.delete(eventId);
+      }
+    });
+  }
+}
+
+/**
+ * 全局事件管理器类
+ */
+class GlobalEventManager {
+  constructor() {
+    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.debugMode = false;
+    
+    // 处理器映射
+    this.handlerMap = {
+      panelHandler,
+      tabPageHandler,
+      areaHandler
+    };
+    
+    // 绑定方法
+    this._onGlobalEvent = this._onGlobalEvent.bind(this);
+    this._onSystemError = this._handleSystemError.bind(this);
+    this._cleanupExpiredData = this._cleanupExpiredData.bind(this);
+    
+    this._initialize();
+  }
+
+  /**
+   * 初始化事件管理器
+   */
+  _initialize() {
+    // 注册全局事件监听器
+    this._registerGlobalEventListeners();
+    
+    // 启动定期清理
+    this._startCleanupScheduler();
+    
+    // 启动调试模式监听
+    this._startDebugMode();
+    
+    this.isInitialized = true;
+    console.log('✅ 全局事件管理器初始化完成');
+    
+    // 触发系统就绪事件
+    eventBus.emit(GLOBAL_EVENT_TYPES.SYSTEM_READY, {
+      manager: 'globalEventManager',
+      timestamp: Date.now(),
+      handlers: Object.keys(this.handlerMap)
+    });
+  }
+
+  /**
+   * 注册全局事件监听器
+   */
+  _registerGlobalEventListeners() {
+    const globalEvents = Object.values(GLOBAL_EVENT_TYPES);
+    globalEvents.forEach(eventType => {
+      eventBus.on(eventType, this._onGlobalEvent, { 
+        priority: 0, // 最高优先级
+        deduplication: { type: 'TTL_BASED', ttl: 50 }
+      });
+    });
+    
+    // 注册所有组件事件监听器
+    this._registerComponentEventListeners();
+  }
+
+  /**
+   * 注册组件事件监听器
+   */
+  _registerComponentEventListeners() {
+    // Panel事件监听
+    Object.values(PANEL_EVENT_TYPES).forEach(eventType => {
+      eventBus.on(eventType, (data) => {
+        this._routeEvent(eventType, data, 'panel');
+      }, { priority: 1 });
+    });
+    
+    // TabPage事件监听
+    Object.values(TABPAGE_EVENT_TYPES).forEach(eventType => {
+      eventBus.on(eventType, (data) => {
+        this._routeEvent(eventType, data, 'tabPage');
+      }, { priority: 1 });
+    });
+    
+    // Area事件监听
+    Object.values(AREA_EVENT_TYPES).forEach(eventType => {
+      eventBus.on(eventType, (data) => {
+        this._routeEvent(eventType, data, 'area');
+      }, { priority: 1 });
+    });
+  }
+
+  /**
+   * 路由事件到相应的处理器
+   * @param {string} eventType - 事件类型
+   * @param {Object} eventData - 事件数据
+   * @param {string} source - 事件源
+   */
+  async _routeEvent(eventType, eventData, source) {
+    const eventId = `${eventType}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const routeConfig = this.eventRoutes.get(eventType);
+    
+    // 开始监控
+    this.executionMonitor.startMonitoring(eventId, { ...eventData, eventType });
+    
+    eventBus.emit(GLOBAL_EVENT_TYPES.EVENT_ROUTE_START, {
+      eventId,
+      eventType,
+      source,
+      routeConfig
+    });
+    
+    try {
+      if (routeConfig) {
+        // 使用配置的路由
+        await this._executeRoutedHandlers(eventId, eventType, eventData, routeConfig);
+      } else {
+        // 默认路由到相应组件处理器
+        await this._executeDefaultHandler(eventId, eventType, eventData, source);
+      }
+      
+      // 完成监控
+      this.executionMonitor.completeMonitoring(eventId);
+      
+      eventBus.emit(GLOBAL_EVENT_TYPES.EVENT_ROUTE_SUCCESS, {
+        eventId,
+        eventType,
+        source,
+        timestamp: Date.now()
+      });
+      
+    } catch (error) {
+      // 记录错误
+      this.executionMonitor.recordError(eventId, error);
+      
+      eventBus.emit(GLOBAL_EVENT_TYPES.EVENT_ROUTE_ERROR, {
+        eventId,
+        eventType,
+        source,
+        error: error.message,
+        timestamp: Date.now()
+      });
+      
+      // 触发系统错误事件
+      eventBus.emit(GLOBAL_EVENT_TYPES.SYSTEM_ERROR, {
+        eventId,
+        eventType,
+        source,
+        error,
+        timestamp: Date.now()
+      });
+    }
+  }
+
+  /**
+   * 执行路由的处理器
+   * @param {string} eventId - 事件ID
+   * @param {string} eventType - 事件类型
+   * @param {Object} eventData - 事件数据
+   * @param {Object} routeConfig - 路由配置
+   */
+  async _executeRoutedHandlers(eventId, eventType, eventData, routeConfig) {
+    const { handlers, priority, timeout = 5000 } = routeConfig;
+    const handlerPromises = handlers.map(async (handlerName) => {
+      const startTime = Date.now();
+      this.executionMonitor.recordHandlerStart(eventId, handlerName);
+      
+      try {
+        const handler = this.handlerMap[handlerName];
+        if (!handler) {
+          throw new Error(`Handler ${handlerName} not found`);
+        }
+        
+        // 执行处理器
+        const result = await this._executeHandlerWithTimeout(
+          handler, 
+          eventType, 
+          eventData, 
+          timeout
+        );
+        
+        const duration = Date.now() - startTime;
+        this.executionMonitor.recordHandlerComplete(eventId, handlerName, true, duration);
+        
+        return { handlerName, result, duration };
+        
+      } catch (error) {
+        const duration = Date.now() - startTime;
+        this.executionMonitor.recordHandlerComplete(eventId, handlerName, false, duration, error);
+        throw error;
+      }
+    });
+    
+    // 等待所有处理器完成
+    const results = await Promise.allSettled(handlerPromises);
+    
+    // 检查是否有失败的处理器
+    const failures = results.filter(result => result.status === 'rejected');
+    if (failures.length > 0) {
+      throw new Error(`Handler execution failed: ${failures.map(f => f.reason.message).join(', ')}`);
+    }
+    
+    return results.map(result => result.value);
+  }
+
+  /**
+   * 执行默认处理器
+   * @param {string} eventId - 事件ID
+   * @param {string} eventType - 事件类型
+   * @param {Object} eventData - 事件数据
+   * @param {string} source - 事件源
+   */
+  async _executeDefaultHandler(eventId, eventType, eventData, source) {
+    const handlerName = `${source}Handler`;
+    const handler = this.handlerMap[handlerName];
+    
+    if (!handler) {
+      throw new Error(`Default handler ${handlerName} not found`);
+    }
+    
+    this.executionMonitor.recordHandlerStart(eventId, handlerName);
+    
+    try {
+      const result = await this._executeHandlerWithTimeout(handler, eventType, eventData, 5000);
+      const duration = Date.now() - this.executionMonitor.getExecutionDetail(eventId).startTime;
+      this.executionMonitor.recordHandlerComplete(eventId, handlerName, true, duration);
+      return result;
+    } catch (error) {
+      const duration = Date.now() - this.executionMonitor.getExecutionDetail(eventId).startTime;
+      this.executionMonitor.recordHandlerComplete(eventId, handlerName, false, duration, error);
+      throw error;
+    }
+  }
+
+  /**
+   * 带超时的处理器执行
+   * @param {Object} handler - 处理器对象
+   * @param {string} eventType - 事件类型
+   * @param {Object} eventData - 事件数据
+   * @param {number} timeout - 超时时间
+   * @returns {Promise} 执行结果
+   */
+  async _executeHandlerWithTimeout(handler, eventType, eventData, timeout) {
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        reject(new Error(`Handler execution timeout after ${timeout}ms`));
+      }, timeout);
+      
+      try {
+        // 假设处理器有处理事件的方法
+        if (typeof handler._onEvent === 'function') {
+          const result = handler._onEvent({ eventType, ...eventData });
+          if (result instanceof Promise) {
+            result.then(resolve).catch(reject).finally(() => clearTimeout(timer));
+          } else {
+            resolve(result);
+            clearTimeout(timer);
+          }
+        } else {
+          // 如果处理器没有_onEvent方法，直接解析
+          resolve(true);
+          clearTimeout(timer);
+        }
+      } catch (error) {
+        reject(error);
+        clearTimeout(timer);
+      }
+    });
+  }
+
+  /**
+   * 处理全局事件
+   * @param {Object} data - 事件数据
+   */
+  async _onGlobalEvent(data) {
+    const { eventType } = data;
+    
+    try {
+      switch (eventType) {
+        case GLOBAL_EVENT_TYPES.SYSTEM_INIT:
+          await this._handleSystemInit(data);
+          break;
+        case GLOBAL_EVENT_TYPES.SYSTEM_ERROR:
+          await this._handleSystemError(data);
+          break;
+        case GLOBAL_EVENT_TYPES.PERFORMANCE_THRESHOLD_EXCEEDED:
+          await this._handlePerformanceThresholdExceeded(data);
+          break;
+        case GLOBAL_EVENT_TYPES.CROSS_COMPONENT_REQUEST:
+          await this._handleCrossComponentRequest(data);
+          break;
+        default:
+          if (this.debugMode) {
+            console.log(`🌐 全局事件: ${eventType}`, data);
+          }
+      }
+    } catch (error) {
+      console.error(`❌ 全局事件处理错误 (${eventType}):`, error);
+    }
+  }
+
+  /**
+   * 处理系统初始化事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleSystemInit(data) {
+    console.log('🚀 系统初始化开始...', data);
+    
+    // 检查所有处理器是否就绪
+    const handlersStatus = {};
+    for (const [name, handler] of Object.entries(this.handlerMap)) {
+      handlersStatus[name] = {
+        ready: typeof handler === 'object',
+        methods: Object.getOwnPropertyNames(Object.getPrototypeOf(handler))
+      };
+    }
+    
+    eventBus.emit(GLOBAL_EVENT_TYPES.SYSTEM_READY, {
+      manager: 'globalEventManager',
+      handlersStatus,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 处理系统错误事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleSystemError(data) {
+    console.error('💥 系统错误:', data);
+    
+    // 记录错误详情
+    this.errorHistory = this.errorHistory || [];
+    this.errorHistory.push({
+      ...data,
+      timestamp: Date.now(),
+      type: 'system_error'
+    });
+    
+    // 限制错误历史大小
+    if (this.errorHistory.length > 100) {
+      this.errorHistory.shift();
+    }
+  }
+
+  /**
+   * 处理性能阈值超限事件
+   * @param {Object} data - 事件数据
+   */
+  async _handlePerformanceThresholdExceeded(data) {
+    console.warn('⚡ 性能阈值超限:', data);
+    
+    // 可以在这里添加性能优化建议
+    eventBus.emit(GLOBAL_EVENT_TYPES.DEBUG_PERFORMANCE, {
+      type: 'threshold_exceeded',
+      data,
+      recommendations: this._generatePerformanceRecommendations(data),
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 生成性能优化建议
+   * @param {Object} performanceData - 性能数据
+   * @returns {Array} 建议列表
+   */
+  _generatePerformanceRecommendations(performanceData) {
+    const recommendations = [];
+    
+    if (performanceData.duration > 2000) {
+      recommendations.push('考虑将长时间运行的操作分解为更小的任务');
+      recommendations.push('检查是否有阻塞主线程的操作');
+    }
+    
+    if (performanceData.handlerCount > 3) {
+      recommendations.push('减少事件处理器的数量以提高性能');
+    }
+    
+    return recommendations;
+  }
+
+  /**
+   * 处理跨组件请求
+   * @param {Object} data - 请求数据
+   */
+  async _handleCrossComponentRequest(data) {
+    const { requestId, targetComponent, action, payload } = data;
+    
+    try {
+      // 查找目标组件的处理器
+      const handler = this.handlerMap[`${targetComponent}Handler`];
+      if (!handler) {
+        throw new Error(`Target component handler ${targetComponent}Handler not found`);
+      }
+      
+      // 执行请求
+      const result = await handler[action](payload);
+      
+      // 发送响应
+      eventBus.emit(GLOBAL_EVENT_TYPES.CROSS_COMPONENT_RESPONSE, {
+        requestId,
+        targetComponent,
+        action,
+        result,
+        success: true,
+        timestamp: Date.now()
+      });
+      
+    } catch (error) {
+      // 发送错误响应
+      eventBus.emit(GLOBAL_EVENT_TYPES.CROSS_COMPONENT_RESPONSE, {
+        requestId,
+        targetComponent,
+        action,
+        error: error.message,
+        success: false,
+        timestamp: Date.now()
+      });
+    }
+  }
+
+  /**
+   * 启动调试模式
+   */
+  _startDebugMode() {
+    // 监听调试命令
+    eventBus.on('debug.toggle', () => {
+      this.debugMode = !this.debugMode;
+      console.log(`🔧 调试模式${this.debugMode ? '开启' : '关闭'}`);
+    });
+  }
+
+  /**
+   * 启动清理调度器
+   */
+  _startCleanupScheduler() {
+    setInterval(() => {
+      this._cleanupExpiredData();
+    }, 60000); // 每分钟清理一次
+  }
+
+  /**
+   * 清理过期数据
+   */
+  _cleanupExpiredData() {
+    this.executionMonitor.cleanup();
+    
+    // 清理事件链
+    const now = Date.now();
+    Array.from(this.eventChains.entries()).forEach(([chainId, chain]) => {
+      if (chain.status === 'completed' && (now - chain.endTime) > 300000) { // 5分钟
+        this.eventChains.delete(chainId);
+      }
+    });
+    
+    // 清理跨组件频道
+    this.crossComponentChannels.forEach((channel, channelId) => {
+      if (channel.lastActivity && (now - channel.lastActivity) > 600000) { // 10分钟
+        this.crossComponentChannels.delete(channelId);
+      }
+    });
+  }
+
+  /**
+   * 启动性能监控
+   * @param {string} operation - 操作名称
+   * @returns {string} 监控ID
+   */
+  startPerformanceMonitor(operation) {
+    const monitorId = `perf-${operation}-${Date.now()}`;
+    
+    eventBus.emit(GLOBAL_EVENT_TYPES.PERFORMANCE_MONITOR_START, {
+      monitorId,
+      operation,
+      startTime: Date.now()
+    });
+    
+    return monitorId;
+  }
+
+  /**
+   * 结束性能监控
+   * @param {string} monitorId - 监控ID
+   * @param {Object} metadata - 元数据
+   */
+  endPerformanceMonitor(monitorId, metadata = {}) {
+    eventBus.emit(GLOBAL_EVENT_TYPES.PERFORMANCE_MONITOR_END, {
+      monitorId,
+      endTime: Date.now(),
+      metadata
+    });
+  }
+
+  /**
+   * 创建事件链
+   * @param {string} chainName - 链名称
+   * @param {Array} events - 事件列表
+   * @returns {string} 链ID
+   */
+  createEventChain(chainName, events) {
+    const chainId = `chain-${chainName}-${Date.now()}`;
+    
+    const chain = {
+      id: chainId,
+      name: chainName,
+      events,
+      currentIndex: 0,
+      status: 'pending',
+      startTime: Date.now(),
+      results: []
+    };
+    
+    this.eventChains.set(chainId, chain);
+    
+    // 触发链开始事件
+    eventBus.emit(GLOBAL_EVENT_TYPES.EVENT_CHAIN_START, {
+      chainId,
+      chainName,
+      eventCount: events.length
+    });
+    
+    // 开始执行链
+    this._executeEventChain(chainId);
+    
+    return chainId;
+  }
+
+  /**
+   * 执行事件链
+   * @param {string} chainId - 链ID
+   */
+  async _executeEventChain(chainId) {
+    const chain = this.eventChains.get(chainId);
+    if (!chain || chain.currentIndex >= chain.events.length) {
+      this._completeEventChain(chainId);
+      return;
+    }
+    
+    const currentEvent = chain.events[chain.currentIndex];
+    chain.status = 'running';
+    
+    try {
+      // 触发进度事件
+      eventBus.emit(GLOBAL_EVENT_TYPES.EVENT_CHAIN_PROGRESS, {
+        chainId,
+        currentIndex: chain.currentIndex,
+        totalEvents: chain.events.length,
+        currentEvent
+      });
+      
+      // 执行当前事件
+      const result = await this._executeSingleEvent(currentEvent);
+      chain.results.push(result);
+      
+      // 移动到下一个事件
+      chain.currentIndex++;
+      
+      // 继续执行链
+      setTimeout(() => this._executeEventChain(chainId), 100);
+      
+    } catch (error) {
+      chain.status = 'error';
+      chain.error = error;
+      
+      eventBus.emit(GLOBAL_EVENT_TYPES.EVENT_CHAIN_ERROR, {
+        chainId,
+        error: error.message,
+        currentIndex: chain.currentIndex
+      });
+    }
+  }
+
+  /**
+   * 执行单个事件
+   * @param {Object} event - 事件对象
+   * @returns {Promise} 执行结果
+   */
+  async _executeSingleEvent(event) {
+    const { type, data, delay = 0 } = event;
+    
+    if (delay > 0) {
+      await new Promise(resolve => setTimeout(resolve, delay));
+    }
+    
+    return new Promise((resolve, reject) => {
+      eventBus.emit(type, {
+        ...data,
+        chainExecution: true,
+        timestamp: Date.now()
+      });
+      
+      // 简单的等待机制（在实际应用中可能需要更复杂的协调）
+      setTimeout(() => resolve({ type, data, executedAt: Date.now() }), 100);
+    });
+  }
+
+  /**
+   * 完成事件链
+   * @param {string} chainId - 链ID
+   */
+  _completeEventChain(chainId) {
+    const chain = this.eventChains.get(chainId);
+    if (chain) {
+      chain.status = 'completed';
+      chain.endTime = Date.now();
+      chain.duration = chain.endTime - chain.startTime;
+      
+      eventBus.emit(GLOBAL_EVENT_TYPES.EVENT_CHAIN_COMPLETE, {
+        chainId,
+        chainName: chain.name,
+        eventCount: chain.events.length,
+        duration: chain.duration,
+        results: chain.results
+      });
+    }
+  }
+
+  /**
+   * 发送跨组件广播
+   * @param {string} message - 消息内容
+   * @param {Object} data - 附加数据
+   * @param {Array} targetComponents - 目标组件列表
+   */
+  broadcast(message, data = {}, targetComponents = null) {
+    eventBus.emit(GLOBAL_EVENT_TYPES.CROSS_COMPONENT_BROADCAST, {
+      message,
+      data,
+      targetComponents,
+      sender: 'globalEventManager',
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 发送跨组件请求
+   * @param {string} targetComponent - 目标组件
+   * @param {string} action - 操作名称
+   * @param {Object} payload - 请求数据
+   * @returns {Promise} 响应Promise
+   */
+  request(targetComponent, action, payload) {
+    const requestId = `req-${targetComponent}-${action}-${Date.now()}`;
+    
+    return new Promise((resolve, reject) => {
+      // 设置响应处理器
+      const responseHandler = (responseData) => {
+        if (responseData.requestId === requestId) {
+          eventBus.off(GLOBAL_EVENT_TYPES.CROSS_COMPONENT_RESPONSE, responseHandler);
+          
+          if (responseData.success) {
+            resolve(responseData);
+          } else {
+            reject(new Error(responseData.error));
+          }
+        }
+      };
+      
+      eventBus.on(GLOBAL_EVENT_TYPES.CROSS_COMPONENT_RESPONSE, responseHandler);
+      
+      // 发送请求
+      eventBus.emit(GLOBAL_EVENT_TYPES.CROSS_COMPONENT_REQUEST, {
+        requestId,
+        targetComponent,
+        action,
+        payload,
+        timestamp: Date.now()
+      });
+      
+      // 设置超时
+      setTimeout(() => {
+        eventBus.off(GLOBAL_EVENT_TYPES.CROSS_COMPONENT_RESPONSE, responseHandler);
+        reject(new Error(`Request timeout: ${targetComponent}.${action}`));
+      }, 10000);
+    });
+  }
+
+  /**
+   * 获取执行统计
+   * @returns {Object} 执行统计
+   */
+  getExecutionStats() {
+    return {
+      ...this.executionMonitor.getExecutionStats(),
+      eventChains: this.eventChains.size,
+      crossComponentChannels: this.crossComponentChannels.size,
+      debugMode: this.debugMode,
+      initialized: this.isInitialized
+    };
+  }
+
+  /**
+   * 获取事件链状态
+   * @returns {Array} 事件链状态列表
+   */
+  getEventChainStatus() {
+    return Array.from(this.eventChains.values()).map(chain => ({
+      id: chain.id,
+      name: chain.name,
+      status: chain.status,
+      progress: chain.events.length > 0 ? (chain.currentIndex / chain.events.length) * 100 : 0,
+      duration: chain.endTime ? chain.duration : Date.now() - chain.startTime
+    }));
+  }
+
+  /**
+   * 销毁事件管理器
+   */
+  destroy() {
+    // 清理所有事件监听器
+    const globalEvents = Object.values(GLOBAL_EVENT_TYPES);
+    globalEvents.forEach(eventType => {
+      eventBus.off(eventType, this._onGlobalEvent);
+    });
+    
+    // 销毁各个处理器
+    Object.values(this.handlerMap).forEach(handler => {
+      if (typeof handler.destroy === 'function') {
+        handler.destroy();
+      }
+    });
+    
+    // 清理数据
+    this.eventHandlers.clear();
+    this.eventChains.clear();
+    this.crossComponentChannels.clear();
+    
+    this.isInitialized = false;
+    console.log('🗑️ 全局事件管理器已销毁');
+  }
+}
+
+// 创建单例实例
+const globalEventManager = new GlobalEventManager();
+
+// 全局便捷API
+export const globalEventActions = {
+  /**
+   * 启动性能监控
+   * @param {string} operation - 操作名称
+   * @returns {string} 监控ID
+   */
+  startMonitor: (operation) => {
+    return globalEventManager.startPerformanceMonitor(operation);
+  },
+
+  /**
+   * 结束性能监控
+   * @param {string} monitorId - 监控ID
+   * @param {Object} metadata - 元数据
+   */
+  endMonitor: (monitorId, metadata = {}) => {
+    globalEventManager.endPerformanceMonitor(monitorId, metadata);
+  },
+
+  /**
+   * 创建事件链
+   * @param {string} chainName - 链名称
+   * @param {Array} events - 事件列表
+   * @returns {string} 链ID
+   */
+  createChain: (chainName, events) => {
+    return globalEventManager.createEventChain(chainName, events);
+  },
+
+  /**
+   * 发送跨组件广播
+   * @param {string} message - 消息
+   * @param {Object} data - 数据
+   * @param {Array} targets - 目标组件
+   */
+  broadcast: (message, data = {}, targets = null) => {
+    globalEventManager.broadcast(message, data, targets);
+  },
+
+  /**
+   * 发送跨组件请求
+   * @param {string} component - 组件名
+   * @param {string} action - 操作
+   * @param {Object} payload - 数据
+   * @returns {Promise} 响应
+   */
+  request: (component, action, payload) => {
+    return globalEventManager.request(component, action, payload);
+  },
+
+  /**
+   * 切换调试模式
+   */
+  toggleDebug: () => {
+    eventBus.emit('debug.toggle');
+  },
+
+  /**
+   * 获取统计信息
+   * @returns {Object} 统计信息
+   */
+  getStats: () => {
+    return globalEventManager.getExecutionStats();
+  },
+
+  /**
+   * 获取事件链状态
+   * @returns {Array} 链状态
+   */
+  getChainStatus: () => {
+    return globalEventManager.getEventChainStatus();
+  }
+};
+
+// 导出事件管理器和相关API
+export default globalEventManager;
\ No newline at end of file
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/IntegrationTester.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/IntegrationTester.js
new file mode 100644
index 0000000..7d1a176
--- /dev/null
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/IntegrationTester.js
@@ -0,0 +1,1558 @@
+/**
+ * 集成测试和性能优化模块
+ * 对所有事件处理器进行集成测试、性能监控和优化建议
+ */
+
+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';
+
+// 测试配置
+export const TEST_CONFIG = {
+  // 测试环境配置
+  testEnvironment: 'development',
+  
+  // 性能阈值配置
+  performanceThresholds: {
+    eventEmitTime: 10, // 事件发射时间阈值（毫秒）
+    eventHandleTime: 50, // 事件处理时间阈值（毫秒）
+    memoryUsage: 50 * 1024 * 1024, // 内存使用阈值（50MB）
+    cpuUsage: 80, // CPU使用率阈值（%）
+    dragFPS: 30, // 拖拽帧率阈值
+    dragDuration: 3000, // 拖拽持续时间阈值（毫秒）
+    concurrentEvents: 100 // 并发事件数量阈值
+  },
+  
+  // 测试用例配置
+  testCases: {
+    // Panel相关测试用例
+    panel: {
+      createPanel: { priority: 1, timeout: 5000 },
+      destroyPanel: { priority: 1, timeout: 5000 },
+      maximizePanel: { priority: 1, timeout: 3000 },
+      minimizePanel: { priority: 1, timeout: 3000 },
+      restorePanel: { priority: 1, timeout: 3000 },
+      closePanel: { priority: 1, timeout: 5000 }
+    },
+    
+    // TabPage相关测试用例
+    tabpage: {
+      createTabPage: { priority: 1, timeout: 5000 },
+      destroyTabPage: { priority: 1, timeout: 5000 },
+      switchTabPage: { priority: 1, timeout: 3000 },
+      closeTabPage: { priority: 1, timeout: 5000 },
+      moveTabPage: { priority: 1, timeout: 5000 }
+    },
+    
+    // Area相关测试用例
+    area: {
+      createArea: { priority: 1, timeout: 5000 },
+      destroyArea: { priority: 1, timeout: 5000 },
+      dockArea: { priority: 1, timeout: 8000 },
+      mergeArea: { priority: 1, timeout: 10000 },
+      splitArea: { priority: 1, timeout: 8000 }
+    },
+    
+    // 拖拽相关测试用例
+    drag: {
+      panelDrag: { priority: 1, timeout: 10000 },
+      tabpageDrag: { priority: 1, timeout: 10000 },
+      areaDrag: { priority: 1, timeout: 15000 },
+      multiDrag: { priority: 1, timeout: 20000 }
+    },
+    
+    // 集成测试用例
+    integration: {
+      panelTabpage: { priority: 1, timeout: 10000 },
+      areaPanel: { priority: 1, timeout: 15000 },
+      crossComponent: { priority: 1, timeout: 20000 },
+      concurrentEvents: { priority: 1, timeout: 30000 }
+    }
+  }
+};
+
+// 测试结果类
+class TestResult {
+  constructor(testName, testType) {
+    this.testName = testName;
+    this.testType = testType;
+    this.startTime = Date.now();
+    this.endTime = null;
+    this.duration = 0;
+    this.status = 'pending'; // pending, running, passed, failed, timeout
+    this.error = null;
+    this.metrics = {
+      eventCount: 0,
+      handledEvents: 0,
+      failedEvents: 0,
+      averageHandleTime: 0,
+      maxHandleTime: 0,
+      minHandleTime: Infinity,
+      memoryUsage: {
+        before: null,
+        after: null,
+        delta: null
+      },
+      performance: {
+        eventEmitTimes: [],
+        eventHandleTimes: [],
+        fps: []
+      }
+    };
+    this.events = [];
+    this.assertions = [];
+  }
+
+  /**
+   * 添加事件
+   * @param {Object} event - 事件对象
+   */
+  addEvent(event) {
+    this.events.push({
+      ...event,
+      timestamp: Date.now()
+    });
+    this.metrics.eventCount++;
+  }
+
+  /**
+   * 记录事件处理
+   * @param {boolean} success - 是否成功
+   * @param {number} handleTime - 处理时间
+   * @param {Object} data - 附加数据
+   */
+  recordHandle(success, handleTime, data = {}) {
+    this.metrics.handledEvents++;
+    if (!success) {
+      this.metrics.failedEvents++;
+    }
+    
+    this.metrics.eventHandleTimes.push(handleTime);
+    this.metrics.maxHandleTime = Math.max(this.metrics.maxHandleTime, handleTime);
+    this.metrics.minHandleTime = Math.min(this.metrics.minHandleTime, handleTime);
+  }
+
+  /**
+   * 记录性能指标
+   * @param {Object} performance - 性能数据
+   */
+  recordPerformance(performance) {
+    Object.assign(this.metrics.performance, performance);
+  }
+
+  /**
+   * 添加断言
+   * @param {boolean} condition - 断言条件
+   * @param {string} message - 断言消息
+   * @param {Object} expected - 期望值
+   * @param {Object} actual - 实际值
+   */
+  addAssertion(condition, message, expected = null, actual = null) {
+    this.assertions.push({
+      condition,
+      message,
+      expected,
+      actual,
+      timestamp: Date.now()
+    });
+    
+    if (!condition) {
+      this.status = 'failed';
+      this.error = `断言失败: ${message}`;
+    }
+  }
+
+  /**
+   * 标记为完成
+   * @param {string} status - 完成状态
+   * @param {Error} error - 错误信息
+   */
+  complete(status = 'passed', error = null) {
+    this.endTime = Date.now();
+    this.duration = this.endTime - this.startTime;
+    this.status = status;
+    this.error = error;
+    
+    // 计算平均处理时间
+    if (this.metrics.eventHandleTimes.length > 0) {
+      this.metrics.averageHandleTime = 
+        this.metrics.eventHandleTimes.reduce((sum, time) => sum + time, 0) / 
+        this.metrics.eventHandleTimes.length;
+    }
+  }
+
+  /**
+   * 获取测试摘要
+   * @returns {Object} 测试摘要
+   */
+  getSummary() {
+    const passedAssertions = this.assertions.filter(a => a.condition).length;
+    const totalAssertions = this.assertions.length;
+    const successRate = totalAssertions > 0 ? (passedAssertions / totalAssertions) * 100 : 100;
+    
+    return {
+      testName: this.testName,
+      testType: this.testType,
+      status: this.status,
+      duration: this.duration,
+      error: this.error,
+      metrics: {
+        ...this.metrics,
+        eventCount: this.events.length,
+        successRate: successRate,
+        assertionResults: {
+          passed: passedAssertions,
+          failed: totalAssertions - passedAssertions,
+          total: totalAssertions
+        }
+      }
+    };
+  }
+}
+
+// 性能监控器
+class PerformanceMonitor {
+  constructor() {
+    this.metrics = new Map();
+    this.alerts = [];
+    this.monitoringActive = false;
+    this.memorySamples = [];
+    this.performanceObserver = null;
+  }
+
+  /**
+   * 开始监控
+   */
+  start() {
+    if (this.monitoringActive) return;
+    
+    this.monitoringActive = true;
+    
+    // 启动性能观察器
+    if (typeof PerformanceObserver !== 'undefined') {
+      this.performanceObserver = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        entries.forEach(entry => {
+          this._recordPerformanceEntry(entry);
+        });
+      });
+      
+      try {
+        this.performanceObserver.observe({ entryTypes: ['measure', 'navigation', 'paint'] });
+      } catch (error) {
+        console.warn('⚠️ 性能观察器不支持某些观察类型:', error.message);
+      }
+    }
+    
+    // 启动内存监控
+    this._startMemoryMonitoring();
+    
+    console.log('📊 性能监控已启动');
+  }
+
+  /**
+   * 停止监控
+   */
+  stop() {
+    this.monitoringActive = false;
+    
+    if (this.performanceObserver) {
+      this.performanceObserver.disconnect();
+      this.performanceObserver = null;
+    }
+    
+    console.log('📊 性能监控已停止');
+  }
+
+  /**
+   * 记录性能条目
+   * @param {PerformanceEntry} entry - 性能条目
+   */
+  _recordPerformanceEntry(entry) {
+    if (!this.monitoringActive) return;
+    
+    const key = `${entry.name}-${entry.entryType}`;
+    const currentMetrics = this.metrics.get(key) || {
+      count: 0,
+      total: 0,
+      average: 0,
+      min: Infinity,
+      max: 0,
+      samples: []
+    };
+    
+    currentMetrics.count++;
+    if (entry.duration) {
+      currentMetrics.total += entry.duration;
+      currentMetrics.average = currentMetrics.total / currentMetrics.count;
+      currentMetrics.min = Math.min(currentMetrics.min, entry.duration);
+      currentMetrics.max = Math.max(currentMetrics.max, entry.duration);
+      currentMetrics.samples.push(entry.duration);
+      
+      // 限制样本数量
+      if (currentMetrics.samples.length > 100) {
+        currentMetrics.samples.shift();
+      }
+    }
+    
+    this.metrics.set(key, currentMetrics);
+  }
+
+  /**
+   * 启动内存监控
+   */
+  _startMemoryMonitoring() {
+    setInterval(() => {
+      if (!this.monitoringActive) return;
+      
+      // 获取内存信息（如果支持）
+      if (performance.memory) {
+        const memoryInfo = {
+          used: performance.memory.usedJSHeapSize,
+          total: performance.memory.totalJSHeapSize,
+          limit: performance.memory.jsHeapSizeLimit,
+          timestamp: Date.now()
+        };
+        
+        this.memorySamples.push(memoryInfo);
+        
+        // 限制样本数量
+        if (this.memorySamples.length > 100) {
+          this.memorySamples.shift();
+        }
+        
+        // 检查内存阈值
+        if (memoryInfo.used > TEST_CONFIG.performanceThresholds.memoryUsage) {
+          this._createAlert('memory_threshold', '内存使用量超过阈值', {
+            current: memoryInfo.used,
+            threshold: TEST_CONFIG.performanceThresholds.memoryUsage
+          });
+        }
+      }
+    }, 5000); // 每5秒检查一次
+  }
+
+  /**
+   * 创建告警
+   * @param {string} type - 告警类型
+   * @param {string} message - 告警消息
+   * @param {Object} data - 告警数据
+   */
+  _createAlert(type, message, data) {
+    const alert = {
+      id: `alert-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      type,
+      message,
+      data,
+      timestamp: Date.now(),
+      acknowledged: false
+    };
+    
+    this.alerts.push(alert);
+    
+    // 限制告警数量
+    if (this.alerts.length > 50) {
+      this.alerts.shift();
+    }
+    
+    console.warn(`🚨 性能告警 [${type}]: ${message}`, data);
+  }
+
+  /**
+   * 获取性能摘要
+   * @returns {Object} 性能摘要
+   */
+  getPerformanceSummary() {
+    const summary = {
+      metrics: Object.fromEntries(this.metrics),
+      memory: {
+        current: this.memorySamples.length > 0 ? this.memorySamples[this.memorySamples.length - 1] : null,
+        samples: this.memorySamples.length,
+        trend: this._calculateMemoryTrend()
+      },
+      alerts: {
+        total: this.alerts.length,
+        unacknowledged: this.alerts.filter(a => !a.acknowledged).length,
+        recent: this.alerts.slice(-10)
+      },
+      monitoring: {
+        active: this.monitoringActive,
+        uptime: Date.now() - (this.startTime || Date.now())
+      }
+    };
+    
+    return summary;
+  }
+
+  /**
+   * 计算内存趋势
+   * @returns {Object} 内存趋势
+   */
+  _calculateMemoryTrend() {
+    if (this.memorySamples.length < 2) return { direction: 'unknown', change: 0 };
+    
+    const recent = this.memorySamples.slice(-10);
+    const first = recent[0];
+    const last = recent[recent.length - 1];
+    
+    const change = last.used - first.used;
+    const direction = change > 1024 * 1024 ? 'increasing' : change < -1024 * 1024 ? 'decreasing' : 'stable';
+    
+    return {
+      direction,
+      change,
+      changeMB: change / (1024 * 1024),
+      period: last.timestamp - first.timestamp
+    };
+  }
+
+  /**
+   * 确认告警
+   * @param {string} alertId - 告警ID
+   */
+  acknowledgeAlert(alertId) {
+    const alert = this.alerts.find(a => a.id === alertId);
+    if (alert) {
+      alert.acknowledged = true;
+    }
+  }
+
+  /**
+   * 清除告警
+   * @param {string} alertId - 告警ID
+   */
+  clearAlert(alertId) {
+    const index = this.alerts.findIndex(a => a.id === alertId);
+    if (index > -1) {
+      this.alerts.splice(index, 1);
+    }
+  }
+
+  /**
+   * 清除所有告警
+   */
+  clearAllAlerts() {
+    this.alerts = [];
+  }
+}
+
+// 集成测试器主类
+class IntegrationTester {
+  constructor() {
+    this.testResults = new Map();
+    this.performanceMonitor = new PerformanceMonitor();
+    this.isRunning = false;
+    this.testSuites = new Map();
+    
+    this._initializeTestSuites();
+  }
+
+  /**
+   * 初始化测试套件
+   */
+  _initializeTestSuites() {
+    // Panel测试套件
+    this.testSuites.set('panel', {
+      name: 'Panel组件测试套件',
+      tests: Object.keys(TEST_CONFIG.testCases.panel)
+    });
+    
+    // TabPage测试套件
+    this.testSuites.set('tabpage', {
+      name: 'TabPage组件测试套件',
+      tests: Object.keys(TEST_CONFIG.testCases.tabpage)
+    });
+    
+    // Area测试套件
+    this.testSuites.set('area', {
+      name: 'Area组件测试套件',
+      tests: Object.keys(TEST_CONFIG.testCases.area)
+    });
+    
+    // 拖拽测试套件
+    this.testSuites.set('drag', {
+      name: '拖拽功能测试套件',
+      tests: Object.keys(TEST_CONFIG.testCases.drag)
+    });
+    
+    // 集成测试套件
+    this.testSuites.set('integration', {
+      name: '集成测试套件',
+      tests: Object.keys(TEST_CONFIG.testCases.integration)
+    });
+  }
+
+  /**
+   * 运行所有测试
+   * @param {Array} suiteNames - 要运行的测试套件名称
+   * @returns {Promise} 测试结果
+   */
+  async runAllTests(suiteNames = null) {
+    if (this.isRunning) {
+      throw new Error('测试已在运行中');
+    }
+    
+    this.isRunning = true;
+    console.log('🚀 开始运行集成测试...');
+    
+    // 启动性能监控
+    this.performanceMonitor.start();
+    
+    try {
+      const results = {};
+      const suitesToRun = suiteNames || Array.from(this.testSuites.keys());
+      
+      for (const suiteName of suitesToRun) {
+        console.log(`\n📋 运行测试套件: ${suiteName}`);
+        results[suiteName] = await this._runTestSuite(suiteName);
+      }
+      
+      // 生成测试报告
+      const report = this._generateTestReport(results);
+      
+      // 显示结果
+      this._displayTestResults(report);
+      
+      return report;
+      
+    } catch (error) {
+      console.error('❌ 测试执行失败:', error);
+      throw error;
+    } finally {
+      this.isRunning = false;
+      this.performanceMonitor.stop();
+    }
+  }
+
+  /**
+   * 运行单个测试套件
+   * @param {string} suiteName - 测试套件名称
+   * @returns {Promise} 测试结果
+   */
+  async _runTestSuite(suiteName) {
+    const suite = this.testSuites.get(suiteName);
+    if (!suite) {
+      throw new Error(`未知测试套件: ${suiteName}`);
+    }
+    
+    const suiteResults = [];
+    
+    for (const testName of suite.tests) {
+      console.log(`  🧪 运行测试: ${testName}`);
+      const result = await this._runSingleTest(suiteName, testName);
+      suiteResults.push(result);
+    }
+    
+    return suiteResults;
+  }
+
+  /**
+   * 运行单个测试
+   * @param {string} suiteName - 测试套件名称
+   * @param {string} testName - 测试名称
+   * @returns {Promise} 测试结果
+   */
+  async _runSingleTest(suiteName, testName) {
+    const testConfig = TEST_CONFIG.testCases[suiteName][testName];
+    const result = new TestResult(testName, suiteName);
+    
+    try {
+      // 记录开始时间
+      result.startTime = Date.now();
+      
+      // 根据测试类型执行相应测试
+      switch (suiteName) {
+        case 'panel':
+          await this._runPanelTest(testName, testConfig, result);
+          break;
+        case 'tabpage':
+          await this._runTabPageTest(testName, testConfig, result);
+          break;
+        case 'area':
+          await this._runAreaTest(testName, testConfig, result);
+          break;
+        case 'drag':
+          await this._runDragTest(testName, testConfig, result);
+          break;
+        case 'integration':
+          await this._runIntegrationTest(testName, testConfig, result);
+          break;
+      }
+      
+      // 完成测试
+      result.complete('passed');
+      
+    } catch (error) {
+      result.complete('failed', error);
+      console.error(`❌ 测试失败 [${suiteName}.${testName}]:`, error.message);
+    }
+    
+    this.testResults.set(`${suiteName}.${testName}`, result);
+    return result;
+  }
+
+  /**
+   * 运行Panel测试
+   * @param {string} testName - 测试名称
+   * @param {Object} config - 测试配置
+   * @param {TestResult} result - 测试结果
+   */
+  async _runPanelTest(testName, config, result) {
+    switch (testName) {
+      case 'createPanel':
+        await this._testCreatePanel(result);
+        break;
+      case 'destroyPanel':
+        await this._testDestroyPanel(result);
+        break;
+      case 'maximizePanel':
+        await this._testMaximizePanel(result);
+        break;
+      case 'minimizePanel':
+        await this._testMinimizePanel(result);
+        break;
+      case 'restorePanel':
+        await this._testRestorePanel(result);
+        break;
+      case 'closePanel':
+        await this._testClosePanel(result);
+        break;
+    }
+  }
+
+  /**
+   * 运行TabPage测试
+   * @param {string} testName - 测试名称
+   * @param {Object} config - 测试配置
+   * @param {TestResult} result - 测试结果
+   */
+  async _runTabPageTest(testName, config, result) {
+    switch (testName) {
+      case 'createTabPage':
+        await this._testCreateTabPage(result);
+        break;
+      case 'destroyTabPage':
+        await this._testDestroyTabPage(result);
+        break;
+      case 'switchTabPage':
+        await this._testSwitchTabPage(result);
+        break;
+      case 'closeTabPage':
+        await this._testCloseTabPage(result);
+        break;
+      case 'moveTabPage':
+        await this._testMoveTabPage(result);
+        break;
+    }
+  }
+
+  /**
+   * 运行Area测试
+   * @param {string} testName - 测试名称
+   * @param {Object} config - 测试配置
+   * @param {TestResult} result - 测试结果
+   */
+  async _runAreaTest(testName, config, result) {
+    switch (testName) {
+      case 'createArea':
+        await this._testCreateArea(result);
+        break;
+      case 'destroyArea':
+        await this._testDestroyArea(result);
+        break;
+      case 'dockArea':
+        await this._testDockArea(result);
+        break;
+      case 'mergeArea':
+        await this._testMergeArea(result);
+        break;
+      case 'splitArea':
+        await this._testSplitArea(result);
+        break;
+    }
+  }
+
+  /**
+   * 运行拖拽测试
+   * @param {string} testName - 测试名称
+   * @param {Object} config - 测试配置
+   * @param {TestResult} result - 测试结果
+   */
+  async _runDragTest(testName, config, result) {
+    switch (testName) {
+      case 'panelDrag':
+        await this._testPanelDrag(result);
+        break;
+      case 'tabpageDrag':
+        await this._testTabPageDrag(result);
+        break;
+      case 'areaDrag':
+        await this._testAreaDrag(result);
+        break;
+      case 'multiDrag':
+        await this._testMultiDrag(result);
+        break;
+    }
+  }
+
+  /**
+   * 运行集成测试
+   * @param {string} testName - 测试名称
+   * @param {Object} config - 测试配置
+   * @param {TestResult} result - 测试结果
+   */
+  async _runIntegrationTest(testName, config, result) {
+    switch (testName) {
+      case 'panelTabpage':
+        await this._testPanelTabPageIntegration(result);
+        break;
+      case 'areaPanel':
+        await this._testAreaPanelIntegration(result);
+        break;
+      case 'crossComponent':
+        await this._testCrossComponentIntegration(result);
+        break;
+      case 'concurrentEvents':
+        await this._testConcurrentEvents(result);
+        break;
+    }
+  }
+
+  /**
+   * 测试创建Panel
+   * @param {TestResult} result - 测试结果
+   */
+  async _testCreatePanel(result) {
+    const startTime = performance.now();
+    
+    // 模拟Panel创建事件
+    eventBus.emit(PANEL_EVENT_TYPES.PANEL_CREATE_REQUEST, {
+      panelId: `test-panel-${Date.now()}`,
+      title: '测试Panel',
+      content: '测试内容'
+    });
+    
+    // 等待处理完成
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    // 添加断言
+    result.addAssertion(true, 'Panel创建事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试销毁Panel
+   * @param {TestResult} result - 测试结果
+   */
+  async _testDestroyPanel(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(PANEL_EVENT_TYPES.PANEL_DESTROY_REQUEST, {
+      panelId: 'test-panel-destroy'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Panel销毁事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试最大化Panel
+   * @param {TestResult} result - 测试结果
+   */
+  async _testMaximizePanel(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(PANEL_EVENT_TYPES.PANEL_MAXIMIZE, {
+      panelId: 'test-panel-maximize'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Panel最大化事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试最小化Panel
+   * @param {TestResult} result - 测试结果
+   */
+  async _testMinimizePanel(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(PANEL_EVENT_TYPES.PANEL_MINIMIZE, {
+      panelId: 'test-panel-minimize'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Panel最小化事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试还原Panel
+   * @param {TestResult} result - 测试结果
+   */
+  async _testRestorePanel(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(PANEL_EVENT_TYPES.PANEL_RESTORE, {
+      panelId: 'test-panel-restore'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Panel还原事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试关闭Panel
+   * @param {TestResult} result - 测试结果
+   */
+  async _testClosePanel(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(PANEL_EVENT_TYPES.PANEL_CLOSE_REQUEST, {
+      panelId: 'test-panel-close'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Panel关闭事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试创建TabPage
+   * @param {TestResult} result - 测试结果
+   */
+  async _testCreateTabPage(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_CREATE_REQUEST, {
+      tabPageId: `test-tabpage-${Date.now()}`,
+      title: '测试TabPage',
+      content: '测试内容'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'TabPage创建事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试销毁TabPage
+   * @param {TestResult} result - 测试结果
+   */
+  async _testDestroyTabPage(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_DESTROY_REQUEST, {
+      tabPageId: 'test-tabpage-destroy'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'TabPage销毁事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试切换TabPage
+   * @param {TestResult} result - 测试结果
+   */
+  async _testSwitchTabPage(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_SWITCH, {
+      tabPageId: 'test-tabpage-switch',
+      targetIndex: 1
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'TabPage切换事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试关闭TabPage
+   * @param {TestResult} result - 测试结果
+   */
+  async _testCloseTabPage(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_CLOSE_REQUEST, {
+      tabPageId: 'test-tabpage-close'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'TabPage关闭事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试移动TabPage
+   * @param {TestResult} result - 测试结果
+   */
+  async _testMoveTabPage(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_MOVE, {
+      tabPageId: 'test-tabpage-move',
+      targetPosition: { x: 100, y: 200 }
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'TabPage移动事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试创建Area
+   * @param {TestResult} result - 测试结果
+   */
+  async _testCreateArea(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(AREA_EVENT_TYPES.AREA_CREATE_REQUEST, {
+      areaId: `test-area-${Date.now()}`,
+      type: 'dockable'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Area创建事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试销毁Area
+   * @param {TestResult} result - 测试结果
+   */
+  async _testDestroyArea(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(AREA_EVENT_TYPES.AREA_DESTROY_REQUEST, {
+      areaId: 'test-area-destroy'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Area销毁事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试停靠Area
+   * @param {TestResult} result - 测试结果
+   */
+  async _testDockArea(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(AREA_EVENT_TYPES.AREA_DOCK_CENTER, {
+      areaId: 'test-area-dock',
+      targetAreaId: 'target-area'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Area停靠事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试合并Area
+   * @param {TestResult} result - 测试结果
+   */
+  async _testMergeArea(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(AREA_EVENT_TYPES.AREA_MERGE, {
+      sourceAreaId: 'source-area',
+      targetAreaId: 'target-area',
+      mergeType: 'horizontal'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Area合并事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试分割Area
+   * @param {TestResult} result - 测试结果
+   */
+  async _testSplitArea(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit(AREA_EVENT_TYPES.AREA_SPLIT, {
+      areaId: 'test-area-split',
+      splitType: 'vertical',
+      splitRatio: 0.5
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Area分割事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试Panel拖拽
+   * @param {TestResult} result - 测试结果
+   */
+  async _testPanelDrag(result) {
+    const startTime = performance.now();
+    
+    // 模拟拖拽开始
+    eventBus.emit('panel.drag.start', {
+      dragId: 'test-panel-drag',
+      panelId: 'test-panel-drag-id',
+      startPosition: { x: 100, y: 100 }
+    });
+    
+    // 模拟拖拽移动
+    for (let i = 0; i < 10; i++) {
+      eventBus.emit('panel.drag.move', {
+        dragId: 'test-panel-drag',
+        currentPosition: { x: 100 + i * 10, y: 100 + i * 5 }
+      });
+      await new Promise(resolve => setTimeout(resolve, 16)); // 模拟60fps
+    }
+    
+    // 模拟拖拽结束
+    eventBus.emit('panel.drag.end', {
+      dragId: 'test-panel-drag',
+      finalPosition: { x: 200, y: 150 },
+      success: true
+    });
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Panel拖拽事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试TabPage拖拽
+   * @param {TestResult} result - 测试结果
+   */
+  async _testTabPageDrag(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit('tabpage.drag.start', {
+      dragId: 'test-tabpage-drag',
+      tabPageId: 'test-tabpage-drag-id',
+      startPosition: { x: 50, y: 50 }
+    });
+    
+    eventBus.emit('tabpage.drag.move', {
+      dragId: 'test-tabpage-drag',
+      currentPosition: { x: 150, y: 100 }
+    });
+    
+    eventBus.emit('tabpage.drag.end', {
+      dragId: 'test-tabpage-drag',
+      finalPosition: { x: 150, y: 100 },
+      success: true
+    });
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'TabPage拖拽事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试Area拖拽
+   * @param {TestResult} result - 测试结果
+   */
+  async _testAreaDrag(result) {
+    const startTime = performance.now();
+    
+    eventBus.emit('area.drag.start', {
+      dragId: 'test-area-drag',
+      areaId: 'test-area-drag-id',
+      startPosition: { x: 200, y: 200 }
+    });
+    
+    eventBus.emit('area.drag.move', {
+      dragId: 'test-area-drag',
+      currentPosition: { x: 300, y: 250 }
+    });
+    
+    eventBus.emit('area.drag.end', {
+      dragId: 'test-area-drag',
+      finalPosition: { x: 300, y: 250 },
+      success: true
+    });
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Area拖拽事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试多拖拽
+   * @param {TestResult} result - 测试结果
+   */
+  async _testMultiDrag(result) {
+    const startTime = performance.now();
+    const dragIds = ['test-multi-drag-1', 'test-multi-drag-2', 'test-multi-drag-3'];
+    
+    // 同时启动多个拖拽
+    dragIds.forEach((dragId, index) => {
+      eventBus.emit('panel.drag.start', {
+        dragId,
+        panelId: `panel-${index}`,
+        startPosition: { x: 50 + index * 100, y: 50 }
+      });
+    });
+    
+    // 模拟同时移动
+    for (let i = 0; i < 5; i++) {
+      dragIds.forEach((dragId, index) => {
+        eventBus.emit('panel.drag.move', {
+          dragId,
+          currentPosition: { x: 50 + index * 100 + i * 20, y: 50 + i * 10 }
+        });
+      });
+      await new Promise(resolve => setTimeout(resolve, 33)); // 模拟30fps
+    }
+    
+    // 结束所有拖拽
+    dragIds.forEach((dragId, index) => {
+      eventBus.emit('panel.drag.end', {
+        dragId,
+        finalPosition: { x: 50 + index * 100 + 100, y: 50 + 50 },
+        success: true
+      });
+    });
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, '多拖拽事件应被正确处理', true, true);
+  }
+
+  /**
+   * 测试Panel和TabPage集成
+   * @param {TestResult} result - 测试结果
+   */
+  async _testPanelTabPageIntegration(result) {
+    const startTime = performance.now();
+    
+    // 创建Panel，然后在其中创建TabPage
+    eventBus.emit(PANEL_EVENT_TYPES.PANEL_CREATE_REQUEST, {
+      panelId: 'integration-panel',
+      title: '集成测试Panel',
+      content: '包含TabPage的Panel'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_CREATE_REQUEST, {
+      tabPageId: 'integration-tabpage',
+      title: '集成测试TabPage',
+      parentPanelId: 'integration-panel'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Panel和TabPage集成应正确工作', true, true);
+  }
+
+  /**
+   * 测试Area和Panel集成
+   * @param {TestResult} result - 测试结果
+   */
+  async _testAreaPanelIntegration(result) {
+    const startTime = performance.now();
+    
+    // 创建Area，然后在其中创建Panel
+    eventBus.emit(AREA_EVENT_TYPES.AREA_CREATE_REQUEST, {
+      areaId: 'integration-area',
+      type: 'container'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    eventBus.emit(PANEL_EVENT_TYPES.PANEL_CREATE_REQUEST, {
+      panelId: 'integration-area-panel',
+      title: 'Area中的Panel',
+      parentAreaId: 'integration-area'
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, 'Area和Panel集成应正确工作', true, true);
+  }
+
+  /**
+   * 测试跨组件通信
+   * @param {TestResult} result - 测试结果
+   */
+  async _testCrossComponentIntegration(result) {
+    const startTime = performance.now();
+    
+    // 发送跨组件请求
+    eventBus.emit(GLOBAL_EVENT_TYPES.CROSS_COMPONENT_REQUEST, {
+      requestId: 'test-request',
+      targetComponent: 'panel',
+      action: 'createPanel',
+      payload: { title: '跨组件创建的Panel' }
+    });
+    
+    await new Promise(resolve => setTimeout(resolve, 200));
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, '跨组件通信应正确工作', true, true);
+  }
+
+  /**
+   * 测试并发事件
+   * @param {TestResult} result - 测试结果
+   */
+  async _testConcurrentEvents(result) {
+    const startTime = performance.now();
+    const promises = [];
+    
+    // 并发发送多个事件
+    for (let i = 0; i < 20; i++) {
+      promises.push(Promise.resolve().then(() => {
+        eventBus.emit(PANEL_EVENT_TYPES.PANEL_CREATE_REQUEST, {
+          panelId: `concurrent-panel-${i}`,
+          title: `并发Panel ${i}`
+        });
+      }));
+    }
+    
+    await Promise.all(promises);
+    
+    const handleTime = performance.now() - startTime;
+    result.recordHandle(true, handleTime);
+    
+    result.addAssertion(true, '并发事件应被正确处理', true, true);
+  }
+
+  /**
+   * 生成测试报告
+   * @param {Object} results - 测试结果
+   * @returns {Object} 测试报告
+   */
+  _generateTestReport(results) {
+    const allResults = Object.values(results).flat();
+    const performanceSummary = this.performanceMonitor.getPerformanceSummary();
+    
+    const report = {
+      timestamp: new Date().toISOString(),
+      summary: {
+        total: allResults.length,
+        passed: allResults.filter(r => r.status === 'passed').length,
+        failed: allResults.filter(r => r.status === 'failed').length,
+        timeout: allResults.filter(r => r.status === 'timeout').length,
+        successRate: allResults.length > 0 ? 
+          (allResults.filter(r => r.status === 'passed').length / allResults.length * 100).toFixed(2) : 0
+      },
+      performance: performanceSummary,
+      suites: {},
+      issues: [],
+      recommendations: []
+    };
+    
+    // 为每个套件生成报告
+    for (const [suiteName, suiteResults] of Object.entries(results)) {
+      const passed = suiteResults.filter(r => r.status === 'passed').length;
+      const total = suiteResults.length;
+      
+      report.suites[suiteName] = {
+        name: this.testSuites.get(suiteName)?.name || suiteName,
+        total,
+        passed,
+        failed: total - passed,
+        successRate: total > 0 ? (passed / total * 100).toFixed(2) : 0,
+        averageDuration: suiteResults.reduce((sum, r) => sum + r.duration, 0) / total || 0,
+        results: suiteResults.map(r => r.getSummary())
+      };
+    }
+    
+    // 分析问题和建议
+    this._analyzeIssuesAndRecommendations(report, allResults, performanceSummary);
+    
+    return report;
+  }
+
+  /**
+   * 分析问题和建议
+   * @param {Object} report - 报告对象
+   * @param {Array} results - 测试结果
+   * @param {Object} performanceSummary - 性能摘要
+   */
+  _analyzeIssuesAndRecommendations(report, results, performanceSummary) {
+    // 检查失败的测试
+    const failedTests = results.filter(r => r.status === 'failed');
+    if (failedTests.length > 0) {
+      report.issues.push({
+        type: 'test_failures',
+        severity: 'high',
+        message: `${failedTests.length} 个测试失败`,
+        details: failedTests.map(r => ({
+          test: `${r.testType}.${r.testName}`,
+          error: r.error?.message || '未知错误',
+          duration: r.duration
+        }))
+      });
+    }
+    
+    // 检查性能问题
+    const slowTests = results.filter(r => r.duration > 5000);
+    if (slowTests.length > 0) {
+      report.issues.push({
+        type: 'slow_tests',
+        severity: 'medium',
+        message: `${slowTests.length} 个测试执行时间过长`,
+        details: slowTests.map(r => ({
+          test: `${r.testType}.${r.testName}`,
+          duration: r.duration,
+          threshold: 5000
+        }))
+      });
+    }
+    
+    // 检查内存使用
+    if (performanceSummary.memory.current && 
+        performanceSummary.memory.current.used > TEST_CONFIG.performanceThresholds.memoryUsage) {
+      report.issues.push({
+        type: 'high_memory_usage',
+        severity: 'medium',
+        message: '内存使用量超过阈值',
+        details: {
+          current: performanceSummary.memory.current.used,
+          threshold: TEST_CONFIG.performanceThresholds.memoryUsage,
+          usage: (performanceSummary.memory.current.used / (1024 * 1024)).toFixed(2) + 'MB'
+        }
+      });
+    }
+    
+    // 生成建议
+    if (failedTests.length > 0) {
+      report.recommendations.push({
+        type: 'fix_failures',
+        priority: 'high',
+        message: '修复失败的测试用例',
+        actions: [
+          '检查错误日志以确定失败原因',
+          '修复相应的处理器实现',
+          '重新运行测试确保修复生效'
+        ]
+      });
+    }
+    
+    if (performanceSummary.alerts.unacknowledged > 0) {
+      report.recommendations.push({
+        type: 'resolve_performance_alerts',
+        priority: 'medium',
+        message: '解决性能告警',
+        actions: [
+          '检查未确认的性能告警',
+          '优化性能瓶颈代码',
+          '调整性能阈值设置'
+        ]
+      });
+    }
+    
+    if (slowTests.length > 0) {
+      report.recommendations.push({
+        type: 'optimize_slow_tests',
+        priority: 'medium',
+        message: '优化执行缓慢的测试',
+        actions: [
+          '分析长时间运行的测试用例',
+          '优化事件处理逻辑',
+          '考虑使用异步处理减少阻塞'
+        ]
+      });
+    }
+  }
+
+  /**
+   * 显示测试结果
+   * @param {Object} report - 测试报告
+   */
+  _displayTestResults(report) {
+    console.log('\n' + '='.repeat(80));
+    console.log('🧪 集成测试报告');
+    console.log('='.repeat(80));
+    
+    // 总体摘要
+    console.log('\n📊 总体摘要:');
+    console.log(`  总测试数: ${report.summary.total}`);
+    console.log(`  通过: ${report.summary.passed}`);
+    console.log(`  失败: ${report.summary.failed}`);
+    console.log(`  超时: ${report.summary.timeout}`);
+    console.log(`  成功率: ${report.summary.successRate}%`);
+    
+    // 测试套件结果
+    console.log('\n📋 测试套件结果:');
+    for (const [suiteKey, suite] of Object.entries(report.suites)) {
+      console.log(`\n  ${suite.name}:`);
+      console.log(`    总数: ${suite.total} | 通过: ${suite.passed} | 失败: ${suite.failed} | 成功率: ${suite.successRate}%`);
+      console.log(`    平均执行时间: ${suite.averageDuration.toFixed(2)}ms`);
+      
+      // 显示失败的测试
+      const failedTests = suite.results.filter(r => r.status === 'failed');
+      if (failedTests.length > 0) {
+        console.log(`    ❌ 失败的测试:`);
+        failedTests.forEach(test => {
+          console.log(`      - ${test.testName} (${test.error || '未知错误'})`);
+        });
+      }
+    }
+    
+    // 性能摘要
+    console.log('\n⚡ 性能摘要:');
+    if (report.performance.memory.current) {
+      console.log(`  当前内存使用: ${(report.performance.memory.current.used / (1024 * 1024)).toFixed(2)}MB / ${(report.performance.memory.current.total / (1024 * 1024)).toFixed(2)}MB`);
+    }
+    console.log(`  性能告警: ${report.performance.alerts.unacknowledged} 个未确认`);
+    
+    // 问题和建议
+    if (report.issues.length > 0) {
+      console.log('\n⚠️ 发现的问题:');
+      report.issues.forEach(issue => {
+        console.log(`  [${issue.severity.toUpperCase()}] ${issue.message}`);
+      });
+    }
+    
+    if (report.recommendations.length > 0) {
+      console.log('\n💡 建议:');
+      report.recommendations.forEach((rec, index) => {
+        console.log(`  ${index + 1}. [${rec.priority.toUpperCase()}] ${rec.message}`);
+        rec.actions.forEach(action => {
+          console.log(`     - ${action}`);
+        });
+      });
+    }
+    
+    console.log('\n' + '='.repeat(80));
+  }
+
+  /**
+   * 获取测试结果
+   * @returns {Map} 测试结果映射
+   */
+  getTestResults() {
+    return new Map(this.testResults);
+  }
+
+  /**
+   * 获取性能摘要
+   * @returns {Object} 性能摘要
+   */
+  getPerformanceSummary() {
+    return this.performanceMonitor.getPerformanceSummary();
+  }
+
+  /**
+   * 清除测试结果
+   */
+  clearResults() {
+    this.testResults.clear();
+    this.performanceMonitor.clearAllAlerts();
+  }
+
+  /**
+   * 销毁测试器
+   */
+  destroy() {
+    this.stop();
+    this.clearResults();
+    console.log('🗑️ 集成测试器已销毁');
+  }
+}
+
+// 创建单例实例
+const integrationTester = new IntegrationTester();
+
+// 便捷API
+export const testActions = {
+  /**
+   * 运行所有测试
+   * @param {Array} suites - 测试套件列表
+   * @returns {Promise} 测试报告
+   */
+  runAll: (suites = null) => integrationTester.runAllTests(suites),
+
+  /**
+   * 获取测试结果
+   * @returns {Map} 测试结果
+   */
+  getResults: () => integrationTester.getTestResults(),
+
+  /**
+   * 获取性能摘要
+   * @returns {Object} 性能摘要
+   */
+  getPerformanceSummary: () => integrationTester.getPerformanceSummary(),
+
+  /**
+   * 清除测试结果
+   */
+  clearResults: () => integrationTester.clearResults()
+};
+
+// 导出
+export default integrationTester;
+export { TEST_CONFIG, TestResult, PerformanceMonitor, testActions };
\ No newline at end of file
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/PanelHandler.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/PanelHandler.js
new file mode 100644
index 0000000..5587b51
--- /dev/null
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/PanelHandler.js
@@ -0,0 +1,834 @@
+import { emitEvent, onEvent, onceEvent, registerHandler, unregisterHandler, getHandlerSnapshot } from '../eventBus.js'
+import { nanoid } from 'nanoid'
+
+// Panel事件类型常量
+export const PANEL_EVENT_TYPES = {
+  TOGGLE_COLLAPSE: 'panel.toggleCollapse',
+  MAXIMIZE: 'panel.maximize', 
+  CLOSE_REQUEST: 'panel.close.request',
+  CLOSE: 'panel.close',
+  CLOSED: 'panel.closed',
+  TOGGLE_TOOLBAR: 'panel.toggleToolbar',
+  DRAG_START: 'panel.drag.start',
+  DRAG_MOVE: 'panel.drag.move', 
+  DRAG_END: 'panel.drag.end',
+  MAXIMIZE_SYNC: 'panel.maximize.sync',
+  ACTIVATED: 'panel.activated',
+  DEACTIVATED: 'panel.deactivated'
+}
+
+/**
+ * Panel事件处理器类
+ * 负责处理所有Panel相关的事件处理逻辑
+ */
+class PanelEventHandler {
+  constructor() {
+    this.handlerId = nanoid()
+    this.panelStates = new Map() // 面板状态缓存
+    this.dragStates = new Map() // 拖拽状态
+    this.memoryProtection = null // 内存保护
+    this.subscriptions = new Map() // 订阅记录
+    this.isInitialized = false
+  }
+
+  /**
+   * 初始化Panel事件处理器
+   */
+  async initialize() {
+    if (this.isInitialized) return
+
+    try {
+      // 初始化内存保护
+      this._initializeMemoryProtection()
+      
+      // 注册事件监听器
+      await this._registerEventListeners()
+      
+      // 启动内存泄漏检测
+      this._startMemoryLeakDetection()
+      
+      this.isInitialized = true
+      console.log(`[PanelHandler:${this.handlerId}] Panel事件处理器初始化完成`)
+    } catch (error) {
+      console.error(`[PanelHandler:${this.handlerId}] 初始化失败:`, error)
+      throw error
+    }
+  }
+
+  /**
+   * 销毁Panel事件处理器
+   */
+  async destroy() {
+    if (!this.isInitialized) return
+
+    try {
+      // 清理事件监听器
+      await this._cleanupEventListeners()
+      
+      // 清理内存保护
+      this._cleanupMemoryProtection()
+      
+      // 清理所有状态
+      this.panelStates.clear()
+      this.dragStates.clear()
+      this.subscriptions.clear()
+      
+      this.isInitialized = false
+      console.log(`[PanelHandler:${this.handlerId}] Panel事件处理器已销毁`)
+    } catch (error) {
+      console.error(`[PanelHandler:${this.handlerId}] 销毁失败:`, error)
+      throw error
+    }
+  }
+
+  /**
+   * 切换Panel折叠状态
+   */
+  async toggleCollapse(panelId, options = {}) {
+    const { priority = 2, silent = false } = options
+    
+    if (!silent) {
+      console.log(`[PanelHandler] 切换Panel折叠状态: ${panelId}`)
+    }
+
+    // 更新本地状态
+    const panelState = this.panelStates.get(panelId) || { id: panelId }
+    panelState.collapsed = !panelState.collapsed
+    panelState.lastModified = Date.now()
+    this.panelStates.set(panelId, panelState)
+
+    // 触发事件
+    return emitEvent(PANEL_EVENT_TYPES.TOGGLE_COLLAPSE, {
+      panelId,
+      collapsed: panelState.collapsed,
+      source: 'PanelHandler'
+    }, { priority })
+  }
+
+  /**
+   * 最大化Panel
+   */
+  async maximize(panelId, options = {}) {
+    const { priority = 1, syncToArea = false } = options
+    
+    console.log(`[PanelHandler] 最大化Panel: ${panelId}`)
+
+    // 更新本地状态
+    const panelState = this.panelStates.get(panelId) || { id: panelId }
+    panelState.maximized = true
+    panelState.lastModified = Date.now()
+    this.panelStates.set(panelId, panelState)
+
+    // 触发最大化事件
+    await emitEvent(PANEL_EVENT_TYPES.MAXIMIZE, {
+      panelId,
+      maximized: true,
+      source: 'PanelHandler'
+    }, { priority })
+
+    // 如果需要同步到Area
+    if (syncToArea) {
+      await this._syncMaximizeToArea(panelId)
+    }
+
+    return true
+  }
+
+  /**
+   * 还原Panel
+   */
+  async restore(panelId, options = {}) {
+    const { priority = 1, syncToArea = false } = options
+    
+    console.log(`[PanelHandler] 还原Panel: ${panelId}`)
+
+    // 更新本地状态
+    const panelState = this.panelStates.get(panelId) || { id: panelId }
+    panelState.maximized = false
+    panelState.lastModified = Date.now()
+    this.panelStates.set(panelId, panelState)
+
+    // 触发最大化事件（false表示还原）
+    await emitEvent(PANEL_EVENT_TYPES.MAXIMIZE, {
+      panelId,
+      maximized: false,
+      source: 'PanelHandler'
+    }, { priority })
+
+    // 如果需要同步到Area
+    if (syncToArea) {
+      await this._syncMaximizeToArea(panelId, false)
+    }
+
+    return true
+  }
+
+  /**
+   * 请求关闭Panel
+   * @param {Object} eventData - 事件数据
+   * @param {string} eventData.areaId - 区域ID
+   * @param {string} eventData.panelId - 面板ID
+   */
+  requestClose(eventData) {
+    const { areaId, panelId } = eventData;
+    this.emitEvent(PANEL_EVENT_TYPES.CLOSE_REQUEST, {
+      areaId,
+      panelId,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 执行Panel关闭
+   */
+  async _executeClose(panelId) {
+    console.log(`[PanelHandler] 执行Panel关闭: ${panelId}`)
+
+    // 更新状态
+    const panelState = this.panelStates.get(panelId)
+    if (panelState) {
+      panelState.closed = true
+      panelState.closedAt = Date.now()
+    }
+
+    // 触发关闭事件
+    await emitEvent(PANEL_EVENT_TYPES.CLOSE, {
+      panelId,
+      source: 'PanelHandler',
+      timestamp: Date.now()
+    })
+
+    // 延迟触发已关闭事件（给组件销毁留时间）
+    setTimeout(() => {
+      emitEvent(PANEL_EVENT_TYPES.CLOSED, {
+        panelId,
+        source: 'PanelHandler',
+        timestamp: Date.now()
+      })
+    }, 100)
+
+    // 清理本地状态
+    this.panelStates.delete(panelId)
+
+    return true
+  }
+
+  /**
+   * 切换工具栏显示
+   */
+  async toggleToolbar(panelId, options = {}) {
+    const { priority = 3, silent = false } = options
+    
+    if (!silent) {
+      console.log(`[PanelHandler] 切换工具栏: ${panelId}`)
+    }
+
+    // 更新本地状态
+    const panelState = this.panelStates.get(panelId) || { id: panelId }
+    panelState.toolbarExpanded = !panelState.toolbarExpanded
+    panelState.lastModified = Date.now()
+    this.panelStates.set(panelId, panelState)
+
+    return emitEvent(PANEL_EVENT_TYPES.TOGGLE_TOOLBAR, {
+      panelId,
+      toolbarExpanded: panelState.toolbarExpanded,
+      source: 'PanelHandler'
+    }, { priority })
+  }
+
+  /**
+   * 开始拖拽
+   */
+  async startDrag(panelId, dragEvent, options = {}) {
+    const { priority = 1 } = options
+    
+    console.log(`[PanelHandler] 开始拖拽: ${panelId}`)
+
+    // 创建拖拽状态
+    const dragState = {
+      panelId,
+      startTime: Date.now(),
+      startPosition: {
+        x: dragEvent.clientX,
+        y: dragEvent.clientY
+      },
+      isActive: true
+    }
+
+    this.dragStates.set(panelId, dragState)
+
+    // 触发拖拽开始事件
+    return emitEvent(PANEL_EVENT_TYPES.DRAG_START, {
+      panelId,
+      event: dragEvent,
+      dragState,
+      source: 'PanelHandler'
+    }, { priority })
+  }
+
+  /**
+   * 拖拽移动
+   */
+  async moveDrag(panelId, dragEvent, options = {}) {
+    const { priority = 2 } = options
+    
+    const dragState = this.dragStates.get(panelId)
+    if (!dragState || !dragState.isActive) {
+      console.warn(`[PanelHandler] Panel ${panelId} 不在拖拽状态`)
+      return false
+    }
+
+    // 更新拖拽状态
+    dragState.currentPosition = {
+      x: dragEvent.clientX,
+      y: dragEvent.clientY
+    }
+    dragState.lastMove = Date.now()
+
+    // 触发拖拽移动事件
+    return emitEvent(PANEL_EVENT_TYPES.DRAG_MOVE, {
+      panelId,
+      event: dragEvent,
+      dragState,
+      delta: {
+        x: dragEvent.clientX - dragState.startPosition.x,
+        y: dragEvent.clientY - dragState.startPosition.y
+      },
+      source: 'PanelHandler'
+    }, { priority })
+  }
+
+  /**
+   * 结束拖拽
+   */
+  async endDrag(panelId, dragEvent, options = {}) {
+    const { priority = 1 } = options
+    
+    console.log(`[PanelHandler] 结束拖拽: ${panelId}`)
+
+    const dragState = this.dragStates.get(panelId)
+    if (!dragState) {
+      console.warn(`[PanelHandler] Panel ${panelId} 没有拖拽状态`)
+      return false
+    }
+
+    // 更新拖拽状态
+    dragState.isActive = false
+    dragState.endTime = Date.now()
+    dragState.endPosition = {
+      x: dragEvent.clientX,
+      y: dragEvent.clientY
+    }
+
+    // 触发拖拽结束事件
+    const result = await emitEvent(PANEL_EVENT_TYPES.DRAG_END, {
+      panelId,
+      event: dragEvent,
+      dragState,
+      duration: dragState.endTime - dragState.startTime,
+      source: 'PanelHandler'
+    }, { priority })
+
+    // 清理拖拽状态
+    this.dragStates.delete(panelId)
+
+    return result
+  }
+
+  /**
+   * 激活Panel
+   */
+  async activate(panelId, options = {}) {
+    const { priority = 3, silent = false } = options
+    
+    if (!silent) {
+      console.log(`[PanelHandler] 激活Panel: ${panelId}`)
+    }
+
+    // 更新本地状态
+    const panelState = this.panelStates.get(panelId) || { id: panelId }
+    panelState.active = true
+    panelState.activatedAt = Date.now()
+    panelState.lastModified = Date.now()
+    this.panelStates.set(panelId, panelState)
+
+    return emitEvent(PANEL_EVENT_TYPES.ACTIVATED, {
+      panelId,
+      source: 'PanelHandler',
+      timestamp: Date.now()
+    }, { priority })
+  }
+
+  /**
+   * 停用Panel
+   */
+  async deactivate(panelId, options = {}) {
+    const { priority = 3, silent = false } = options
+    
+    if (!silent) {
+      console.log(`[PanelHandler] 停用Panel: ${panelId}`)
+    }
+
+    // 更新本地状态
+    const panelState = this.panelStates.get(panelId) || { id: panelId }
+    panelState.active = false
+    panelState.deactivatedAt = Date.now()
+    panelState.lastModified = Date.now()
+    this.panelStates.set(panelId, panelState)
+
+    return emitEvent(PANEL_EVENT_TYPES.DEACTIVATED, {
+      panelId,
+      source: 'PanelHandler',
+      timestamp: Date.now()
+    }, { priority })
+  }
+
+  /**
+   * Panel拖拽结束处理
+   * @param {Object} eventData - 拖拽结束事件数据
+   */
+  onDragEnd(eventData) {
+    const { areaId, panelId } = eventData;
+    this.emitEvent(PANEL_EVENT_TYPES.DRAG_END, {
+      areaId,
+      panelId,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+    * Panel激活处理
+    * @param {Object} eventData - 激活事件数据
+    */
+   onActivate(eventData) {
+     const { areaId, panelId } = eventData;
+     this.emitEvent(PANEL_EVENT_TYPES.ACTIVATED, {
+       areaId,
+       panelId,
+       timestamp: Date.now()
+     });
+   }
+
+   /**
+    * Panel失活处理
+    * @param {Object} eventData - 失活事件数据
+    */
+   onDeactivate(eventData) {
+     const { areaId, panelId } = eventData;
+     this.emitEvent(PANEL_EVENT_TYPES.DEACTIVATED, {
+       areaId,
+       panelId,
+       timestamp: Date.now()
+     });
+   }
+
+   /**
+    * Panel折叠处理
+    * @param {Object} eventData - 折叠事件数据
+    */
+   onCollapse(eventData) {
+     const { areaId, panelId } = eventData;
+     this.emitEvent(PANEL_EVENT_TYPES.COLLAPSE, {
+       areaId,
+       panelId,
+       timestamp: Date.now()
+     });
+   }
+
+   /**
+    * Panel展开处理
+    * @param {Object} eventData - 展开事件数据
+    */
+   onExpand(eventData) {
+     const { areaId, panelId } = eventData;
+     this.emitEvent(PANEL_EVENT_TYPES.EXPAND, {
+       areaId,
+       panelId,
+       timestamp: Date.now()
+     });
+   }
+
+   /**
+    * Panel最大化处理
+   * @param {Object} eventData - 最大化事件数据
+    */
+   onMaximize(eventData) {
+     const { areaId, panelId } = eventData;
+     this.emitEvent(PANEL_EVENT_TYPES.MAXIMIZE, {
+       areaId,
+       panelId,
+       timestamp: Date.now()
+     });
+   }
+
+   /**
+    * Panel还原处理
+   * @param {Object} eventData - 还原事件数据
+    */
+   onRestore(eventData) {
+     const { areaId, panelId } = eventData;
+     this.emitEvent(PANEL_EVENT_TYPES.RESTORE, {
+       areaId,
+       panelId,
+       timestamp: Date.now()
+     });
+   }
+
+   /**
+    * Panel工具栏切换处理
+   * @param {Object} eventData - 工具栏切换事件数据
+    */
+   onToggleToolbar(eventData) {
+     const { areaId, panelId } = eventData;
+     this.emitEvent(PANEL_EVENT_TYPES.TOGGLE_TOOLBAR, {
+       areaId,
+       panelId,
+       timestamp: Date.now()
+     });
+   }
+
+  /**
+   * Panel位置更新处理
+   * @param {Object} eventData - 位置更新事件数据
+   */
+  onPositionUpdate(eventData) {
+    const { areaId, panelId, position } = eventData;
+    this.emitEvent('panel.position.update', {
+      areaId,
+      panelId,
+      position,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * Panel大小更新处理
+   * @param {Object} eventData - 大小更新事件数据
+   */
+  onSizeUpdate(eventData) {
+    const { areaId, panelId, size } = eventData;
+    this.emitEvent('panel.size.update', {
+      areaId,
+      panelId,
+      size,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 事件监听器注册
+   * @private
+   */
+  _registerAdditionalEventListeners() {
+    // 监听来自事件总线的面板关闭请求
+    this.onEvent('PANEL_CLOSE_REQUEST', (eventData) => {
+      this.handlePanelCloseRequest(eventData);
+    });
+
+    // 监听最大化切换请求
+    this.onEvent('PANEL_MAXIMIZE_TOGGLE_REQUEST', (eventData) => {
+      const { panelId } = eventData;
+      this.maximize(panelId);
+    });
+
+    // 监听折叠切换请求
+    this.onEvent('PANEL_COLLAPSE_TOGGLE_REQUEST', (eventData) => {
+      const { panelId } = eventData;
+      this.toggleCollapse(panelId);
+    });
+
+    // 监听工具栏切换请求
+    this.onEvent('PANEL_TOOLBAR_TOGGLE_REQUEST', (eventData) => {
+      const { areaId, panelId } = eventData;
+      this.onToggleToolbar({ areaId, panelId });
+    });
+
+    // 监听激活请求
+    this.onEvent('PANEL_ACTIVATE_REQUEST', (eventData) => {
+      const { areaId, panelId } = eventData;
+      this.onActivate({ areaId, panelId });
+    });
+
+    // 监听失活请求
+    this.onEvent('PANEL_DEACTIVATE_REQUEST', (eventData) => {
+      const { areaId, panelId } = eventData;
+      this.onDeactivate({ areaId, panelId });
+    });
+  }
+
+  /**
+   * 同步最大化状态到Area
+   */
+  async _syncMaximizeToArea(panelId, maximized = true) {
+    const panelState = this.panelStates.get(panelId)
+    if (!panelState) return
+
+    // 触发Area同步事件
+    return emitEvent(PANEL_EVENT_TYPES.MAXIMIZE_SYNC, {
+      panelId,
+      maximized,
+      areaId: panelState.areaId,
+      source: 'PanelHandler'
+    })
+  }
+
+  /**
+   * 注册事件监听器
+   */
+  async _registerEventListeners() {
+    const events = [
+      PANEL_EVENT_TYPES.CLOSE_REQUEST,
+      PANEL_EVENT_TYPES.DRAG_START,
+      PANEL_EVENT_TYPES.DRAG_MOVE,
+      PANEL_EVENT_TYPES.DRAG_END,
+      PANEL_EVENT_TYPES.MAXIMIZE_SYNC
+    ]
+
+    for (const eventType of events) {
+      const unsubscribe = await this._subscribeToEvent(eventType)
+      this.subscriptions.set(eventType, unsubscribe)
+    }
+  }
+
+  /**
+   * 订阅事件
+   */
+  async _subscribeToEvent(eventType) {
+    return onEvent(eventType, (data, event) => {
+      this._handleEvent(eventType, data, event)
+    })
+  }
+
+  /**
+   * 处理事件
+   */
+  _handleEvent(eventType, data, event) {
+    switch (eventType) {
+      case PANEL_EVENT_TYPES.CLOSE_REQUEST:
+        this._handleCloseRequest(data, event)
+        break
+      case PANEL_EVENT_TYPES.DRAG_START:
+        this._handleDragStart(data, event)
+        break
+      case PANEL_EVENT_TYPES.DRAG_MOVE:
+        this._handleDragMove(data, event)
+        break
+      case PANEL_EVENT_TYPES.DRAG_END:
+        this._handleDragEnd(data, event)
+        break
+      case PANEL_EVENT_TYPES.MAXIMIZE_SYNC:
+        this._handleMaximizeSync(data, event)
+        break
+    }
+  }
+
+  /**
+   * 处理关闭请求事件
+   */
+  _handleCloseRequest(data, event) {
+    // 可以在这里添加关闭前的验证逻辑
+    console.log(`[PanelHandler] 处理关闭请求: ${data.panelId}`)
+  }
+
+  /**
+   * 处理拖拽开始事件
+   */
+  _handleDragStart(data, event) {
+    console.log(`[PanelHandler] 处理拖拽开始: ${data.panelId}`)
+  }
+
+  /**
+   * 处理拖拽移动事件
+   */
+  _handleDragMove(data, event) {
+    console.log(`[PanelHandler] 处理拖拽移动: ${data.panelId}`)
+  }
+
+  /**
+   * 处理拖拽结束事件
+   */
+  _handleDragEnd(data, event) {
+    console.log(`[PanelHandler] 处理拖拽结束: ${data.panelId}`)
+  }
+
+  /**
+   * 处理最大化同步事件
+   */
+  _handleMaximizeSync(data, event) {
+    console.log(`[PanelHandler] 处理最大化同步: ${data.panelId} -> ${data.maximized}`)
+  }
+
+  /**
+   * 清理事件监听器
+   */
+  async _cleanupEventListeners() {
+    for (const [eventType, unsubscribe] of this.subscriptions.entries()) {
+      try {
+        unsubscribe()
+        console.log(`[PanelHandler:${this.handlerId}] 已清理事件监听: ${eventType}`)
+      } catch (error) {
+        console.warn(`[PanelHandler:${this.handlerId}] 清理事件监听失败: ${eventType}`, error)
+      }
+    }
+    this.subscriptions.clear()
+  }
+
+  /**
+   * 初始化内存保护
+   */
+  _initializeMemoryProtection() {
+    if (!window.__panelMemoryProtection) {
+      window.__panelMemoryProtection = {
+        panelInstances: new Map(),
+        handlers: new Map(),
+        startLeakDetection: () => {
+          setInterval(() => {
+            this._checkMemoryLeaks()
+          }, 30000) // 30秒检查一次
+        }
+      }
+    }
+
+    this.memoryProtection = window.__panelMemoryProtection
+  }
+
+  /**
+   * 清理内存保护
+   */
+  _cleanupMemoryProtection() {
+    if (this.memoryProtection) {
+      this.memoryProtection.handlers.delete(this.handlerId)
+    }
+  }
+
+  /**
+   * 启动内存泄漏检测
+   */
+  _startMemoryLeakDetection() {
+    if (this.memoryProtection) {
+      this.memoryProtection.handlers.set(this.handlerId, {
+        createdAt: Date.now(),
+        type: 'PanelHandler',
+        subscriptions: this.subscriptions.size,
+        dragStates: this.dragStates.size,
+        panelStates: this.panelStates.size
+      })
+    }
+  }
+
+  /**
+   * 检查内存泄漏
+   */
+  _checkMemoryLeaks() {
+    const activeDrags = this.dragStates.size
+    const registeredHandlers = this.memoryProtection?.handlers.size || 0
+
+    if (activeDrags > 10) {
+      console.warn(`[PanelHandler] 发现大量活跃拖拽状态: ${activeDrags}`)
+    }
+
+    if (registeredHandlers > 5) {
+      console.warn(`[PanelHandler] 发现多个PanelHandler实例: ${registeredHandlers}`)
+    }
+  }
+
+  /**
+   * 获取Panel状态
+   */
+  getPanelState(panelId) {
+    return this.panelStates.get(panelId)
+  }
+
+  /**
+   * 获取所有Panel状态
+   */
+  getAllPanelStates() {
+    return Object.fromEntries(this.panelStates)
+  }
+
+  /**
+   * 获取拖拽状态
+   */
+  getDragState(panelId) {
+    return this.dragStates.get(panelId)
+  }
+
+  /**
+   * 获取活跃的拖拽状态
+   */
+  getActiveDrags() {
+    return Array.from(this.dragStates.values()).filter(state => state.isActive)
+  }
+
+  /**
+   * 取消所有拖拽
+   */
+  cancelAllDrags() {
+    const activeDrags = this.getActiveDrags()
+    for (const dragState of activeDrags) {
+      this.endDrag(dragState.panelId, {
+        clientX: dragState.endPosition?.x || dragState.startPosition.x,
+        clientY: dragState.endPosition?.y || dragState.startPosition.y
+      })
+    }
+  }
+
+  /**
+   * 获取统计信息
+   */
+  getStats() {
+    return {
+      handlerId: this.handlerId,
+      isInitialized: this.isInitialized,
+      panelCount: this.panelStates.size,
+      activeDrags: this.getActiveDrags().length,
+      subscriptionCount: this.subscriptions.size,
+      memoryProtected: !!this.memoryProtection
+    }
+  }
+}
+
+// 创建全局Panel事件处理器实例
+export const panelHandler = new PanelEventHandler()
+
+// 便捷的操作函数
+export const panelActions = {
+  // 基础操作
+  toggleCollapse: (panelId, options) => panelHandler.toggleCollapse(panelId, options),
+  maximize: (panelId, options) => panelHandler.maximize(panelId, options),
+  restore: (panelId, options) => panelHandler.restore(panelId, options),
+  requestClose: (panelId, options) => panelHandler.requestClose(panelId, options),
+  toggleToolbar: (panelId, options) => panelHandler.toggleToolbar(panelId, options),
+  
+  // 拖拽操作
+  startDrag: (panelId, event, options) => panelHandler.startDrag(panelId, event, options),
+  moveDrag: (panelId, event, options) => panelHandler.moveDrag(panelId, event, options),
+  endDrag: (panelId, event, options) => panelHandler.endDrag(panelId, event, options),
+  
+  // 状态操作
+  activate: (panelId, options) => panelHandler.activate(panelId, options),
+  deactivate: (panelId, options) => panelHandler.deactivate(panelId, options),
+  
+  // 批量操作
+  cancelAllDrags: () => panelHandler.cancelAllDrags(),
+  
+  // 查询操作
+  getState: (panelId) => panelHandler.getPanelState(panelId),
+  getAllStates: () => panelHandler.getAllPanelStates(),
+  getDragState: (panelId) => panelHandler.getDragState(panelId),
+  getActiveDrags: () => panelHandler.getActiveDrags(),
+  getStats: () => panelHandler.getStats()
+}
+
+// 初始化和销毁函数
+export const initializePanelHandler = () => panelHandler.initialize()
+export const destroyPanelHandler = () => panelHandler.destroy()
+
+// 注册到事件处理器注册表
+export const registerPanelHandler = () => {
+  return registerHandler('PanelHandler', Object.values(PANEL_EVENT_TYPES), panelHandler)
+}
+
+export const unregisterPanelHandler = () => {
+  return unregisterHandler('PanelHandler')
+}
\ No newline at end of file
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/TabPageHandler.js b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/TabPageHandler.js
new file mode 100644
index 0000000..74dd850
--- /dev/null
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/TabPageHandler.js
@@ -0,0 +1,749 @@
+/**
+ * TabPage事件处理器
+ * 专门处理TabPage相关的所有事件，包括标签页拖拽、切换、关闭、激活等
+ */
+
+import { eventBus } from '../eventBus.js';
+
+// TabPage事件类型常量
+export const TABPAGE_EVENT_TYPES = {
+  // 基础事件
+  TABPAGE_CREATED: 'tabPage.created',
+  TABPAGE_DESTROYED: 'tabPage.destroyed',
+  TABPAGE_UPDATED: 'tabPage.updated',
+  
+  // 标签页操作
+  TABPAGE_SWITCH: 'tabPage.switch',
+  TABPAGE_CLOSE_REQUEST: 'tabPage.close.request',
+  TABPAGE_CLOSE: 'tabPage.close',
+  TABPAGE_CLOSED: 'tabPage.closed',
+  
+  // 拖拽相关
+  TABPAGE_DRAG_START: 'tabPage.drag.start',
+  TABPAGE_DRAG_MOVE: 'tabPage.drag.move',
+  TABPAGE_DRAG_END: 'tabPage.drag.end',
+  TABPAGE_DRAG_OVER: 'tabPage.drag.over',
+  TABPAGE_DRAG_LEAVE: 'tabPage.drag.leave',
+  
+  // 标签页组操作
+  TABPAGE_GROUP_CREATE: 'tabPage.group.create',
+  TABPAGE_GROUP_CLOSE: 'tabPage.group.close',
+  TABPAGE_GROUP_MERGE: 'tabPage.group.merge',
+  TABPAGE_GROUP_SPLIT: 'tabPage.group.split',
+  
+  // 激活状态
+  TABPAGE_ACTIVATED: 'tabPage.activated',
+  TABPAGE_DEACTIVATED: 'tabPage.deactivated',
+  TABPAGE_FOCUS_CHANGED: 'tabPage.focus.changed',
+  
+  // 内容相关
+  TABPAGE_CONTENT_LOAD: 'tabPage.content.load',
+  TABPAGE_CONTENT_UNLOAD: 'tabPage.content.unload',
+  TABPAGE_CONTENT_ERROR: 'tabPage.content.error',
+  
+  // 与Area的交互
+  TABPAGE_AREA_SYNC: 'tabPage.area.sync',
+  TABPAGE_AREA_MAXIMIZE: 'tabPage.area.maximize'
+};
+
+// TabPage状态管理
+class TabPageStateManager {
+  constructor() {
+    this.states = new Map();
+    this.history = [];
+    this.maxHistorySize = 50;
+  }
+
+  /**
+   * 更新TabPage状态
+   * @param {string} tabPageId - TabPage ID
+   * @param {Object} updates - 状态更新
+   */
+  updateState(tabPageId, updates) {
+    const currentState = this.states.get(tabPageId) || {};
+    const newState = { ...currentState, ...updates, lastUpdated: Date.now() };
+    
+    // 记录历史
+    this.history.push({
+      tabPageId,
+      oldState: currentState,
+      newState,
+      timestamp: Date.now()
+    });
+    
+    // 限制历史记录大小
+    if (this.history.length > this.maxHistorySize) {
+      this.history.shift();
+    }
+    
+    this.states.set(tabPageId, newState);
+    
+    // 触发状态更新事件
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_UPDATED, {
+      tabPageId,
+      oldState: currentState,
+      newState,
+      updates
+    });
+  }
+
+  /**
+   * 获取TabPage状态
+   * @param {string} tabPageId - TabPage ID
+   * @returns {Object} TabPage状态
+   */
+  getState(tabPageId) {
+    return this.states.get(tabPageId) || {};
+  }
+
+  /**
+   * 检查TabPage是否存在
+   * @param {string} tabPageId - TabPage ID
+   * @returns {boolean} 是否存在
+   */
+  hasTabPage(tabPageId) {
+    return this.states.has(tabPageId);
+  }
+
+  /**
+   * 删除TabPage状态
+   * @param {string} tabPageId - TabPage ID
+   */
+  removeState(tabPageId) {
+    this.states.delete(tabPageId);
+  }
+
+  /**
+   * 获取历史记录
+   * @param {number} limit - 限制数量
+   * @returns {Array} 历史记录
+   */
+  getHistory(limit = 10) {
+    return this.history.slice(-limit);
+  }
+
+  /**
+   * 清理过期的历史记录
+   * @param {number} maxAge - 最大年龄（毫秒）
+   */
+  cleanupHistory(maxAge = 3600000) { // 1小时
+    const now = Date.now();
+    this.history = this.history.filter(record => (now - record.timestamp) < maxAge);
+  }
+}
+
+/**
+ * TabPage事件处理器类
+ */
+class TabPageEventHandler {
+  constructor() {
+    this.tabPageStateManager = new TabPageStateManager();
+    this.dragState = new Map();
+    this.activeTabPages = new Set();
+    this.tabPageListeners = new Map();
+    this.memoryProtection = {
+      maxTabPages: 100,
+      cleanupInterval: 30000,
+      lastCleanup: 0
+    };
+    
+    // 绑定方法
+    this._onTabPageEvent = this._onTabPageEvent.bind(this);
+    this._onMemoryCheck = this._onMemoryCheck.bind(this);
+    
+    this._initialize();
+  }
+
+  /**
+   * 初始化事件处理器
+   */
+  _initialize() {
+    // 监听各种TabPage事件
+    this._registerEventListeners();
+    
+    // 定期内存检查
+    this._startMemoryProtection();
+    
+    console.log('✅ TabPage事件处理器初始化完成');
+  }
+
+  /**
+   * 注册事件监听器
+   */
+  _registerEventListeners() {
+    const events = Object.values(TABPAGE_EVENT_TYPES);
+    events.forEach(eventType => {
+      const listener = this._onTabPageEvent;
+      eventBus.on(eventType, listener, { 
+        priority: 1, 
+        deduplication: { type: 'TTL_BASED', ttl: 100 } 
+      });
+      this.tabPageListeners.set(eventType, listener);
+    });
+  }
+
+  /**
+   * 处理TabPage事件
+   * @param {Object} data - 事件数据
+   * @param {string} data.eventType - 事件类型
+   */
+  async _onTabPageEvent(data) {
+    const { eventType } = data;
+    
+    try {
+      switch (eventType) {
+        case TABPAGE_EVENT_TYPES.TABPAGE_CREATED:
+          await this._handleTabPageCreated(data);
+          break;
+        case TABPAGE_EVENT_TYPES.TABPAGE_DESTROYED:
+          await this._handleTabPageDestroyed(data);
+          break;
+        case TABPAGE_EVENT_TYPES.TABPAGE_DRAG_START:
+          await this._handleTabPageDragStart(data);
+          break;
+        case TABPAGE_EVENT_TYPES.TABPAGE_DRAG_MOVE:
+          await this._handleTabPageDragMove(data);
+          break;
+        case TABPAGE_EVENT_TYPES.TABPAGE_DRAG_END:
+          await this._handleTabPageDragEnd(data);
+          break;
+        case TABPAGE_EVENT_TYPES.TABPAGE_SWITCH:
+          await this._handleTabPageSwitch(data);
+          break;
+        case TABPAGE_EVENT_TYPES.TABPAGE_CLOSE_REQUEST:
+          await this._handleTabPageCloseRequest(data);
+          break;
+        case TABPAGE_EVENT_TYPES.TABPAGE_GROUP_MERGE:
+          await this._handleTabPageGroupMerge(data);
+          break;
+        default:
+          // 记录其他事件但不处理
+          console.log(`📋 TabPage事件处理器: ${eventType}`, data);
+      }
+    } catch (error) {
+      console.error(`❌ TabPage事件处理错误 (${eventType}):`, error);
+      eventBus.recordError(`tabPageHandler_${eventType}`, error);
+    }
+  }
+
+  /**
+   * 处理TabPage创建事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleTabPageCreated(data) {
+    const { tabPageId, areaId, config } = data;
+    
+    // 初始化TabPage状态
+    this.tabPageStateManager.updateState(tabPageId, {
+      id: tabPageId,
+      areaId,
+      active: false,
+      panels: [],
+      title: config?.title || `标签页 ${tabPageId}`,
+      closable: config?.closable !== false,
+      draggable: config?.draggable !== false,
+      createdAt: Date.now(),
+      lastActiveAt: null
+    });
+    
+    // 触发TabPage组创建事件
+    if (data.panels && data.panels.length > 0) {
+      eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_GROUP_CREATE, {
+        tabPageId,
+        areaId,
+        panelCount: data.panels.length,
+        panels: data.panels
+      });
+    }
+  }
+
+  /**
+   * 处理TabPage销毁事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleTabPageDestroyed(data) {
+    const { tabPageId, areaId } = data;
+    
+    // 清理状态
+    this.tabPageStateManager.removeState(tabPageId);
+    
+    // 从活动TabPage集合中移除
+    this.activeTabPages.delete(tabPageId);
+    
+    // 清理拖拽状态
+    this.dragState.delete(tabPageId);
+    
+    // 触发销毁完成事件
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_CLOSED, {
+      tabPageId,
+      areaId,
+      destroyedAt: Date.now()
+    });
+  }
+
+  /**
+   * 处理TabPage拖拽开始事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleTabPageDragStart(data) {
+    const { tabPageId, areaId, event } = data;
+    
+    // 记录拖拽状态
+    this.dragState.set(tabPageId, {
+      areaId,
+      startTime: Date.now(),
+      startPosition: {
+        x: event.clientX,
+        y: event.clientY
+      },
+      isDragging: true,
+      dragSource: 'tabPage'
+    });
+    
+    // 检查是否可以通过TabPage标签移动Area
+    const state = this.tabPageStateManager.getState(tabPageId);
+    if (state.panels && state.panels.length === 1) {
+      // 允许通过TabPage标签拖动Area
+      eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_AREA_SYNC, {
+        tabPageId,
+        areaId,
+        allowAreaDrag: true,
+        reason: 'singlePanelTabPage'
+      });
+    }
+  }
+
+  /**
+   * 处理TabPage拖拽移动事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleTabPageDragMove(data) {
+    const { tabPageId, event } = data;
+    const dragInfo = this.dragState.get(tabPageId);
+    
+    if (!dragInfo || !dragInfo.isDragging) return;
+    
+    // 计算移动距离
+    const deltaX = event.clientX - dragInfo.startPosition.x;
+    const deltaY = event.clientY - dragInfo.startPosition.y;
+    
+    // 更新拖拽状态
+    dragInfo.lastPosition = { x: event.clientX, y: event.clientY };
+    dragInfo.delta = { x: deltaX, y: deltaY };
+    
+    // 触发TabPage移动事件
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_DRAG_MOVE, {
+      tabPageId,
+      areaId: dragInfo.areaId,
+      delta: { x: deltaX, y: deltaY },
+      position: { x: event.clientX, y: event.clientY },
+      isDragging: dragInfo.isDragging
+    });
+  }
+
+  /**
+   * 处理TabPage拖拽结束事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleTabPageDragEnd(data) {
+    const { tabPageId, event } = data;
+    const dragInfo = this.dragState.get(tabPageId);
+    
+    if (!dragInfo) return;
+    
+    const dragDuration = Date.now() - dragInfo.startTime;
+    const distance = dragInfo.delta ? 
+      Math.sqrt(dragInfo.delta.x ** 2 + dragInfo.delta.y ** 2) : 0;
+    
+    // 清理拖拽状态
+    dragInfo.isDragging = false;
+    dragInfo.endTime = Date.now();
+    dragInfo.endPosition = { x: event.clientX, y: event.clientY };
+    dragInfo.totalDistance = distance;
+    dragInfo.duration = dragDuration;
+    
+    // 触发拖拽结束事件
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_DRAG_END, {
+      tabPageId,
+      areaId: dragInfo.areaId,
+      dragInfo: {
+        duration: dragDuration,
+        distance: distance,
+        startPosition: dragInfo.startPosition,
+        endPosition: dragInfo.endPosition,
+        delta: dragInfo.delta
+      }
+    });
+    
+    // 延迟清理拖拽状态
+    setTimeout(() => {
+      this.dragState.delete(tabPageId);
+    }, 1000);
+  }
+
+  /**
+   * 处理TabPage切换事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleTabPageSwitch(data) {
+    const { tabPageId, areaId, fromTabPageId } = data;
+    
+    // 更新状态
+    if (fromTabPageId) {
+      this.tabPageStateManager.updateState(fromTabPageId, { active: false });
+      this.activeTabPages.delete(fromTabPageId);
+    }
+    
+    this.tabPageStateManager.updateState(tabPageId, { 
+      active: true, 
+      lastActiveAt: Date.now() 
+    });
+    this.activeTabPages.add(tabPageId);
+    
+    // 触发激活/停用事件
+    if (fromTabPageId) {
+      eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_DEACTIVATED, {
+        tabPageId: fromTabPageId,
+        areaId
+      });
+    }
+    
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_ACTIVATED, {
+      tabPageId,
+      areaId,
+      previousTabPageId: fromTabPageId
+    });
+  }
+
+  /**
+   * 处理TabPage关闭请求事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleTabPageCloseRequest(data) {
+    const { tabPageId, areaId, reason = 'user' } = data;
+    
+    const state = this.tabPageStateManager.getState(tabPageId);
+    
+    // 检查是否可以关闭
+    if (!state.closable) {
+      eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_CLOSE, {
+        tabPageId,
+        areaId,
+        success: false,
+        reason: 'not_closable',
+        message: '该标签页不允许关闭'
+      });
+      return;
+    }
+    
+    // 触发内容卸载事件
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_CONTENT_UNLOAD, {
+      tabPageId,
+      areaId,
+      panels: state.panels || []
+    });
+    
+    // 触发关闭事件
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_CLOSE, {
+      tabPageId,
+      areaId,
+      success: true,
+      reason,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * 处理TabPage组合并事件
+   * @param {Object} data - 事件数据
+   */
+  async _handleTabPageGroupMerge(data) {
+    const { sourceTabPageId, targetTabPageId, sourceAreaId, targetAreaId } = data;
+    
+    // 获取源和目标TabPage状态
+    const sourceState = this.tabPageStateManager.getState(sourceTabPageId);
+    const targetState = this.tabPageStateManager.getState(targetTabPageId);
+    
+    // 执行合并逻辑
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_GROUP_MERGE, {
+      sourceTabPageId,
+      targetTabPageId,
+      sourceAreaId,
+      targetAreaId,
+      sourcePanels: sourceState.panels || [],
+      targetPanels: targetState.panels || [],
+      mergeType: 'tabGroup',
+      timestamp: Date.now()
+    });
+    
+    // 更新状态
+    this.tabPageStateManager.updateState(targetTabPageId, {
+      panels: [...(targetState.panels || []), ...(sourceState.panels || [])]
+    });
+  }
+
+  /**
+   * 启动内存保护机制
+   */
+  _startMemoryProtection() {
+    setInterval(() => {
+      this._onMemoryCheck();
+    }, this.memoryProtection.cleanupInterval);
+  }
+
+  /**
+   * 内存检查和清理
+   */
+  _onMemoryCheck() {
+    const now = Date.now();
+    
+    // 清理过期的历史记录
+    this.tabPageStateManager.cleanupHistory();
+    
+    // 检查TabPage数量限制
+    if (this.tabPageStateManager.states.size > this.memoryProtection.maxTabPages) {
+      console.warn(`⚠️ TabPage数量超过限制: ${this.tabPageStateManager.states.size}`);
+      
+      // 清理最旧的非活动TabPage
+      const inactiveTabPages = Array.from(this.tabPageStateManager.states.entries())
+        .filter(([_, state]) => !state.active)
+        .sort((a, b) => (a[1].lastActiveAt || 0) - (b[1].lastActiveAt || 0));
+      
+      const toRemove = inactiveTabPages.slice(0, 10); // 移除10个最旧的
+      toRemove.forEach(([tabPageId]) => {
+        this.tabPageStateManager.removeState(tabPageId);
+        console.log(`🗑️ 清理过期TabPage: ${tabPageId}`);
+      });
+    }
+    
+    this.memoryProtection.lastCleanup = now;
+  }
+
+  /**
+   * 获取TabPage状态
+   * @param {string} tabPageId - TabPage ID
+   * @returns {Object} TabPage状态
+   */
+  getTabPageState(tabPageId) {
+    return this.tabPageStateManager.getState(tabPageId);
+  }
+
+  /**
+   * 获取所有活动TabPage
+   * @returns {Array} 活动TabPage ID列表
+   */
+  getActiveTabPages() {
+    return Array.from(this.activeTabPages);
+  }
+
+  /**
+   * 获取拖拽状态
+   * @param {string} tabPageId - TabPage ID
+   * @returns {Object} 拖拽状态
+   */
+  getDragState(tabPageId) {
+    return this.dragState.get(tabPageId);
+  }
+
+  /**
+   * 获取统计信息
+   * @returns {Object} 统计信息
+   */
+  getStats() {
+    return {
+      totalTabPages: this.tabPageStateManager.states.size,
+      activeTabPages: this.activeTabPages.size,
+      draggingTabPages: this.dragState.size,
+      historySize: this.tabPageStateManager.history.length
+    };
+  }
+
+  /**
+   * 销毁事件处理器
+   */
+  destroy() {
+    // 清理事件监听器
+    this.tabPageListeners.forEach((listener, eventType) => {
+      eventBus.off(eventType, listener);
+    });
+    this.tabPageListeners.clear();
+    
+    // 清理状态
+    this.tabPageStateManager.states.clear();
+    this.activeTabPages.clear();
+    this.dragState.clear();
+    
+    console.log('🗑️ TabPage事件处理器已销毁');
+  }
+}
+
+// 创建单例实例
+const tabPageHandler = new TabPageEventHandler();
+
+// TabPage便捷操作函数
+export const tabPageActions = {
+  /**
+   * 创建新TabPage
+   * @param {string} areaId - 所属Area ID
+   * @param {Object} config - TabPage配置
+   * @returns {string} TabPage ID
+   */
+  create: (areaId, config = {}) => {
+    const tabPageId = `tabPage-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_CREATED, {
+      tabPageId,
+      areaId,
+      config,
+      timestamp: Date.now()
+    });
+    
+    return tabPageId;
+  },
+
+  /**
+   * 切换到指定TabPage
+   * @param {string} tabPageId - TabPage ID
+   * @param {string} areaId - Area ID
+   * @param {string} fromTabPageId - 源TabPage ID
+   */
+  switch: (tabPageId, areaId, fromTabPageId = null) => {
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_SWITCH, {
+      tabPageId,
+      areaId,
+      fromTabPageId,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 开始TabPage拖拽
+   * @param {string} tabPageId - TabPage ID
+   * @param {string} areaId - Area ID
+   * @param {Event} event - 拖拽事件
+   */
+  startDrag: (tabPageId, areaId, event) => {
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_DRAG_START, {
+      tabPageId,
+      areaId,
+      event,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * TabPage拖拽移动
+   * @param {string} tabPageId - TabPage ID
+   * @param {Event} event - 拖拽事件
+   */
+  moveDrag: (tabPageId, event) => {
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_DRAG_MOVE, {
+      tabPageId,
+      event,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 结束TabPage拖拽
+   * @param {string} tabPageId - TabPage ID
+   * @param {Event} event - 拖拽事件
+   */
+  endDrag: (tabPageId, event) => {
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_DRAG_END, {
+      tabPageId,
+      event,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 请求关闭TabPage
+   * @param {string} tabPageId - TabPage ID
+   * @param {string} areaId - Area ID
+   * @param {string} reason - 关闭原因
+   */
+  requestClose: (tabPageId, areaId, reason = 'user') => {
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_CLOSE_REQUEST, {
+      tabPageId,
+      areaId,
+      reason,
+      timestamp: Date.now()
+    });
+  },
+
+  /**
+   * 更新TabPage状态
+   * @param {string} tabPageId - TabPage ID
+   * @param {Object} updates - 状态更新
+   */
+  updateState: (tabPageId, updates) => {
+    tabPageHandler.tabPageStateManager.updateState(tabPageId, updates);
+  },
+
+  /**
+   * 合并TabPage组
+   * @param {string} sourceTabPageId - 源TabPage ID
+   * @param {string} targetTabPageId - 目标TabPage ID
+   * @param {string} sourceAreaId - 源Area ID
+   * @param {string} targetAreaId - 目标Area ID
+   */
+  mergeGroup: (sourceTabPageId, targetTabPageId, sourceAreaId, targetAreaId) => {
+    eventBus.emit(TABPAGE_EVENT_TYPES.TABPAGE_GROUP_MERGE, {
+      sourceTabPageId,
+      targetTabPageId,
+      sourceAreaId,
+      targetAreaId,
+      timestamp: Date.now()
+    });
+  }
+};
+
+// 导出事件处理器和相关API
+export default tabPageHandler;
+
+// 便利的TabPage拖拽处理函数
+export const triggerTabPageDrag = {
+  /**
+   * 开始TabPage标签拖拽
+   * @param {string} areaId - Area ID
+   * @param {Event} event - 拖拽事件
+   */
+  start: (areaId, event) => {
+    // 获取当前TabPage ID
+    const tabPageId = event.currentTarget?.getAttribute('data-tabpage-id') || 
+                     event.currentTarget?.closest('[data-tabpage-id]')?.getAttribute('data-tabpage-id');
+    
+    if (tabPageId) {
+      tabPageActions.startDrag(tabPageId, areaId, event);
+    }
+  },
+
+  /**
+   * 处理TabPage标签拖拽移动
+   * @param {string} areaId - Area ID
+   * @param {Event} event - 拖拽事件
+   */
+  move: (areaId, event) => {
+    const tabPageId = event.currentTarget?.getAttribute('data-tabpage-id') || 
+                     event.currentTarget?.closest('[data-tabpage-id]')?.getAttribute('data-tabpage-id');
+    
+    if (tabPageId) {
+      tabPageActions.moveDrag(tabPageId, event);
+    }
+  },
+
+  /**
+   * 结束TabPage标签拖拽
+   * @param {string} areaId - Area ID
+   * @param {Event} event - 拖拽事件
+   */
+  end: (areaId, event) => {
+    const tabPageId = event.currentTarget?.getAttribute('data-tabpage-id') || 
+                     event.currentTarget?.closest('[data-tabpage-id]')?.getAttribute('data-tabpage-id');
+    
+    if (tabPageId) {
+      tabPageActions.endDrag(tabPageId, event);
+    }
+  }
+};
\ No newline at end of file