From d0ce4380f5482b2b92c065eef5c03bb3be19d7a4 Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Tue, 4 Nov 2025 10:53:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=B7=BB=E5=8A=A0=E6=B5=AE?=
 =?UTF-8?q?=E5=8A=A8=E9=9D=A2=E6=9D=BF=E5=8A=9F=E8=83=BD=EF=BC=9A=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BAArea=E6=97=B6=E8=87=AA=E5=8A=A8=E6=B7=BB=E5=8A=A0Panel?=
 =?UTF-8?q?=E5=B9=B6=E5=A1=AB=E5=85=85=E6=BB=A1=E7=88=B6=E5=AE=B9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Windows/Robot/Web/src/DockLayout/Area.vue |  5 +-
 .../Robot/Web/src/DockLayout/DockLayout.vue   | 53 +++++++++++++++++--
 2 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
index 28a297b..77462f6 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/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; }
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
index 31196f6..cc8ef49 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
+++ b/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)