本地提交：实现向DockLayout发送添加浮动区命令功能

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>

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');
-  // 复原截图样式的默认面板参数
+  // 向DockLayout组件发送添加浮动区命令
-  const defaultSize = { width: 300, height: 180 };
+  if (dockLayoutRef.value && dockLayoutRef.value.addFloatingArea) {
-  const offset = 16;
+    console.log('[DockLayoutTest] 调用DockLayout的addFloatingArea方法');
-  const idx = nextPanelIdx.value++;
+    dockLayoutRef.value.addFloatingArea();
-  const panel = {
+  } else {
-    id: 'float-' + idx,
+    console.warn('[DockLayoutTest] DockLayout引用未初始化或addFloatingArea方法不可用');
-    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);
 }
 
 function closePanel(id) {