@opensumi/ide-design 2.27.3-rc-1714116491.0 → 2.27.3-rc-1714982362.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-design",
-  "version": "2.27.3-rc-1714116491.0",
+  "version": "2.27.3-rc-1714982362.0",
   "files": [
     "lib",
     "src"
@@ -19,12 +19,12 @@
     "url": "git@github.com:opensumi/core.git"
   },
   "dependencies": {
-    "@opensumi/ide-core-common": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-core-node": "2.27.3-rc-1714116491.0"
+    "@opensumi/ide-core-common": "2.27.3-rc-1714982362.0",
+    "@opensumi/ide-core-node": "2.27.3-rc-1714982362.0"
   },
   "devDependencies": {
-    "@opensumi/ide-core-browser": "2.27.3-rc-1714116491.0",
-    "@opensumi/ide-dev-tool": "2.27.3-rc-1714116491.0"
+    "@opensumi/ide-core-browser": "2.27.3-rc-1714982362.0",
+    "@opensumi/ide-dev-tool": "2.27.3-rc-1714982362.0"
   },
-  "gitHead": "b3e24dca0866b038e5b93fb14119f30e947f4710"
+  "gitHead": "197b8ef9917d764baced87ea93e800b1ce43ac82"
 }

package/src/browser/design.contribution.ts

@@ -1,15 +1,20 @@
 import { Autowired, Injectable } from '@opensumi/di';
 import {
+  AppConfig,
   ClientAppContribution,
+  ComponentRegistryImpl,
   Domain,
   SlotLocation,
   SlotRendererContribution,
   SlotRendererRegistry,
 } from '@opensumi/ide-core-browser';
+import { DesignLayoutConfig, LayoutViewSizeConfig } from '@opensumi/ide-core-browser/lib/layout/constants';
 import { Schemes } from '@opensumi/ide-core-common';
 import { IFileServiceClient } from '@opensumi/ide-file-service';
 import { FileServiceClient } from '@opensumi/ide-file-service/lib/browser/file-service-client';
 
+import { DESIGN_MENUBAR_CONTAINER_VIEW_ID } from '../common/constants';
+
 import { DesignBottomTabRenderer, DesignLeftTabRenderer, DesignRightTabRenderer } from './layout/tabbar.view';
 import { DesignThemeFileSystemProvider } from './theme/file-system.provider';
 
@@ -22,8 +27,33 @@ export class DesignCoreContribution implements ClientAppContribution, SlotRender
   @Autowired()
   private readonly designThemeFileSystemProvider: DesignThemeFileSystemProvider;
 
