perf(menu): optimize layout 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]}>
                       {() => (
                         <>