style: improve design style (#3466)

packages/ai-native/src/browser/ai-core.contribution.ts

@@ -26,13 +26,13 @@ import {
   AI_INLINE_COMPLETION_VISIBLE,
 } from '@opensumi/ide-core-browser/lib/ai-native/command';
 import { InlineChatIsVisible } from '@opensumi/ide-core-browser/lib/contextkey/ai-native';
+import { LayoutViewSizeConfig } from '@opensumi/ide-core-browser/lib/layout/constants';
 import {
   ChatFeatureRegistryToken,
   CommandService,
   InlineChatFeatureRegistryToken,
   RenameCandidatesProviderRegistryToken,
   ResolveConflictRegistryToken,
-  runWhenIdle,
 } from '@opensumi/ide-core-common';
 import { IEditor } from '@opensumi/ide-editor';
 import { BrowserEditorContribution, IEditorFeatureRegistry } from '@opensumi/ide-editor/lib/browser';
@@ -117,11 +117,11 @@ export class AINativeBrowserContribution
   initialize() {
     this.aiNativeConfigService.enableCapabilities();
 
-    const { supportsChatAssistant } = this.aiNativeConfigService.capabilities;
+    const { supportsChatAssistant, supportsOpenSumiDesign } = this.aiNativeConfigService.capabilities;
     const { useMenubarView } = this.aiNativeConfigService.layout;
 
     let layoutConfig = this.appConfig.layoutConfig;
-    let layoutViewSize = this.appConfig.layoutViewSize;
+    let layoutViewSize = this.appConfig.layoutViewSize as LayoutViewSizeConfig;
 
     if (supportsChatAssistant) {
       layoutConfig = {
@@ -131,17 +131,19 @@ export class AINativeBrowserContribution
     }
 
     if (useMenubarView) {
-      layoutViewSize = {
+      layoutViewSize.setMenubarHeight(48);
-        ...layoutViewSize,
-        menubarHeight: 48,
-      };
-
       layoutConfig = {
         ...layoutConfig,
         ...AIMenubarLayoutConfig,
       };
     }
 
+    if (supportsOpenSumiDesign) {
+      layoutViewSize.setEditorTabsHeight(36);
+      layoutViewSize.setStatusBarHeight(36);
+      layoutViewSize.setAccordionHeaderSizeHeight(36);
+    }
+
     this.appConfig.layoutConfig = layoutConfig;
     this.appConfig.layoutViewSize = layoutViewSize;
   }

packages/ai-native/src/browser/layout/menu-bar/menu-bar.module.less

@@ -43,19 +43,23 @@
           margin-left: 4px;
         }
 
-        .extra_top_icon {
+        .logo_container {
-          width: 16px;
+          display: flex;
-          height: 16px;
+          align-items: center;
-          background-image: url(./logo.svg);
-          background-repeat: no-repeat;
-          background-size: 100%;
 
-          &::before {
+          .extra_top_icon {
-            content: initial;
+            width: 16px;
-          }
+            height: 16px;
+            background-repeat: no-repeat;
+            background-size: 100%;
 
-          &:hover {
+            &::before {
-            background-color: transparent;
+              content: initial;
+            }
+
+            &:hover {
+              background-color: transparent;
+            }
           }
         }
       }

packages/ai-native/src/browser/layout/menu-bar/menu-bar.view.tsx

@@ -11,11 +11,13 @@ import { IMainLayoutService } from '@opensumi/ide-main-layout';
 
 import { AI_MENU_BAR_LEFT, AI_MENU_BAR_RIGHT } from '../layout-config';
 
+import opensumiLogo from './logo.svg';
 import styles from './menu-bar.module.less';
 
 const AIMenuBarRender = () => {
   const contextmenuService = useInjectable<AbstractContextMenuService>(AbstractContextMenuService);
   const ctxMenuRenderer = useInjectable<ICtxMenuRenderer>(ICtxMenuRenderer);
+  const aiNativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
 
   const iconRef = React.useRef<HTMLDivElement | null>(null);
   const [anchor, setAnchor] = React.useState<{ x: number; y: number } | undefined>(undefined);
@@ -54,15 +56,15 @@ const AIMenuBarRender = () => {
     });
   }, [anchor, extraTopMenus]);
 