-  async initialize() {
+  @Autowired(AppConfig)
+  private appConfig: AppConfig;
+
+  @Autowired(LayoutViewSizeConfig)
+  private layoutViewSize: LayoutViewSizeConfig;
+
+  @Autowired(DesignLayoutConfig)
+  private designLayoutConfig: DesignLayoutConfig;
+
+  initialize() {
+    const { useMenubarView } = this.designLayoutConfig;
+
     this.fileSystem.registerProvider(Schemes.design, this.designThemeFileSystemProvider);
+
+    if (useMenubarView) {
+      this.layoutViewSize.setMenubarHeight(48);
+
+      ComponentRegistryImpl.replaceLayoutModule(
+        this.appConfig.layoutConfig,
+        SlotLocation.top,
+        DESIGN_MENUBAR_CONTAINER_VIEW_ID,
+      );
+    }
+
+    this.layoutViewSize.setEditorTabsHeight(36);
+    this.layoutViewSize.setStatusBarHeight(36);
+    this.layoutViewSize.setAccordionHeaderSizeHeight(36);
   }
 
   registerRenderer(registry: SlotRendererRegistry): void {

package/src/browser/index.ts

@@ -15,6 +15,7 @@ import { IThemeContribution, IThemeService, IThemeStore } from '@opensumi/ide-th
 import { ThemeStore } from '@opensumi/ide-theme/lib/browser/theme-store';
 
 import { DesignCoreContribution } from './design.contribution';
+import { DesignMenuBarContribution } from './menu-bar/menu-bar.contribution';
 import { DesignEditorTabService } from './override/editor-tab.service';
 import { DesignBrowserCtxMenuService } from './override/menu.service';
 import { DesignSplitPanelService } from './override/split-panel.service';
@@ -24,7 +25,7 @@ import lightTheme from './theme/light-theme';
 
 @Injectable()
 export class DesignModule extends BrowserModule {
-  providers: Provider[] = [DesignCoreContribution];
+  providers: Provider[] = [DesignMenuBarContribution, DesignCoreContribution];
 
   preferences = (injector: Injector) => {
     import('./style/global.less');

package/src/browser/menu-bar/logo.svg

@@ -0,0 +1 @@
+<svg id="layer_1" data-name="layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.97 78.11"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fc3d50;}</style></defs><path d="M64.89,27.54A53.23,53.23,0,0,0,42.64,6.24C39.4,4.54,35.92,4.7,32,5.05c-2.73.25-5.19.15-11.76-.11l-1,0a6.15,6.15,0,0,0-5.43,2.29c-3,3.87-2,11.34-1,14.75,2.83,9.74,8,18.45,14.5,24.53a60.15,60.15,0,0,0,6.17,5C38,54.67,45,58.58,52.4,59l.8,0a16.12,16.12,0,0,0,14.58-9.23C71.46,41.77,67.55,32.41,64.89,27.54Z"/><path class="cls-1" d="M10.05,58.75c-3.83,0-6.49-1.22-7.9-3.61C-1.2,49.47,9.22,39.08,13.86,34.88l1.67-1.51,1,1.51A14.51,14.51,0,0,0,18.07,37L19,38l-1.21,1.29c-4.74,5-5.44,7.92-5.16,8.4.57,1,2.14,1.17,3.35,1.17a19.18,19.18,0,0,0,4.09-.53c1-.23,2-.48,3.05-.76.75-.2,1.49-.42,2.23-.64A91,91,0,0,0,50.13,35.5c0-.06,0-.12,0-.18a6.55,6.55,0,0,1,5.76-7.26,6.36,6.36,0,0,1,3.22.43c1-.89,1.92-1.8,2.81-2.72,2.15-2.18,4.9-5.63,5.88-9.61a1.6,1.6,0,0,0-.08-1.34c-.38-.48-1.53-.76-3.08-.76A30.62,30.62,0,0,0,57,15.34l-1.19.36-.64-.76a14.07,14.07,0,0,0-2-1.91l-2-1.61,3-1.2C61,7.47,67,6,71.37,6c5,0,7.19,1.89,8.12,3.47a5.92,5.92,0,0,1,.36,4.69c-1.31,4.88-7.69,12.32-16.73,19.55l0,.1a6.55,6.55,0,0,1-5.77,7.26,6.61,6.61,0,0,1-.76.05,6.47,6.47,0,0,1-2.84-.66c-2,1.27-3.94,2.49-5.92,3.63C35.31,51.31,24.38,56.1,16.22,58A28.15,28.15,0,0,1,10.05,58.75Z"/><path d="M71.38,7.51c3.38,0,5.74.91,6.82,2.74a4.51,4.51,0,0,1,.21,3.53c-1.23,4.53-7.55,12-16.95,19.34a5.05,5.05,0,0,1-4.26,6.47,3.9,3.9,0,0,1-.59,0,5,5,0,0,1-2.89-.92c-2.11,1.4-4.32,2.77-6.62,4.09C34,50.33,23.43,54.78,15.89,56.49a27.13,27.13,0,0,1-5.84.76c-3.27,0-5.48-1-6.61-2.87C1.54,51.15,5.91,44.11,14.87,36l.35-.31A16.31,16.31,0,0,0,17,38l-.25.26c-4.31,4.59-6.37,8.49-5.36,10.19.75,1.27,2.33,1.91,4.64,1.91a20.42,20.42,0,0,0,4.42-.57c1-.24,2.08-.49,3.11-.77.76-.21,1.52-.42,2.27-.65a92.24,92.24,0,0,0,26-12.19,5,5,0,0,1,4.22-6.62,3.77,3.77,0,0,1,.58,0,5,5,0,0,1,2.7.79C60.58,29.18,61.8,28,63,26.82c2.74-2.8,5.3-6.41,6.26-10.3.75-3.09-1.66-4-4.62-4a32.59,32.59,0,0,0-8.08,1.34l-.25.08A15.56,15.56,0,0,0,54,11.86l.62-.25c6.81-2.72,12.54-4.1,16.72-4.1m0-3C66.77,4.51,60.6,6,53.55,8.83l-.62.25L48.18,11l4,3.21A13.73,13.73,0,0,1,54,15.91l1.27,1.51,1.89-.57.25-.08a29.1,29.1,0,0,1,7.21-1.21,6.53,6.53,0,0,1,1.72.18l0,.06a20.5,20.5,0,0,1-5.49,8.92c-.67.7-1.38,1.39-2.11,2.07a8.16,8.16,0,0,0-2.09-.28,7.26,7.26,0,0,0-.93.06,8,8,0,0,0-7.13,8.17A90.11,90.11,0,0,1,25,45.49l-2.2.62c-1,.27-2,.52-3,.75a18,18,0,0,1-3.75.49,4.45,4.45,0,0,1-1.83-.28c.25-.91,1.38-3.2,4.73-6.76l.25-.27,1.92-2-1.9-2a12.73,12.73,0,0,1-1.42-1.87l-1.9-3-2.65,2.4-.35.32C-.64,46-1.12,52.56.86,55.9c1.17,2,3.71,4.35,9.19,4.35a30,30,0,0,0,6.51-.83c8.3-1.89,19.38-6.73,32-14,1.77-1,3.56-2.11,5.32-3.24a7.93,7.93,0,0,0,2.69.47,7.26,7.26,0,0,0,.93-.06,8.06,8.06,0,0,0,7.14-8.18C73.75,27,79.92,19.69,81.3,14.56a7.39,7.39,0,0,0-.51-5.84C79.65,6.8,77.1,4.51,71.38,4.51Z"/><path class="cls-1" d="M25,48.8C17.71,42,12,32.37,8.85,21.57,7.74,17.73,6.54,9.24,10,4.64a7.73,7.73,0,0,1,6.47-3.07h.46l1.13,0c4.35.17,7,.28,9,.28,1.35,0,2.43,0,3.6-.15,1.43-.13,3-.26,4.48-.26a15.94,15.94,0,0,1,7.71,1.68A60.3,60.3,0,0,1,65.47,23.31l.63,1-.77.85c-1,1.11-2.11,2.25-3.31,3.38l-1.34,1.25-1-1.55A52.53,52.53,0,0,0,39.39,9.8,8.72,8.72,0,0,0,35.17,9c-1.21,0-2.54.12-3.8.23s-2.71.18-4.28.18c-2.21,0-4.9-.11-9.36-.29l-1.25,0a1.53,1.53,0,0,0-.5,0c-.08.13-.79,1.17-.8,4.19A23.52,23.52,0,0,0,16,19.48c2.77,9.52,7.75,18,14,23.85.55.52,1.14,1,1.74,1.55l1.85,1.57-2.23.95c-1.68.73-3.29,1.36-4.77,1.88l-.86.3Z"/><path d="M35.17,3a14.67,14.67,0,0,1,7,1.5,58.7,58.7,0,0,1,22,19.62Q62.79,25.73,61,27.41A53.87,53.87,0,0,0,40.09,8.47a10.24,10.24,0,0,0-4.92-1c-1.27,0-2.64.12-3.94.24s-2.61.17-4.14.17c-2.18,0-4.87-.11-9.32-.29l-1.08,0h-.21c-1.1,0-1.44.33-1.7.67s-1.09,1.81-1.1,5.06a25.11,25.11,0,0,0,.92,6.61c2.84,9.78,8,18.49,14.44,24.53.58.54,1.18,1.07,1.8,1.6-1.69.72-3.24,1.33-4.68,1.84L26,47.71c-7.54-7-12.84-16.72-15.7-26.56C8.65,15.5,7.64,3.07,16.48,3.07h.39c5,.2,8,.33,10.22.33,1.4,0,2.54-.05,3.73-.16C32.28,3.12,33.73,3,35.17,3m0-3C33.58,0,32,.13,30.55.26a33.81,33.81,0,0,1-3.46.15c-2,0-4.66-.11-9-.28L17,.08h-.51A9.2,9.2,0,0,0,8.8,3.74C5,8.8,6.14,17.59,7.41,22,10.63,33,16.49,43,23.94,49.9l.13.12.05,0,1.33,1.23,1.71-.6c1.51-.54,3.15-1.18,4.86-1.92l4.45-1.91-3.69-3.13c-.62-.53-1.17-1-1.69-1.5C25,36.56,20.17,28.33,17.48,19.06a22.06,22.06,0,0,1-.8-5.76,10.27,10.27,0,0,1,.3-2.73l.67,0c4.49.18,7.2.29,9.44.29,1.62,0,3-.06,4.41-.19,1.23-.11,2.52-.22,3.67-.22a7.35,7.35,0,0,1,3.52.65A50.88,50.88,0,0,1,58.44,29l1.93,3.11L63,29.6c1.24-1.17,2.39-2.34,3.41-3.48L68,24.41l-1.25-1.92A61.78,61.78,0,0,0,43.57,1.85,17.4,17.4,0,0,0,35.17,0Z"/><path class="cls-1" d="M81.4,74.71C79,73.93,67,69.9,64.21,67.16a8.37,8.37,0,0,1,3.74-14,8.19,8.19,0,0,1,2.15-.28A8.42,8.42,0,0,1,76,55.34c2.72,2.72,6.76,14.8,7.54,17.19l1,3.23Z"/><path d="M70.1,54.37a6.92,6.92,0,0,1,4.88,2c2.6,2.6,7,16,7.18,16.6l.14.42-.43-.14c-.57-.18-14-4.58-16.6-7.18a6.86,6.86,0,0,1,3.07-11.5,7,7,0,0,1,1.76-.23m0-3a9.86,9.86,0,0,0-6.94,16.86C66,71.05,76.53,74.7,80.94,76.14l.43.14L87,78.11,85.15,72.5,85,72.07c-1.44-4.42-5.1-15-7.91-17.79a9.92,9.92,0,0,0-7-2.91Z"/><path class="cls-2" d="M68.85,64.44a3.22,3.22,0,1,1,4.56-4.56c1.26,1.26,5.47,10,5.47,10s-8.77-4.21-10-5.47Zm0,0"/><path class="cls-1" d="M53.88,62.73l-.94,0c-8.35-.43-16.11-4.79-21.15-8.38-.63-.45-1.25-.9-1.86-1.37l-2-1.54,2.34-1c1.47-.64,3-1.36,4.61-2.13l.8-.38.72.51c7.56,5.33,13.39,6.66,17,6.84l.56,0a11.27,11.27,0,0,0,6-1.75A10.73,10.73,0,0,0,64,48.9a14.34,14.34,0,0,0,.73-8.61A31.32,31.32,0,0,0,62.32,33L61.84,32l.9-.73c1.2-1,2.36-2,3.46-3l1.47-1.35.88,1.79C71.61,34.91,74.47,44,70.77,52A18.61,18.61,0,0,1,53.88,62.73Z"/><path d="M67.21,29.37c3.3,6.7,5.42,15,2.19,22a17.16,17.16,0,0,1-15.52,9.83l-.86,0c-7.29-.37-14.52-4-20.36-8.1l-1.82-1.34q2.21-1,4.65-2.15c7.84,5.52,14,6.92,17.76,7.11l.63,0a12.79,12.79,0,0,0,6.8-2,12.24,12.24,0,0,0,4.65-5.24,15.76,15.76,0,0,0,.84-9.5,32.3,32.3,0,0,0-2.48-7.62c1.24-1,2.41-2,3.52-3m.92-4.91-2.95,2.69c-1.07,1-2.22,2-3.4,2.94L60,31.55l1,2.1a30.18,30.18,0,0,1,2.26,6.91,12.9,12.9,0,0,1-.61,7.71,9.26,9.26,0,0,1-3.52,4,9.81,9.81,0,0,1-5.21,1.52H53.4c-3.37-.18-8.91-1.45-16.18-6.58l-1.44-1-1.59.76c-1.58.76-3.11,1.47-4.56,2.11L25,51.08,29,54.16c.62.47,1.26.94,1.89,1.39,5.2,3.7,13.23,8.21,21.95,8.65.33,0,.67,0,1,0A20.1,20.1,0,0,0,72.13,52.66c4-8.57,1-18.12-2.23-24.62l-1.77-3.58Z"/><path class="cls-1" d="M25.56,14.26a17.41,17.41,0,0,1-8-1.66.72.72,0,0,1-.29-1,.71.71,0,0,1,1-.28c.1.05,7.38,3.87,18.43-1.11a.71.71,0,0,1,1,.36.71.71,0,0,1-.36.95A28.35,28.35,0,0,1,25.56,14.26Z"/><path class="cls-1" d="M78.2,10.25C75.79,6.16,67,6.68,54.66,11.61l-.62.25A15.56,15.56,0,0,1,56.29,14l.25-.08c2.58-.77,14.24-3.68,12.7,2.62-1,3.89-3.52,7.5-6.26,10.3-1.18,1.21-2.4,2.36-3.65,3.48a5,5,0,0,0-7.5,5.87,92.24,92.24,0,0,1-26,12.19c-.75.23-1.51.44-2.27.65-1,.28-2.07.53-3.11.77-4.77,1.08-7.91.62-9.06-1.34-1-1.7,1.05-5.6,5.36-10.19L17,38a15.59,15.59,0,0,1-1.75-2.31l-.35.31c-9,8.12-13.33,15.16-11.43,18.39,1.13,1.91,3.34,2.87,6.61,2.87a27.13,27.13,0,0,0,5.84-.76C23.43,54.78,34,50.33,47.1,42.8c2.3-1.32,4.51-2.69,6.62-4.09a5,5,0,0,0,2.89.92,3.9,3.9,0,0,0,.59,0,5,5,0,0,0,4.26-6.47c9.4-7.39,15.72-14.81,16.95-19.34A4.51,4.51,0,0,0,78.2,10.25Z"/></svg>

package/src/browser/menu-bar/menu-bar.contribution.tsx

@@ -0,0 +1,48 @@
+import { Autowired } from '@opensumi/di';
+import { ComponentContribution, ComponentRegistry, Disposable, Domain } from '@opensumi/ide-core-browser';
+import { IMenuRegistry, IMenubarItem, ISubmenuItem, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+import { MenubarStore } from '@opensumi/ide-menu-bar/lib/browser/menu-bar.store';
+
+import { DESIGN_MENUBAR_CONTAINER_VIEW_ID } from '../../common';
+
+import { DesignMenuBarView } from './menu-bar.view';
+
+@Domain(ComponentContribution)
+export class DesignMenuBarContribution extends Disposable implements ComponentContribution {
+  @Autowired(MenubarStore)
+  private readonly menubarStore: MenubarStore;
+
+  @Autowired(IMenuRegistry)
+  private readonly menuRegistry: IMenuRegistry;
+
+  constructor() {
+    super();
+
+    this.menubarStore.unregisterMenusBarByCompact(MenuId.DesignMenuBarTopExtra);
+
+    this.addDispose(
+      this.menubarStore.onDidMenuBarChange((menubarItems: IMenubarItem[]) => {
+        this.menuRegistry.registerMenuItems(
+          MenuId.DesignMenuBarTopExtra,
+          menubarItems.map(
+            (item: IMenubarItem) =>
+              ({
+                label: item.label,
+                submenu: item.id,
+                iconClass: item.iconClass,
+                group: '1_navigation',
+                order: 100,
+              } as ISubmenuItem),
+          ),
+        );
+      }),
+    );
+  }
+
+  registerComponent(registry: ComponentRegistry): void {
+    registry.register(DESIGN_MENUBAR_CONTAINER_VIEW_ID, {
+      component: DesignMenuBarView,
+      id: DESIGN_MENUBAR_CONTAINER_VIEW_ID,
+    });
+  }
+}

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

@@ -0,0 +1,107 @@
+.menu_bar_view {
+  display: flex;
+  background-color: var(--kt-menubar-background);
+  align-items: center;
+  width: 100%;
+
+  .container {
+    display: flex;
+    justify-content: space-between;
+    width: inherit;
+    align-items: center;
+    padding: 0 12px 0 8px;
+
+    .left {
+      display: flex;
+      align-items: center;
+      z-index: 2;
+
+      .enhance_menu {
+        padding: 8px;
+      }
+
+      .dividing {
+        margin-left: 5px;
+        width: 2px;
+        height: 12px;
+        background-color: var(--editorGroup-border);
+      }
+
+      .top_menus_bar {
+        margin-left: 6px;
+        display: flex;
+        align-items: center;
+        border-radius: 6px;
+
+        .ai_enhance_menu {
+          padding: 8px 6px;
+          height: 32px;
+        }
+
+        .caret_icon {
+          font-size: 14px;
+          margin-left: 4px;
+        }
+
+        .logo_container {
+          display: flex;
+          align-items: center;
+
+          .extra_top_icon {
+            width: 16px;
+            height: 16px;
+            background-repeat: no-repeat;
+            background-size: 100%;
+
+            &::before {
+              content: initial;
+            }
+
+            &:hover {
+              background-color: transparent;
+            }
+          }
+        }
+      }
+    }
+
+    .center {
+      text-align: center;
+      position: absolute;
+      left: 0;
+      right: 0;
+      z-index: 1;
+
+      .run {
+        .btn {
+          border-radius: 6px;
+          padding: 0 13px 0 11px;
+          border: 0;
+        }
+        span {
+          color: #58ce5f;
+          font-size: 12px;
+        }
+      }
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+      z-index: 2;
+
+      .input {
+        margin-right: 16px;
+        width: 240px;
+        flex-shrink: 0;
+
+        .input_wrapper {
+          height: 32px;
+          background-color: var(--design-borderColor-common);
+          border-radius: 8px;
+          border: 1px solid var(--design-input-foreground);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,152 @@
+import cls from 'classnames';
+import * as React from 'react';
+
+import { AINativeConfigService, SlotLocation, SlotRenderer, getIcon, useInjectable } from '@opensumi/ide-core-browser';
+import { Icon } from '@opensumi/ide-core-browser/lib/components';
+import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
+import { DesignLayoutConfig } from '@opensumi/ide-core-browser/lib/layout/constants';
+import { VIEW_CONTAINERS } from '@opensumi/ide-core-browser/lib/layout/view-id';
+import { AbstractContextMenuService, ICtxMenuRenderer, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+import { CommandService } from '@opensumi/ide-core-common';
+import { IMainLayoutService } from '@opensumi/ide-main-layout';
+
+import { DESIGN_MENU_BAR_LEFT, DESIGN_MENU_BAR_RIGHT } from '../../common';
+
+import OpenSumiLogo from './logo.svg';
+import styles from './menu-bar.module.less';
+
+const DesignMenuBarRender = () => {
+  const contextmenuService = useInjectable<AbstractContextMenuService>(AbstractContextMenuService);
+  const designLayoutConfig = useInjectable<DesignLayoutConfig>(DesignLayoutConfig);
+  const ctxMenuRenderer = useInjectable<ICtxMenuRenderer>(ICtxMenuRenderer);
+
+  const iconRef = React.useRef<HTMLDivElement | null>(null);
+  const [anchor, setAnchor] = React.useState<{ x: number; y: number } | undefined>(undefined);
+
+  React.useEffect(() => {
+    handleRefRect();
+  }, []);
+
+  const handleRefRect = React.useCallback(
+    (cb?: (_anchor: { x: number; y: number }) => void) => {
+      requestAnimationFrame(() => {
+        if (iconRef.current) {
+          const rect = iconRef.current.getBoundingClientRect();
+          const { x, y, width, height } = rect;
+          const _anchor = {
+            x,
+            y: y + height,
+          };
+
+          setAnchor(_anchor);
+
+          if (cb) {
+            cb(_anchor);
+          }
+        }
+      });
+    },
+    [iconRef.current],
+  );
+
+  const extraTopMenus = React.useMemo(
+    () =>
+      contextmenuService.createMenu({
+        id: MenuId.DesignMenuBarTopExtra,
+      }),
+    [contextmenuService],
+  );
+
+  const handleClick = React.useCallback(() => {
+    if (!anchor) {
+      return;
+    }
+
+    const menuNodes = extraTopMenus.getMergedMenuNodes();
+    extraTopMenus.dispose();
+
+    handleRefRect((_anchor) => {
+      ctxMenuRenderer.show({
+        anchor: _anchor,
+        menuNodes,
+      });
+    });
+  }, [anchor, extraTopMenus]);
+
+  const logo = React.useMemo(() => designLayoutConfig.menubarLogo || OpenSumiLogo, [designLayoutConfig.menubarLogo]);
+
+  return (
+    <>
+      <EnhanceIcon wrapperClassName={styles.ai_enhance_menu} ref={iconRef} onClick={handleClick}>
+        <div className={styles.logo_container}>
+          <img className={styles.extra_top_icon} src={logo} alt='' />
+          <Icon className={cls(getIcon('down'), styles.caret_icon)} />
+        </div>
+      </EnhanceIcon>
+    </>
+  );
+};
+
+export const DesignMenuBarView = () => {
+  const commandService = useInjectable<CommandService>(CommandService);
+  const mainLayoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
+  const aiNativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
+  const [isLeftPanelVisible, setIsVisiablePanel] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    requestAnimationFrame(() => {
+      setIsVisiablePanel(isVisiable());
+    });
+
+    const tabbarService = mainLayoutService.getTabbarService(SlotLocation.left);
+    const toDispose = tabbarService.onCurrentChange(({ previousId, currentId }) => {
+      if (previousId && !currentId) {
+        setIsVisiablePanel(false);
+      } else if (!previousId && currentId) {
+        setIsVisiablePanel(true);
+      }
+    });
+
+    return () => {
+      toDispose.dispose();
+    };
+  }, []);
+
+  const handleLeftMenuVisiable = React.useCallback(() => {
+    commandService.executeCommand('main-layout.left-panel.toggle');
+    requestAnimationFrame(() => {
+      setIsVisiablePanel(isVisiable());
+    });
+  }, []);
+
+  const isVisiable = React.useCallback(() => {
+    const tabbarService = mainLayoutService.getTabbarService(SlotLocation.left);
+    return !!tabbarService.currentContainerId;
+  }, [mainLayoutService]);
+
+  return (
+    <div
+      id={VIEW_CONTAINERS.MENUBAR}
+      className={styles.menu_bar_view}
+      style={{ height: aiNativeConfigService.layoutViewSize.menubarHeight }}
+    >
+      <div className={styles.container}>
+        <div className={styles.left}>
+          <EnhanceIcon
+            wrapperClassName={styles.enhance_menu}
+            icon={isLeftPanelVisible ? 'left-nav-open' : 'left-nav-close'}
+            onClick={handleLeftMenuVisiable}
+          />
+          <span className={styles.dividing}></span>
+          <div className={styles.top_menus_bar}>
+            <DesignMenuBarRender />
+          </div>
+          <SlotRenderer slot={DESIGN_MENU_BAR_LEFT} flex={1} overflow={'initial'} />
+        </div>
+        <div className={styles.right}>
+          <SlotRenderer slot={DESIGN_MENU_BAR_RIGHT} flex={1} overflow={'initial'} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/browser/override/editor-tab.service.tsx

@@ -6,7 +6,7 @@ import { Popover } from '@opensumi/ide-core-browser/lib/components';
 import { localize, uuid } from '@opensumi/ide-core-common';
 import { EditorTabService } from '@opensumi/ide-editor/lib/browser/editor.tab.service';
 
-import styles from './override.module.less';
+import styles from '../style/design.module.less';
 
 const EditorTabCloseComponent = (props) => {
   const { children } = props;

package/src/browser/override/menu.service.tsx

@@ -10,7 +10,7 @@ import { BrowserCtxMenuService } from '@opensumi/ide-overlay/lib/browser/ctx-men
 import { IIconService } from '@opensumi/ide-theme';
 import { IconService } from '@opensumi/ide-theme/lib/browser';
 
-import styles from './override.module.less';
+import styles from '../style/design.module.less';
 
 const MenuComponent = (props: { data: MenuNode } & IMenuRenderProps) => {
   const iconService = useInjectable<IconService>(IIconService);