采用嵌套呈现方式处理

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="tab-page" :class="[`tab-page-${tabPosition}`]">
+  <div class="tab-page" :class="[`tab-page-${tabPosition}`]" style="width: 100%; height: 100%;">
     <!-- 顶部标签栏 -->
     <div v-if="tabPosition === 'top' && shouldShowTabs && panels && panels.length > 0" class="tab-header tab-header-horizontal">
       <div 
@@ -84,6 +84,7 @@
       <div class="tab-placeholder"></div>
     </div>
 
+
     <!-- Tab页内容区域 -->
     <div class="tab-content">
       <!-- 渲染当前激活的Panel内容 -->
@@ -293,18 +294,26 @@ const onTabDragEnd = () => {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-/* 顶部和底部位置：水平布局 */
-.tab-page-top,
-.tab-page-bottom {
+/* 顶部位置：标签栏 -> 工具栏 -> 内容区 */
+.tab-page-top {
   flex-direction: column;
 }
 
-/* 左侧和右侧位置：水平布局但标签栏垂直 */
-.tab-page-left,
-.tab-page-right {
+/* 底部位置：内容区 -> 工具栏 -> 标签栏 */
+.tab-page-bottom {
+  flex-direction: column-reverse;
+}
+
+/* 左侧位置：标签栏 -> 工具栏 -> 内容区（垂直排列） */
+.tab-page-left {
   flex-direction: row;
 }
 
+/* 右侧位置：标签栏 -> 工具栏 -> 内容区（垂直排列） */
+.tab-page-right {
+  flex-direction: row-reverse;
+}
+
 :root {
   --vs-blue-top: #4f72b3;
   --vs-blue-bottom: #3c5a99;