@opensumi/ide-main-layout 3.9.1-next-1748403761.0 → 3.9.1-next-1748425167.0

package/src/browser/tabbar/TABBAR_CONFIG_USAGE.md

@@ -0,0 +1,141 @@
+# Tabbar 配置使用指南
+
+## 概述
+
+现在支持在注册插槽渲染器时传入 `tabbarConfig` 配置，用于控制 tabbar 的布局行为。这样不同的插槽渲染器可以根据自己的实现特点提供相应的配置。
+
+## 配置接口
+
+```typescript
+export interface TabbarConfig {
+  /** 是否为后置位置（bar 在 panel 右侧或底下） */
+  isLatter: boolean;
+  /** 支持的操作类型 */
+  supportedActions?: {
+    expand?: boolean;
+    toggle?: boolean;
+    accordion?: boolean;
+  };
+}
+```
+
+## 使用方式
+
+### 1. 注册带配置的插槽渲染器
+
+```typescript
+import { SlotLocation } from '@opensumi/ide-core-browser';
+import { slotRendererRegistry } from '@opensumi/ide-core-browser/lib/react-providers';
+
+// 注册左侧面板渲染器（bar 在 panel 左侧）
+slotRendererRegistry.registerSlotRenderer(SlotLocation.view, LeftTabRenderer, {
+  isLatter: false, // bar 在 panel 左侧
+  supportedActions: {
+    accordion: true, // 支持手风琴
+  },
+});
+
+// 注册右侧面板渲染器（bar 在 panel 右侧）
+slotRendererRegistry.registerSlotRenderer(SlotLocation.extendView, RightTabRenderer, {
+  isLatter: true, // bar 在 panel 右侧
+  supportedActions: {
+    accordion: true,
+  },
+});
+
+// 注册底部面板渲染器（bar 在 panel 底下）
+slotRendererRegistry.registerSlotRenderer(SlotLocation.panel, BottomTabRenderer, {
+  isLatter: true, // bar 在 panel 底下
+  supportedActions: {
+    expand: true, // 支持展开/收缩
+    toggle: true, // 支持 toggle 行为
+  },
+});
+```
+
+### 2. 自定义插槽渲染器的配置
+
+如果你有自定义的插槽渲染器，可以根据具体的布局实现来设置配置：
+
+```typescript
+// 自定义的水平布局渲染器
+class HorizontalTabRenderer extends React.Component {
+  // 实现水平布局，bar 在左侧
+}
+
+// 注册时指定配置
+slotRendererRegistry.registerSlotRenderer('customLocation', HorizontalTabRenderer, {
+  isLatter: false, // bar 在左侧
+  supportedActions: {
+    accordion: false, // 不支持手风琴
+    expand: false, // 不支持展开
+  },
+});
+```
+
+### 3. 配置的优先级
+
+配置采用以下优先级：
+
+1. **插槽渲染器配置**：通过 `registerSlotRenderer` 传入的 `tabbarConfig`
+2. **默认配置**：基于 location 的默认配置
+
+```typescript
+// 在策略中获取配置的逻辑
+protected getIsLatter(): boolean {
+  if (this.tabbarConfig?.isLatter !== undefined) {
+    return this.tabbarConfig.isLatter; // 优先使用渲染器配置
+  }
+  // 默认配置：扩展视图和底部面板为后置位置
+  return this.location === 'extendView' || this.location === 'panel';
+}
+```
+
+## 实际应用场景
+
+### 场景 1：自定义右侧面板布局
+
+如果你的右侧面板采用了特殊的布局，bar 实际在左侧：
+
+```typescript
+slotRendererRegistry.registerSlotRenderer(SlotLocation.extendView, CustomRightRenderer, {
+  isLatter: false, // 虽然是右侧面板，但 bar 在左侧
+});
+```
+
+### 场景 2：底部面板的变体
+
+底部面板的不同实现可能有不同的布局：
+
+```typescript
+// 传统底部面板：bar 在上方
+slotRendererRegistry.registerSlotRenderer(SlotLocation.panel, TraditionalBottomRenderer, {
+  isLatter: false, // bar 在 panel 上方
+  supportedActions: {
+    expand: true,
+    toggle: true,
+  },
+});
+
+// 现代底部面板：bar 在下方
+slotRendererRegistry.registerSlotRenderer(SlotLocation.panel, ModernBottomRenderer, {
+  isLatter: true, // bar 在 panel 下方
+  supportedActions: {
+    expand: true,
+    toggle: true,
+  },
+});
+```
+
+## 注意事项
+
+1. **向后兼容**：如果不提供 `tabbarConfig`，会使用默认配置
+2. **配置验证**：确保 `isLatter` 的值与实际的渲染器布局一致
+3. **动态更新**：目前配置在注册时确定，不支持运行时动态修改
+
+## 好处
+
+- **灵活性**：不同的渲染器可以有不同的布局配置
+- **解耦合**：策略不再硬编码位置相关的配置
+- **可扩展**：新的渲染器可以轻松定义自己的配置
+- **清晰性**：配置意图明确，便于理解和维护

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

