@opensumi/ide-main-layout 3.9.1-next-1749175927.0 → 3.9.1-next-1749196667.0

package/src/browser/main-layout.contribution.ts

@@ -39,34 +39,85 @@ import {
   MenuId,
 } from '@opensumi/ide-core-browser/lib/menu/next';
 import { ContributionProvider, Domain, IEventBus, WithEventBus, localize } from '@opensumi/ide-core-common';
-import { CommandContribution, CommandRegistry, CommandService } from '@opensumi/ide-core-common/lib/command';
+import { Command, CommandContribution, CommandRegistry, CommandService } from '@opensumi/ide-core-common/lib/command';
 
-import { DROP_EXTEND_VIEW_CONTAINER, DROP_PANEL_CONTAINER, DROP_VIEW_CONTAINER, IMainLayoutService } from '../common';
+import { DROP_BOTTOM_CONTAINER, DROP_RIGHT_CONTAINER, IMainLayoutService } from '../common';
 
-import {
-  EXPAND_BOTTOM_PANEL,
-  EXPAND_PANEL_COMMAND,
-  IS_VISIBLE_BOTTOM_PANEL_COMMAND,
-  IS_VISIBLE_EXTEND_VIEW_COMMAND,
-  IS_VISIBLE_LEFT_PANEL_COMMAND,
-  IS_VISIBLE_PANEL_COMMAND,
-  IS_VISIBLE_RIGHT_PANEL_COMMAND,
-  IS_VISIBLE_VIEW_COMMAND,
-  RETRACT_BOTTOM_PANEL,
-  RETRACT_PANEL_COMMAND,
-  TOGGLE_BOTTOM_PANEL_COMMAND,
-  TOGGLE_EXTEND_VIEW_COMMAND,
-  TOGGLE_LEFT_PANEL_COMMAND,
-  TOGGLE_PANEL_COMMAND,
-  TOGGLE_RIGHT_PANEL_COMMAND,
-  TOGGLE_VIEW_COMMAND,
-  WORKBENCH_ACTION_CLOSEPANEL,
-  WORKBENCH_ACTION_CLOSESIDECAR,
-} from './command';
-import { ExtendViewDropArea, PanelDropArea, ViewDropArea } from './drop-area/drop-area';
+import { BottomDropArea, RightDropArea } from './drop-area/drop-area';
 import { ViewQuickOpenHandler } from './quick-open-view';
 import { BottomTabRenderer, LeftTabRenderer, RightTabRenderer } from './tabbar/renderer.view';
 
