perf: perf menu

src/layouts/default/header/LayoutHeader.tsx

@@ -80,13 +80,7 @@ export default defineComponent({
     const { refreshPage } = useTabs();
     const { t } = useI18n();
 
-    const {
-      getShowTopMenu,
-      getShowHeaderTrigger,
-      getSplit,
-      getTopMenuAlign,
-      getIsHorizontal,
-    } = useMenuSetting();
+    const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsHorizontal } = useMenuSetting();
 
     const { getShowLocale } = useLocaleSetting();
     const { getUseErrorHandle, getShowBreadCrumbIcon } = useRootSetting();
@@ -184,7 +178,7 @@ export default defineComponent({
               {/* <div class={[`layout-header__menu `]}> */}
               <LayoutMenu
                 isHorizontal={true}
-                class={`justify-${unref(getTopMenuAlign)}`}
+                // class={`justify-${unref(getTopMenuAlign)}`}
                 theme={unref(getHeaderTheme)}
                 splitType={unref(getSplitType)}
                 menuMode={unref(getMenuMode)}

src/layouts/default/header/LayoutMultipleHeader.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
 
     const injectValue = useLayoutContext();
 
-    const { getCalcContentWidth } = useMenuSetting();
+    const { getCalcContentWidth, getSplit } = useMenuSetting();
 
     const {
       getFixed,
@@ -56,7 +56,8 @@ export default defineComponent({
       (): CSSProperties => {
         const style: CSSProperties = {};
         if (unref(getFixed)) {
-          style.width = unref(injectValue.isMobile) ? '100%' : unref(getCalcContentWidth);
+          style.width =
+            unref(injectValue.isMobile) || unref(getSplit) ? '100%' : unref(getCalcContentWidth);
         }
         if (unref(getShowFullHeaderRef)) {
           style.top = `${unref(fullHeaderHeightRef)}px`;

src/layouts/default/menu/index.tsx

@@ -1,21 +1,21 @@
 import './index.less';
 
 import { PropType, toRef } from 'vue';
-import type { Menu } from '/@/router/types';
 
 import { computed, defineComponent, unref } from 'vue';
-import { BasicMenu } from '/@/components/Menu/index';
+import { BasicMenu } from '/@/components/Menu';
 import { AppLogo } from '/@/components/Application';
 
 import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
 
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 
 import { useGo } from '/@/hooks/web/usePage';
 import { useSplitMenu } from './useLayoutMenu';
 import { openWindow } from '/@/utils';
 import { propTypes } from '/@/utils/propTypes';
+import { isUrl } from '/@/utils/is';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 
 export default defineComponent({
   name: 'LayoutMenu',
@@ -38,56 +38,46 @@ export default defineComponent({
     const go = useGo();
 
     const {
-      setMenuSetting,
       getMenuMode,
       getMenuType,
       getCollapsedShowTitle,
-      getIsSidebarType,
       getMenuTheme,
       getCollapsed,
       getAccordion,
+      getIsSidebarType,
     } = useMenuSetting();
-
     const { getShowLogo } = useRootSetting();
 
-    const { flatMenusRef, menusRef } = useSplitMenu(toRef(props, 'splitType'));
-
-    const showLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType));
+    const { menusRef } = useSplitMenu(toRef(props, 'splitType'));
 
     const getComputedMenuMode = computed(() => props.menuMode || unref(getMenuMode));
 
     const getComputedMenuTheme = computed(() => props.theme || unref(getMenuTheme));
-
+    const showLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType));
     const appendClass = computed(() => props.splitType === MenuSplitTyeEnum.TOP);
-
     /**
      * click menu
      * @param menu
      */
-    function handleMenuClick(menu: Menu) {
-      go(menu.path);
+    function handleMenuClick(path: string) {
+      go(path);
     }
 
     /**
      * before click menu
      * @param menu
      */
-    async function beforeMenuClickFn(menu: Menu) {
-      const { meta: { externalLink } = {} } = menu;
-
-      if (externalLink) {
-        openWindow(externalLink);
-        return false;
+    async function beforeMenuClickFn(path: string) {
+      if (!isUrl(path)) {
+        return true;
       }
-      return true;
-    }
-
-    function handleClickSearchInput() {
-      unref(getCollapsed) && setMenuSetting({ collapsed: false });
+      openWindow(path);
+      return false;
     }
 
     function renderHeader() {
       if (!unref(showLogo)) return null;
+
       return (
         <AppLogo
           showTitle={!unref(getCollapsed)}
@@ -100,20 +90,17 @@ export default defineComponent({
     return () => {
       return (
         <BasicMenu
-          class="layout-menu"
           beforeClickFn={beforeMenuClickFn}
           isHorizontal={props.isHorizontal}
-          appendClass={unref(appendClass)}
           type={unref(getMenuType)}
           mode={unref(getComputedMenuMode)}
           collapsedShowTitle={unref(getCollapsedShowTitle)}
           theme={unref(getComputedMenuTheme)}
-          showLogo={unref(showLogo)}
           items={unref(menusRef)}
-          flatItems={unref(flatMenusRef)}
           accordion={unref(getAccordion)}
           onMenuClick={handleMenuClick}
-          onClickSearchInput={handleClickSearchInput}
+          appendClass={unref(appendClass)}
+          showLogo={unref(showLogo)}
         >
           {{
             header: () => renderHeader(),

src/layouts/default/menu/useLayoutMenu.ts

@@ -8,24 +8,12 @@ import { MenuSplitTyeEnum } from '/@/enums/menuEnum';
 import { useThrottle } from '/@/hooks/core/useThrottle';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 
-import {
-  getChildrenMenus,
-  getCurrentParentPath,
-  getFlatChildrenMenus,
-  getFlatMenus,
-  getMenus,
-  getShallowMenus,
-} from '/@/router/menus';
+import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus';
 import { permissionStore } from '/@/store/modules/permission';
-// import { useI18n } from '/@/hooks/web/useI18n';
-// import { cloneDeep } from 'lodash-es';
 
-// const { t } = useI18n();
 export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
   // Menu array
   const menusRef = ref<Menu[]>([]);
-  // flat menu array
-  const flatMenusRef = ref<Menu[]>([]);
 
   const { currentRoute } = useRouter();
 
@@ -45,14 +33,6 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
     return unref(splitType) === MenuSplitTyeEnum.NONE || !unref(getSplit);
   });
 
-  // const getI18nFlatMenus = computed(() => {
-  //   return setI18nName(flatMenusRef.value, true, false);
-  // });
-
-  // const getI18nMenus = computed(() => {
-  //   return setI18nName(menusRef.value, true, true);
-  // });
-
   watch(
     [() => unref(currentRoute).path, () => unref(splitType)],
     async ([path]: [string, MenuSplitTyeEnum]) => {
@@ -83,20 +63,6 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
     genMenus();
   });
 
-  // function setI18nName(list: Menu[], clone = false, deep = true) {
-  //   const menus = clone ? cloneDeep(list) : list;
-  //   const arr: Menu[] = [];
-  //   menus.forEach((item) => {
-  //     if (!item.name.includes('.')) return;
-  //     item.name = t(item.name);
-
-  //     if (item.children && deep) {
-  //       setI18nName(item.children, false, deep);
-  //     }
-  //   });
-  //   return menus;
-  // }
-
   // Handle left menu split
   async function handleSplitLeftMenu(parentPath: string) {
     if (unref(splitLeft)) return;
@@ -105,14 +71,11 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
     const children = await getChildrenMenus(parentPath);
     if (!children) {
       setMenuSetting({ hidden: false });
-      flatMenusRef.value = [];
       menusRef.value = [];
       return;
     }
 
-    const flatChildren = await getFlatChildrenMenus(children);
     setMenuSetting({ hidden: true });
-    flatMenusRef.value = flatChildren;
     menusRef.value = children;
   }
 
@@ -120,7 +83,6 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
   async function genMenus() {
     // normal mode
     if (unref(normalType)) {
-      flatMenusRef.value = await getFlatMenus();
       menusRef.value = await getMenus();
       return;
     }
@@ -129,11 +91,10 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
     if (unref(spiltTop)) {
       const shallowMenus = await getShallowMenus();
 
-      flatMenusRef.value = shallowMenus;
       menusRef.value = shallowMenus;
       return;
     }
   }
 
-  return { flatMenusRef, menusRef };
+  return { menusRef };
 }

src/layouts/default/sider/index.less

@@ -12,10 +12,25 @@
 
   &.ant-layout-sider-dark {
     background: @sider-dark-bg-color;
+
+    .ant-layout-sider-trigger {
+      color: darken(@white, 25%);
+      background: @trigger-dark-bg-color;
+
+      &:hover {
+        color: @white;
+        background: @trigger-dark-hover-bg-color;
+      }
+    }
   }
 
   &:not(.ant-layout-sider-dark) {
     box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+    .ant-layout-sider-trigger {
+      color: @text-color-base;
+      border-top: 1px solid @border-color-light;
+    }
   }
 
   .ant-layout-sider-zero-width-trigger {
@@ -43,9 +58,9 @@
       box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
     }
   }
-}
 
-.ant-layout-sider-trigger {
-  height: 36px;
-  line-height: 36px;
+  & .ant-layout-sider-trigger {
+    height: 36px;
+    line-height: 36px;
+  }
 }

src/layouts/default/sider/index.tsx

@@ -100,7 +100,7 @@ export default defineComponent({
           flex: `0 0 ${width}`,
           maxWidth: width,
           minWidth: width,
-          transition: 'all 0.2s',
+          transition: 'all 0.15s',
         };
       }
     );
@@ -126,7 +126,7 @@ export default defineComponent({
           )}
           <Layout.Sider
             ref={sideRef}
-            breakpoint="md"
+            breakpoint="lg"
             collapsible
             class={unref(getSiderClass)}
             style={unref(getSiderStyle)}