perf(menu): optimize layout menu

src/components/Breadcrumb/Breadcrumb.vue

@@ -35,9 +35,11 @@
   @import (reference) '../../design/index.less';
 
   .breadcrumb {
+    .unselect();
+
     height: @header-height;
     padding-right: 20px;
-    font-size: 14px;
+    font-size: 13px;
     line-height: @header-height;
     // line-height: 1;
 

src/components/Icon/index.tsx

@@ -72,7 +72,7 @@ export default defineComponent({
     onMounted(update);
 
     return () => (
-      <div ref={elRef} class={[attrs.class, 'app-iconify']} style={unref(wrapStyleRef)} />
+      <div ref={elRef} class={[attrs.class, 'app-iconify anticon']} style={unref(wrapStyleRef)} />
     );
   },
 });

src/components/Menu/src/BasicMenu.tsx

@@ -2,21 +2,27 @@ import type { MenuState } from './types';
 import type { Menu as MenuType } from '/@/router/types';
 
 import { computed, defineComponent, unref, reactive, toRef, watch, onMounted, ref } from 'vue';
-import { basicProps } from './props';
 import { Menu } from 'ant-design-vue';
-import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
-import { menuStore } from '/@/store/modules/menu';
-import { getSlot } from '/@/utils/helper/tsxHelper';
-// import { ScrollContainer } from '/@/components/Container/index';
 import SearchInput from './SearchInput.vue';
-import './index.less';
-import { menuHasChildren } from './helper';
 import MenuContent from './MenuContent';
+
+import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+
+import { menuStore } from '/@/store/modules/menu';
+import { appStore } from '/@/store/modules/app';
+
 import { useSearchInput } from './useSearchInput';
 import { useOpenKeys } from './useOpenKeys';
 import { useRouter } from 'vue-router';
+
 import { isFunction } from '/@/utils/is';
+import { getSlot } from '/@/utils/helper/tsxHelper';
+import { menuHasChildren } from './helper';
+
 import { getCurrentParentPath } from '/@/router/menus';
