更新DockLayout.vue，添加TabPage组件导入和嵌套渲染结构，确保TabPage能正确显示

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

@@ -21,9 +21,16 @@
       @close="onCloseFloatingArea(area.id)"
       @update:position="onUpdatePosition(area.id, $event)"
     >
-      <!-- 每个Area内渲染其包含的Panels -->
+      <!-- 每个Area内渲染其包含的TabPages -->
+      <TabPage
+        v-for="tabPage in area.tabPages"
+        :key="tabPage.id"
+        :id="tabPage.id"
+        :title="tabPage.title"
+      >
+        <!-- 在TabPage内渲染其包含的Panels -->
         <Panel
-        v-for="panel in area.panels"
+          v-for="panel in tabPage.panels"
           :key="panel.id"
           :id="panel.id"
           :title="panel.title"
@@ -38,6 +45,7 @@
           @dragMove="onPanelDragMove(area.id, $event)"
           @dragEnd="onPanelDragEnd"
         />
+      </TabPage>
     </Area>
     
     <!-- 主区域 -->
@@ -54,6 +62,7 @@
 import { ref, defineExpose, nextTick, watch } from 'vue'
 import Area from './Area.vue';
 import Panel from './Panel.vue';
+import TabPage from './TabPage.vue';
 
 // 主区域状态
 const windowState = ref('最大化')