@@ -5,6 +5,7 @@ import { Badge, Icon } from '@opensumi/ide-components';
 import {
   ComponentRegistryInfo,
   ComponentRegistryProvider,
+  Event,
   KeybindingRegistry,
   addClassName,
   getIcon,
@@ -109,20 +110,20 @@ export const TabbarViewBase: FC<ITabbarViewProps> = (props) => {
   }, []);
 
   useEffect(() => {
-    setContainers(
-      splitVisibleTabs(
-        tabbarService.visibleContainers.filter((container) => !container.options?.hideTab),
-        visibleCount,
-      ),
-    );
-    const disposable = tabbarService.onStateChange(() => {
+    const updateContainers = () => {
       setContainers(
         splitVisibleTabs(
           tabbarService.visibleContainers.filter((container) => !container.options?.hideTab),
           visibleCount,
         ),
       );
-    });
+    };
+
+    updateContainers();
+    const disposable = Event.any<any>(
+      tabbarService.onDidRegisterContainer,
+      tabbarService.onStateChange,
+    )(updateContainers);
     return () => {
       disposable.dispose();
     };
@@ -153,9 +154,6 @@ 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;
@@ -423,9 +421,6 @@ 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} />}
-          <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}
+            minSize={component.options!.miniSize || 200}
             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.left,
+  side: SlotLocation.view,
   direction: EDirection.LeftToRight,
   fullSize: 0,
 });
@@ -114,7 +114,7 @@ export const RightTabRenderer = ({
   tabpanelView?: FC<{}>;
 }) => (
   <TabRendererBase
-    side={SlotLocation.right}
+    side={SlotLocation.extendView}
     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.left}
+    side={SlotLocation.view}
     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.bottom}
+    side={SlotLocation.panel}
     id={VIEW_CONTAINERS.BOTTOM_TABBAR_PANEL}
     direction={EDirection.BottomToTop}
     className={cls(className, 'bottom-slot')}

package/src/browser/tabbar/tabbar-behavior-handler.ts

