实现面板切换

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

@@ -87,16 +87,16 @@
 
     <!-- Tab页内容区域 -->
     <div class="tab-content">
-      <!-- 使用Render组件渲染children配置 -->
+      <!-- 使用Render组件渲染当前激活的子组件 -->
-      <div v-for="child in Array.isArray(children) ? children : [children]" :key="child.id" style="width: 100%; height: 100%;">
       <Render
-          :type="child.type"
+        v-if="activeChild"
-          :config="child"
+        :type="activeChild.type"
+        :config="activeChild"
+        style="width: 100%; height: 100%;"
       />
-      </div>
       
       <!-- 空状态提示 -->
-      <div v-if="!children || (Array.isArray(children) && children.length === 0)" class="tab-empty">
+      <div v-if="!activeChild && (!children || (Array.isArray(children) && children.length === 0))" class="tab-empty">
         <span>没有可显示的内容</span>
       </div>
     </div>
@@ -182,6 +182,13 @@ const shouldShowTabs = computed(() => {
   return props.showTabs && childrenCount > 1
 })
 
+// 计算属性：获取当前激活的子组件
+const activeChild = computed(() => {
+  if (!props.children || activeTabIndex.value < 0) return null
+  const childrenArray = Array.isArray(props.children) ? props.children : [props.children]
+  return childrenArray[activeTabIndex.value]
+})
+
 // 设置激活的标签页
 const setActiveTab = (index) => {
   if (!props.children) return