修改addFloatingPanel方法，实现三步流程：添加Area，在Area中添加TabPage，在TabPage中添加Panel

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

@@ -90,7 +90,7 @@ const addFloatingPanel = () => {
     y = Math.floor((containerRect.height - height) / 2)
   }
   
-  // 创建新的Area组件配置
+  // 1. 添加一个Area。使用Area的初始设置
   const newArea = {
     id: `floating-area-${areaIdCounter++}`,
     title: `浮动区域 ${areaIdCounter - 1}`,
@@ -100,19 +100,29 @@ const addFloatingPanel = () => {
     height: 250,
     WindowState: '正常',
     showTitleBar: true,
-    // 添加一个Panel，填充满父容器
+    // 2. 向Area添加一个TabPage。TabPage的初始设置为填充满父容器
-    panels: [
+    tabPages: [
-        {
+      {
-          id: `panel-${areaIdCounter - 1}-1`,
+        id: `tabpage-${areaIdCounter - 1}-1`,
-          title: `面板 1`,
+        title: `标签页 1`,
-          x: 0,
+        // TabPage填充满父容器
-          y: 0,
+        width: 100,
-          width: 100,
+        height: 100,
-          height: 100,
+        // 3. 向TabPage添加一个Panel。Panel的初始设置为填充满父容器
-          collapsed: false,
+        panels: [
-          toolbarExpanded: false
+          {
-        }
+            id: `panel-${areaIdCounter - 1}-1-1`,
-      ]
+            title: `面板 1`,
+            x: 0,
+            y: 0,
+            width: 100,
+            height: 100,
+            collapsed: false,
+            toolbarExpanded: false
+          }
+        ]
+      }
+    ]
   }
   floatingAreas.value.push(newArea)
 }