修改DockLayout.vue：将浮动区域列表移动到主区域的内容区内显示

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

@@ -1,61 +1,61 @@
 <template>
   <div class="dock-layout" ref="dockLayoutRef">
-    <!-- 浮动区域列表 -->
-    <Area
-      v-for="area in floatingAreas"
-      :key="area.id"
-      :id="area.id"
-      :title="area.title"
-      v-model:WindowState="area.WindowState"
-      :showTitleBar="true"
-      :width="area.width"
-      :height="area.height"
-      :left="area.WindowState !== '最大化' ? area.x : undefined"
-      :top="area.WindowState !== '最大化' ? area.y : undefined"
-      :style="area.WindowState !== '最大化' ? {
-        position: 'absolute',
-        zIndex: 10
-      } : {
-        zIndex: 100
-      }"
-      @close="onCloseFloatingArea(area.id)"
-      @update:position="onUpdatePosition(area.id, $event)"
-    >
-      <!-- 每个Area内渲染其包含的TabPages -->
-      <TabPage
-        v-for="tabPage in area.tabPages"
-        :key="tabPage.id"
-        :id="tabPage.id"
-        :title="tabPage.title"
-        :panels="tabPage.panels"
-      >
-        <!-- 在TabPage内渲染其包含的Panels -->
-        <Panel
-          v-for="panel in tabPage.panels"
-          :key="panel.id"
-          :id="panel.id"
-          :title="panel.title"
-          :collapsed="panel.collapsed"
-          :toolbarExpanded="panel.toolbarExpanded"
-          :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>
-    
     <!-- 主区域 -->
     <Area 
       :WindowState="windowState" 
       :showTitleBar="false" 
       title="主区域" 
       :style="{ position: 'relative', zIndex: 1 }"
-    />
+    >
+      <!-- 浮动区域列表 -->
+      <Area
+        v-for="area in floatingAreas"
+        :key="area.id"
+        :id="area.id"
+        :title="area.title"
+        v-model:WindowState="area.WindowState"
+        :showTitleBar="true"
+        :width="area.width"
+        :height="area.height"
+        :left="area.WindowState !== '最大化' ? area.x : undefined"
+        :top="area.WindowState !== '最大化' ? area.y : undefined"
+        :style="area.WindowState !== '最大化' ? {
+          position: 'absolute',
+          zIndex: 10
+        } : {
+          zIndex: 100
+        }"
+        @close="onCloseFloatingArea(area.id)"
+        @update:position="onUpdatePosition(area.id, $event)"
+      >
+        <!-- 每个Area内渲染其包含的TabPages -->
+        <TabPage
+          v-for="tabPage in area.tabPages"
+          :key="tabPage.id"
+          :id="tabPage.id"
+          :title="tabPage.title"
+          :panels="tabPage.panels"
+        >
+          <!-- 在TabPage内渲染其包含的Panels -->
+          <Panel
+            v-for="panel in tabPage.panels"
+            :key="panel.id"
+            :id="panel.id"
+            :title="panel.title"
+            :collapsed="panel.collapsed"
+            :toolbarExpanded="panel.toolbarExpanded"
+            :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>
+    </Area>
   </div>
 </template>