+
+import { basicProps } from './props';
+import './index.less';
 export default defineComponent({
   name: 'BasicMenu',
   props: basicProps,
@@ -69,7 +75,7 @@ export default defineComponent({
       return {
         height: `calc(100% - ${offset - 10}px)`,
         position: 'relative',
-        overflow: 'auto',
+        overflowY: 'auto',
       };
     });
 
@@ -77,26 +83,26 @@ export default defineComponent({
     const transparentMenuClass = computed(() => {
       const { type } = props;
       const { mode } = menuState;
-      if (
-        [MenuTypeEnum.MIX, MenuTypeEnum.SIDEBAR].includes(type) &&
-        mode !== MenuModeEnum.HORIZONTAL
-      ) {
-        return `basic-menu-bg__sidebar`;
-      }
+      const cls: string[] = [];
       if (
         (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) ||
         props.appendClass
       ) {
-        return `basic-menu-bg__sidebar-hor`;
+        cls.push('basic-menu__sidebar-hor');
       }
-      return '';
+
+      if (!props.isTop && props.isAppMenu && appStore.getProjectConfig.menuSetting.split) {
+        cls.push('basic-menu__second');
+      }
+      return cls;
     });
 
     watch(
       () => currentRoute.value.name,
       (name: string) => {
-        name !== 'Redirect' && handleMenuChange();
-        getParentPath();
+        if (name === 'Redirect') return;
+        handleMenuChange();
+        props.isTop && appStore.getProjectConfig.menuSetting.split && getParentPath();
       }
     );
 
@@ -149,22 +155,14 @@ export default defineComponent({
     }
 
     const showTitle = computed(() => {
-      if (props.isTop) return true;
-      if (!props.isAppMenu) return true;
-      if (!props.collapsedShowTitle) {
-        return !menuStore.getCollapsedState;
-      }
-      return true;
+      return props.collapsedShowTitle && menuStore.getCollapsedState;
     });
 
     // render menu item
     function renderMenuItem(menuList?: MenuType[], index = 1) {
-      if (!menuList) {
-        return;
-      }
+      if (!menuList) return;
       const { appendClass } = props;
       const levelCls = `basic-menu-item__level${index} ${menuState.theme} `;
-
       return menuList.map((menu) => {
         if (!menu) {
           return null;
@@ -233,7 +231,7 @@ export default defineComponent({
           class={[
             'basic-menu',
             props.collapsedShowTitle && 'collapsed-show-title',
-            unref(transparentMenuClass),
+            ...unref(transparentMenuClass),
           ]}
           {...inlineCollapsedObj}
         >
@@ -247,6 +245,7 @@ export default defineComponent({
     onMounted(async () => {
       getParentPath();
     });
+
     return () => {
       const { getCollapsedState } = menuStore;
       const { mode } = props;
@@ -262,9 +261,8 @@ export default defineComponent({
             onClick={handleInputClick}
             collapsed={getCollapsedState}
           />
-          <section style={unref(getMenuWrapStyle)} class="basic-menu__wrap">
+          <section style={unref(getMenuWrapStyle)} class="basic-menu__content">
             {renderMenu()}
-            {/* <ScrollContainer>{() => renderMenu()}</ScrollContainer> */}
           </section>
         </section>
       );

src/components/Menu/src/MenuContent.tsx

@@ -11,14 +11,17 @@ export default defineComponent({
       type: String as PropType<string>,
       default: '',
     },
+
     item: {
       type: Object as PropType<MenuType>,
       default: null,
     },
+
     showTitle: {
       type: Boolean as PropType<boolean>,
       default: true,
     },
+
     level: {
       type: Number as PropType<number>,
       default: 0,
@@ -36,26 +39,27 @@ export default defineComponent({
       if (!props.item) {
         return null;
       }
-      const { showTitle, level } = props;
+      const { showTitle } = props;
       const { name, icon } = props.item;
       const searchValue = props.searchValue || '';
       const index = name.indexOf(searchValue);
 
       const beforeStr = name.substr(0, index);
       const afterStr = name.substr(index + searchValue.length);
-      const show = level === 1 ? showTitle : true;
-      return [
-        renderIcon(icon!),
-        index > -1 && searchValue ? (
-          <span class={!show && 'hidden'}>
-            {beforeStr}
-            <span class={`basic-menu__keyword`}>{searchValue}</span>
-            {afterStr}
-          </span>
-        ) : (
-          <span class={!show && 'hidden'}>{name}</span>
-        ),
-      ];
+      return (
+        <>
+          {renderIcon(icon!)}
+          {index > -1 && searchValue ? (
+            <span class={showTitle ? 'show-title' : ''}>
+              {beforeStr}
+              <span class={`basic-menu__keyword`}>{searchValue}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span class={[showTitle ? 'show-title' : '']}>{name}</span>
+          )}
+        </>
+      );
     };
   },
 });

src/components/Menu/src/SearchInput.vue

@@ -5,7 +5,6 @@
       class="menu-search-input__search"
       allowClear
       @change="handleChange"
-      :disabled="collapsed"
     />
   </section>
 </template>
@@ -20,7 +19,7 @@
   export default defineComponent({
     name: 'BasicMenuSearchInput',
     props: {
-      // 是否展开,用于左侧菜单
+      // Whether to expand, used in the left menu
       collapsed: {
         type: Boolean as PropType<boolean>,
         default: true,
@@ -30,28 +29,27 @@
       },
     },
     setup(props, { emit }) {
+      const [debounceEmitChange] = useDebounce(emitChange, 200);
+
       function emitChange(value?: string): void {
         emit('change', value);
       }
-      const [debounceEmitChange] = useDebounce(emitChange, 200);
-      /**
-       * @description: 搜索
-       */
+
       function handleChange(e: ChangeEvent): void {
         const { collapsed } = props;
-        if (collapsed) {
-          return;
-        }
+        if (collapsed) return;
         debounceEmitChange(e.target.value);
       }
-      /**
-       * @description: 点击时间
-       */
+
       function handleClick(): void {
         emit('click');
       }
+
       const searchClass = computed(() => {
-        return props.theme ? `menu-search-input__search--${props.theme}` : '';
+        const cls: string[] = [];
+        cls.push(props.theme ? `menu-search-input__search--${props.theme}` : '');
+        // cls.push(props.collapsed ? 'hide-search-icon' : '');
+        return cls;
       });
 
       return { handleClick, searchClass, handleChange };
@@ -66,26 +64,24 @@
   @icon-color: #c0c4cc;
 
   .menu-search-input {
-    margin: 12px 9px;
+    margin: 12px 8px;
+
+    // &.hide-search-icon {
+    //   .ant-input,
+    //   .ant-input-suffix {
+    //     opacity: 0;
+    //   }
+    // }
 
     &__search--dark {
       .ant-input-affix-wrapper,
       .ant-input {
         .set-bg();
-
-        &:hover,
-        &:focus {
-          .hide-outline();
-        }
       }
 
       .ant-input-search-icon,
       .ant-input-clear-icon {
-        color: rgba(255, 255, 255, 0.6) !important;
-      }
-
-      .ant-input-clear-icon {
-        color: rgba(255, 255, 255, 0.3) !important;
+        color: rgba(255, 255, 255, 0.4) !important;
       }
     }
 
@@ -94,13 +90,7 @@
       .ant-input {
         color: @text-color-base;
         background: #fff;
-        // border: 0;
         outline: none;
-
-        &:hover,
-        &:focus {
-          .hide-outline();
-        }
       }
 
       .ant-input-search-icon {

src/components/Menu/src/index.less

@@ -2,14 +2,11 @@
 
 .active-style() {
   color: @white;
-  // background: @primary-color !important;
   background: linear-gradient(
     118deg,
     rgba(@primary-color, 0.8),
     rgba(@primary-color, 1)
   ) !important;
-  // border-radius: 2px;
-  box-shadow: 0 0 4px 1px rgba(@primary-color, 0.7);
 }
 
 .active-menu-style() {
@@ -22,50 +19,52 @@
 .basic-menu {
   width: 100%;
 
+  &-wrap {
+    height: 100%;
+  }
+
+  //  collapsed show title start
+  .show-title {
+    max-width: unset !important;
+    opacity: 1 !important;
+  }
+
   &.collapsed-show-title.ant-menu-inline-collapsed {
     .basic-menu-item__level1 {
       padding: 2px 0;
     }
 
+    & > li[role='menuitem']:not(.ant-menu-submenu),
     & > li > .ant-menu-submenu-title {
       display: flex;
-      margin-top: 12px;
+      margin-top: 10px;
       font-size: 12px;
       flex-direction: column;
-      line-height: 24px;
       align-items: center;
     }
 
-    & > li[role='menuitem']:not(.ant-menu-submenu) {
-      display: flex;
-      margin-top: 12px;
-      font-size: 12px;
-      line-height: 2;
-      align-items: center;
-      flex-direction: column;
-
-      span {
-        margin-top: 6px;
-      }
+    & > li > .ant-menu-submenu-title {
+      line-height: 24px;
     }
   }
 
-  &__wrap {
+  // collapsed show title end
+
+  // scrollbar -s tart
+  &__content {
     /* 滚动槽 */
     &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
+      width: 4px;
+      height: 4px;
     }
 
-    // TODO 滚动条样式-待修改
     &::-webkit-scrollbar-track {
       background: rgba(0, 0, 0, 0);
     }
 
-    /* 滚动条滑块 */
     &::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.3);
-      border-radius: 4px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 3px;
       box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
     }
 
@@ -73,29 +72,10 @@
       background: @border-color-dark;
     }
   }
+  // scrollbar  end
 
-  .ant-menu-submenu:first-of-type {
-    margin-top: 4px;
-  }
-
-  .ant-menu-submenu-title {
-    margin-top: 0;
-  }
-
-  &-wrap {
-    height: 100%;
-  }
-
-  .menu-item-icon {
-    vertical-align: text-top;
-  }
-  // 透明化背景
-  &-bg__sidebar {
-    background-color: transparent;
-  }
-
-  &-bg__sidebar-hor {
-    overflow: hidden;
+  &__sidebar-hor {
+    // overflow: hidden;
 
     &.ant-menu-horizontal {
       display: flex;
@@ -107,6 +87,13 @@
       }
 
       &.ant-menu-light {
+        .basic-menu-item__level1 {
+          &.top-active-menu {
+            color: @primary-color;
+            border-bottom: 3px solid @primary-color;
+          }
+        }
+
         .ant-menu-item {
           &.basic-menu-item__level1 {
             height: @header-height;
@@ -128,7 +115,6 @@
           border-bottom: 3px solid @primary-color;
         }
 
-        // 有子菜单
         .ant-menu-submenu {
           &:hover {
             border-bottom: 3px solid @primary-color;
@@ -144,30 +130,44 @@
       &.ant-menu-dark {
         background: transparent;
 
+        .ant-menu-submenu:hover,
+        .ant-menu-item-open,
+        .ant-menu-submenu-open,
+        .ant-menu-item-selected,
+        .ant-menu-submenu-selected,
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+        .ant-menu-submenu-active,
+        .ant-menu-submenu-title:hover {
+          color: #fff;
+          background: @top-menu-active-bg-color !important;
+        }
+
         .ant-menu-item:hover,
         .ant-menu-item-active,
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
         .ant-menu-submenu-active,
         .ant-menu-submenu-title:hover {
           background: @top-menu-active-bg-color;
-          // border-radius: 6px 6px 0 0;
         }
 
         .basic-menu-item__level1 {
+          background: transparent;
+
+          &.top-active-menu {
+            color: @white;
+            background: @top-menu-active-bg-color;
+            border-radius: 2px 2px 0 0;
+          }
+
           &.ant-menu-item-selected,
           &.ant-menu-submenu-selected {
-            background: @top-menu-active-bg-color;
-            // border-radius: 6px 6px 0 0;
+            background: @top-menu-active-bg-color !important;
           }
         }
 
-        .ant-menu-item {
-          &.basic-menu-item__level1 {
-            height: @header-height;
-            line-height: @header-height;
-          }
-        }
-        // 有子菜单
+        .ant-menu-item,
         .ant-menu-submenu {
           &.basic-menu-item__level1,
           .ant-menu-submenu-title {
@@ -178,24 +178,27 @@
       }
     }
   }
-  // 重置菜单项行高
-  .ant-menu-item,
-  .ant-menu-sub.ant-menu-inline > .ant-menu-item,
-  .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
-    height: @app-menu-item-height;
-    margin: 0;
-    line-height: @app-menu-item-height;
+
+  .ant-menu-item {
+    transition: unset;
   }
 
-  &.ant-menu-dark:not(.basic-menu-bg__sidebar-hor) {
-    .active-menu-style();
+  &.ant-menu-dark:not(.basic-menu__sidebar-hor):not(.basic-menu__second) {
+    // Reset menu item row height
+    .ant-menu-item,
+    .ant-menu-sub.ant-menu-inline > .ant-menu-item,
+    .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
+      height: @app-menu-item-height;
+      margin: 0;
+      line-height: @app-menu-item-height;
+    }
   }
 
   // 层级样式
-  &.ant-menu-dark {
-    // .ant-menu-item {
-    //   transition: unset;
-    // }
+  &.ant-menu-dark:not(.basic-menu__sidebar-hor) {
+    overflow-x: hidden;
+    background: @first-menu-item-dark-bg-color;
+    .active-menu-style();
 
     .ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1,
     .ant-menu-submenu-selected.basic-menu-menu-item__level1 {
@@ -203,76 +206,44 @@
     }
 
     .basic-menu-item__level1 {
-      margin-bottom: 0;
+      background-color: @first-menu-item-dark-bg-color;
 
       > .ant-menu-sub > li {
         background-color: @sub-menu-item-dark-bg-color;
       }
-
-      &.top-active-menu {
-        color: @white;
-        background: @top-menu-active-bg-color;
-        border-radius: 6px 6px 0 0;
-      }
     }
 
-    // 2级菜单
-
     .basic-menu-item__level2:not(.ant-menu-item-selected),
     .ant-menu-sub {
       background-color: @sub-menu-item-dark-bg-color;
     }
 
-    .basic-menu-item__level2 {
-      margin-bottom: 0;
-    }
-    // 3级菜单
-    .basic-menu-item__level3,
-    .basic-menu__popup {
-      margin-bottom: 0;
-    }
-
     .basic-menu-item__level3:not(.ant-menu-item-selected) {
       background-color: @children-menu-item-dark-bg-color;
     }
 
     .ant-menu-submenu-title {
-      // line-height: @app-menu-item-height;
       display: flex;
       height: @app-menu-item-height;
-      margin: 0;
+      // margin: 0;
       align-items: center;
     }
 
     &.ant-menu-inline-collapsed {
-      .ant-menu-item-selected {
-        background: unset !important;
-        box-shadow: none;
-      }
-
       .ant-menu-submenu-selected,
       .ant-menu-item-selected {
-        .active-style();
+        background: darken(@first-menu-item-dark-bg-color, 6%) !important;
       }
     }
   }
 
-  &.ant-menu-light {
+  &.ant-menu-light:not(.basic-menu__sidebar-hor) {
     overflow-x: hidden;
     border-right: none;
 
-    .basic-menu-item__level1 {
-      &.top-active-menu {
-        color: @primary-color;
-        border-bottom: 3px solid @primary-color;
-      }
-    }
-
-    &:not(.ant-menu-horizontal) {
-      .ant-menu-item-selected {
-        background: fade(@primary-color, 18%);
-      }
-    }
+    // .ant-menu-item-selected {
+    //   background: fade(@primary-color, 18%);
+    // }
 
     .ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1,
     .ant-menu-submenu-selected.basic-menu-menu-item__level1 {
@@ -289,6 +260,20 @@
   .ant-menu-item.ant-menu-item-selected {
     position: relative;
   }
+
+  &.basic-menu__second.ant-menu-inline-collapsed:not(.basic-menu__sidebar-hor) {
+    // Reset menu item row height
+    .ant-menu-item,
+    .ant-menu-sub.ant-menu-inline > .ant-menu-item,
+    .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
+      display: flex;
+      height: @app-menu-item-height * 1.4;
+      padding: 6px 0 !important;
+      margin: 0;
+      line-height: @app-menu-item-height;
+      align-items: center;
+    }
+  }
 }
 
 // 触发器样式
@@ -322,3 +307,24 @@
     .active-menu-style();
   }
 }
+
+.hide-title {
+  .ant-menu-inline-collapsed > .ant-menu-item,
+  .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
+  .ant-menu-inline-collapsed
+    > .ant-menu-item-group
+    > .ant-menu-item-group-list
+    > .ant-menu-submenu
+    > .ant-menu-submenu-title,
+  .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
+    padding-right: 20px !important;
+    padding-left: 20px !important;
+  }
+
+  .ant-menu-inline-collapsed {
+    .basic-menu-item__level1 {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}