fix: render tabbar correctly on initial load (#3895)

* fix: simplify container ID update logic * fix: render tabbar correctly on initial load * fix: handle invalid container id updates * feat: enhance layout and tabbar service for better container handling
opensumi · Jul 31, 2024 · 1cd698f · 1cd698f
1 parent 5e50432
commit 1cd698f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/packages/main-layout/src/browser/layout.service.ts b/packages/main-layout/src/browser/layout.service.ts
@@ -154,8 +154,6 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
   }
 
   restoreTabbarService = async (service: TabbarService) => {
-    await service.viewReady.promise;
-
     this.state = this.layoutState.getState(LAYOUT_STATE.MAIN, {
       [SlotLocation.left]: {
         currentId: undefined,
@@ -197,12 +195,29 @@ export class LayoutService extends WithEventBus implements IMainLayoutService {
         defaultContainer = '';
       }
     }
+    /**
+     * ContainerId 存在三种值类型，对应的处理模式如下：
+     * 1. undefined: 采用首个注册的容器作为当前 containerId
+     * 2. string: 直接使用该 containerId 作为当前 containerId
+     * 3. '': 直接清空当前 containerId，不展开相应的 viewContainer
+     */
     if (isUndefined(currentId)) {
-      service.updateCurrentContainerId(defaultContainer);
-    } else {
-      service.updateCurrentContainerId(
-        currentId ? (service.containersMap.has(currentId) ? currentId : defaultContainer) : '',
-      );
+      if (isUndefined(defaultContainer)) {
+        // 默认采用首个注册的容器作为当前 containerId
+        service.updateNextContainerId();
+      } else {
+        service.updateCurrentContainerId(defaultContainer);
+      }
+    } else if (currentId) {
+      if (service.containersMap.has(currentId)) {
+        service.updateCurrentContainerId(currentId);
+      } else {
+        service.updateCurrentContainerId(defaultContainer);
+        // 等待后续新容器注册时，更新当前的 containerId
+        service.updateNextContainerId(currentId);
+      }
+    } else if (currentId === '') {
+      service.updateCurrentContainerId('');
     }
   };
 

diff --git a/packages/main-layout/src/browser/tabbar/tabbar.service.ts b/packages/main-layout/src/browser/tabbar/tabbar.service.ts
@@ -23,6 +23,7 @@ import {
   formatLocalize,
   getTabbarCtxKey,
   isDefined,
+  isUndefined,
   localize,
   toDisposable,
 } from '@opensumi/ide-core-browser';
@@ -65,6 +66,9 @@ export class TabbarService extends WithEventBus {
   // currentContainerId 默认值应该为一个非空且唯一的字符串，避免在切换容器时触发 MobX 不变错误
   currentContainerId?: string = NONE_CONTAINER_ID;
 
+  private nextContainerId = '';
+  private useFirstContainerId = false;
+
   previousContainerId = '';
 
   containersMap: Map<string, ComponentRegistryProvider> = new Map();
@@ -174,6 +178,14 @@ export class TabbarService extends WithEventBus {
     this.isLatter = v;
   }
 
+  updateNextContainerId(nextContainerId?: string) {
+    if (isUndefined(nextContainerId)) {
+      this.useFirstContainerId = true;
+    } else {
+      this.nextContainerId = nextContainerId;
+    }
+  }
+
   @action
   updateCurrentContainerId(containerId: string) {
     this.currentContainerId = containerId;
@@ -322,6 +334,15 @@ export class TabbarService extends WithEventBus {
       return;
     }
 
+    if (this.useFirstContainerId) {
+      this.useFirstContainerId = false;
+      this.updateCurrentContainerId(containerId);
+    }
+
+    if (this.nextContainerId === containerId) {
+      this.updateCurrentContainerId(containerId);
+    }
+
     const disposables = new DisposableCollection();
     const options = componentInfo.options || { containerId };
     componentInfo.options = options;