feat: support icon menubar

packages/core-browser/src/components/actions/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'classnames';
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
 
 import { Button, CheckBox, Icon } from '@opensumi/ide-components';
 import { ClickParam, Menu } from '@opensumi/ide-components/lib/menu';
@@ -387,6 +387,11 @@ export const TitleActionList: React.FC<
             }
           }
 
+          // 分隔符
+          if (item.id === SeparatorMenuItemNode.ID) {
+            return <span key={`vertical-divider-${item.id}`} className={styles.verticalDivider} />;
+          }
+
           // submenu 使用 submenu-id 作为 id 唯一值
           const id = item.id === SubmenuItemNode.ID ? (item as SubmenuItemNode).submenuId : item.id;
           return (
@@ -434,6 +439,7 @@ interface InlineActionBarProps<T, U, K, M> extends Omit<BaseActionListProps, 'ex
   separator?: IMenuSeparator;
   className?: string;
   debounce?: { delay: number; maxWait?: number };
+  isFlattenMenu?: boolean;
 }
 
 interface IMenubarIconService {
@@ -443,13 +449,20 @@ interface IMenubarIconService {
 export function InlineActionBar<T = undefined, U = undefined, K = undefined, M = undefined>(
   props: InlineActionBarProps<T, U, K, M>,
 ): React.ReactElement<InlineActionBarProps<T, U, K, M>> {
-  const { menus, context, separator = 'navigation', debounce, ...restProps } = props;
+  const { menus, context, separator = 'navigation', debounce, isFlattenMenu = false, ...restProps } = props;
   // 因为这里的 context 塞到 useMenus 之后会自动把参数加入到 MenuItem.execute 里面
   const [navMenu, moreMenu] = useMenus(menus, separator, context, debounce);
 
+  const navMenus = useMemo(() => isFlattenMenu ? [...navMenu, ...moreMenu] : navMenu, [navMenu, moreMenu, isFlattenMenu]);
+
   // inline 菜单不取第二组，对应内容由关联 context menu 去渲染
   return (
-    <TitleActionList menuId={menus.menuId} nav={navMenu} more={separator === 'inline' ? [] : moreMenu} {...restProps} />
+    <TitleActionList
+      menuId={menus.menuId}
+      nav={navMenus}
+      more={separator === 'inline' || isFlattenMenu ? [] : moreMenu}
+      {...restProps}
+    />
   );
 }
 

packages/core-browser/src/components/actions/styles.module.less

@@ -138,6 +138,21 @@
   display: none;
 }
 
+.titleActions {
+  .verticalDivider {
+    width: 1px;
+    display: list-item;
+    background-color: var(--menu-separatorBackground);
+    pointer-events: none;
+    overflow: hidden;
+
+    &::marker {
+      content: '';
+      unicode-bidi: initial;
+    }
+  }
+}
+
 :global {
   // 菜单项增加滚动条
   .kt-menu {

packages/core-browser/src/menu/next/menu-id.ts

@@ -18,6 +18,8 @@ export enum MenuId {
   BreadcrumbsTitleContext = 'breadcrumbs/title/context',
   EmptyEditorGroupContext = 'empty/editor/group/context',
   ExplorerContext = 'explorer/context',
+  // top icon menubar
+  IconMenubarContext = 'iconMenubar/context',
   MenubarAppearanceMenu = 'menubar/appearance',
   MenubarAppMenu = 'menubar/app',
   MenubarDebugMenu = 'menubar/debug',

packages/menu-bar/src/browser/menu-bar.module.less

@@ -46,3 +46,20 @@
     top: 100%;
   }
 }
+
+.icon_menubar_container {
+  display: flex;
+  align-items: center;
+
+  .menubar_action {
+    margin-right: 1px;
+
+    > span[class*='-icon'] {
+      font-size: 1.5em;
+    }
+
+    span + span {
+      margin-left: 12px;
+    }
+  }
+}

packages/menu-bar/src/browser/menu-bar.view.tsx

@@ -6,9 +6,9 @@ import { ClickOutside } from '@opensumi/ide-components';
 import { Dropdown } from '@opensumi/ide-components/lib/dropdown';
 import { Deprecated } from '@opensumi/ide-components/lib/utils/deprecated';
 import { useInjectable, SlotRenderer, ComponentRegistry } from '@opensumi/ide-core-browser';
-import { MenuActionList } from '@opensumi/ide-core-browser/lib/components/actions';
+import { InlineActionBar, MenuActionList } from '@opensumi/ide-core-browser/lib/components/actions';
 import { LAYOUT_VIEW_SIZE } from '@opensumi/ide-core-browser/lib/layout/constants';
-import { IMenubarItem } from '@opensumi/ide-core-browser/lib/menu/next';
+import { AbstractMenuService, IMenubarItem, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
 
 import styles from './menu-bar.module.less';
 import { MenubarStore } from './menu-bar.store';
@@ -143,3 +143,18 @@ export const MenuBarMixToolbarAction: React.FC<MenuBarMixToolbarActionProps> = (
 MenuBarMixToolbarAction.displayName = 'MenuBarMixToolbarAction';
 
 export const MenuBarActionWrapper = Deprecated(MenuBarMixToolbarAction, 'please use `MenuBarMixToolbarAction`');
+
+/**
+ * 可供集成方导入的组件
+ * 后续如果有一些改动需要考虑是否有 breakchange
+ */
+export const IconMenuBar = () => {
+  const menuService = useInjectable<AbstractMenuService>(AbstractMenuService);
+  const menus = menuService.createMenu(MenuId.IconMenubarContext);
+
+  return (
+    <div className={styles.icon_menubar_container}>
+      <InlineActionBar menus={menus} type='icon' className={styles.menubar_action} isFlattenMenu={true} />
+    </div>
+  );
+};