实现添加浮动面板功能：创建Area时自动添加Panel并填充满父容器

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

@@ -50,7 +50,8 @@
 
       <!-- 内容区域 -->
       <div class="vs-content">
-        <!-- 内容区域 -->
+        <!-- 这里是内容区域，使用slot接收子组件 -->
+        <slot></slot>
       </div>
     </div>
   </div>
@@ -316,7 +317,7 @@ onMounted(() => {
 .hdr-close:hover { opacity: 1; }
 
 /* 内容区域 */
-.vs-content { display: flex; flex: 1; overflow: hidden; }
+.vs-content { display: flex; flex: 1; overflow: visible; background-color: #ffffff; position: relative; }
 
 /* 左侧输出 */
 .vs-left { flex: 1; background: var(--vs-panel); display: flex; }

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

@@ -20,7 +20,25 @@
       }"
       @close="onCloseFloatingArea(area.id)"
       @update:position="onUpdatePosition(area.id, $event)"
-    />
+    >
+      <!-- 每个Area内渲染其包含的Panels -->
+      <Panel
+        v-for="panel in area.panels"
+        :key="panel.id"
+        :id="panel.id"
+        :title="panel.title"
+        :x="panel.x"
+        :y="panel.y"
+        :width="panel.width"
+        :height="panel.height"
+        :collapsed="panel.collapsed"
+        :toolbarExpanded="panel.toolbarExpanded"
+        @toggleCollapse="onToggleCollapse"
+        @maximize="onMaximize"
+        @close="onClosePanel(area.id, panel.id)"
+        @toggleToolbar="onToggleToolbar"
+      />
+    </Area>
     
     <!-- 主区域 -->
     <Area 
@@ -40,7 +58,7 @@ import Panel from './Panel.vue';
 // 主区域状态
 const windowState = ref('最大化')
 
-// 浮动区域列表
+// 浮动区域列表 - 每个area包含panels数组
 const floatingAreas = ref([])
 
 // 容器引用
@@ -73,7 +91,20 @@ const addFloatingPanel = () => {
     width: 300,
     height: 250,
     WindowState: '正常',
-    showTitleBar: true
+    showTitleBar: true,
+    // 添加一个Panel，填充满父容器
+    panels: [
+      {
+        id: `panel-${areaIdCounter - 1}-1`,
+        title: `面板 1`,
+        x: 0,
+        y: 0,
+        width: 300, // 与Area宽度相同
+        height: 250, // 与Area高度相同
+        collapsed: false,
+        toolbarExpanded: false
+      }
+    ]
   }
   floatingAreas.value.push(newArea)
 }
@@ -114,6 +145,22 @@ const onCloseFloatingArea = (id) => {
   }
 }
 
+// 关闭面板
+const onClosePanel = (areaId, panelId) => {
+  const area = floatingAreas.value.find(a => a.id === areaId)
+  if (area && area.panels) {
+    const panelIndex = area.panels.findIndex(p => p.id === panelId)
+    if (panelIndex !== -1) {
+      area.panels.splice(panelIndex, 1)
+      
+      // 如果区域内没有面板了，可以考虑关闭整个区域
+      if (area.panels.length === 0) {
+        onCloseFloatingArea(areaId)
+      }
+    }
+  }
+}
+
 // 切换工具栏
 const onToggleToolbar = (id) => {
   const area = floatingAreas.value.find(a => a.id === id)