diff --git a/.vscode/settings.json b/.vscode/settings.json
index 86ae573287efccc9088cd459944da05129d79aba..ac88043f21e4d31fb0dd9cdf34e534ffde0a6bee 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -129,6 +129,7 @@
     "qrcode",
     "sider",
     "pinia",
-    "sider"
+    "sider",
+    "nprogress"
   ]
 }
diff --git a/package.json b/package.json
index b4b71266e8921d32278c40b8a5cb3a4592a8571d..02f85a04efe2a6497fe9b5618aa624c91e4abf7b 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
-    "pinia": "2.0.0-beta.3",
+    "pinia": "^2.0.0-beta.3",
     "print-js": "^1.6.0",
     "qrcode": "^1.4.4",
     "sortablejs": "^1.13.0",
diff --git a/src/App.vue b/src/App.vue
index a16f867b522831f2ddf3fa457d96a9966eb70dcb..ad629b9727812896168afc40bcfe68843df3d456 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,6 @@
   import { defineComponent } from 'vue';
   import { ConfigProvider } from 'ant-design-vue';
   import { AppProvider } from '/@/components/Application';
-
   import { useTitle } from '/@/hooks/web/useTitle';
   import { useLocale } from '/@/locales/useLocale';
 
diff --git a/src/components/Drawer/src/BasicDrawer.vue b/src/components/Drawer/src/BasicDrawer.vue
index 980a8cb3f0b7ceb22ffd8cc2abdd4bcb487ab15a..7fec25f1323f88c14ae26225259443a6030de846 100644
--- a/src/components/Drawer/src/BasicDrawer.vue
+++ b/src/components/Drawer/src/BasicDrawer.vue
@@ -137,7 +137,7 @@
       watch(
         () => props.visible,
         (newVal, oldVal) => {
-          if (newVal != oldVal) visibleRef.value = newVal;
+          if (newVal !== oldVal) visibleRef.value = newVal;
         },
         { deep: true }
       );
diff --git a/src/components/Menu/src/BasicMenu.vue b/src/components/Menu/src/BasicMenu.vue
index 12140ba01d2144316af4b385029f8a773b471665..22bfe694dbb98964bcb075c62cb3eb5aefd61849 100644
--- a/src/components/Menu/src/BasicMenu.vue
+++ b/src/components/Menu/src/BasicMenu.vue
@@ -19,25 +19,18 @@
 </template>
 <script lang="ts">
   import type { MenuState } from './types';
-
   import { computed, defineComponent, unref, reactive, watch, toRefs, ref } from 'vue';
   import { Menu } from 'ant-design-vue';
   import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
-
   import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
-
   import { useOpenKeys } from './useOpenKeys';
   import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
-
   import { isFunction } from '/@/utils/is';
-
   import { basicProps } from './props';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { REDIRECT_NAME } from '/@/router/constant';
   import { useDesign } from '/@/hooks/web/useDesign';
-
   import { getCurrentParentPath } from '/@/router/menus';
-
   import { listenerRouteChange } from '/@/logics/mitt/routeChange';
   import { getAllParentPath } from '/@/router/helper/menuHelper';
 
diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts
index d4d621f24a78c941d99322833353e6cd3b840b27..d44c618e32d2b024307de19b3c131091806e6fff 100644
--- a/src/components/registerGlobComp.ts
+++ b/src/components/registerGlobComp.ts
@@ -5,6 +5,7 @@ import {
   // Need
   Button as AntButton,
   Input,
+  Layout,
 } from 'ant-design-vue';
 
 const compList = [AntButton.Group];
@@ -14,5 +15,5 @@ export function registerGlobComp(app: App) {
     app.component(comp.name || comp.displayName, comp);
   });
 
-  app.use(Input).use(Button);
+  app.use(Input).use(Button).use(Layout);
 }
diff --git a/src/layouts/default/menu/useLayoutMenu.ts b/src/layouts/default/menu/useLayoutMenu.ts
index 3194579d5c5ef8d03661d71dfef842bbfc2e0bc7..a7bf665115c081f5a4aee2bb98c5947f18e02abc 100644
--- a/src/layouts/default/menu/useLayoutMenu.ts
+++ b/src/layouts/default/menu/useLayoutMenu.ts
@@ -1,13 +1,10 @@
 import type { Menu } from '/@/router/types';
 import type { Ref } from 'vue';