+  const logo = React.useMemo(() => aiNativeConfigService.layout.menubarLogo || opensumiLogo, [aiNativeConfigService.layout.menubarLogo]);
+
   return (
     <>
-      <EnhanceIcon
+      <EnhanceIcon wrapperClassName={styles.ai_enhance_menu} ref={iconRef} onClick={handleClick}>
-        wrapperClassName={styles.ai_enhance_menu}
+        <div className={styles.logo_container}>
-        className={styles.extra_top_icon}
+          <img className={styles.extra_top_icon} src={logo} alt='' />
-        ref={iconRef}
+          <Icon className={cls(getIcon('down'), styles.caret_icon)} />
-        onClick={handleClick}
+        </div>
-      >
-        <Icon className={cls(getIcon('down'), styles.caret_icon)} />
       </EnhanceIcon>
     </>
   );

packages/core-browser/src/ai-native/ai-config.service.ts

@@ -23,6 +23,7 @@ export class AINativeConfigService {
   private internalLayout: Required<IAINativeLayout> = {
     useMergeRightWithLeftPanel: false,
     useMenubarView: false,
+    menubarLogo: '',
   };
 
   private setDefaultCapabilities(value: boolean): void {

packages/core-browser/src/layout/constants.ts

@@ -5,6 +5,7 @@ export interface ILayoutViewSize {
   titleBarHeight: number;
   panelTitleBarHeight: number;
   statusBarHeight: number;
+  accordionHeaderSizeHeight: number;
 }
 
 export const DEFAULT_LAYOUT_VIEW_SIZE: ILayoutViewSize = {
@@ -14,27 +15,77 @@ export const DEFAULT_LAYOUT_VIEW_SIZE: ILayoutViewSize = {
   titleBarHeight: 22,
   panelTitleBarHeight: 35,
   statusBarHeight: 24,
+  accordionHeaderSizeHeight: 24,
 };
 
 export class LayoutViewSizeConfig implements ILayoutViewSize {
-  constructor(private readonly layoutViewSize?: Partial<ILayoutViewSize>) {}
+  #menubarHeight: number;
+  #editorTabsHeight: number;
+  #bigSurTitleBarHeight: number;
+  #titleBarHeight: number;
+  #panelTitleBarHeight: number;
+  #statusBarHeight: number;
+  #accordionHeaderSizeHeight: number;
+
+  constructor(private readonly layoutViewSize?: Partial<ILayoutViewSize>) {
+    this.#menubarHeight = this.layoutViewSize?.menubarHeight || DEFAULT_LAYOUT_VIEW_SIZE.menubarHeight;
+    this.#editorTabsHeight = this.layoutViewSize?.editorTabsHeight || DEFAULT_LAYOUT_VIEW_SIZE.editorTabsHeight;
+    this.#bigSurTitleBarHeight =
+      this.layoutViewSize?.bigSurTitleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.bigSurTitleBarHeight;
+    this.#titleBarHeight = this.layoutViewSize?.titleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.titleBarHeight;
+    this.#panelTitleBarHeight =
+      this.layoutViewSize?.panelTitleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.panelTitleBarHeight;
+    this.#statusBarHeight = this.layoutViewSize?.statusBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.statusBarHeight;
+    this.#accordionHeaderSizeHeight =
+      this.layoutViewSize?.accordionHeaderSizeHeight || DEFAULT_LAYOUT_VIEW_SIZE.accordionHeaderSizeHeight;
+  }
 
   get menubarHeight(): number {
-    return this.layoutViewSize?.menubarHeight || DEFAULT_LAYOUT_VIEW_SIZE.menubarHeight;
+    return this.#menubarHeight;
   }
+  setMenubarHeight(value: number) {
+    this.#menubarHeight = value;
+  }
+
   get editorTabsHeight(): number {
-    return this.layoutViewSize?.editorTabsHeight || DEFAULT_LAYOUT_VIEW_SIZE.editorTabsHeight;
+    return this.#editorTabsHeight;
   }
+  setEditorTabsHeight(value: number) {
+    this.#editorTabsHeight = value;
+  }
+
   get bigSurTitleBarHeight(): number {
-    return this.layoutViewSize?.bigSurTitleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.bigSurTitleBarHeight;
+    return this.#bigSurTitleBarHeight;
   }
+  setBigSurTitleBarHeight(value: number) {
+    this.#bigSurTitleBarHeight = value;
+  }
+
   get titleBarHeight(): number {
-    return this.layoutViewSize?.titleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.titleBarHeight;
+    return this.#titleBarHeight;
   }
+  setTitleBarHeight(value: number) {
+    this.#titleBarHeight = value;
+  }
+
   get panelTitleBarHeight(): number {
-    return this.layoutViewSize?.panelTitleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.panelTitleBarHeight;
+    return this.#panelTitleBarHeight;
   }
+  setPanelTitleBarHeight(value: number) {
+    this.#panelTitleBarHeight = value;
+  }
+
   get statusBarHeight(): number {
-    return this.layoutViewSize?.statusBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.statusBarHeight;
+    return this.#statusBarHeight;
+  }
+  setStatusBarHeight(value: number) {
+    this.#statusBarHeight = value;
+  }
+
+  get accordionHeaderSizeHeight(): number {
+    return this.#accordionHeaderSizeHeight;
+  }
+  setAccordionHeaderSizeHeight(value: number) {
+    this.#accordionHeaderSizeHeight = value;
   }
 }

packages/core-common/src/types/ai-native/index.ts

@@ -47,6 +47,8 @@ export interface IAINativeLayout {
   useMergeRightWithLeftPanel?: boolean;
   // Use ai manubar view
   useMenubarView?: boolean;
+  // set menubar logo
+  menubarLogo?: string;
 }
 
 export interface IAINativeConfig {

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

@@ -47,9 +47,10 @@
 .design-kt_workbench_editor {
   height: 100%;
   width: 100%;
-  background-color: var(--design-container-background);
+  background: none;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
+  border-top: none;
   overflow: hidden;
 }
 

packages/main-layout/src/browser/accordion/accordion.view.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { View, useInjectable } from '@opensumi/ide-core-browser';
+import { AppConfig, View, useInjectable } from '@opensumi/ide-core-browser';
 import { EDirection, Layout, SplitPanel } from '@opensumi/ide-core-browser/lib/components';
 import { replaceLocalizePlaceholder } from '@opensumi/ide-core-common';
 
@@ -32,6 +32,10 @@ export const AccordionContainer = observer(
     style,
   }: AccordionContainerProps) => {
     const accordionService: AccordionService = useInjectable(AccordionServiceFactory)(containerId, noRestore);
+    const appConfig: AppConfig = useInjectable(AppConfig);
+
+    const layoutHeaderSize = useMemo(() => headerSize || appConfig.layoutViewSize?.accordionHeaderSizeHeight!, [headerSize]);
+
     React.useEffect(() => {
       // 解决视图在渲染前注册的问题
       if (!views.length) {
@@ -42,7 +46,7 @@ export const AccordionContainer = observer(
       }
     }, [views]);
     React.useEffect(() => {
-      accordionService.initConfig({ headerSize, minSize });
+      accordionService.initConfig({ headerSize: layoutHeaderSize, minSize });
     }, []);
 
     const allCollapsed = !accordionService.visibleViews.find((view) => {

typings/style/index.d.ts

@@ -1,2 +1,3 @@
 declare module '*.less';
 declare module '*.css';
+declare module '*.svg';