修复中心停靠

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

@@ -99,15 +99,19 @@
 
       <!-- 内容区域 -->
       <div class="vs-content">        
-        <!-- 这里是内容区域，优先显示slot内容，如果没有slot内容则显示接收到的外部内容 -->
-        <template v-if="$slots.default">
-          <slot></slot>
-        </template>
-        <!-- 直接显示接收到的外部TabPage内容，不需要额外包装 -->
-        <template v-else-if="receivedContent.length > 0">
+        <!-- 优先显示receivedContent（停靠的外部内容） -->
+        <template v-if="receivedContent && receivedContent.length > 0">
+          <!-- 调试信息 -->
+          <div v-if="false" style="position: absolute; top: 0; left: 0; background: red; color: white; padding: 5px; z-index: 9999;">
+            DEBUG: receivedContent长度 = {{ receivedContent.length }}
+            <div v-for="(item, index) in receivedContent" :key="`debug-${index}`">
+              TabPage {{ index }}: {{ item.tabPage.id }} - {{ item.tabPage.title }} ({{ item.tabPage.panels.length }} panels)
+            </div>
+          </div>
+          
           <TabPage
             v-for="(item, index) in receivedContent"
-            :key="`received-tab-${index}`"
+            :key="item.tabPage.id"
             :id="item.tabPage.id"
             :title="item.tabPage.title"
             :panels="item.tabPage.panels"
@@ -118,6 +122,17 @@
             @maximize="onPanelMaximize"
           />
         </template>
+        
+        <!-- 如果没有receivedContent但有slot内容，显示slot内容 -->
+        <template v-else-if="$slots.default">
+          <slot></slot>
+        </template>
+        
+        <!-- 当既没有slot内容也没有receivedContent时，显示空状态 -->
+        <template v-else 
+                  style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">
+          <span>此处可以放置内容</span>
+        </template>
       </div>
     </div>
 </template>
@@ -579,7 +594,8 @@ const mergeAreaContent = (sourceArea) => {
       // 处理源Area的所有tabPages
       if (sourceArea.tabPages && sourceArea.tabPages.length > 0) {
         sourceArea.tabPages.forEach((tabPage, tabIndex) => {
-          const newTabPageId = `merged-tabpage-${Date.now()}-${tabIndex}`
+          // 保持原有的tabPage ID，确保Vue组件状态连续性
+          const tabPageId = `merged-tabpage-${tabPage.id}`
           const newPanels = (tabPage.panels || []).map((panel, panelIndex) => {
             // 保持原有Panel ID不变，确保Vue响应式和状态稳定性
             console.log(`[Area] 添加Panel: ${panel.id}`)
@@ -590,11 +606,11 @@ const mergeAreaContent = (sourceArea) => {
           })
           
           receivedContent.value.push({
-            id: `received-${newTabPageId}`,
+            id: `received-${tabPageId}`,
             title: tabPage.title || `标签页${tabIndex + 1}`,
             tabPage: {
               ...tabPage,
-              id: newTabPageId,
+              id: tabPageId,
               panels: newPanels
             },
             panels: newPanels
@@ -639,7 +655,7 @@ const mergeAreaContent = (sourceArea) => {
               }
             })
             
-            // 将新的Panel添加到现有TabPage
+            // 将新的Panel添加到现有TabPage，保持ID连续性
             existingTabPage.tabPage.panels.push(...newPanels)
             // existingTabPage.panels 是旧引用，保持结构一致性但避免重复添加