@@ -0,0 +1,260 @@
+import { ComponentRegistryProvider, DisposableCollection } from '@opensumi/ide-core-browser';
+import { SCM_CONTAINER_ID } from '@opensumi/ide-core-browser/lib/common/container-id';
+import { ResizeHandle } from '@opensumi/ide-core-browser/lib/components';
+import { AbstractContextMenuService, IContextMenu, IMenuRegistry } from '@opensumi/ide-core-browser/lib/menu/next';
+import { TabbarBehaviorConfig } from '@opensumi/ide-core-browser/lib/react-providers';
+
+import { IMainLayoutService } from '../../common';
+import { EXPAND_PANEL_COMMAND, RETRACT_PANEL_COMMAND, TOGGLE_PANEL_COMMAND } from '../command';
+
+export interface ITabbarResizeOptions {
+  setSize: (targetSize?: number) => void;
+  setRelativeSize: (prev: number, next: number) => void;
+  getSize: () => number;
+  getRelativeSize: () => number[];
+  lockSize: (lock: boolean | undefined) => void;
+  setMaxSize: (lock: boolean | undefined) => void;
+  hidePanel: (show?: boolean) => void;
+}
+
+/**
+ * 基于配置的 Tabbar 行为处理器
+ * 通过配置驱动，替代复杂的策略模式
+ */
+export class TabbarBehaviorHandler {
+  private accordionRestored: Set<string> = new Set();
+
+  constructor(private location: string, private config?: TabbarBehaviorConfig) {}
+
+  /**
+   * 获取 isLatter 配置
+   */
+  getIsLatter(): boolean {
+    if (this.config?.isLatter !== undefined) {
+      return this.config.isLatter;
+    }
+    // 默认配置：扩展视图和底部面板为后置位置
+    return this.location === 'extendView' || this.location === 'panel';
+  }
+
+  /**
+   * 包装 resize handle
+   */
+  wrapResizeHandle(resizeHandle: ResizeHandle): ITabbarResizeOptions {
+    const { setSize, setRelativeSize, getSize, getRelativeSize, lockSize, setMaxSize, hidePanel } = resizeHandle;
+    const isLatter = this.getIsLatter();
+
+    return {
+      setSize: (size) => setSize(size, isLatter),
+      setRelativeSize: (prev: number, next: number) => setRelativeSize(prev, next, isLatter),
+      getSize: () => getSize(isLatter),
+      getRelativeSize: () => getRelativeSize(isLatter),
+      setMaxSize: (lock: boolean | undefined) => setMaxSize(lock, isLatter),
+      lockSize: (lock: boolean | undefined) => lockSize(lock, isLatter),
+      hidePanel: (show) => hidePanel(show),
+    };
+  }
+
+  /**
+   * 注册特定位置的命令（基于配置）
+   */
+  registerLocationSpecificCommands(context: {
+    commandRegistry: any;
+    layoutService: IMainLayoutService;
+  }): DisposableCollection {
+    const disposables = new DisposableCollection();
+    const { supportedActions } = this.config || {};
+
+    // 如果支持展开操作，注册相关命令
+    if (supportedActions?.expand) {
+      disposables.push(
+        context.commandRegistry.registerCommand(EXPAND_PANEL_COMMAND, {
+          execute: () => {
+            context.layoutService.expandBottom(true);
+          },
+        }),
+      );
+
+      disposables.push(
+        context.commandRegistry.registerCommand(RETRACT_PANEL_COMMAND, {
+          execute: () => {
+            context.layoutService.expandBottom(false);
+          },
+        }),
+      );
+    }
+
+    // 如果支持 toggle 操作，注册相关命令
+    if (supportedActions?.toggle) {
+      disposables.push(
+        context.commandRegistry.registerCommand(TOGGLE_PANEL_COMMAND, {
+          execute: (show?: boolean, size?: number) => {
+            context.layoutService.toggleSlot(this.location, show, size);
+          },
+        }),
+      );
+    }
+
+    return disposables;
+  }
+
+  /**
+   * 注册特定位置的菜单（基于配置）
+   */
+  registerLocationSpecificMenus(context: {
+    menuRegistry: IMenuRegistry;
+    ctxMenuService: AbstractContextMenuService;
+  }): IContextMenu | undefined {
+    // 如果支持展开操作，注册相关菜单
+    const menuItems: any[] = [];
+
+    if (this.config?.supportedActions?.expand) {
+      menuItems.push(
+        {
+          command: EXPAND_PANEL_COMMAND.id,
+          group: 'navigation',
+          when: '!bottomFullExpanded',
+          order: 1,
+        },
+        {
+          command: RETRACT_PANEL_COMMAND.id,
+          group: 'navigation',
+          when: 'bottomFullExpanded',
+          order: 1,
+        },
+      );
+    }
+
+    if (this.config?.supportedActions?.toggle) {
+      menuItems.push({
+        command: TOGGLE_PANEL_COMMAND.id,
+        group: 'navigation',
+        order: 2,
+      });
+    }
+
+    if (menuItems.length > 0) {
+      context.menuRegistry.registerMenuItems(`tabbar/${this.location}/common`, menuItems);
+
+      return context.ctxMenuService.createMenu({
+        id: `tabbar/${this.location}/common`,
+      });
+    }
+
+    return undefined;
+  }
+
+  /**
+   * 处理展开/收缩逻辑（基于配置）
+   */
+  doExpand(expand: boolean, resizeHandle?: ITabbarResizeOptions): void {
+    if (!this.config?.supportedActions?.expand || !resizeHandle) {
+      return;
+    }
+
+    const { setRelativeSize } = resizeHandle;
+    const isLatter = this.getIsLatter();
+
+    if (expand) {
+      if (isLatter) {
+        // 后置位置：完全展开
+        setRelativeSize(0, 1);
+      } else {
+        // 前置位置：完全展开
+        setRelativeSize(1, 0);
+      }
+    } else {
+      // 恢复正常尺寸
+      setRelativeSize(2, 1);
+    }
+  }
+
+  /**
+   * 判断是否处于展开状态（基于配置）
+   */
+  isExpanded(resizeHandle?: ITabbarResizeOptions): boolean {
+    if (!this.config?.supportedActions?.expand || !resizeHandle) {
+      return false;
+    }
+
+    const { getRelativeSize } = resizeHandle;
+    const relativeSizes = getRelativeSize().join(',');
+    const isLatter = this.getIsLatter();
+
+    return isLatter ? relativeSizes === '0,1' : relativeSizes === '1,0';
+  }
+
+  /**
+   * 激活快捷键的处理逻辑（基于配置）
+   */
+  handleActivateKeyBinding(
+    containerId: string,
+    currentContainerId: string,
+    updateCurrentContainerId: (id: string) => void,
+    forceShow?: boolean,
+  ): void {
+    // 如果支持 toggle，根据当前状态切换
+    if (this.config?.supportedActions?.toggle && !forceShow) {
+      updateCurrentContainerId(currentContainerId === containerId ? '' : containerId);
+    } else {
+      // 否则直接激活
+      updateCurrentContainerId(containerId);
+    }
+  }
+
+  /**
+   * 处理全展开状态（基于配置）
+   */
+  handleFullExpanded(
+    currentId: string,
+    isCurrentExpanded: boolean,
+    resizeHandle: ITabbarResizeOptions,
+    options: { barSize: number; panelSize: number; prevSize?: number },
+  ): void {
+    const { barSize, panelSize, prevSize } = options;
+    const { setRelativeSize, setSize } = resizeHandle;
+
+    if (currentId) {
+      if (isCurrentExpanded && this.config?.supportedActions?.expand) {
+        const isLatter = this.getIsLatter();
+        if (isLatter) {
+          setRelativeSize(0, 1);
+        } else {
+          setRelativeSize(1, 0);
+        }
+      } else {
+        setSize(prevSize || panelSize + barSize);
+      }
+    } else {
+      setSize(barSize);
+    }
+  }
+
+  /**
+   * 尝试恢复手风琴尺寸（基于配置）
+   */
+  tryRestoreAccordionSize(containerInfo: ComponentRegistryProvider, layoutService: IMainLayoutService): void {
+    // 如果不支持手风琴，直接返回
+    if (!this.config?.supportedActions?.accordion) {
+      return;
+    }
+
+    const { containerId } = containerInfo.options || {};
+    if (!containerId || this.accordionRestored.has(containerId)) {
+      return;
+    }
+
+    // 使用自定义视图取代手风琴的面板不需要 restore
+    // scm 视图例外，因为在新版本 Gitlens 中可以将自己注册到 scm 中
+    if (
+      (!containerInfo || containerInfo.options?.component) &&
+      containerInfo?.options?.containerId !== SCM_CONTAINER_ID
+    ) {
+      return;
+    }
+
+    const accordionService = layoutService.getAccordionService(containerId);
+    accordionService.restoreState();
+    this.accordionRestored.add(containerId);
+  }
+}