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

package/lib/browser/design.contribution.d.ts

@@ -3,7 +3,10 @@ import { FileServiceClient } from '@opensumi/ide-file-service/lib/browser/file-s
 export declare class DesignCoreContribution implements ClientAppContribution, SlotRendererContribution {
     protected readonly fileSystem: FileServiceClient;
     private readonly designThemeFileSystemProvider;
-    initialize(): Promise<void>;
+    private appConfig;
+    private layoutViewSize;
+    private designLayoutConfig;
+    initialize(): void;
     registerRenderer(registry: SlotRendererRegistry): void;
 }
 //# sourceMappingURL=design.contribution.d.ts.map

package/lib/browser/design.contribution.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design.contribution.d.ts","sourceRoot":"","sources":["../../src/browser/design.contribution.ts"],"names":[],"mappings":"AACA,OAAO,EACL,qBAAqB,EAGrB,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAK/F,qBAEa,sBAAuB,YAAW,qBAAqB,EAAE,wBAAwB;IAE5F,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC;IAGjD,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAAgC;IAExE,UAAU;IAIhB,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,IAAI;CAKvD"}
+{"version":3,"file":"design.contribution.d.ts","sourceRoot":"","sources":["../../src/browser/design.contribution.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,qBAAqB,EAGrB,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAM/F,qBAEa,sBAAuB,YAAW,qBAAqB,EAAE,wBAAwB;IAE5F,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC;IAGjD,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAAgC;IAG9E,OAAO,CAAC,SAAS,CAAY;IAG7B,OAAO,CAAC,cAAc,CAAuB;IAG7C,OAAO,CAAC,kBAAkB,CAAqB;IAE/C,UAAU;IAqBV,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,IAAI;CAKvD"}

package/lib/browser/design.contribution.js

@@ -4,14 +4,26 @@ exports.DesignCoreContribution = void 0;
 const tslib_1 = require("tslib");
 const di_1 = require("@opensumi/di");
 const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const constants_1 = require("@opensumi/ide-core-browser/lib/layout/constants");
 const ide_core_common_1 = require("@opensumi/ide-core-common");
 const ide_file_service_1 = require("@opensumi/ide-file-service");
 const file_service_client_1 = require("@opensumi/ide-file-service/lib/browser/file-service-client");
+const layout_config_1 = require("./layout/layout-config");
 const tabbar_view_1 = require("./layout/tabbar.view");
 const file_system_provider_1 = require("./theme/file-system.provider");
 let DesignCoreContribution = class DesignCoreContribution {
-    async initialize() {
+    initialize() {
+        const { useMenubarView } = this.designLayoutConfig;
         this.fileSystem.registerProvider(ide_core_common_1.Schemes.design, this.designThemeFileSystemProvider);
+        let layoutConfig = this.appConfig.layoutConfig;
+        if (useMenubarView) {
+            this.layoutViewSize.setMenubarHeight(48);
+            layoutConfig = Object.assign(Object.assign({}, layoutConfig), layout_config_1.DesignMenubarLayoutConfig);
+        }
+        this.layoutViewSize.setEditorTabsHeight(36);
+        this.layoutViewSize.setStatusBarHeight(36);
+        this.layoutViewSize.setAccordionHeaderSizeHeight(36);
+        this.appConfig.layoutConfig = layoutConfig;
     }
     registerRenderer(registry) {
         registry.registerSlotRenderer(ide_core_browser_1.SlotLocation.left, tabbar_view_1.DesignLeftTabRenderer);
@@ -27,6 +39,18 @@ tslib_1.__decorate([
     (0, di_1.Autowired)(),
     tslib_1.__metadata("design:type", file_system_provider_1.DesignThemeFileSystemProvider)
 ], DesignCoreContribution.prototype, "designThemeFileSystemProvider", void 0);
+tslib_1.__decorate([
+    (0, di_1.Autowired)(ide_core_browser_1.AppConfig),
+    tslib_1.__metadata("design:type", Object)
+], DesignCoreContribution.prototype, "appConfig", void 0);
+tslib_1.__decorate([
+    (0, di_1.Autowired)(constants_1.LayoutViewSizeConfig),
+    tslib_1.__metadata("design:type", constants_1.LayoutViewSizeConfig)
+], DesignCoreContribution.prototype, "layoutViewSize", void 0);
+tslib_1.__decorate([
+    (0, di_1.Autowired)(constants_1.DesignLayoutConfig),
+    tslib_1.__metadata("design:type", constants_1.DesignLayoutConfig)
+], DesignCoreContribution.prototype, "designLayoutConfig", void 0);
 DesignCoreContribution = tslib_1.__decorate([
     (0, di_1.Injectable)(),
     (0, ide_core_browser_1.Domain)(ide_core_browser_1.ClientAppContribution, ide_core_browser_1.SlotRendererContribution)

package/lib/browser/design.contribution.js.map

@@ -1 +1 @@
-{"version":3,"file":"design.contribution.js","sourceRoot":"","sources":["../../src/browser/design.contribution.ts"],"names":[],"mappings":";;;;AAAA,qCAAqD;AACrD,iEAMoC;AACpC,+DAAoD;AACpD,iEAAgE;AAChE,oGAA+F;AAE/F,sDAA8G;AAC9G,uEAA6E;AAItE,IAAM,sBAAsB,GAA5B,MAAM,sBAAsB;IAOjC,KAAK,CAAC,UAAU;QACd,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,yBAAO,CAAC,MAAM,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;IACvF,CAAC;IAED,gBAAgB,CAAC,QAA8B;QAC7C,QAAQ,CAAC,oBAAoB,CAAC,+BAAY,CAAC,IAAI,EAAE,mCAAqB,CAAC,CAAC;QACxE,QAAQ,CAAC,oBAAoB,CAAC,+BAAY,CAAC,MAAM,EAAE,qCAAuB,CAAC,CAAC;QAC5E,QAAQ,CAAC,oBAAoB,CAAC,+BAAY,CAAC,KAAK,EAAE,oCAAsB,CAAC,CAAC;IAC5E,CAAC;CACF,CAAA;AAfC;IAAC,IAAA,cAAS,EAAC,qCAAkB,CAAC;sCACC,uCAAiB;0DAAC;AAEjD;IAAC,IAAA,cAAS,GAAE;sCACoC,oDAA6B;6EAAC;AALnE,sBAAsB;IAFlC,IAAA,eAAU,GAAE;IACZ,IAAA,yBAAM,EAAC,wCAAqB,EAAE,2CAAwB,CAAC;GAC3C,sBAAsB,CAgBlC;AAhBY,wDAAsB"}
+{"version":3,"file":"design.contribution.js","sourceRoot":"","sources":["../../src/browser/design.contribution.ts"],"names":[],"mappings":";;;;AAAA,qCAAqD;AACrD,iEAOoC;AACpC,+EAA2G;AAC3G,+DAAoD;AACpD,iEAAgE;AAChE,oGAA+F;AAE/F,0DAAmE;AACnE,sDAA8G;AAC9G,uEAA6E;AAItE,IAAM,sBAAsB,GAA5B,MAAM,sBAAsB;IAgBjC,UAAU;QACR,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAEnD,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,yBAAO,CAAC,MAAM,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;QACrF,IAAI,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;QAE/C,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;YACzC,YAAY,mCACP,YAAY,GACZ,yCAAyB,CAC7B,CAAC;SACH;QAED,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;QAC3C,IAAI,CAAC,cAAc,CAAC,4BAA4B,CAAC,EAAE,CAAC,CAAC;QAErD,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,YAAY,CAAC;IAC7C,CAAC;IAED,gBAAgB,CAAC,QAA8B;QAC7C,QAAQ,CAAC,oBAAoB,CAAC,+BAAY,CAAC,IAAI,EAAE,mCAAqB,CAAC,CAAC;QACxE,QAAQ,CAAC,oBAAoB,CAAC,+BAAY,CAAC,MAAM,EAAE,qCAAuB,CAAC,CAAC;QAC5E,QAAQ,CAAC,oBAAoB,CAAC,+BAAY,CAAC,KAAK,EAAE,oCAAsB,CAAC,CAAC;IAC5E,CAAC;CACF,CAAA;AAzCC;IAAC,IAAA,cAAS,EAAC,qCAAkB,CAAC;sCACC,uCAAiB;0DAAC;AAEjD;IAAC,IAAA,cAAS,GAAE;sCACoC,oDAA6B;6EAAC;AAE9E;IAAC,IAAA,cAAS,EAAC,4BAAS,CAAC;;yDACQ;AAE7B;IAAC,IAAA,cAAS,EAAC,gCAAoB,CAAC;sCACR,gCAAoB;8DAAC;AAE7C;IAAC,IAAA,cAAS,EAAC,8BAAkB,CAAC;sCACF,8BAAkB;kEAAC;AAdpC,sBAAsB;IAFlC,IAAA,eAAU,GAAE;IACZ,IAAA,yBAAM,EAAC,wCAAqB,EAAE,2CAAwB,CAAC;GAC3C,sBAAsB,CA0ClC;AA1CY,wDAAsB"}

package/lib/browser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/browser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,QAAQ,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAO,MAAM,4BAA4B,CAAC;AAuBhE,qBACa,YAAa,SAAQ,aAAa;IAC7C,SAAS,EAAE,QAAQ,EAAE,CAA4B;IAEjD,WAAW,aAAc,QAAQ,UAkE/B;CACH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/browser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,QAAQ,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAO,MAAM,4BAA4B,CAAC;AAwBhE,qBACa,YAAa,SAAQ,aAAa;IAC7C,SAAS,EAAE,QAAQ,EAAE,CAAuD;IAE5E,WAAW,aAAc,QAAQ,UAkE/B;CACH"}

package/lib/browser/index.js

@@ -12,6 +12,7 @@ const browser_2 = require("@opensumi/ide-editor/lib/browser");
 const ide_theme_1 = require("@opensumi/ide-theme");
 const theme_store_1 = require("@opensumi/ide-theme/lib/browser/theme-store");
 const design_contribution_1 = require("./design.contribution");
+const menu_bar_contribution_1 = require("./menu-bar/menu-bar.contribution");
 const editor_tab_service_1 = require("./override/editor-tab.service");
 const menu_service_1 = require("./override/menu.service");
 const split_panel_service_2 = require("./override/split-panel.service");
@@ -21,7 +22,7 @@ const light_theme_1 = tslib_1.__importDefault(require("./theme/light-theme"));
 let DesignModule = class DesignModule extends ide_core_browser_1.BrowserModule {
     constructor() {
         super(...arguments);
-        this.providers = [design_contribution_1.DesignCoreContribution];
+        this.providers = [menu_bar_contribution_1.DesignMenuBarContribution, design_contribution_1.DesignCoreContribution];
         this.preferences = (injector) => {
             import('./style/global.less');
             const designStyleService = injector.get(design_1.IDesignStyleService);

package/lib/browser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/browser/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/browser/index.ts"],"names":[],"mappings":"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"}

package/lib/browser/layout/layout-config.d.ts

@@ -0,0 +1,6 @@
+export declare const DesignMenubarLayoutConfig: {
+    [x: string]: {
+        modules: string[];
+    };
+};
+//# sourceMappingURL=layout-config.d.ts.map

package/lib/browser/layout/layout-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-config.d.ts","sourceRoot":"","sources":["../../../src/browser/layout/layout-config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,yBAAyB;;;;CAIrC,CAAC"}

package/lib/browser/layout/layout-config.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignMenubarLayoutConfig = void 0;
+const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const common_1 = require("../../common");
+exports.DesignMenubarLayoutConfig = {
+    [ide_core_browser_1.SlotLocation.top]: {
+        modules: [common_1.DESIGN_MENUBAR_CONTAINER_VIEW_ID],
+    },
+};
+//# sourceMappingURL=layout-config.js.map

package/lib/browser/layout/layout-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-config.js","sourceRoot":"","sources":["../../../src/browser/layout/layout-config.ts"],"names":[],"mappings":";;;AAAA,iEAA0D;AAE1D,yCAAgE;AAEnD,QAAA,yBAAyB,GAAG;IACvC,CAAC,+BAAY,CAAC,GAAG,CAAC,EAAE;QAClB,OAAO,EAAE,CAAC,yCAAgC,CAAC;KAC5C;CACF,CAAC"}

package/lib/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/lib/browser/menu-bar/menu-bar.contribution.d.ts

@@ -0,0 +1,8 @@
+import { ComponentContribution, ComponentRegistry, Disposable } from '@opensumi/ide-core-browser';
+export declare class DesignMenuBarContribution extends Disposable implements ComponentContribution {
+    private readonly menubarStore;
+    private readonly menuRegistry;
+    constructor();
+    registerComponent(registry: ComponentRegistry): void;
+}
+//# sourceMappingURL=menu-bar.contribution.d.ts.map

package/lib/browser/menu-bar/menu-bar.contribution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-bar.contribution.d.ts","sourceRoot":"","sources":["../../../src/browser/menu-bar/menu-bar.contribution.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,UAAU,EAAU,MAAM,4BAA4B,CAAC;AAQ1G,qBACa,yBAA0B,SAAQ,UAAW,YAAW,qBAAqB;IAExF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IAG5C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgB;;IA0B7C,iBAAiB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI;CAMrD"}

package/lib/browser/menu-bar/menu-bar.contribution.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignMenuBarContribution = void 0;
+const tslib_1 = require("tslib");
+const di_1 = require("@opensumi/di");
+const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const next_1 = require("@opensumi/ide-core-browser/lib/menu/next");
+const menu_bar_store_1 = require("@opensumi/ide-menu-bar/lib/browser/menu-bar.store");
+const common_1 = require("../../common");
+const menu_bar_view_1 = require("./menu-bar.view");
+let DesignMenuBarContribution = class DesignMenuBarContribution extends ide_core_browser_1.Disposable {
+    constructor() {
+        super();
+        this.menubarStore.unregisterMenusBarByCompact(next_1.MenuId.DesignMenuBarTopExtra);
+        this.addDispose(this.menubarStore.onDidMenuBarChange((menubarItems) => {
+            this.menuRegistry.registerMenuItems(next_1.MenuId.DesignMenuBarTopExtra, menubarItems.map((item) => ({
+                label: item.label,
+                submenu: item.id,
+                iconClass: item.iconClass,
+                group: '1_navigation',
+                order: 100,
+            })));
+        }));
+    }
+    registerComponent(registry) {
+        registry.register(common_1.DESIGN_MENUBAR_CONTAINER_VIEW_ID, {
+            component: menu_bar_view_1.DesignMenuBarView,
+            id: common_1.DESIGN_MENUBAR_CONTAINER_VIEW_ID,
+        });
+    }
+};
+tslib_1.__decorate([
+    (0, di_1.Autowired)(menu_bar_store_1.MenubarStore),
+    tslib_1.__metadata("design:type", menu_bar_store_1.MenubarStore)
+], DesignMenuBarContribution.prototype, "menubarStore", void 0);
+tslib_1.__decorate([
+    (0, di_1.Autowired)(next_1.IMenuRegistry),
+    tslib_1.__metadata("design:type", next_1.IMenuRegistry)
+], DesignMenuBarContribution.prototype, "menuRegistry", void 0);
+DesignMenuBarContribution = tslib_1.__decorate([
+    (0, ide_core_browser_1.Domain)(ide_core_browser_1.ComponentContribution),
+    tslib_1.__metadata("design:paramtypes", [])
+], DesignMenuBarContribution);
+exports.DesignMenuBarContribution = DesignMenuBarContribution;
+//# sourceMappingURL=menu-bar.contribution.js.map

package/lib/browser/menu-bar/menu-bar.contribution.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-bar.contribution.js","sourceRoot":"","sources":["../../../src/browser/menu-bar/menu-bar.contribution.tsx"],"names":[],"mappings":";;;;AAAA,qCAAyC;AACzC,iEAA0G;AAC1G,mEAA6G;AAC7G,sFAAiF;AAEjF,yCAAgE;AAEhE,mDAAoD;AAG7C,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,6BAAU;IAOvD;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,YAAY,CAAC,2BAA2B,CAAC,aAAM,CAAC,qBAAqB,CAAC,CAAC;QAE5E,IAAI,CAAC,UAAU,CACb,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,YAA4B,EAAE,EAAE;YACpE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CACjC,aAAM,CAAC,qBAAqB,EAC5B,YAAY,CAAC,GAAG,CACd,CAAC,IAAkB,EAAE,EAAE,CACrB,CAAC;gBACC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,EAAE;gBAChB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,KAAK,EAAE,cAAc;gBACrB,KAAK,EAAE,GAAG;aACM,CAAA,CACrB,CACF,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;IAED,iBAAiB,CAAC,QAA2B;QAC3C,QAAQ,CAAC,QAAQ,CAAC,yCAAgC,EAAE;YAClD,SAAS,EAAE,iCAAiB;YAC5B,EAAE,EAAE,yCAAgC;SACrC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AApCC;IAAC,IAAA,cAAS,EAAC,6BAAY,CAAC;sCACO,6BAAY;+DAAC;AAE5C;IAAC,IAAA,cAAS,EAAC,oBAAa,CAAC;sCACM,oBAAa;+DAAC;AALlC,yBAAyB;IADrC,IAAA,yBAAM,EAAC,wCAAqB,CAAC;;GACjB,yBAAyB,CAqCrC;AArCY,8DAAyB"}

package/lib/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/lib/browser/menu-bar/menu-bar.view.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const DesignMenuBarView: () => React.JSX.Element;
+//# sourceMappingURL=menu-bar.view.d.ts.map

package/lib/browser/menu-bar/menu-bar.view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-bar.view.d.ts","sourceRoot":"","sources":["../../../src/browser/menu-bar/menu-bar.view.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwE/B,eAAO,MAAM,iBAAiB,yBA8D7B,CAAC"}

package/lib/browser/menu-bar/menu-bar.view.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignMenuBarView = void 0;
+const tslib_1 = require("tslib");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const components_1 = require("@opensumi/ide-core-browser/lib/components");
+const ai_native_1 = require("@opensumi/ide-core-browser/lib/components/ai-native");
+const constants_1 = require("@opensumi/ide-core-browser/lib/layout/constants");
+const view_id_1 = require("@opensumi/ide-core-browser/lib/layout/view-id");
+const next_1 = require("@opensumi/ide-core-browser/lib/menu/next");
+const ide_core_common_1 = require("@opensumi/ide-core-common");
+const ide_main_layout_1 = require("@opensumi/ide-main-layout");
+const common_1 = require("../../common");
+const logo_svg_1 = tslib_1.__importDefault(require("./logo.svg"));
+const menu_bar_module_less_1 = tslib_1.__importDefault(require("./menu-bar.module.less"));
+const DesignMenuBarRender = () => {
+    const contextmenuService = (0, ide_core_browser_1.useInjectable)(next_1.AbstractContextMenuService);
+    const designLayoutConfig = (0, ide_core_browser_1.useInjectable)(constants_1.DesignLayoutConfig);
+    const ctxMenuRenderer = (0, ide_core_browser_1.useInjectable)(next_1.ICtxMenuRenderer);
+    const iconRef = React.useRef(null);
+    const [anchor, setAnchor] = React.useState(undefined);
+    React.useEffect(() => {
+        if (iconRef.current) {
+            const rect = iconRef.current.getBoundingClientRect();
+            const { x, y, height } = rect;
+            setAnchor({
+                x,
+                y: y + height + 4,
+            });
+        }
+    }, []);
+    const extraTopMenus = React.useMemo(() => contextmenuService.createMenu({
+        id: next_1.MenuId.DesignMenuBarTopExtra,
+    }), [contextmenuService]);
+    const handleClick = React.useCallback(() => {
+        if (!anchor) {
+            return;
+        }
+        const menuNodes = extraTopMenus.getMergedMenuNodes();
+        extraTopMenus.dispose();
+        ctxMenuRenderer.show({
+            anchor,
+            menuNodes,
+        });
+    }, [anchor, extraTopMenus]);
+    const logo = React.useMemo(() => designLayoutConfig.menubarLogo || logo_svg_1.default, [designLayoutConfig.menubarLogo]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ai_native_1.EnhanceIcon, { wrapperClassName: menu_bar_module_less_1.default.ai_enhance_menu, ref: iconRef, onClick: handleClick },
+            React.createElement("div", { className: menu_bar_module_less_1.default.logo_container },
+                React.createElement("img", { className: menu_bar_module_less_1.default.extra_top_icon, src: logo, alt: '' }),
+                React.createElement(components_1.Icon, { className: (0, classnames_1.default)((0, ide_core_browser_1.getIcon)('down'), menu_bar_module_less_1.default.caret_icon) })))));
+};
+const DesignMenuBarView = () => {
+    const commandService = (0, ide_core_browser_1.useInjectable)(ide_core_common_1.CommandService);
+    const mainLayoutService = (0, ide_core_browser_1.useInjectable)(ide_main_layout_1.IMainLayoutService);
+    const aiNativeConfigService = (0, ide_core_browser_1.useInjectable)(ide_core_browser_1.AINativeConfigService);
+    const [isLeftPanelVisible, setIsVisiablePanel] = React.useState(false);
+    React.useEffect(() => {
+        requestAnimationFrame(() => {
+            setIsVisiablePanel(isVisiable());
+        });
+        const tabbarService = mainLayoutService.getTabbarService(ide_core_browser_1.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(ide_core_browser_1.SlotLocation.left);
+        return !!tabbarService.currentContainerId;
+    }, [mainLayoutService]);
+    return (React.createElement("div", { id: view_id_1.VIEW_CONTAINERS.MENUBAR, className: menu_bar_module_less_1.default.menu_bar_view, style: { height: aiNativeConfigService.layoutViewSize.menubarHeight } },
+        React.createElement("div", { className: menu_bar_module_less_1.default.container },
+            React.createElement("div", { className: menu_bar_module_less_1.default.left },
+                React.createElement(ai_native_1.EnhanceIcon, { wrapperClassName: menu_bar_module_less_1.default.enhance_menu, icon: isLeftPanelVisible ? 'left-nav-open' : 'left-nav-close', onClick: handleLeftMenuVisiable }),
+                React.createElement("span", { className: menu_bar_module_less_1.default.dividing }),
+                React.createElement("div", { className: menu_bar_module_less_1.default.top_menus_bar },
+                    React.createElement(DesignMenuBarRender, null)),
+                React.createElement(ide_core_browser_1.SlotRenderer, { slot: common_1.DESIGN_MENU_BAR_LEFT, flex: 1, overflow: 'initial' })),
+            React.createElement("div", { className: menu_bar_module_less_1.default.right },
+                React.createElement(ide_core_browser_1.SlotRenderer, { slot: common_1.DESIGN_MENU_BAR_RIGHT, flex: 1, overflow: 'initial' })))));
+};
+exports.DesignMenuBarView = DesignMenuBarView;
+//# sourceMappingURL=menu-bar.view.js.map

package/lib/browser/menu-bar/menu-bar.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-bar.view.js","sourceRoot":"","sources":["../../../src/browser/menu-bar/menu-bar.view.tsx"],"names":[],"mappings":";;;;AAAA,oEAA6B;AAC7B,qDAA+B;AAE/B,iEAAuH;AACvH,0EAAiE;AACjE,mFAAkF;AAClF,+EAAqF;AACrF,2EAAgF;AAChF,mEAAgH;AAChH,+DAA2D;AAC3D,+DAA+D;AAE/D,yCAA2E;AAE3E,kEAAsC;AACtC,0FAA4C;AAE5C,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAC/B,MAAM,kBAAkB,GAAG,IAAA,gCAAa,EAA6B,iCAA0B,CAAC,CAAC;IACjG,MAAM,kBAAkB,GAAG,IAAA,gCAAa,EAAqB,8BAAkB,CAAC,CAAC;IACjF,MAAM,eAAe,GAAG,IAAA,gCAAa,EAAmB,uBAAgB,CAAC,CAAC;IAE1E,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAuC,SAAS,CAAC,CAAC;IAE5F,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACrD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YAE9B,SAAS,CAAC;gBACR,CAAC;gBACD,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,CAAC;aAClB,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CACH,kBAAkB,CAAC,UAAU,CAAC;QAC5B,EAAE,EAAE,aAAM,CAAC,qBAAqB;KACjC,CAAC,EACJ,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QAED,MAAM,SAAS,GAAG,aAAa,CAAC,kBAAkB,EAAE,CAAC;QACrD,aAAa,CAAC,OAAO,EAAE,CAAC;QAExB,eAAe,CAAC,IAAI,CAAC;YACnB,MAAM;YACN,SAAS;SACV,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5B,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,WAAW,IAAI,kBAAY,EAAE,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;IAEnH,OAAO,CACL;QACE,oBAAC,uBAAW,IAAC,gBAAgB,EAAE,8BAAM,CAAC,eAAe,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW;YACvF,6BAAK,SAAS,EAAE,8BAAM,CAAC,cAAc;gBACnC,6BAAK,SAAS,EAAE,8BAAM,CAAC,cAAc,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAC,EAAE,GAAG;gBAC3D,oBAAC,iBAAI,IAAC,SAAS,EAAE,IAAA,oBAAG,EAAC,IAAA,0BAAO,EAAC,MAAM,CAAC,EAAE,8BAAM,CAAC,UAAU,CAAC,GAAI,CACxD,CACM,CACb,CACJ,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,cAAc,GAAG,IAAA,gCAAa,EAAiB,gCAAc,CAAC,CAAC;IACrE,MAAM,iBAAiB,GAAG,IAAA,gCAAa,EAAqB,oCAAkB,CAAC,CAAC;IAChF,MAAM,qBAAqB,GAAG,IAAA,gCAAa,EAAwB,wCAAqB,CAAC,CAAC;IAC1F,MAAM,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEhF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,qBAAqB,CAAC,GAAG,EAAE;YACzB,kBAAkB,CAAC,UAAU,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,+BAAY,CAAC,IAAI,CAAC,CAAC;QAC5E,MAAM,SAAS,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE;YAC5E,IAAI,UAAU,IAAI,CAAC,SAAS,EAAE;gBAC5B,kBAAkB,CAAC,KAAK,CAAC,CAAC;aAC3B;iBAAM,IAAI,CAAC,UAAU,IAAI,SAAS,EAAE;gBACnC,kBAAkB,CAAC,IAAI,CAAC,CAAC;aAC1B;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,EAAE,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACpD,cAAc,CAAC,cAAc,CAAC,+BAA+B,CAAC,CAAC;QAC/D,qBAAqB,CAAC,GAAG,EAAE;YACzB,kBAAkB,CAAC,UAAU,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,MAAM,aAAa,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,+BAAY,CAAC,IAAI,CAAC,CAAC;QAC5E,OAAO,CAAC,CAAC,aAAa,CAAC,kBAAkB,CAAC;IAC5C,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,6BACE,EAAE,EAAE,yBAAe,CAAC,OAAO,EAC3B,SAAS,EAAE,8BAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,EAAE,MAAM,EAAE,qBAAqB,CAAC,cAAc,CAAC,aAAa,EAAE;QAErE,6BAAK,SAAS,EAAE,8BAAM,CAAC,SAAS;YAC9B,6BAAK,SAAS,EAAE,8BAAM,CAAC,IAAI;gBACzB,oBAAC,uBAAW,IACV,gBAAgB,EAAE,8BAAM,CAAC,YAAY,EACrC,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,EAC7D,OAAO,EAAE,sBAAsB,GAC/B;gBACF,8BAAM,SAAS,EAAE,8BAAM,CAAC,QAAQ,GAAS;gBACzC,6BAAK,SAAS,EAAE,8BAAM,CAAC,aAAa;oBAClC,oBAAC,mBAAmB,OAAG,CACnB;gBACN,oBAAC,+BAAY,IAAC,IAAI,EAAE,6BAAoB,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAI,CACtE;YACN,6BAAK,SAAS,EAAE,8BAAM,CAAC,KAAK;gBAC1B,oBAAC,+BAAY,IAAC,IAAI,EAAE,8BAAqB,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAI,CACvE,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AA9DW,QAAA,iBAAiB,qBA8D5B"}

package/lib/browser/override/override.module.less

@@ -97,6 +97,9 @@
   }
 
   &:not(.disabled):hover {
+    background: var(--menu-selectionBackground) !important;
+    color: var(--menu-selectionForeground) !important;
+
     .shortcut {
       color: var(--menu-selectionForeground);
     }

package/lib/browser/style/design.module.less

@@ -310,10 +310,6 @@ div[class*='design-editor_tab_block_container__'] {
 * ---------------- Override editor panel bottom tabbar style ---------------------
 */
 :global(.design_bottom_slot) {
-  .design-tab_bar {
-    height: 100%;
-  }
-
   .design-tab_panel {
     &::before {
       content: none;
@@ -327,7 +323,6 @@ div[class*='design-editor_tab_block_container__'] {
 
   .design-bottom_bar_container {
     width: 100%;
-    height: 32px;
   }
 
   .design-variable_repl_bar {
@@ -541,6 +536,9 @@ div[class*='design-editor_tab_block_container__'] {
 
     &::-webkit-scrollbar {
       width: 4px;
+      &:hover {
+        width: 10px;
+      }
     }
   }
 
@@ -580,8 +578,8 @@ div[class*='design-editor_tab_block_container__'] {
       }
 
       &:hover {
-        color: var(--design-text-hoverForeground);
-        background-color: var(--activityBar-activeBorder);
+        background-color: var(--badge-background);
+        color: var(--badge-foreground);
         border-radius: 4px;
         opacity: 1;
       }
@@ -717,5 +715,9 @@ div[class*='design-editor_tab_block_container__'] {
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
+
+    &:hover {
+      width: 10px;
+    }
   }
 }

package/lib/browser/style/global.less

@@ -35,6 +35,9 @@
   &::-webkit-scrollbar {
     width: 4px;
     margin: 20px;
+    &:hover {
+      width: 10px;
+    }
   }
 }
 
@@ -146,9 +149,15 @@ html {
 
     .vertical {
       width: 4px !important;
+      &:hover {
+        width: 10px !important;
+      }
 
       .slider {
         width: 4px !important;
+        &:hover {
+          width: 10px !important;
+        }
         left: unset !important;
         right: 0;
         border-radius: 4px !important;
@@ -157,10 +166,15 @@ html {
 
     .horizontal {
       height: 4px !important;
-
+      &:hover {
+        height: 10px !important;
+      }
       .slider {
         border-radius: 4px !important;
         height: 4px !important;
+        &:hover {
+          height: 10px !important;
+        }
       }
     }
   }
@@ -175,6 +189,9 @@ html {
 .xterm .xterm-viewport {
   &::-webkit-scrollbar {
     width: 4px;
+    &:hover {
+      width: 10px;
+    }
   }
 }
 
@@ -280,6 +297,9 @@ html {
 
       &::-webkit-scrollbar {
         width: 4px !important;
+        &:hover {
+          width: 10px;
+        }
       }
     }
   }
@@ -295,7 +315,7 @@ html {
 }
 
 /**
-* layout 面板 
+* layout 面板
 **/
 .design-slot_resize_horizontal {
   width: 2px;

package/lib/common/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const DESIGN_MENUBAR_CONTAINER_VIEW_ID = "design_menubar";
+export declare const DESIGN_MENU_BAR_RIGHT = "design_menu_bar_right";
+export declare const DESIGN_MENU_BAR_LEFT = "design_menu_bar_left";
+//# sourceMappingURL=constants.d.ts.map

package/lib/common/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/common/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gCAAgC,mBAAmB,CAAC;AACjE,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAC7D,eAAO,MAAM,oBAAoB,yBAAyB,CAAC"}

package/lib/common/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DESIGN_MENU_BAR_LEFT = exports.DESIGN_MENU_BAR_RIGHT = exports.DESIGN_MENUBAR_CONTAINER_VIEW_ID = void 0;
+exports.DESIGN_MENUBAR_CONTAINER_VIEW_ID = 'design_menubar';
+exports.DESIGN_MENU_BAR_RIGHT = 'design_menu_bar_right';
+exports.DESIGN_MENU_BAR_LEFT = 'design_menu_bar_left';
+//# sourceMappingURL=constants.js.map

package/lib/common/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/common/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,gCAAgC,GAAG,gBAAgB,CAAC;AACpD,QAAA,qBAAqB,GAAG,uBAAuB,CAAC;AAChD,QAAA,oBAAoB,GAAG,sBAAsB,CAAC"}

package/lib/common/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+//# sourceMappingURL=index.d.ts.map

package/lib/common/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/lib/common/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./constants"), exports);
+//# sourceMappingURL=index.js.map

package/lib/common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B"}

package/lib/index.d.ts

@@ -1 +1,2 @@
+export * from './common';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/lib/index.js

@@ -1,2 +1,5 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./common"), exports);
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-design",
-  "version": "2.27.3-rc-1714116491.0",
+  "version": "2.27.3-rc-1714367598.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-1714367598.0",
+    "@opensumi/ide-core-node": "2.27.3-rc-1714367598.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-1714367598.0",
+    "@opensumi/ide-dev-tool": "2.27.3-rc-1714367598.0"
   },
-  "gitHead": "b3e24dca0866b038e5b93fb14119f30e947f4710"
+  "gitHead": "ec0fc77694997fa304e16d988886fbe2a0f15768"
 }

package/src/browser/design.contribution.ts

@@ -1,15 +1,18 @@
 import { Autowired, Injectable } from '@opensumi/di';
 import {
+  AppConfig,
   ClientAppContribution,
   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 { DesignMenubarLayoutConfig } from './layout/layout-config';
 import { DesignBottomTabRenderer, DesignLeftTabRenderer, DesignRightTabRenderer } from './layout/tabbar.view';
 import { DesignThemeFileSystemProvider } from './theme/file-system.provider';
 
@@ -22,8 +25,34 @@ 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);
+    let layoutConfig = this.appConfig.layoutConfig;
+
+    if (useMenubarView) {
+      this.layoutViewSize.setMenubarHeight(48);
+      layoutConfig = {
+        ...layoutConfig,
+        ...DesignMenubarLayoutConfig,
+      };
+    }
+
+    this.layoutViewSize.setEditorTabsHeight(36);
+    this.layoutViewSize.setStatusBarHeight(36);
+    this.layoutViewSize.setAccordionHeaderSizeHeight(36);
+
+    this.appConfig.layoutConfig = layoutConfig;
   }
 
   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/layout/layout-config.ts

@@ -0,0 +1,9 @@
+import { SlotLocation } from '@opensumi/ide-core-browser';
+
+import { DESIGN_MENUBAR_CONTAINER_VIEW_ID } from '../../common';
+
+export const DesignMenubarLayoutConfig = {
+  [SlotLocation.top]: {
+    modules: [DESIGN_MENUBAR_CONTAINER_VIEW_ID],
+  },
+};

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,136 @@
+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(() => {
+    if (iconRef.current) {
+      const rect = iconRef.current.getBoundingClientRect();
+      const { x, y, height } = rect;
+
+      setAnchor({
+        x,
+        y: y + height + 4,
+      });
+    }
+  }, []);
+
+  const extraTopMenus = React.useMemo(
+    () =>
+      contextmenuService.createMenu({
+        id: MenuId.DesignMenuBarTopExtra,
+      }),
+    [contextmenuService],
+  );
+
+  const handleClick = React.useCallback(() => {
+    if (!anchor) {
+      return;
+    }
+
+    const menuNodes = extraTopMenus.getMergedMenuNodes();
+    extraTopMenus.dispose();
+
+    ctxMenuRenderer.show({
+      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/override.module.less

@@ -97,6 +97,9 @@
   }
 
   &:not(.disabled):hover {
+    background: var(--menu-selectionBackground) !important;
+    color: var(--menu-selectionForeground) !important;
+
     .shortcut {
       color: var(--menu-selectionForeground);
     }

package/src/browser/style/design.module.less

@@ -310,10 +310,6 @@ div[class*='design-editor_tab_block_container__'] {
 * ---------------- Override editor panel bottom tabbar style ---------------------
 */
 :global(.design_bottom_slot) {
-  .design-tab_bar {
-    height: 100%;
-  }
-
   .design-tab_panel {
     &::before {
       content: none;
@@ -327,7 +323,6 @@ div[class*='design-editor_tab_block_container__'] {
 
   .design-bottom_bar_container {
     width: 100%;
-    height: 32px;
   }
 
   .design-variable_repl_bar {
@@ -541,6 +536,9 @@ div[class*='design-editor_tab_block_container__'] {
 
     &::-webkit-scrollbar {
       width: 4px;
+      &:hover {
+        width: 10px;
+      }
     }
   }
 
@@ -580,8 +578,8 @@ div[class*='design-editor_tab_block_container__'] {
       }
 
       &:hover {
-        color: var(--design-text-hoverForeground);
-        background-color: var(--activityBar-activeBorder);
+        background-color: var(--badge-background);
+        color: var(--badge-foreground);
         border-radius: 4px;
         opacity: 1;
       }
@@ -717,5 +715,9 @@ div[class*='design-editor_tab_block_container__'] {
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
+
+    &:hover {
+      width: 10px;
+    }
   }
 }

package/src/browser/style/global.less

@@ -35,6 +35,9 @@
   &::-webkit-scrollbar {
     width: 4px;
     margin: 20px;
+    &:hover {
+      width: 10px;
+    }
   }
 }
 
@@ -146,9 +149,15 @@ html {
 
     .vertical {
       width: 4px !important;
+      &:hover {
+        width: 10px !important;
+      }
 
       .slider {
         width: 4px !important;
+        &:hover {
+          width: 10px !important;
+        }
         left: unset !important;
         right: 0;
         border-radius: 4px !important;
@@ -157,10 +166,15 @@ html {
 
     .horizontal {
       height: 4px !important;
-
+      &:hover {
+        height: 10px !important;
+      }
       .slider {
         border-radius: 4px !important;
         height: 4px !important;
+        &:hover {
+          height: 10px !important;
+        }
       }
     }
   }
@@ -175,6 +189,9 @@ html {
 .xterm .xterm-viewport {
   &::-webkit-scrollbar {
     width: 4px;
+    &:hover {
+      width: 10px;
+    }
   }
 }
 
@@ -280,6 +297,9 @@ html {
 
       &::-webkit-scrollbar {
         width: 4px !important;
+        &:hover {
+          width: 10px;
+        }
       }
     }
   }
@@ -295,7 +315,7 @@ html {
 }
 
 /**
-* layout 面板 
+* layout 面板
 **/
 .design-slot_resize_horizontal {
   width: 2px;

package/src/common/constants.ts

@@ -0,0 +1,3 @@
+export const DESIGN_MENUBAR_CONTAINER_VIEW_ID = 'design_menubar';
+export const DESIGN_MENU_BAR_RIGHT = 'design_menu_bar_right';
+export const DESIGN_MENU_BAR_LEFT = 'design_menu_bar_left';

package/src/common/index.ts

@@ -0,0 +1 @@
+export * from './constants';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './common';