正确移除标签页

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

@@ -262,13 +262,12 @@ const onPanelClose = (event) => {
   const areaId = event.areaId;
   const panelId = event.panelId;
   
-  if (shouldOperateAreaInsteadOfPanel(areaId)) {
+  // 始终只关闭面板，不关闭整个Area，除非没有剩余面板
-    onCloseFloatingArea({ areaId });
-  } else {
   panelActions.close(panelId, areaId);
   const area = floatingAreas.value.find(a => a.id === areaId);
   if (area && area.children) {
-      for (const child of area.children) {
+    const areaChildrenArray = Array.isArray(area.children) ? area.children : [area.children];
+    for (const child of areaChildrenArray) {
       if (child.type === 'TabPage' && child.children) {
         // 处理TabPage的children，可能是单个Panel或Panel数组
         const isArray = Array.isArray(child.children);
@@ -283,18 +282,28 @@ const onPanelClose = (event) => {
               child.children.splice(i, 1);
             } else {
               // 如果是单个Panel，移除整个TabPage
-                const tabPageIndex = area.children.indexOf(child);
+              const tabPageIndex = areaChildrenArray.indexOf(child);
               if (tabPageIndex !== -1) {
+                if (Array.isArray(area.children)) {
                   area.children.splice(tabPageIndex, 1);
+                } else {
+                  // 如果area.children是单个对象，直接设为null
+                  area.children = null;
+                }
               }
               break;
             }
             
             // 如果Panel数组为空，移除TabPage
-              if (child.children.length === 0) {
+            if (Array.isArray(child.children) && child.children.length === 0) {
-                const tabPageIndex = area.children.indexOf(child);
+              const tabPageIndex = areaChildrenArray.indexOf(child);
               if (tabPageIndex !== -1) {
+                if (Array.isArray(area.children)) {
                   area.children.splice(tabPageIndex, 1);
+                } else {
+                  // 如果area.children是单个对象，直接设为null
+                  area.children = null;
+                }
               }
             }
             break;
@@ -304,6 +313,27 @@ const onPanelClose = (event) => {
       }
     }
   }
+  
+  // 检查Area是否还有子元素，如果没有，关闭整个Area
+  if (area && area.children) {
+    let hasChildren = false;
+    const areaChildrenArray = Array.isArray(area.children) ? area.children : [area.children];
+    for (const child of areaChildrenArray) {
+      if (child.type === 'TabPage' && child.children) {
+        const tabChildrenArray = Array.isArray(child.children) ? child.children : [child.children];
+        if (tabChildrenArray.length > 0) {
+          hasChildren = true;
+          break;
+        }
+      }
+    }
+    
+    if (!hasChildren) {
+      onCloseFloatingArea({ areaId });
+    }
+  } else {
+    // Area没有children，直接关闭
+    onCloseFloatingArea({ areaId });
   }
 };
 
@@ -492,39 +522,76 @@ const onTabClose = async (data) => {
     
     console.log(`✅ 找到目标Area和TabPage:`, { areaId, tabPageId, panelId });
     
-    // 2. 调用TabPageActions处理关闭请求
+    // 2. 调用PanelHandler的close方法回收Panel资源
+    panelActions.close(panelId, areaId);
+    console.log(`📌 调用PanelHandler回收Panel资源`);
+    
+    // 3. 调用TabPageActions处理关闭请求
     await tabPageActions.requestClose(tabPageId, areaId);
     
-    // 3. 移除Panel
+    // 4. 移除Panel
     if (Array.isArray(targetTabPage.children)) {
       targetTabPage.children.splice(panelIndex, 1);
       console.log(`📌 从TabPage移除Panel后，剩余Panel数量: ${targetTabPage.children.length}`);
     } else {
+      // 当TabPage只有一个Panel时，我们将children设置为null
+      // 这样shouldShowTabs计算属性会返回false，不显示标签栏
+      // 但TabPage仍然存在
       targetTabPage.children = null;
-      console.log(`📌 移除了唯一的Panel`);
+      console.log(`📌 移除了唯一的Panel，TabPage不显示标签栏`);
     }
     
-    // 4. 如果TabPage没有子元素了，移除整个TabPage
+    // 5. 检查TabPage是否还有子元素
-    if (!targetTabPage.children || (Array.isArray(targetTabPage.children) && targetTabPage.children.length === 0)) {
+    // 当targetTabPage.children为null时，TabPage仍然存在，只是不显示标签栏
-      // 从Area的children中移除TabPage
+    // 只有当children为undefined或空数组时，才认为TabPage没有子元素
-      targetArea.children = null;
+    let hasTabPageChildren = true;
+    if (Array.isArray(targetTabPage.children)) {
+      hasTabPageChildren = targetTabPage.children.length > 0;
+    } else if (targetTabPage.children === undefined) {
+      hasTabPageChildren = false;
+    }
+    
+    // 6. 只有当TabPage没有任何子元素时，才移除TabPage
+    if (!hasTabPageChildren) {
       console.log(`📌 TabPage已无Panel，移除TabPage`);
+      
+      // 7. 实际从Area的children中移除TabPage
+      if (Array.isArray(targetArea.children)) {
+        const tabPageIndex = targetArea.children.indexOf(targetTabPage);
+        if (tabPageIndex !== -1) {
+          targetArea.children.splice(tabPageIndex, 1);
+        }
+      } else {
+        // 如果Area的children是单个TabPage，直接设为null
+        targetArea.children = null;
       }
       
-    // 5. 更新floatingAreas中的Area配置
+      // 8. 检查Area是否还有子元素
+      let hasAreaChildren = false;
+      if (Array.isArray(targetArea.children)) {
+        hasAreaChildren = targetArea.children.length > 0;
+      } else {
+        hasAreaChildren = !!targetArea.children;
+      }
+      
+      // 9. 只有当Area没有任何子元素时，才关闭整个Area
+      if (!hasAreaChildren) {
+        console.log(`📌 Area已无子元素，关闭整个Area`);
+        onCloseFloatingArea({ areaId });
+        return;
+      }
+    }
+    
+    // 10. 更新floatingAreas中的Area配置
     const areaIndex = floatingAreas.value.findIndex(a => a.id === areaId);
     if (areaIndex !== -1) {
       floatingAreas.value[areaIndex] = { ...targetArea };
       console.log(`📌 更新floatingAreas中的Area配置`);
       
-      // 6. 触发Area更新事件，确保状态同步
+      // 11. 触发Area更新事件，确保状态同步
       areaActions.updateState(areaId, { children: targetArea.children });
       console.log(`📌 触发Area更新事件`);
       
-      // 7. 调用PanelHandler的close方法回收Panel资源
-      panelActions.close(panelId, areaId);
-      console.log(`📌 调用PanelHandler回收Panel资源`);
-      
       console.log(`✅ 成功移除标签页和回收Panel: areaId=${areaId}, panelId=${panelId}`);
     }
   } catch (error) {
@@ -642,7 +709,7 @@ const setupEventListeners = () => {
   // Panel相关事件
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, () => emit('toggleCollapse'), { componentId: 'dock-layout' }));
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE, onMaximize, { componentId: 'dock-layout' }));
-  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE_REQUEST, onCloseFloatingArea, { componentId: 'dock-layout' }));
+  unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE_REQUEST, onPanelClose, { componentId: 'dock-layout' }));
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE, onPanelClose, { componentId: 'dock-layout' }));
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, () => emit('toggleToolbar'), { componentId: 'dock-layout' }));
   unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, onPanelMaximizeSync, { componentId: 'dock-layout' }));