修复中心停靠

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

@@ -1,7 +1,7 @@
 <template>
   <div class="tab-page" :class="[`tab-page-${tabPosition}`]">
     <!-- 顶部标签栏 -->
-    <div v-if="tabPosition === 'top' && showTabs && panels && panels.length > 0" class="tab-header tab-header-horizontal">
+    <div v-if="tabPosition === 'top' && shouldShowTabs && panels && panels.length > 0" class="tab-header tab-header-horizontal">
       <div 
         v-for="(panel, index) in panels" 
         :key="panel.id"
@@ -29,7 +29,35 @@
     </div>
 
     <!-- 左侧标签栏 -->
-    <div v-if="tabPosition === 'left' && showTabs && panels && panels.length > 0" class="tab-header tab-header-vertical tab-header-left">
+    <div v-if="tabPosition === 'left' && shouldShowTabs && panels && panels.length > 0" class="tab-header tab-header-vertical tab-header-left">
+      <div 
+        v-for="(panel, index) in panels" 
+        :key="panel.id"
+        :class="['tab-item-vertical', { 'active': activeTabIndex === index }]"
+        @click="setActiveTab(index)"
+        @mousedown="onTabDragStart(index, $event)"
+      >
+        <div class="flex flex-col items-center justify-center w-full h-full py-2">
+          <span class="tab-title-vertical">{{ panel.title }}</span>
+          <!-- 当标签页未被激活时显示关闭按钮 -->
+          <button 
+            v-if="activeTabIndex !== index"
+            class="button-icon p-[2px] rounded hover:opacity-100 opacity-80 mt-1"
+            @click.stop="closeTab(panel.id)"
+            aria-label="关闭"
+          >
+            <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+              <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" />
+              <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div class="tab-placeholder"></div>
+    </div>
+
+    <!-- 右侧标签栏 -->
+    <div v-if="tabPosition === 'right' && shouldShowTabs && panels && panels.length > 0" class="tab-header tab-header-vertical tab-header-right">
       <div 
         v-for="(panel, index) in panels" 
         :key="panel.id"
@@ -83,9 +111,9 @@
             @maximize="(event) => { console.log('🔸 TabPage转发最大化事件:', event); $emit('maximize', event); }"
             @close="$emit('close', $event)"
             @toggle-toolbar="$emit('toggleToolbar', $event)"
-            @drag-start="$emit('dragStart', $event)"
-            @drag-move="$emit('dragMove', $event)"
-            @drag-end="$emit('dragEnd', $event)"
+            @dragStart="$emit('dragStart', $event)"
+            @dragMove="$emit('dragMove', $event)"
+            @dragEnd="$emit('dragEnd', $event)"
           />
         </div>
       </template>
@@ -95,36 +123,8 @@
       </div>
     </div>
 
-    <!-- 右侧标签栏 -->
-    <div v-if="tabPosition === 'right' && showTabs && panels && panels.length > 0" class="tab-header tab-header-vertical tab-header-right">
-      <div 
-        v-for="(panel, index) in panels" 
-        :key="panel.id"
-        :class="['tab-item-vertical', { 'active': activeTabIndex === index }]"
-        @click="setActiveTab(index)"
-        @mousedown="onTabDragStart(index, $event)"
-      >
-        <div class="flex flex-col items-center justify-center w-full h-full py-2">
-          <span class="tab-title-vertical">{{ panel.title }}</span>
-          <!-- 当标签页未被激活时显示关闭按钮 -->
-          <button 
-            v-if="activeTabIndex !== index"
-            class="button-icon p-[2px] rounded hover:opacity-100 opacity-80 mt-1"
-            @click.stop="closeTab(panel.id)"
-            aria-label="关闭"
-          >
-            <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
-              <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" />
-              <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div class="tab-placeholder"></div>
-    </div>
-
-    <!-- 底部标签栏 -->
-    <div v-if="tabPosition === 'bottom' && showTabs && panels && panels.length > 0" class="tab-header tab-header-horizontal tab-header-bottom">
+    <!-- 底部标签栏 - 移动到最后确保在底部显示 -->
+    <div v-if="tabPosition === 'bottom' && shouldShowTabs && panels && panels.length > 0" class="tab-header tab-header-horizontal tab-header-bottom">
       <div 
         v-for="(panel, index) in panels" 
         :key="panel.id"
@@ -154,7 +154,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, onMounted } from 'vue'
+import { defineProps, defineEmits, ref, onMounted, computed } from 'vue'
 import Panel from './Panel.vue'
 
 const props = defineProps({
@@ -187,6 +187,24 @@ const activeTabIndex = ref(-1)
 let isDragging = false
 let dragIndex = -1
 
+// 计算属性：控制标签栏的显示
+const shouldShowTabs = computed(() => {
+  // 暂时保持标签栏始终显示，确保用户能清楚看到TabPage结构
+  // 未来可以优化：当只有一个Panel且不是浮动窗口时隐藏标签栏
+  const result = props.showTabs && props.panels && props.panels.length > 0
+  
+  // 调试信息：输出TabPage的显示状态
+  console.log(`[TabPage ${props.id}] shouldShowTabs:`, {
+    showTabs: props.showTabs,
+    panelsLength: props.panels?.length || 0,
+    tabPosition: props.tabPosition,
+    shouldShow: result,
+    panels: props.panels
+  })
+  
+  return result
+})
+
 // 设置激活的标签页
 const setActiveTab = (index) => {
   if (index >= 0 && index < props.panels.length) {
@@ -344,10 +362,34 @@ const onTabDragEnd = () => {
 }
 
 /* 底部位置的特殊样式 */
+.tab-page-bottom {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
 .tab-page-bottom .tab-item {
   border-radius: 0 0 3px 3px;
 }
 
+/* Tab内容区域 - 占用剩余空间 */
+.tab-page-bottom .tab-content {
+  flex: 1;
+  overflow: auto;
+  min-height: 0; /* 重要：允许flex子项收缩 */
+}
+
+/* 底部标签栏 - 固定高度，始终在底部 */
+.tab-page-bottom .tab-header-bottom {
+  flex-shrink: 0;
+  height: 28px;
+  margin-top: auto;
+  border-top: none;
+  border-bottom: none;
+  padding-top: 0;
+  padding-bottom: 2px;
+}
+
 .tab-title {
   flex: 1;
   text-align: left;