-
 import { watch, unref, ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
-
 import { MenuSplitTyeEnum } from '/@/enums/menuEnum';
 import { useThrottleFn } from '@vueuse/core';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-
 import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus';
 import { usePermissionStore } from '/@/store/modules/permission';
 import { useAppInject } from '/@/hooks/web/useAppInject';
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index 46f0b62dc1f74ba9326c8dc4a786562e0c46a14d..35ac23202209da63a0f65c0fed15ee26c4f010fd 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -81,24 +81,19 @@
   import type { Menu } from '/@/router/types';
   import type { CSSProperties } from 'vue';
   import type { RouteLocationNormalized } from 'vue-router';
-
   import { defineComponent, onMounted, ref, computed, unref } from 'vue';
-
   import { ScrollContainer } from '/@/components/Container';
   import { SimpleMenuTag } from '/@/components/SimpleMenu';
   import { Icon } from '/@/components/Icon';
   import { AppLogo } from '/@/components/Application';
   import Trigger from '../trigger/HeaderTrigger.vue';
-
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDragLine } from './useLayoutSider';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useGo } from '/@/hooks/web/usePage';
-
   import { SIDE_BAR_SHOW_TIT_MINI_WIDTH, SIDE_BAR_MINI_WIDTH } from '/@/enums/appEnum';
-
   import clickOutside from '/@/directives/clickOutside';
   import { getShallowMenus, getChildrenMenus, getCurrentParentPath } from '/@/router/menus';
   import { listenerRouteChange } from '/@/logics/mitt/routeChange';
diff --git a/src/main.ts b/src/main.ts
index e2134a2a8b75fe9bba80c76f5e33dbca3e57e72e..b0c561bdc1e09c82a81851c13bab27deb97b50d7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,7 @@
 import '/@/design/index.less';
 import '/@/design/tailwind.css';
-
 // Register icon sprite
 import 'virtual:svg-icons-register';
-
 import App from './App.vue';
 import { createApp } from 'vue';
 import { initAppConfigStore } from '/@/logics/initAppConfig';
