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

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

@@ -21,23 +21,31 @@
       @close="onCloseFloatingArea(area.id)"
       @update:position="onUpdatePosition(area.id, $event)"
     >
-      <!-- 每个Area内渲染其包含的Panels -->
+      <!-- 每个Area内渲染其包含的TabPages -->
-      <Panel
+      <TabPage
-        v-for="panel in area.panels"
+        v-for="tabPage in area.tabPages"
-        :key="panel.id"
+        :key="tabPage.id"
-        :id="panel.id"
+        :id="tabPage.id"
-        :title="panel.title"
+        :title="tabPage.title"
-        :collapsed="panel.collapsed"
+      >
-        :toolbarExpanded="panel.toolbarExpanded"
+        <!-- 在TabPage内渲染其包含的Panels -->
-        :maximized="panel.maximized"
+        <Panel
-        @toggleCollapse="onToggleCollapse"
+          v-for="panel in tabPage.panels"
-        @maximize="onMaximize"
+          :key="panel.id"
-        @close="onClosePanel(area.id, panel.id)"
+          :id="panel.id"
-        @toggleToolbar="onToggleToolbar"
+          :title="panel.title"
-        @dragStart="onPanelDragStart(area.id, $event)"
+          :collapsed="panel.collapsed"
-        @dragMove="onPanelDragMove(area.id, $event)"
+          :toolbarExpanded="panel.toolbarExpanded"
-        @dragEnd="onPanelDragEnd"
+          :maximized="panel.maximized"
-      />
+          @toggleCollapse="onToggleCollapse"
+          @maximize="onMaximize"
+          @close="onClosePanel(area.id, panel.id)"
+          @toggleToolbar="onToggleToolbar"
+          @dragStart="onPanelDragStart(area.id, $event)"
+          @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('最大化')