perf(menu): optimize layout menu

CHANGELOG.zh_CN.md

+## Wip
+
+### ⚡ Performance Improvements
+
+- 菜单性能继续优化
+
+### 🎫 Chores
+
+- 删除菜单背景图
+
 ## 2.0.0-rc.8 (2020-11-2)
 
 ### ✨ Features

package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.1",
-    "ant-design-vue": "^2.0.0-beta.12",
+    "ant-design-vue": "^2.0.0-beta.13",
     "apexcharts": "^3.22.0",
     "axios": "^0.21.0",
     "echarts": "^4.9.0",

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 {
-          &.ant-menu-item-selected,
-          &.ant-menu-submenu-selected {
+          background: transparent;
+
+          &.top-active-menu {
+            color: @white;
             background: @top-menu-active-bg-color;
-            // border-radius: 6px 6px 0 0;
+            border-radius: 2px 2px 0 0;
           }
-        }
 
-        .ant-menu-item {
-          &.basic-menu-item__level1 {
-            height: @header-height;
-            line-height: @header-height;
+          &.ant-menu-item-selected,
+          &.ant-menu-submenu-selected {
+            background: @top-menu-active-bg-color !important;
           }
         }
-        // 有子菜单
+
+        .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;
+    }
+  }
+}

src/design/ant/btn.less

 // button重置
 .ant-btn {
-  &.ant-btn-success:not(.ant-btn-link),
-  &.ant-btn-error:not(.ant-btn-link),
-  &.ant-btn-warning:not(.ant-btn-link),
-  &.ant-btn-primary:not(.ant-btn-link) {
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
-  }
+  // &.ant-btn-success:not(.ant-btn-link),
+  // &.ant-btn-error:not(.ant-btn-link),
+  // &.ant-btn-warning:not(.ant-btn-link),
+  // &.ant-btn-primary:not(.ant-btn-link) {
+  //   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
+  // }
 
   &-primary {
     color: @white;

src/design/color.less

@@ -67,9 +67,9 @@
 @first-menu-item-dark-bg-color: #273352;
 
 // 2级菜单黑暗背景色
-@sub-menu-item-dark-bg-color: #4f6088;
+@sub-menu-item-dark-bg-color: #314268;
 // 3级菜单黑暗背景色
-@children-menu-item-dark-bg-color: #314268;
+@children-menu-item-dark-bg-color: #4f6088;
 
 // top-menu
 @top-menu-active-bg-color: #273352;

src/design/public.less

 /* 滚动槽 */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 // TODO 滚动条样式-待修改
-// ::-webkit-scrollbar-track {
-//   // background: rgba(0, 0, 0, 0.06);
-//   // border-radius: 2px;
-//   // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
-// }
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+}
 
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
-  background: @disabled-color;
+  background: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
 }

src/design/var/index.less

@@ -12,7 +12,7 @@
 @logo-width: 36px;
 
 //
-@sider-drag-z-index: 200;
+@side-drag-z-index: 200;
 @page-loading-z-index: 10000;
 
 // app menu

src/layouts/default/LayoutBreadcrumb.tsx