@@ -42,7 +40,7 @@ async function bootstrap() {
   setupRouter(app);
 
   // router-guard
-  setupRouterGuard();
+  setupRouterGuard(router);
 
   // Register global directive
   setupGlobDirectives(app);
diff --git a/src/router/guard/httpGuard.ts b/src/router/guard/httpGuard.ts
deleted file mode 100644
index 123ae9b115506530b9bbf01ff047bb9ca9c63e19..0000000000000000000000000000000000000000
--- a/src/router/guard/httpGuard.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { Router } from 'vue-router';
-import { AxiosCanceler } from '/@/utils/http/axios/axiosCancel';
-import projectSetting from '/@/settings/projectSetting';
-
-/**
- * The interface used to close the current page to complete the request when the route is switched
- * @param router
- */
-export function createHttpGuard(router: Router) {
-  const { removeAllHttpPending } = projectSetting;
-  let axiosCanceler: Nullable<AxiosCanceler>;
-  if (removeAllHttpPending) {
-    axiosCanceler = new AxiosCanceler();
-  }
-  router.beforeEach(async () => {
-    // Switching the route will delete the previous request
-    axiosCanceler?.removeAllPending();
-    return true;
-  });
-}
diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
index c14d884a971c7ef49e5783ebe1c4c765c2dc5170..a88191d39e46f0d4a075c5628e99f3a8db59231f 100644
--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@@ -1,15 +1,19 @@
-import { router } from '/@/router';
-
-import { createProgressGuard } from './progressGuard';
+import type { Router, RouteLocationNormalized } from 'vue-router';
+import { useAppStoreWidthOut } from '/@/store/modules/app';
+import { useUserStoreWidthOut } from '/@/store/modules/user';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { AxiosCanceler } from '/@/utils/http/axios/axiosCancel';
+import { Modal, notification } from 'ant-design-vue';
+import { warn } from '/@/utils/log';
+import { unref } from 'vue';
+import { setRouteChange } from '/@/logics/mitt/routeChange';
 import { createPermissionGuard } from './permissionGuard';
-import { createPageLoadingGuard } from './pageLoadingGuard';
-import { createMessageGuard } from './messageGuard';
-import { createScrollGuard } from './scrollGuard';
-import { createHttpGuard } from './httpGuard';
-import { createPageGuard } from './pageGuard';
 import { createStateGuard } from './stateGuard';
+import nProgress from 'nprogress';
+import projectSetting from '/@/settings/projectSetting';
 
-export function setupRouterGuard() {
+// Don't change the order of creation
+export function setupRouterGuard(router: Router) {
   createPageGuard(router);
   createPageLoadingGuard(router);
   createHttpGuard(router);
@@ -19,3 +23,123 @@ export function setupRouterGuard() {
   createPermissionGuard(router);
   createStateGuard(router);
 }
+
+/**
+ * Hooks for handling page state
+ */
+function createPageGuard(router: Router) {
+  const loadedPageMap = new Map<string, boolean>();
+
+  router.beforeEach(async (to) => {
+    // The page has already been loaded, it will be faster to open it again, you don’t need to do loading and other processing
+    to.meta.loaded = !!loadedPageMap.get(to.path);
+    // Notify routing changes
+    setRouteChange(to);
+
+    return true;
+  });
+
+  router.afterEach((to) => {
+    loadedPageMap.set(to.path, true);
+  });
+}
+
+// Used to handle page loading status
+function createPageLoadingGuard(router: Router) {
+  const userStore = useUserStoreWidthOut();
+  const appStore = useAppStoreWidthOut();
+  const { getOpenPageLoading } = useTransitionSetting();
+  router.beforeEach(async (to) => {
+    if (!userStore.getToken) {
+      return true;
+    }
+    if (to.meta.loaded) {
+      return true;
+    }
+
+    if (unref(getOpenPageLoading)) {
+      appStore.setPageLoadingAction(true);
+      return true;
+    }
+
+    return true;
+  });
+  router.afterEach(async () => {
+    if (unref(getOpenPageLoading)) {
+      // TODO Looking for a better way
+      // The timer simulates the loading time to prevent flashing too fast,
+      setTimeout(() => {
+        appStore.setPageLoading(false);
+      }, 220);
+    }
+    return true;
+  });
+}
+
+/**
+ * The interface used to close the current page to complete the request when the route is switched
+ * @param router
+ */
+function createHttpGuard(router: Router) {
+  const { removeAllHttpPending } = projectSetting;
+  let axiosCanceler: Nullable<AxiosCanceler>;
+  if (removeAllHttpPending) {
+    axiosCanceler = new AxiosCanceler();
+  }
+  router.beforeEach(async () => {
+    // Switching the route will delete the previous request
+    axiosCanceler?.removeAllPending();
+    return true;
+  });
+}
+
+// Routing switch back to the top
+function createScrollGuard(router: Router) {
+  const isHash = (href: string) => {
+    return /^#/.test(href);
+  };
+
+  const body = document.body;
+
+  router.afterEach(async (to) => {
+    // scroll top
+    isHash((to as RouteLocationNormalized & { href: string })?.href) && body.scrollTo(0, 0);
+    return true;
+  });
+}
+
+/**
+ * Used to close the message instance when the route is switched
+ * @param router
+ */
+export function createMessageGuard(router: Router) {
+  const { closeMessageOnSwitch } = projectSetting;
+
+  router.beforeEach(async () => {
+    try {
+      if (closeMessageOnSwitch) {
+        Modal.destroyAll();
+        notification.destroy();
+      }
+    } catch (error) {
+      warn('message guard error:' + error);
+    }
+    return true;
+  });
+}
+
+export function createProgressGuard(router: Router) {
+  const { getOpenNProgress } = useTransitionSetting();
+  router.beforeEach(async (to) => {
+    if (to.meta.loaded) {
+      return true;
+    }
+    unref(getOpenNProgress) && nProgress.start();
+    return true;
+  });
+
+  router.afterEach(async () => {
+    unref(getOpenNProgress) && nProgress.done();
+    return true;
+  });
+}
diff --git a/src/router/guard/messageGuard.ts b/src/router/guard/messageGuard.ts
deleted file mode 100644
index 9a016267d4c9355cc04ffaecc14f094f0f6597a0..0000000000000000000000000000000000000000
--- a/src/router/guard/messageGuard.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { Router } from 'vue-router';
-import { Modal, notification } from 'ant-design-vue';
-import projectSetting from '/@/settings/projectSetting';
-import { warn } from '/@/utils/log';
-
-/**
- * Used to close the message instance when the route is switched
- * @param router
- */
-export function createMessageGuard(router: Router) {
-  const { closeMessageOnSwitch } = projectSetting;
-
-  router.beforeEach(async () => {
-    try {
-      if (closeMessageOnSwitch) {
-        Modal.destroyAll();
-        notification.destroy();
-      }
-    } catch (error) {
-      warn('message guard error:' + error);
-    }
-    return true;
-  });
-}
diff --git a/src/router/guard/pageGuard.ts b/src/router/guard/pageGuard.ts
deleted file mode 100644
index c3dc0e81577c13f66a9b77822af098f7213b4885..0000000000000000000000000000000000000000
--- a/src/router/guard/pageGuard.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Router } from 'vue-router';
-import { setRouteChange } from '/@/logics/mitt/routeChange';
-
-export function createPageGuard(router: Router) {
-  const loadedPageMap = new Map<string, boolean>();
-
-  router.beforeEach(async (to) => {
-    to.meta.loaded = !!loadedPageMap.get(to.path);
-    // Notify routing changes
-    setRouteChange(to);
-
-    return true;
-  });
-
-  router.afterEach((to) => {
-    loadedPageMap.set(to.path, true);
-  });
-}
diff --git a/src/router/guard/pageLoadingGuard.ts b/src/router/guard/pageLoadingGuard.ts
deleted file mode 100644
index 274d70dbbc151a96c5aa49483bd4ad00d8eee5dd..0000000000000000000000000000000000000000
--- a/src/router/guard/pageLoadingGuard.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Router } from 'vue-router';
-import { useAppStoreWidthOut } from '/@/store/modules/app';
-import { useUserStoreWidthOut } from '/@/store/modules/user';
-import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
-import { unref } from 'vue';
-
-export function createPageLoadingGuard(router: Router) {
-  const userStore = useUserStoreWidthOut();
-  const appStore = useAppStoreWidthOut();
-  const { getOpenPageLoading } = useTransitionSetting();
-  router.beforeEach(async (to) => {
-    if (!userStore.getToken) {
-      return true;
-    }
-    if (to.meta.loaded) {
-      return true;
-    }
-
-    if (unref(getOpenPageLoading)) {
-      appStore.setPageLoadingAction(true);
-      return true;
-    }
-
-    return true;
-  });
-  router.afterEach(async () => {
-    if (unref(getOpenPageLoading)) {
-      setTimeout(() => {
-        appStore.setPageLoading(false);
-      }, 220);
-    }
-    return true;
-  });
-}
diff --git a/src/router/guard/permissionGuard.ts b/src/router/guard/permissionGuard.ts
index e955126402b6e02474a17590cfda9673891f1a92..c03e99d57d9cef33d404d4bfe4949ecd0bec5a74 100644
--- a/src/router/guard/permissionGuard.ts
+++ b/src/router/guard/permissionGuard.ts
@@ -32,13 +32,11 @@ export function createPermissionGuard(router: Router) {
     // token does not exist
     if (!token) {
       // You can access without permission. You need to set the routing meta.ignoreAuth to true
-      if (
-        to.meta.ignoreAuth
-        // || to.name === FULL_PAGE_NOT_FOUND_ROUTE.name
-      ) {
+      if (to.meta.ignoreAuth) {
         next();
         return;
       }
+
       // redirect login page
       const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
         path: LOGIN_PATH,
@@ -53,10 +51,12 @@ export function createPermissionGuard(router: Router) {
       next(redirectData);
       return;
     }
+
     if (permissionStore.getIsDynamicAddedRoute) {
       next();
       return;
     }
+
     const routes = await permissionStore.buildRoutesAction();
 
     routes.forEach((route) => {
diff --git a/src/router/guard/progressGuard.ts b/src/router/guard/progressGuard.ts
deleted file mode 100644
index c0653a3c76db9640e71b6c8b513769fd8c2eb2b9..0000000000000000000000000000000000000000
--- a/src/router/guard/progressGuard.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { Router } from 'vue-router';
-
-import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
-
-import nProgress from 'nprogress';
-
-import { unref } from 'vue';
-
-export function createProgressGuard(router: Router) {
-  const { getOpenNProgress } = useTransitionSetting();
-  router.beforeEach(async (to) => {
-    if (to.meta.loaded) return true;
-    unref(getOpenNProgress) && nProgress.start();
-    return true;
-  });
-
-  router.afterEach(async () => {
-    // if (to.meta.loaded) return true;
-    unref(getOpenNProgress) && nProgress.done();
-    return true;
-  });
-}
diff --git a/src/router/guard/scrollGuard.ts b/src/router/guard/scrollGuard.ts
deleted file mode 100644
index 20d1b26426e2a930d5dc19f6c7c9fdf521639e69..0000000000000000000000000000000000000000
--- a/src/router/guard/scrollGuard.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { RouteLocationNormalized, Router } from 'vue-router';
-
-const isHash = (href: string) => {
-  return /^#/.test(href);
-};
-
-export function createScrollGuard(router: Router) {
-  const body = document.body;
-
-  router.afterEach(async (to) => {
-    // scroll top
-    isHash((to as RouteLocationNormalized & { href: string })?.href) && body.scrollTo(0, 0);
-    return true;
-  });
-}
diff --git a/src/router/helper/routeHelper.ts b/src/router/helper/routeHelper.ts
index 0d3fa370e40f5b0cf7249f3f68f38d6d5336224e..f37cc4214c3417916c4e0380ce60195edf6faf73 100644
--- a/src/router/helper/routeHelper.ts
+++ b/src/router/helper/routeHelper.ts
@@ -9,7 +9,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 export type LayoutMapKey = 'LAYOUT';
 const IFRAME = () => import('/@/views/sys/iframe/FrameBlank.vue');
 
-const LayoutMap = new Map<String, () => Promise<typeof import('*.vue')>>();
+const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();
 
 LayoutMap.set('LAYOUT', LAYOUT);
 LayoutMap.set('IFRAME', IFRAME);
@@ -27,7 +27,7 @@ function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
     const { component, name } = item;
     const { children } = item;
     if (component) {
-      const layoutFound = LayoutMap.get(component);
+      const layoutFound = LayoutMap.get(component as string);
       if (layoutFound) {
         item.component = layoutFound;
       } else {
@@ -66,10 +66,10 @@ function dynamicImport(
 // Turn background objects into routing objects
 export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModule[]): T[] {
   routeList.forEach((route) => {
-    if (route.component) {
-      if ((route.component as string).toUpperCase() === 'LAYOUT') {
-        //route.component = LayoutMap.get(route.component as LayoutMapKey);
-        route.component = LayoutMap.get((route.component as string).toUpperCase() as LayoutMapKey);
+    const component = route.component as string;
+    if (component) {
+      if (component.toUpperCase() === 'LAYOUT') {
+        route.component = LayoutMap.get(component.toUpperCase());
       } else {
         route.children = [cloneDeep(route)];
         route.component = LAYOUT;
diff --git a/src/store/index.ts b/src/store/index.ts
index db23abbb5c87bfde1f4ba9cd69e5a6035b298602..efaf6c970a92c9d5c914d22776e6e4d9e1992a28 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,5 +1,6 @@
 import type { App } from 'vue';
 import { createPinia } from 'pinia';
+
 const store = createPinia();
 
 export function setupStore(app: App<Element>) {
diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts
index 9a6ea526582faf35554d9e775c9a502813bd7c9f..4b15bbabeac88d2f62454f1dd2d101838f6b3703 100644
--- a/src/utils/mitt.ts
+++ b/src/utils/mitt.ts
@@ -1,5 +1,6 @@
 /**
- * https://github.com/developit/mitt
+ * copy to https://github.com/developit/mitt
+ * Expand clear method
  */
 
 export type EventType = string | symbol;
diff --git a/yarn.lock b/yarn.lock
index 4240d2ca1e629c6fcfe0c0767e3820110aa2ea85..dd06b6639af2edaa820292db72257558146bdbd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9278,7 +9278,7 @@ pify@^4.0.1:
   resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pinia@2.0.0-beta.3:
+pinia@^2.0.0-beta.3:
   version "2.0.0-beta.3"
   resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.0-beta.3.tgz#c6f0d07da54dc5aa237f4cc9281898e927b33d16"
   integrity sha512-4ygKhe9FrYD69tJ7nSdgHm9Ldb0aM/Nzyb8Qz/RZuzOyOr85jWHNmCAhCytWy0l9C4/ypGJYCEJ3vuZfyWjcZA==