中心区依靠多个TabPanel

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

@@ -125,6 +125,7 @@
               :collapsed="panel.collapsed"
               :toolbarExpanded="panel.toolbarExpanded"
               :maximized="panel.maximized"
+              :content="panel.content"
               @toggleCollapse="() => {}"
               @maximize="onPanelMaximize"
               @close="() => {}"
@@ -262,7 +263,7 @@ const areaStyle = computed(() => {
   return style
 })
 
-const emit = defineEmits(['close', 'update:WindowState', 'update:position', 'dragover', 'dragleave', 'areaDragStart', 'areaDragMove', 'areaDragEnd'])
+const emit = defineEmits(['close', 'update:WindowState', 'update:position', 'dragover', 'dragleave', 'areaDragStart', 'areaDragMove', 'areaDragEnd', 'area-merged'])
 
 // 处理Panel的最大化事件
 const onPanelMaximize = (panelId) => {
@@ -569,56 +570,121 @@ onMounted(() => {
   }
 })
 
-// 添加Area内容的方法，用于主区域的Area接收外部Area内容
-const appendAreaContent = (sourceArea) => {
-  console.log(`[Area] ${props.id} 接收到内容移动请求:`, sourceArea)
+
+
+// 合并Area内容的方法，只保留合并逻辑
+const mergeAreaContent = (sourceArea) => {
+  console.log(`[Area] ${props.id} 接收到Area合并请求:`, sourceArea)
   
   if (!sourceArea) {
-    console.warn('[Area] 源Area为空，无法接收内容')
+    console.warn('[Area] 源Area为空，无法合并内容')
     return false
   }
   
   try {
-    // 清空之前的内容，确保只接收一个新的TabPage
-    receivedContent.value = []
+    const isEmpty = receivedContent.value.length === 0
     
-    // 处理源Area的tabPages，只接收第一个TabPage（用户要求只能接收一个TabPage）
-    if (sourceArea.tabPages && sourceArea.tabPages.length > 0) {
-      const tabPage = sourceArea.tabPages[0] // 只接收第一个TabPage
-      if (tabPage) {
-        // 确保所有Panel都处于最大化状态，显示还原按钮
-        const maximizedPanels = (tabPage.panels || []).map(panel => ({
-          ...panel,
-          maximized: true // 设置为最大化状态
-        }))
-        
-        receivedContent.value.push({
-          id: `received-${tabPage.id || Date.now() + Math.random()}`,
-          title: tabPage.title || '标签页',
-          tabPage: {
-            ...tabPage,
-            panels: maximizedPanels // 使用最大化状态的Panel
-          },
-          panels: maximizedPanels
+    if (isEmpty) {
+      // 4.2.1 如果目标Area内容区为空，将源Area内容区的子组件添加到目标Area内容区
+      console.log('[Area] 目标Area为空，添加源Area的子组件')
+      
+      // 处理源Area的所有tabPages
+      if (sourceArea.tabPages && sourceArea.tabPages.length > 0) {
+        sourceArea.tabPages.forEach((tabPage, tabIndex) => {
+          const newTabPageId = `merged-tabpage-${Date.now()}-${tabIndex}`
+          const newPanels = (tabPage.panels || []).map((panel, panelIndex) => {
+            const newPanelId = `merged-panel-${Date.now()}-${tabIndex}-${panelIndex}`
+            console.log(`[Area] 添加Panel: ${panel.id} -> ${newPanelId}`)
+            return {
+              ...panel,
+              id: newPanelId,
+              maximized: true
+            }
+          })
+          
+          receivedContent.value.push({
+            id: `received-${newTabPageId}`,
+            title: tabPage.title || `标签页${tabIndex + 1}`,
+            tabPage: {
+              ...tabPage,
+              id: newTabPageId,
+              panels: newPanels
+            },
+            panels: newPanels
+          })
+          
+          console.log(`[Area] 成功添加TabPage: ${tabPage.title} (${newPanels.length} 个Panel)`)
         })
-        console.log(`[Area] 成功接收tabPage: ${tabPage.title}，并设置Panel为最大化状态`)
       }
+      
+      // 触发事件通知父组件将源Area保存到隐藏列表
+      emit('area-merged', {
+        sourceArea: sourceArea,
+        targetAreaId: props.id,
+        targetAreaHasContent: false, // 目标Area为空
+        operation: 'add-children',
+        addedTabPages: receivedContent.value
+      })
+      
+      return true
+      
     } else {
-      console.warn('[Area] 源Area中没有tabPages数据')
+      // 4.2.2 如果目标Area内容区已包含TabPage，将源Area的每个TabPage添加到目标Area的TabPage中
+      console.log('[Area] 目标Area已有TabPage，合并TabPage标签页')
+      
+      // 获取第一个现有的TabPage作为合并目标
+      const existingTabPage = receivedContent.value[0]
+      if (!existingTabPage) {
+        console.error('[Area] 现有TabPage不存在')
+        return false
+      }
+      
+      // 处理源Area的所有tabPages
+      if (sourceArea.tabPages && sourceArea.tabPages.length > 0) {
+        sourceArea.tabPages.forEach((sourceTabPage, tabIndex) => {
+          if (sourceTabPage && sourceTabPage.panels) {
+            // 为每个Panel创建新的唯一ID避免冲突
+            const newPanels = sourceTabPage.panels.map((panel, panelIndex) => {
+              const newPanelId = `merged-panel-${Date.now()}-${tabIndex}-${panelIndex}`
+              console.log(`[Area] 合并Panel到现有TabPage: ${panel.id} -> ${newPanelId}`)
+              return {
+                ...panel,
+                id: newPanelId,
+                maximized: true
+              }
+            })
+            
+            // 将新的Panel添加到现有TabPage
+            existingTabPage.tabPage.panels.push(...newPanels)
+            existingTabPage.panels.push(...newPanels)
+            
+            console.log(`[Area] 成功合并 ${newPanels.length} 个Panel到现有TabPage`)
+          }
+        })
+      }
+      
+      // 触发事件通知父组件将源Area及其TabPage组件保存到隐藏列表
+      emit('area-merged', {
+        sourceArea: sourceArea,
+        targetAreaId: props.id,
+        targetAreaHasContent: true, // 目标Area已有内容
+        operation: 'merge-tabpages',
+        sourceTabPages: sourceArea.tabPages || []
+      })
+      
+      console.log(`[Area] 合并完成，现有TabPage共有 ${existingTabPage.tabPage.panels.length} 个Panel`)
+      return true
     }
     
-    console.log(`[Area] ${props.id} 当前接收内容数量: ${receivedContent.value.length}`)
-    return true
-    
   } catch (error) {
-    console.error('[Area] 接收外部内容时出错:', error)
+    console.error('[Area] 合并Area内容时出错:', error)
     return false
   }
 }
 
 // 暴露方法给父组件调用
 defineExpose({
-  appendAreaContent,
+  mergeAreaContent, // 合并Area内容的方法
   id: props.id,
   title: props.title,
   isMaximized: isMaximized.value