+// NOTE 左右侧面板的展开、折叠命令请使用组合命令 activity-bar.left.toggle，layout命令仅做折叠展开，不处理tab激活逻辑
+export const HIDE_LEFT_PANEL_COMMAND: Command = {
+  id: 'main-layout.left-panel.hide',
+  label: '%main-layout.left-panel.hide%',
+};
+
+export const WORKBENCH_ACTION_CLOSESIDECAR: Command = {
+  id: 'workbench.action.closeSidebar',
+  label: '%main-layout.sidebar.hide%',
+};
+
+export const SHOW_LEFT_PANEL_COMMAND: Command = {
+  id: 'main-layout.left-panel.show',
+  label: '%main-layout.left-panel.show%',
+};
+export const TOGGLE_LEFT_PANEL_COMMAND: MenuCommandDesc = {
+  id: 'main-layout.left-panel.toggle',
+  label: '%main-layout.left-panel.toggle%',
+};
+export const HIDE_RIGHT_PANEL_COMMAND: Command = {
+  id: 'main-layout.right-panel.hide',
+  label: '%main-layout.right-panel.hide%',
+};
+export const SHOW_RIGHT_PANEL_COMMAND: Command = {
+  id: 'main-layout.right-panel.show',
+  label: '%main-layout.right-panel.show%',
+};
+export const TOGGLE_RIGHT_PANEL_COMMAND: MenuCommandDesc = {
+  id: 'main-layout.right-panel.toggle',
+  label: '%main-layout.right-panel.toggle%',
+};
+
+export const HIDE_BOTTOM_PANEL_COMMAND: Command = {
+  id: 'main-layout.bottom-panel.hide',
+  label: '%main-layout.bottom-panel.hide%',
+};
+
+export const WORKBENCH_ACTION_CLOSEPANEL: Command = {
+  id: 'workbench.action.closePanel',
+  delegate: HIDE_BOTTOM_PANEL_COMMAND.id,
+};
+
+export const SHOW_BOTTOM_PANEL_COMMAND: Command = {
+  id: 'main-layout.bottom-panel.show',
+  label: '%main-layout.bottom-panel.show%',
+};
+export const TOGGLE_BOTTOM_PANEL_COMMAND: Command = {
+  id: 'main-layout.bottom-panel.toggle',
+  iconClass: getIcon('minus'),
+  label: '%layout.tabbar.toggle%',
+};
+export const IS_VISIBLE_BOTTOM_PANEL_COMMAND: Command = {
+  id: 'main-layout.bottom-panel.is-visible',
+};
+export const IS_VISIBLE_LEFT_PANEL_COMMAND: Command = {
+  id: 'main-layout.left-panel.is-visible',
+};
+export const IS_VISIBLE_RIGHT_PANEL_COMMAND: Command = {
+  id: 'main-layout.right-panel.is-visible',
+};
+export const EXPAND_BOTTOM_PANEL: Command = {
+  id: 'main-layout.bottom-panel.expand',
+  label: '%layout.tabbar.expand%',
+  iconClass: getIcon('expand'),
+};
+export const RETRACT_BOTTOM_PANEL: Command = {
+  id: 'main-layout.bottom-panel.retract',
+  label: '%layout.tabbar.retract%',
+  iconClass: getIcon('shrink'),
+};
+
 @Domain(
   CommandContribution,
   ClientAppContribution,
@@ -145,20 +196,15 @@ export class MainLayoutModuleContribution
   }
 
   registerComponent(registry: ComponentRegistry): void {
-    registry.register(DROP_EXTEND_VIEW_CONTAINER, [], {
-      component: ExtendViewDropArea,
-      hideTab: true,
-      containerId: DROP_EXTEND_VIEW_CONTAINER,
-    });
-    registry.register(DROP_PANEL_CONTAINER, [], {
-      component: PanelDropArea,
+    registry.register(DROP_RIGHT_CONTAINER, [], {
+      component: RightDropArea,
       hideTab: true,
-      containerId: DROP_PANEL_CONTAINER,
+      containerId: DROP_RIGHT_CONTAINER,
     });
-    registry.register(DROP_VIEW_CONTAINER, [], {
-      component: ViewDropArea,
+    registry.register(DROP_BOTTOM_CONTAINER, [], {
+      component: BottomDropArea,
       hideTab: true,
-      containerId: DROP_VIEW_CONTAINER,
+      containerId: DROP_BOTTOM_CONTAINER,
     });
   }
 
@@ -171,75 +217,78 @@ export class MainLayoutModuleContribution
   }
 
   registerRenderer(registry: SlotRendererRegistry) {
-    registry.registerSlotRenderer(SlotLocation.extendView, RightTabRenderer, {
-      isLatter: true,
-      supportedActions: {
-        accordion: true,
+    registry.registerSlotRenderer(SlotLocation.right, RightTabRenderer);
+    registry.registerSlotRenderer(SlotLocation.left, LeftTabRenderer);
+    registry.registerSlotRenderer(SlotLocation.bottom, BottomTabRenderer);
+  }
+
+  registerCommands(commands: CommandRegistry): void {
+    // @deprecated
+    commands.registerCommand(HIDE_LEFT_PANEL_COMMAND, {
+      execute: () => {
+        this.mainLayoutService.toggleSlot(SlotLocation.left, false);
       },
     });
-    registry.registerSlotRenderer(SlotLocation.view, LeftTabRenderer, {
-      supportedActions: {
-        accordion: true,
+    // @deprecated
+    commands.registerCommand(SHOW_LEFT_PANEL_COMMAND, {
+      execute: (size?: number) => {
+        this.mainLayoutService.toggleSlot(SlotLocation.left, true, size);
       },
     });
-    registry.registerSlotRenderer(SlotLocation.panel, BottomTabRenderer, {
-      isLatter: true,
-      supportedActions: {
-        expand: true,
-        toggle: true,
+    commands.registerCommand(TOGGLE_LEFT_PANEL_COMMAND, {
+      execute: (show?: boolean, size?: number) => {
+        this.mainLayoutService.toggleSlot(SlotLocation.left, show, size);
       },
     });
-  }
 
-  registerCommands(commands: CommandRegistry): void {
-    commands.registerCommand(TOGGLE_VIEW_COMMAND, {
-      execute: (show?: boolean, size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.view, show, size);
+    // @deprecated
+    commands.registerCommand(HIDE_RIGHT_PANEL_COMMAND, {
+      execute: () => {
+        this.mainLayoutService.toggleSlot(SlotLocation.right, false);
       },
     });
-    commands.registerCommand(TOGGLE_EXTEND_VIEW_COMMAND, {
-      execute: (show?: boolean, size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.extendView, show, size);
+    // @deprecated
+    commands.registerCommand(SHOW_RIGHT_PANEL_COMMAND, {
+      execute: (size?: number) => {
+        this.mainLayoutService.toggleSlot(SlotLocation.right, true, size);
       },
     });
-    commands.registerCommand(TOGGLE_PANEL_COMMAND, {
+    commands.registerCommand(TOGGLE_RIGHT_PANEL_COMMAND, {
       execute: (show?: boolean, size?: number) => {
-        this.mainLayoutService.toggleSlot(SlotLocation.panel, show, size);
+        this.mainLayoutService.toggleSlot(SlotLocation.right, show, size);
       },
     });
-    commands.registerCommand(IS_VISIBLE_VIEW_COMMAND, {
-      execute: () => this.mainLayoutService.isVisible(SlotLocation.view),
-    });
-    commands.registerCommand(IS_VISIBLE_EXTEND_VIEW_COMMAND, {
-      execute: () => this.mainLayoutService.isVisible(SlotLocation.extendView),
-    });
-    commands.registerCommand(IS_VISIBLE_PANEL_COMMAND, {
-      execute: () => this.mainLayoutService.isVisible(SlotLocation.panel),
-    });
-    // TODO: 下个版本废弃掉
-    commands.registerCommand(TOGGLE_LEFT_PANEL_COMMAND);
-    commands.registerCommand(TOGGLE_RIGHT_PANEL_COMMAND);
-    commands.registerCommand(TOGGLE_BOTTOM_PANEL_COMMAND);
-    commands.registerCommand(EXPAND_BOTTOM_PANEL);
-    commands.registerCommand(RETRACT_BOTTOM_PANEL);
-    commands.registerCommand(IS_VISIBLE_LEFT_PANEL_COMMAND);
-    commands.registerCommand(IS_VISIBLE_RIGHT_PANEL_COMMAND);
-    commands.registerCommand(IS_VISIBLE_BOTTOM_PANEL_COMMAND);
 
     commands.registerCommand(WORKBENCH_ACTION_CLOSESIDECAR, {
       execute: () =>
         Promise.all([
-          this.mainLayoutService.toggleSlot(SlotLocation.view, false),
-          this.mainLayoutService.toggleSlot(SlotLocation.extendView, false),
+          this.mainLayoutService.toggleSlot(SlotLocation.left, false),
+          this.mainLayoutService.toggleSlot(SlotLocation.right, false),
         ]),
     });
 
-    commands.registerCommand(WORKBENCH_ACTION_CLOSEPANEL, {
+    commands.registerCommand(SHOW_BOTTOM_PANEL_COMMAND, {
       execute: () => {
-        this.mainLayoutService.toggleSlot(SlotLocation.panel, false);
+        this.mainLayoutService.toggleSlot(SlotLocation.bottom, true);
       },
     });
 
+    commands.registerCommand(HIDE_BOTTOM_PANEL_COMMAND, {
+      execute: () => {
+        this.mainLayoutService.toggleSlot(SlotLocation.bottom, false);
+      },
+    });
+    commands.registerCommand(WORKBENCH_ACTION_CLOSEPANEL);
+    commands.registerCommand(IS_VISIBLE_BOTTOM_PANEL_COMMAND, {
+      execute: () => this.mainLayoutService.getTabbarService('bottom').currentContainerId.get() !== '',
+    });
+    commands.registerCommand(IS_VISIBLE_LEFT_PANEL_COMMAND, {
+      execute: () => this.mainLayoutService.isVisible(SlotLocation.left),
+    });
+    commands.registerCommand(IS_VISIBLE_RIGHT_PANEL_COMMAND, {
+      execute: () => this.mainLayoutService.isVisible(SlotLocation.left),
+    });
+
     commands.registerCommand(
       {
         id: 'view.outward.right-panel.hide',
@@ -310,14 +359,14 @@ export class MainLayoutModuleContribution
     });
 
     Object.entries({
-      [SlotLocation.view]: [
+      [SlotLocation.left]: [
         EXPLORER_CONTAINER_ID,
         SEARCH_CONTAINER_ID,
         SCM_CONTAINER_ID,
         DEBUG_CONTAINER_ID,
         EXTENSION_CONTAINER_ID,
       ],
-      [SlotLocation.panel]: [
+      [SlotLocation.bottom]: [
         MARKER_CONTAINER_ID,
         OUTPUT_CONTAINER_ID,
         DEBUG_CONSOLE_CONTAINER_ID,
@@ -347,24 +396,24 @@ export class MainLayoutModuleContribution
     });
 
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_VIEW_COMMAND,
+      command: TOGGLE_LEFT_PANEL_COMMAND,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_EXTEND_VIEW_COMMAND,
+      command: TOGGLE_RIGHT_PANEL_COMMAND,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: TOGGLE_PANEL_COMMAND as MenuCommandDesc,
+      command: TOGGLE_BOTTOM_PANEL_COMMAND as MenuCommandDesc,
       group: '5_panel',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: EXPAND_PANEL_COMMAND as MenuCommandDesc,
+      command: EXPAND_BOTTOM_PANEL as MenuCommandDesc,
       group: '5_panel',
       when: '!bottomFullExpanded',
     });
     menus.registerMenuItem(MenuId.MenubarViewMenu, {
-      command: RETRACT_PANEL_COMMAND as MenuCommandDesc,
+      command: RETRACT_BOTTOM_PANEL as MenuCommandDesc,
       group: '5_panel',
       when: 'bottomFullExpanded',
     });
@@ -382,24 +431,20 @@ export class MainLayoutModuleContribution
   protected registerSideToggleKey() {
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+b',
-      command: TOGGLE_VIEW_COMMAND.id,
-    });
-    this.keybindingRegistry.registerKeybinding({
-      keybinding: 'ctrlcmd+alt+b',
-      command: TOGGLE_EXTEND_VIEW_COMMAND.id,
+      command: TOGGLE_LEFT_PANEL_COMMAND.id,
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+j',
-      command: TOGGLE_PANEL_COMMAND.id,
+      command: TOGGLE_BOTTOM_PANEL_COMMAND.id,
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+shift+j',
-      command: EXPAND_PANEL_COMMAND.id,
+      command: EXPAND_BOTTOM_PANEL.id,
       when: '!bottomFullExpanded',
     });
     this.keybindingRegistry.registerKeybinding({
       keybinding: 'ctrlcmd+shift+j',
-      command: RETRACT_PANEL_COMMAND.id,
+      command: RETRACT_BOTTOM_PANEL.id,
       when: 'bottomFullExpanded',
     });
   }

package/src/browser/tabbar/bar.view.tsx

@@ -5,7 +5,6 @@ import { Badge, Icon } from '@opensumi/ide-components';
 import {
   ComponentRegistryInfo,
   ComponentRegistryProvider,
-  Event,
   KeybindingRegistry,
   addClassName,
   getIcon,
@@ -110,20 +109,20 @@ export const TabbarViewBase: FC<ITabbarViewProps> = (props) => {
   }, []);
 
   useEffect(() => {
-    const updateContainers = () => {
+    setContainers(
+      splitVisibleTabs(
+        tabbarService.visibleContainers.filter((container) => !container.options?.hideTab),
+        visibleCount,
+      ),
+    );
+    const disposable = tabbarService.onStateChange(() => {
       setContainers(
         splitVisibleTabs(
           tabbarService.visibleContainers.filter((container) => !container.options?.hideTab),
           visibleCount,
         ),
       );
-    };
-
-    updateContainers();
-    const disposable = Event.any<any>(
-      tabbarService.onDidRegisterContainer,
-      tabbarService.onStateChange,
-    )(updateContainers);
+    });
     return () => {
       disposable.dispose();
     };
@@ -154,6 +153,9 @@ export const TabbarViewBase: FC<ITabbarViewProps> = (props) => {
       if (!containerId) {
         return null;
       }
+      if (side && component.options?.hideLocationTab?.includes(side)) {
+        return null;
+      }
 
       tabbarService.updateTabInMoreKey(containerId, false);
       let ref: HTMLLIElement | null;
@@ -421,6 +423,9 @@ export const ChatTabbarRenderer2: FC<{ barSize?: number; style?: CSSProperties }
   const { barSize = 32, style } = props;
   const { side } = useContext(TabbarConfig);
   const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
+  useEffect(() => {
+    tabbarService.setIsLatter(true);
+  }, [tabbarService]);
   const styles_right_tab_bar = useDesignStyles(styles.ai_right_tab_bar, 'ai_right_tab_bar');
   const styles_right_tab = useDesignStyles(styles.ai_right_tab, 'ai_right_tab');
 

package/src/browser/tabbar/panel.view.tsx

@@ -224,7 +224,7 @@ const BottomPanelView: React.FC<{
         </div>
         <div className={styles_panel_toolbar_container}>
           {titleMenu && <InlineActionBar menus={titleMenu} />}
-          {tabbarService.commonTitleMenu && <InlineMenuBar menus={tabbarService.commonTitleMenu} moreAtFirst />}
+          <InlineMenuBar menus={tabbarService.commonTitleMenu} moreAtFirst />
         </div>
       </div>
       <div className={styles.container_wrap} ref={(ele) => (ref.current = ele)}>
@@ -240,7 +240,7 @@ const BottomPanelView: React.FC<{
           <AccordionContainer
             views={component.views}
             alignment='horizontal'
-            minSize={component.options!.miniSize || 200}
+            minSize={component.options!.miniSize}
             containerId={component.options!.containerId}
           />
         )}

package/src/browser/tabbar/renderer.view.tsx

@@ -34,7 +34,7 @@ export const TabbarConfig = createContext<{
   direction: Layout.direction;
   fullSize: number;
 }>({
-  side: SlotLocation.view,
+  side: SlotLocation.left,
   direction: EDirection.LeftToRight,
   fullSize: 0,
 });
@@ -114,7 +114,7 @@ export const RightTabRenderer = ({
   tabpanelView?: FC<{}>;
 }) => (
   <TabRendererBase
-    side={SlotLocation.extendView}
+    side={SlotLocation.right}
     direction={EDirection.RightToLeft}
     id={VIEW_CONTAINERS.RIGHT_TABBAR_PANEL}
     className={cls(className, 'right-slot')}
@@ -134,7 +134,7 @@ export const LeftTabRenderer = ({
   tabbarView?: FC<{}>;
 }) => (
   <TabRendererBase
-    side={SlotLocation.view}
+    side={SlotLocation.left}
     direction={EDirection.LeftToRight}
     id={VIEW_CONTAINERS.LEFT_TABBAR_PANEL}
     className={cls(className, 'left-slot')}
@@ -154,7 +154,7 @@ export const BottomTabRenderer = ({
   tabbarView?: FC<{}>;
 }) => (
   <TabRendererBase
-    side={SlotLocation.panel}
+    side={SlotLocation.bottom}
     id={VIEW_CONTAINERS.BOTTOM_TABBAR_PANEL}
     direction={EDirection.BottomToTop}
     className={cls(className, 'bottom-slot')}