修复运行异常

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

@@ -100,17 +100,23 @@
 
       <!-- 内容区域 -->
       <div class="vs-content">
-        <!-- 直接渲染插槽内容，Render组件会自动处理children -->
-        <slot></slot>
+        <!-- 使用Render组件渲染children配置 -->
+        <div v-for="child in Array.isArray(children) ? children : [children]" :key="child.id" style="width: 100%; height: 100%;">
+          <Render
+            :type="child.type"
+            :config="child"
+          />
+        </div>
       </div>
     </div>
 </template>
 
 <script setup>
-import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose, useSlots } from 'vue'
+import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
 import { emitEvent, EVENT_TYPES, globalEventListenerManager } from './eventBus'
 import TabPage from './TabPage.vue'
 import Panel from './Panel.vue'
+import Render from './Render.vue'
 import { zIndexManager, Z_INDEX_LAYERS } from './dockLayers'
 
 const props = defineProps({
@@ -127,7 +133,12 @@ const props = defineProps({
   // 位置属性，可选
   left: { type: Number, default: undefined },
   top: { type: Number, default: undefined },
-  draggable: { type: Boolean, default: true }
+  draggable: { type: Boolean, default: true },
+  // 子组件配置
+  children: {
+    type: [Array, Object],
+    default: () => []
+  }
 })
 
 // 使用全局事件总线和拖拽管理器
@@ -149,30 +160,32 @@ const maximizedFromPosition = ref(null)
 // 组件引用
 const areaRef = ref(null)
 
-// 获取插槽
-const slots = useSlots();
+// 不再需要获取插槽，改为使用props.children
 
 // 计算属性：是否显示标题栏
 const shouldShowTitleBar = computed(() => {
   // 基础条件：props.showTitleBar为true
   if (!props.showTitleBar) return false;
   
-  // 获取插槽内容
-  if (slots.default) {
-    const slotChildren = slots.default();
+  // 检查children配置
+  if (props.children) {
+    const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
     
-    // 如果没有插槽内容，显示标题栏
-    if (slotChildren.length === 0) return true;
+    // 如果没有children，显示标题栏
+    if (childrenArray.length === 0) return true;
     
-    // 如果插槽内容不是TabPage，显示标题栏
-    const firstChild = slotChildren[0];
-    if (firstChild.type.name !== 'TabPage') return true;
+    // 如果children不是TabPage，显示标题栏
+    const firstChild = childrenArray[0];
+    if (firstChild.type !== 'TabPage') return true;
     
-    // 获取TabPage的插槽内容
-    const tabPageSlots = firstChild.children?.default ? firstChild.children.default() : [];
+    // 检查TabPage的children
+    const tabPageChildren = firstChild.children;
+    if (!tabPageChildren) return true;
+    
+    const tabPageChildrenArray = Array.isArray(tabPageChildren) ? tabPageChildren : [tabPageChildren];
     
     // 如果TabPage包含多个Panel，显示标题栏
-    if (tabPageSlots.length !== 1) return true;
+    if (tabPageChildrenArray.length !== 1) return true;
     
     // 如果TabPage只包含一个Panel，不显示标题栏
     return false;
@@ -275,17 +288,24 @@ const onPanelMaximize = (panelId) => {
   // // console.log('🔸 Area接收最大化事件 - Panel ID:', panelId)
   
   // 检查内容区是否只有一个Panel
-  const slotChildren = slots.default ? slots.default() : []
   let isSinglePanel = false
   
-  // 查找TabPage组件
-  const tabPages = slotChildren.filter(child => child.type.name === 'TabPage')
-  
-  if (tabPages.length === 1) {
-    // 获取TabPage的插槽内容
-    const tabPageSlots = tabPages[0].children?.default ? tabPages[0].children.default() : []
-    // 如果TabPage只有一个Panel，认为是单Panel模式
-    isSinglePanel = tabPageSlots.length === 1
+  // 检查children配置
+  if (props.children) {
+    const childrenArray = Array.isArray(props.children) ? props.children : [props.children]
+    
+    // 查找TabPage组件
+    const tabPages = childrenArray.filter(child => child.type === 'TabPage')
+    
+    if (tabPages.length === 1) {
+      // 检查TabPage的children
+      const tabPageChildren = tabPages[0].children
+      if (tabPageChildren) {
+        const tabPageChildrenArray = Array.isArray(tabPageChildren) ? tabPageChildren : [tabPageChildren]
+        // 如果TabPage只有一个Panel，认为是单Panel模式
+        isSinglePanel = tabPageChildrenArray.length === 1
+      }
+    }
   }
   
   // // console.log('🔸 检查是否单Panel模式:', { tabPages: tabPages.length, isSinglePanel })