修改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,10 +100,18 @@ const addFloatingPanel = () => {
     height: 250,
     WindowState: '正常',
     showTitleBar: true,
-    // 添加一个Panel，填充满父容器
+    // 2. 向Area添加一个TabPage。TabPage的初始设置为填充满父容器
+    tabPages: [
+      {
+        id: `tabpage-${areaIdCounter - 1}-1`,
+        title: `标签页 1`,
+        // TabPage填充满父容器
+        width: 100,
+        height: 100,
+        // 3. 向TabPage添加一个Panel。Panel的初始设置为填充满父容器
         panels: [
           {
-          id: `panel-${areaIdCounter - 1}-1`,
+            id: `panel-${areaIdCounter - 1}-1-1`,
             title: `面板 1`,
             x: 0,
             y: 0,
@@ -114,6 +122,8 @@ const addFloatingPanel = () => {
           }
         ]
       }
+    ]
+  }
   floatingAreas.value.push(newArea)
 }