### 主要修复内容

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

AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dock-layout" ref="dockLayoutRef" style="display: flex; flex-direction: column; position: relative;">
+  <div class="dock-layout" ref="dockLayoutRef" style="display: flex; flex-direction: column; position: relative; width: 100%; height: 100%;">
     <!-- 停靠指示器组件 - 设置高z-index确保显示在最顶层 -->
     <DockIndicator
       :visible="showDockIndicator"
@@ -13,18 +13,14 @@
     <!-- 主区域 - 添加ref引用 -->
     <Area 
       ref="mainAreaRef"
-      :WindowState="windowState" 
+      :windowState="windowState" 
       :showTitleBar="false" 
-      title="主区域" 
-      :style="{ position: 'relative', width: '100%', height: '100%', zIndex: 1 }"
+      title="主区域"
       @dragover="handleMainAreaDragOver"
       @dragleave="handleMainAreaDragLeave"
       @area-merged="onAreaMerged"
     >
-
-      <!-- 主区域内容区 -->
       <div class="main-content-container" style="position: relative; width: 100%; height: 100%;">
-        <!-- ResizeBar组件渲染区 -->
         <ResizeBar
           v-for="resizeBar in mainAreaResizeBars"
           :key="resizeBar.id"
@@ -74,7 +70,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, defineEmits } from 'vue'
+import { ref, computed, onMounted, onUnmounted, defineEmits } from 'vue'
 import Area from './Area.vue';
 import Panel from './Panel.vue';
 import TabPage from './TabPage.vue';
@@ -291,6 +287,24 @@ const setupEventListeners = () => {
 // 清理函数
 const cleanup = () => {
   // 清理事件监听器和其他资源
+  console.log('🧹 开始清理DockLayout资源');
+  
+  // 清理浮动区域
+  floatingAreas.value = [];
+  
+  // 清理隐藏区域
+  hiddenAreas.value = [];
+  
+  // 清理主区域ResizeBar
+  mainAreaResizeBars.value = [];
+  
+  // 清理停靠指示器状态
+  showDockIndicator.value = false;
+  currentMousePosition.value = { x: 0, y: 0 };
+  targetAreaRect.value = { left: 0, top: 0, width: 0, height: 0 };
+  activeDockZone.value = null;
+  
+  console.log('✅ DockLayout资源清理完成');
 };
 
 // 轻量级隐藏区域管理
@@ -356,7 +370,17 @@ const addFloatingPanel = (panel) => {
   const safePanel = panel || {
     id: `panel-${Date.now()}`,
     title: '新建面板',
-    content: '默认内容'
+    content: {
+      color: '#435d9c',
+      title: '默认面板内容',
+      type: 'default',
+      timestamp: new Date().toLocaleString(),
+      data: [
+        { id: 1, label: '示例数据1', value: '123' },
+        { id: 2, label: '示例数据2', value: '456' },
+        { id: 3, label: '示例数据3', value: '789' }
+      ]
+    }
   };
   
   const newArea = {
@@ -366,11 +390,16 @@ const addFloatingPanel = (panel) => {
     width: 300,
     height: 200,
     zIndex: zIndexManager.getFloatingAreaZIndex(`area-${Date.now()}`),
-    tabPages: [{
-      id: `tabpage-${Date.now()}`,
-      title: safePanel.title || '新建面板',
-      panels: [safePanel]
-    }]
+    // 使用children结构以兼容Render组件的渲染逻辑
+    children: {
+      type: 'TabPage',
+      children: [{
+        ...safePanel,
+        id: `panel-${Date.now()}`,
+        title: safePanel.title || '新建面板',
+        type: 'Panel'
+      }]
+    }
   }
   floatingAreas.value.push(newArea)
   return newArea.id
@@ -382,7 +411,7 @@ const findOrCreateMainAreaTabPage = () => {
   return {
     id: 'main-area-tabpage',
     title: '主区域',
-    panels: []
+    items: []
   };
 }
 
@@ -392,6 +421,13 @@ onMounted(() => {
   console.log('DockLayout component mounted');
 })
 
+// 组件卸载时清理资源
+onUnmounted(() => {
+  // 清理事件监听器和其他资源
+  console.log('DockLayout component unmounted');
+  cleanup();
+})
+
 // 暴露轻量级接口给父组件
 defineExpose({
   // 基础数据