@@ -75,7 +75,7 @@ export default defineComponent({
     }
 
     return () => (
-      <Breadcrumb class="layout-breadcrumb">
+      <Breadcrumb class={['layout-breadcrumb', unref(itemList).length === 0 ? 'hidden' : '']}>
         {() => (
           <TransitionGroup name="breadcrumb">
             {() => {

src/layouts/default/LayoutMenu.tsx

@@ -109,8 +109,22 @@ export default defineComponent({
       // 菜单分割模式-left
       if (splitType === MenuSplitTyeEnum.LEFT) {
         const children = await getChildrenMenus(parentPath);
-        if (!children) return;
+        if (!children) {
+          appStore.commitProjectConfigState({
+            menuSetting: {
+              show: false,
+            },
+          });
+          flatMenusRef.value = [];
+          menusRef.value = [];
+          return;
+        }
         const flatChildren = await getFlatChildrenMenus(children);
+        appStore.commitProjectConfigState({
+          menuSetting: {
+            show: true,
+          },
+        });
         flatMenusRef.value = flatChildren;
         menusRef.value = children;
       }

src/layouts/default/LayoutSideBar.tsx

@@ -6,10 +6,9 @@ import { menuStore } from '/@/store/modules/menu';
 
 // import darkMiniIMg from '/@/assets/images/sidebar/dark-mini.png';
 // import lightMiniImg from '/@/assets/images/sidebar/light-mini.png';
-import darkImg from '/@/assets/images/sidebar/dark.png';
 // import lightImg from '/@/assets/images/sidebar/light.png';
 import { appStore } from '/@/store/modules/app';
-import { MenuModeEnum, MenuSplitTyeEnum, MenuThemeEnum } from '/@/enums/menuEnum';
+import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
 import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
 import { useDebounce } from '/@/hooks/core/useDebounce';
 import LayoutMenu from './LayoutMenu';
@@ -34,26 +33,6 @@ export default defineComponent({
       return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
     });
 
-    // 根据展开状态设置背景图片
-    const getStyle = computed((): any => {
-      // const collapse = unref(collapseRef);
-
-      const theme = unref(getProjectConfigRef).menuSetting.theme;
-      if (theme === MenuThemeEnum.LIGHT) {
-        // bg = lightImg;
-        return {};
-      }
-      let bg = '';
-      if (theme === MenuThemeEnum.DARK) {
-        // bg = collapse ? darkMiniIMg : darkImg;
-        bg = darkImg;
-      }
-
-      return {
-        'background-image': `url(${bg})`,
-      };
-    });
-
     function onCollapseChange(val: boolean) {
       if (initRef.value) {
         collapseRef.value = val;
@@ -182,7 +161,6 @@ export default defineComponent({
           class="layout-sidebar"
           ref={sideRef}
           onBreakpoint={handleBreakpoint}
-          style={unref(getStyle)}
         >
           {{
             trigger: () => <SideBarTrigger />,

src/layouts/default/UserDropdown.tsx

@@ -26,14 +26,12 @@ export default defineComponent({
       return { realName, desc };
     });
 
-    /**
-     * @description: 退出登录
-     */
+    //  login out
     function handleLoginOut() {
       userStore.confirmLoginOut();
     }
 
-    // 打开文档
+    // open doc
     function openDoc() {
       window.open(DOC_URL, '__blank');
     }

src/layouts/default/index.less

@@ -66,6 +66,10 @@
   .layout-sidebar {
     background-size: 100% 100%;
 
+    &.ant-layout-sider-dark {
+      background: @first-menu-item-dark-bg-color;
+    }
+
     &:not(.ant-layout-sider-dark) {
       border-right: 1px solid @border-color-light;
     }
@@ -79,7 +83,7 @@
       position: absolute;
       top: 0;
       right: -2px;
-      z-index: @sider-drag-z-index;
+      z-index: @side-drag-z-index;
       width: 2px;
       height: 100%;
       cursor: col-resize;
@@ -378,17 +382,3 @@
   height: 36px;
   line-height: 36px;
 }
-
-.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;
-  }
-}

src/layouts/default/index.tsx

@@ -51,9 +51,9 @@ export default defineComponent({
 
     const showSideBarRef = computed(() => {
       const {
-        menuSetting: { show, mode },
+        menuSetting: { show, mode, split },
       } = unref(getProjectConfigRef);
-      return show && mode !== MenuModeEnum.HORIZONTAL && !unref(getFullContent);
+      return split || (show && mode !== MenuModeEnum.HORIZONTAL && !unref(getFullContent));
     });
 
     // Get project configuration
@@ -73,6 +73,7 @@ export default defineComponent({
         showSettingButton,
         multiTabsSetting: { show: showTabs },
         headerSetting: { fixed },
+        menuSetting: { split, show },
       } = unref(getProjectConfigRef);
 
       const fixedHeaderCls = fixed
@@ -80,6 +81,8 @@ export default defineComponent({
         : '';
 
       const { isLock } = getLockInfo;
+
+      const showSideBar = split ? show : true;
       return (
         <Layout class="default-layout relative">
           {() => (
@@ -95,7 +98,7 @@ export default defineComponent({
               <Layout>
                 {() => (
                   <>
-                    {unref(showSideBarRef) && <LayoutSideBar />}
+                    {unref(showSideBarRef) && <LayoutSideBar class={showSideBar ? '' : 'hidden'} />}
                     <Layout class={[`default-layout__content`, fixedHeaderCls]}>
                       {() => (
                         <>

src/layouts/page/index.tsx

@@ -38,14 +38,16 @@ export default defineComponent({
           <RouterView>
             {{
               default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
-                // 已经位于tab内的不再显示动画
+                // No longer show animations that are already in the tab
                 const name = route.meta.inTab ? 'fade' : null;
+
+                // TODO add key?
                 const Content = openCache ? (
                   <KeepAlive max={max} include={cacheTabs}>
-                    <Component {...route.params} />
+                    <Component />
                   </KeepAlive>
                 ) : (
-                  <Component {...route.params} />
+                  <Component />
                 );
                 return openRouterTransition ? (
                   <Transition

src/layouts/page/useTransition.ts

-import { onUnmounted } from 'vue';
 import { appStore } from '/@/store/modules/app';
+import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
 export function useTransition() {
   function handleAfterEnter() {
     const { openRouterTransition, openPageLoading } = appStore.getProjectConfig;
     if (!openRouterTransition || !openPageLoading) return;
-    // 路由切换动画结束之后关闭loading
+    // Close loading after the route switching animation ends
     appStore.setPageLoadingAction(false);
   }
 
-  onUnmounted(() => {
+  tryOnUnmounted(() => {
     handleAfterEnter();
     stop();
   });
+
   return {
     handleAfterEnter,
     on: {

src/settings/projectSetting.ts

@@ -49,7 +49,7 @@ const setting: ProjectConfig = {
     // 折叠菜单时候是否显示菜单名
     collapsedShowTitle: false,
     // 是否可拖拽
-    hasDrag: true,
+    hasDrag: false,
     // 是否显示
     show: true,
     // 是否显示搜索框

src/setup/ant-design-vue/index.ts

@@ -3,7 +3,7 @@
 import type { App } from 'vue';
 
 import { Form, Input, Row, Col } from 'ant-design-vue';
-import 'ant-design-vue/dist/antd.less';
+import 'ant-design-vue/dist/antd.css';
 
 import './spin';