From 4927bf5491e3919389e34b78e14eb70d24d48f5f Mon Sep 17 00:00:00 2001
From: AutoRobot Dev <autobot@example.local>
Date: Sun, 2 Nov 2025 17:12:40 +0700
Subject: [PATCH] =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E6=8F=90=E4=BA=A4=EF=BC=9A?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=90=91DockLayout=E5=8F=91=E9=80=81?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B5=AE=E5=8A=A8=E5=8C=BA=E5=91=BD=E4=BB=A4?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Robot/Web/src/DockLayout/DockLayout.vue   |  7 ++++-
 .../Robot/Web/src/views/DockLayoutTest.vue    | 28 ++++++-------------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
index 82868bd..4e80602 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, defineExpose } from 'vue'
 import Area from './Area.vue';
 import Panel from './Panel.vue';
 
@@ -68,6 +68,11 @@ const onToggleToolbar = (id) => {
     area.toolbarExpanded = !area.toolbarExpanded
   }
 }
+
+// 暴露方法给父组件
+defineExpose({
+  addFloatingArea
+})
 </script>
 
 <style scoped>
diff --git a/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue b/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
index 8c840fe..b1e59d0 100644
--- a/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
+++ b/AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
@@ -44,7 +44,7 @@
 
     <!-- 预留主区域（暂不放面板） -->
     <div ref="panelHost" class="flex-1 w-full h-[calc(100%-4rem)] relative bg-gray-100">
-      <DockLayout />
+      <DockLayout ref="dockLayoutRef" />
     </div>
   </div>
 </template>
@@ -56,6 +56,7 @@ import DockLayout from '../DockLayout/DockLayout.vue';
 // 顶部控制栏按钮的引用
 const layoutFileInput = ref(null);
 const panelHost = ref(null);
+const dockLayoutRef = ref(null);
 
 // 浮动面板列表
 const floatingPanels = ref([]);
@@ -68,24 +69,13 @@ function addPanel(position) {
 
 function addFloatingPanel() {
   console.log('[DockLayoutTest] addFloatingPanel called');
-  // 复原截图样式的默认面板参数
-  const defaultSize = { width: 300, height: 180 };
-  const offset = 16;
-  const idx = nextPanelIdx.value++;
-  const panel = {
-    id: 'float-' + idx,
-    title: '输出',
-    x: offset * idx,
-    y: offset * idx,
-    width: defaultSize.width,
-    height: defaultSize.height,
-    collapsed: false,
-    toolbarExpanded: false,
-    maximized: false,
-  };
-  console.log('[DockLayoutTest] Adding panel:', panel);
-  floatingPanels.value.push(panel);
-  console.log('[DockLayoutTest] Panels after add:', floatingPanels.value.length);
+  // 向DockLayout组件发送添加浮动区命令
+  if (dockLayoutRef.value && dockLayoutRef.value.addFloatingArea) {
+    console.log('[DockLayoutTest] 调用DockLayout的addFloatingArea方法');
+    dockLayoutRef.value.addFloatingArea();
+  } else {
+    console.warn('[DockLayoutTest] DockLayout引用未初始化或addFloatingArea方法不可用');
+  }
 }
 
 function closePanel(id) {