refactor: refactor setting

vben
1 parent 0692b479
Showing 20 changed files with 239 additions and 174 deletions
CHANGELOG.zh_CN.md
package.json
src/hooks/core/useContext.ts
src/hooks/setting/useRootSetting.ts
src/hooks/setting/useTransitionSetting.ts
src/layouts/default/content/index.less
src/layouts/default/content/index.tsx
src/layouts/default/multitabs/index.tsx
src/layouts/default/setting/SettingDrawer.tsx
src/layouts/default/setting/enum.ts
src/layouts/default/setting/handler.ts
src/layouts/page/index.tsx
src/layouts/page/useTransition.ts
src/router/guard/index.ts
src/router/guard/pageLoadingGuard.ts
src/router/guard/progressGuard.ts
src/settings/projectSetting.ts
src/types/config.d.ts
src/views/sys/redirect/index.vue
yarn.lock
@@ -3,6 +3,7 @@
 ### ✨ Refactor
 - 重构整体 layout。更改代码实现方式。代码更精简
+- 配置项重构
 ### ✨ Features
@@ -11,6 +12,7 @@
 ### 🎫 Chores
 - 移除 messageSetting 配置
+- 更新 antdv 到`2.0.0-rc.2`
 - 暂时删除 `@vueuse/core`.等稳定后在集成。目前不太稳定。
 ## 2.0.0-rc.11 (2020-11-18)
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.2",
-    "ant-design-vue": "2.0.0-beta.15",
+    "ant-design-vue": "2.0.0-rc.2",
     "apexcharts": "3.22.0",
     "axios": "^0.21.0",
     "crypto-es": "^1.2.6",
@@ -5,9 +5,8 @@ export const createContext = &lt;T&gt;(
   contextInjectKey: InjectionKey<T> = Symbol(),
   _readonly = true
 ) => {
-  const state = reactive({
-    ...context,
-  });
+  const state = reactive({ ...context });
+
   const provideData = _readonly ? readonly(state) : state;
   provide(contextInjectKey, provideData);
 };
@@ -12,16 +12,10 @@ type RootSetting = Omit&lt;
 export function useRootSetting() {
   const getRootSetting = computed((): RootSetting => appStore.getProjectConfig);
-  const getOpenPageLoading = computed(() => unref(getRootSetting).openPageLoading);
-
   const getPageLoading = computed(() => appStore.getPageLoading);
-  const getOpenRouterTransition = computed(() => unref(getRootSetting).openRouterTransition);
-
   const getOpenKeepAlive = computed(() => unref(getRootSetting).openKeepAlive);
-  const getRouterTransition = computed(() => unref(getRootSetting).routerTransition);
-
   const getCanEmbedIFramePage = computed(() => unref(getRootSetting).canEmbedIFramePage);
   const getPermissionMode = computed(() => unref(getRootSetting).permissionMode);
@@ -65,10 +59,7 @@ export function useRootSetting() {
     getRootSetting,
     getLayoutContentMode,
     getPageLoading,
-    getOpenPageLoading,
-    getOpenRouterTransition,
     getOpenKeepAlive,
-    getRouterTransition,
     getCanEmbedIFramePage,
     getPermissionMode,
     getShowLogo,
+import type { TransitionSetting } from '/@/types/config';
+
+import { computed, unref } from 'vue';
+
+import { appStore } from '/@/store/modules/app';
+
+export function useTransitionSetting() {
+  const getTransitionSetting = computed(() => appStore.getProjectConfig.transitionSetting);
+
+  const getEnableTransition = computed(() => unref(getTransitionSetting).enable);
+
+  const getOpenNProgress = computed(() => unref(getTransitionSetting)?.openNProgress);
+
+  const getOpenPageLoading = computed(() => {
+    return unref(getTransitionSetting)?.openPageLoading && unref(getEnableTransition);
+  });
+
+  const getBasicTransition = computed(() => unref(getTransitionSetting)?.basicTransition);
+
+  function setTransitionSetting(transitionSetting: Partial<TransitionSetting>) {
+    appStore.commitProjectConfigState({ transitionSetting });
+  }
+
+  return {
+    setTransitionSetting,
+
+    getTransitionSetting,
+    getEnableTransition,
+    getOpenNProgress,
+    getOpenPageLoading,
+    getBasicTransition,
+  };
+}
@@ -11,11 +11,15 @@
   }
   &__loading {
-    position: fixed;
+    position: absolute;
     z-index: @page-loading-z-index;
+    &.fill {
+      background: rgba(240, 242, 245) !important;
+    }
+
     > .basic-loading {
-      margin-bottom: 20%;
+      margin-bottom: 30%;
     }
   }
 }
 import './index.less';
-import { defineComponent, unref } from 'vue';
+import { defineComponent, unref, computed } from 'vue';
 import { FullLoading } from '/@/components/Loading/index';
 import { RouterView } from 'vue-router';
 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
 export default defineComponent({
   name: 'LayoutContent',
   setup() {
-    const { getOpenPageLoading, getLayoutContentMode, getPageLoading } = useRootSetting();
+    const { getOpenPageLoading } = useTransitionSetting();
+    const { getShowMultipleTab } = useMultipleTabSetting();
+    const { getLayoutContentMode, getPageLoading } = useRootSetting();
+    const getLoadingClass = computed(() => {
+      return [
+        `layout-content__loading`,
+        { fill: unref(getShowMultipleTab), hidden: !unref(getPageLoading) },
+      ];
+    });
     return () => {
       return (
         <div class={['layout-content', unref(getLayoutContentMode)]}>
-          {unref(getOpenPageLoading) && (
-            <FullLoading class={[`layout-content__loading`, { hidden: !unref(getPageLoading) }]} />
-          )}
+          {unref(getOpenPageLoading) && <FullLoading class={unref(getLoadingClass)} />}
           <RouterView />
         </div>
       );
@@ -24,14 +24,13 @@ export default defineComponent({
   name: 'MultiTabs',
   setup() {
     let isAddAffix = false;
+
     const go = useGo();
+
     const { currentRoute } = useRouter();
     const { activeKeyRef } = useTabs();
-    // 当前tab列表
-    const getTabsState = computed(() => {
-      return tabStore.getTabsState;
-    });
+    const getTabsState = computed(() => tabStore.getTabsState);
     // If you monitor routing changes, tab switching will be stuck. So setting this method
     watch(
@@ -43,6 +42,7 @@ export default defineComponent({
         }
         const lastChangeRoute = unref(tabStore.getLastChangeRouteState);
+
         if (!lastChangeRoute || !userStore.getTokenState) return;
         const { path, fullPath } = lastChangeRoute;
@@ -17,6 +17,7 @@ import { useRootSetting } from &#39;/@/hooks/setting/useRootSetting&#39;;
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
 import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
 import { updateColorWeak, updateGrayMode } from '/@/setup/theme';
@@ -177,9 +178,6 @@ export default defineComponent({
   setup(_, { attrs }) {
     const {
       getContentMode,
-      getRouterTransition,
-      getOpenRouterTransition,
-      getOpenPageLoading,
       getShowFooter,
       getShowBreadCrumb,
       getShowBreadCrumbIcon,
@@ -190,6 +188,13 @@ export default defineComponent({
     } = useRootSetting();
     const {
+      getOpenPageLoading,
+      getBasicTransition,
+      getEnableTransition,
+      getOpenNProgress,
+    } = useTransitionSetting();
+
+    const {
       getIsHorizontal,
       getShowMenu,
       getMenuType,
@@ -447,27 +452,34 @@ export default defineComponent({
     function renderTransition() {
       return (
         <>
-          {renderSwitchItem('页面切换loading', {
+          {renderSwitchItem('顶部进度条', {
+            handler: (e) => {
+              baseHandler(HandlerEnum.OPEN_PROGRESS, e);
+            },
+            def: unref(getOpenNProgress),
+          })}
+          {renderSwitchItem('切换loading', {
             handler: (e) => {
               baseHandler(HandlerEnum.OPEN_PAGE_LOADING, e);
             },
             def: unref(getOpenPageLoading),
+            disabled: !unref(getEnableTransition),
           })}
           {renderSwitchItem('切换动画', {
             handler: (e) => {
               baseHandler(HandlerEnum.OPEN_ROUTE_TRANSITION, e);
             },
-            def: unref(getOpenRouterTransition),
+            def: unref(getEnableTransition),
           })}
-          {renderSelectItem('路由动画', {
+          {renderSelectItem('动画类型', {
             handler: (e) => {
               baseHandler(HandlerEnum.ROUTER_TRANSITION, e);
             },
-            def: unref(getRouterTransition),
+            def: unref(getBasicTransition),
             options: routerTransitionOptions,
-            disabled: !unref(getOpenRouterTransition),
+            disabled: !unref(getEnableTransition),
           })}
         </>
       );
@@ -29,9 +29,6 @@ export enum HandlerEnum {
   TABS_SHOW_QUICK,
   TABS_SHOW,
-  OPEN_PAGE_LOADING,
-  OPEN_ROUTE_TRANSITION,
-  ROUTER_TRANSITION,
   LOCK_TIME,
   FULL_CONTENT,
   CONTENT_MODE,
@@ -41,6 +38,11 @@ export enum HandlerEnum {
   COLOR_WEAK,
   SHOW_LOGO,
   SHOW_FOOTER,
+
+  ROUTER_TRANSITION,
+  OPEN_PROGRESS,
+  OPEN_PAGE_LOADING,
+  OPEN_ROUTE_TRANSITION,
 }
 export const themeOptions = [
@@ -66,17 +66,20 @@ export function handler(event: HandlerEnum, value: any): DeepPartial&lt;ProjectConf
     case HandlerEnum.MENU_SHOW_SEARCH:
       return { menuSetting: { showSearch: value } };
-    // ============root==================
-
+    // ============transition==================
     case HandlerEnum.OPEN_PAGE_LOADING:
       appStore.commitPageLoadingState(false);
-      return { openPageLoading: value };
+      return { transitionSetting: { openPageLoading: value } };
+
+    case HandlerEnum.ROUTER_TRANSITION:
+      return { transitionSetting: { basicTransition: value } };
     case HandlerEnum.OPEN_ROUTE_TRANSITION:
-      return { openRouterTransition: value };
+      return { transitionSetting: { enable: value } };
-    case HandlerEnum.ROUTER_TRANSITION:
-      return { routerTransition: value };
+    case HandlerEnum.OPEN_PROGRESS:
+      return { transitionSetting: { openNProgress: value } };
+    // ============root==================
     case HandlerEnum.LOCK_TIME:
       return { lockTime: value };
@@ -11,6 +11,7 @@ import { useRootSetting } from &#39;/@/hooks/setting/useRootSetting&#39;;
 import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
 import { tabStore } from '/@/store/modules/tab';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
 interface DefaultContext {
   Component: FunctionalComponent;
@@ -21,12 +22,9 @@ export default defineComponent({
   name: 'PageLayout',
   setup() {
     const { getShowMenu } = useMenuSetting();
-    const {
-      getOpenKeepAlive,
-      getRouterTransition,
-      getOpenRouterTransition,
-      getCanEmbedIFramePage,
-    } = useRootSetting();
+    const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
+
+    const { getBasicTransition, getEnableTransition } = useTransitionSetting();
     const { getMax } = useMultipleTabSetting();
@@ -45,7 +43,7 @@ export default defineComponent({
                 // No longer show animations that are already in the tab
                 const cacheTabs = unref(getCacheTabsRef);
                 const isInCache = cacheTabs.includes(route.name as string);
-                const name = isInCache && route.meta.inTab ? 'fade' : null;
+                const name = isInCache && route.meta.inTab ? 'fade-slide' : null;
                 const renderComp = () => <Component key={route.fullPath} />;
@@ -57,10 +55,10 @@ export default defineComponent({
                   renderComp()
                 );
-                return unref(getOpenRouterTransition) ? (
+                return unref(getEnableTransition) ? (
                   <Transition
                     {...transitionEvent}
-                    name={name || route.meta.transitionName || unref(getRouterTransition)}
+                    name={name || route.meta.transitionName || unref(getBasicTransition)}
                     mode="out-in"
                     appear={true}
                   >
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+
 import { appStore } from '/@/store/modules/app';
 import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
 export function useTransition() {
   function handleAfterEnter() {
-    const { getOpenPageLoading, getOpenRouterTransition } = useRootSetting();
-    if (!getOpenPageLoading.value || !getOpenRouterTransition.value) return;
+    const { getOpenPageLoading, getEnableTransition } = useTransitionSetting();
+    if (!getOpenPageLoading.value || !getEnableTransition.value) return;
     // Close loading after the route switching animation ends
     appStore.setPageLoadingAction(false);
   }
@@ -16,7 +16,7 @@ import { tabStore } from &#39;/@/store/modules/tab&#39;;
 const globSetting = useGlobSetting();
 export function createGuard(router: Router) {
-  const { openNProgress, closeMessageOnSwitch, removeAllHttpPending } = useProjectSetting();
+  const { closeMessageOnSwitch, removeAllHttpPending } = useProjectSetting();
   let axiosCanceler: AxiosCanceler | null;
   if (removeAllHttpPending) {
     axiosCanceler = new AxiosCanceler();
@@ -44,7 +44,6 @@ export function createGuard(router: Router) {
         Modal.destroyAll();
         notification.destroy();
       }
-      // TODO Some special interfaces require long connections
       // Switching the route will delete the previous request
       removeAllHttpPending && axiosCanceler!.removeAllPending();
     } catch (error) {
@@ -58,7 +57,6 @@ export function createGuard(router: Router) {
     // change html title
     setTitle(to.meta.title, globSetting.title);
   });
-
-  openNProgress && createProgressGuard(router);
+  createProgressGuard(router);
   createPermissionGuard(router);
 }
@@ -3,20 +3,18 @@ import { tabStore } from &#39;/@/store/modules/tab&#39;;
 import { appStore } from '/@/store/modules/app';
 import { userStore } from '/@/store/modules/user';
 import { getParams } from '/@/utils/helper/routeHelper';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { unref } from 'vue';
+const { getOpenPageLoading, getEnableTransition } = useTransitionSetting();
 export function createPageLoadingGuard(router: Router) {
   let isFirstLoad = true;
   router.beforeEach(async (to) => {
-    const {
-      openKeepAlive,
-      openRouterTransition,
-      openPageLoading,
-      multiTabsSetting: { show } = {},
-    } = appStore.getProjectConfig;
+    const { openKeepAlive, multiTabsSetting: { show } = {} } = appStore.getProjectConfig;
     if (!userStore.getTokenState) {
       return true;
     }
-    if (!openRouterTransition && openPageLoading) {
+    if (!unref(getEnableTransition) && unref(getOpenPageLoading)) {
       appStore.commitPageLoadingState(true);
       return true;
     }
@@ -32,11 +30,10 @@ export function createPageLoadingGuard(router: Router) {
     return true;
   });
   router.afterEach(async (to, from) => {
-    const { openRouterTransition, openPageLoading } = appStore.getProjectConfig;
     const realToPath = to.path.replace(getParams(to), '');
     const realFormPath = from.path.replace(getParams(from), '');
     if (
-      (!openRouterTransition && openPageLoading) ||
+      (!unref(getEnableTransition) && unref(getOpenPageLoading)) ||
       isFirstLoad ||
       to.meta.afterCloseLoading ||
       realToPath === realFormPath
 import type { Router } from 'vue-router';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
+import { unref } from 'vue';
+
+const { getOpenNProgress } = useTransitionSetting();
 export function createProgressGuard(router: Router) {
   // NProgress.inc(0.1);
   // NProgress.configure({ easing: 'ease', speed: 200, showSpinner: false });
   router.beforeEach(async (to) => {
-    !to.meta.inTab && NProgress.start();
+    !to.meta.inTab && unref(getOpenNProgress) && NProgress.start();
     return true;
   });
   router.afterEach(async (to) => {
-    !to.meta.inTab && NProgress.done();
+    !to.meta.inTab && unref(getOpenNProgress) && NProgress.done();
     return true;
   });
 }
@@ -7,155 +7,158 @@ import { isProdMode } from &#39;/@/utils/env&#39;;
 // ! You need to clear the browser cache after the change
 const setting: ProjectConfig = {
-  // locale setting
-  locale: {
-    // Locale
-    lang: 'zh_CN',
-    // Default locale
-    fallback: 'zh_CN',
-    // available Locales
-    availableLocales: ['zh_CN', 'en'],
-  },
-
-  // color
-  // TODO 主题色
-  themeColor: primaryColor,
-
   // Whether to show the configuration button
   showSettingButton: true,
-  // 权限模式
+  // Permission mode
   permissionMode: PermissionModeEnum.ROLE,
-  // 网站灰色模式，用于可能悼念的日期开启
+  // color
+  // TODO Theme color
+  themeColor: primaryColor,
+
+  // Website gray mode, open for possible mourning dates
   grayMode: false,
-  // 色弱模式
+  // Color Weakness Mode
   colorWeak: false,
-  // 是否取消菜单,顶部,多标签页显示, 用于可能内嵌在别的系统内
+  // Whether to cancel the menu, the top, the multi-tab page display, for possible embedded in other systems
   fullContent: false,
   // content mode
   contentMode: ContentEnum.FULL,
-  // 是否显示logo
+  // Whether to display the logo
   showLogo: true,
-  // 是否显示页脚
+  // Whether to show footer
   showFooter: true,
-  // 头部配置
+  // locale setting
+  locale: {
+    // Locale
+    lang: 'zh_CN',
+    // Default locale
+    fallback: 'zh_CN',
+    // available Locales
+    availableLocales: ['zh_CN', 'en'],
+  },
+
+  // Header configuration
   headerSetting: {
     // header bg color
     bgColor: '#ffffff',
+    // Fixed at the top
     fixed: true,
-    // 是否显示顶部
+    // Whether to show top
     show: true,
     // theme
     theme: ThemeEnum.LIGHT,
-    // 开启锁屏功能
+    // Whether to enable the lock screen function
     useLockPage: true,
-    // 显示刷新按钮
+    // Whether to show the refresh button
     showRedo: true,
-    // 显示全屏按钮
+    // Whether to show the full screen button
     showFullScreen: true,
-    // 显示文档按钮
+    // Whether to show the document button
     showDoc: true,
-    // 显示消息中心按钮
+    // Whether to show the notification button
     showNotice: true,
   },
-  // 菜单配置
+  // Menu configuration
   menuSetting: {
     // sidebar menu bg color
     bgColor: '#273352',
-
+    //  Whether to fix the left menu
     fixed: true,
-    // 菜单折叠
+    // Menu collapse
     collapsed: false,
-    // 折叠菜单时候是否显示菜单名
+    // Whether to display the menu name when folding the menu
     collapsedShowTitle: false,
-    // 是否可拖拽
+    // Whether it can be dragged
+    // Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
     hasDrag: false,
-    // 是否显示 没有dom
+    // Whether to show no dom
     show: true,
-    // 是否显示 有dom
+    // Whether to show dom
     hidden: true,
-    // 是否显示搜索框
+    // Whether to show search box
     showSearch: true,
-    // 菜单宽度
+    // Menu width
     menuWidth: 210,
-    // 菜单模式
+    // Menu mode
     mode: MenuModeEnum.INLINE,
-    // 菜单类型
+    // Menu type
     type: MenuTypeEnum.SIDEBAR,
-    // 菜单主题
+    // Menu theme
     theme: ThemeEnum.DARK,
-    // 分割菜单
+    // Split menu
     split: false,
-    // 顶部菜单布局
+    // Top menu layout
     topMenuAlign: 'center',
-    // 折叠菜单时候隐藏搜索框
+    // Hide the search box when the menu is collapsed
     collapsedShowSearch: false,
-    // 折叠触发器的位置
+    // Fold trigger position
     trigger: TriggerEnum.HEADER,
-    // 开启手风琴模式,只显示一个菜单
+    // Turn on accordion mode, only show a menu
     accordion: true,
   },
-  // 多标签
+  // Multi-label
   multiTabsSetting: {
-    // 开启
+    // Turn on
     show: true,
-    // 开启快速操作
+    // Turn on quick actions
     showQuick: true,
-
-    // 标签页缓存最大数量
+    // Maximum number of tab cache
     max: 12,
   },
-  // 是否开启KeepAlive缓存  开发时候最好关闭,不然每次都需要清除缓存
+  // Transition Setting
+  transitionSetting: {
+    //  Whether to open the page switching animation
+    // The disabled state will also disable pageLoadinng
+    enable: true,
+
+    // Route basic switching animation
+    basicTransition: RouterTransitionEnum.FADE_SIDE,
+
+    // Whether to open page switching loading
+    // Only open when enable=true
+    openPageLoading: true,
+
+    // Whether to open the top progress bar
+    openNProgress: true,
+  },
+
+  // Whether to enable KeepAlive cache is best to close during development, otherwise the cache needs to be cleared every time
   openKeepAlive: true,
-  // 自动锁屏时间，为0不锁屏。 单位分钟 默认0
+  // Automatic screen lock time, 0 does not lock the screen. Unit minute default 0
   lockTime: 0,
-  // 显示面包屑
+  // Whether to show breadcrumbs
   showBreadCrumb: true,
-  // 显示面包屑图标
+  // Whether to show the breadcrumb icon
   showBreadCrumbIcon: false,
-  // 使用error-handler-plugin
+  // Use error-handler-plugin
   useErrorHandle: isProdMode(),
-  //  开启页面切换动画
-  openRouterTransition: true,
-
-  // 路由切换动画
-  routerTransition: RouterTransitionEnum.FADE_SIDE,
-
-  // 是否开启登录安全校验
-  openLoginVerify: true,
-
-  // 是否开启页面切换loading
-  openPageLoading: true,
-
-  // 是否开启回到顶部
+  // Whether to open back to top
   useOpenBackTop: true,
-  // 开启顶部进度条
-  openNProgress: isProdMode(),
-
-  //  是否可以嵌入iframe页面
+  //  Is it possible to embed iframe pages
   canEmbedIFramePage: true,
-  // 切换界面的时候是否删除未关闭的message及notify
+  // Whether to delete unclosed messages and notify when switching the interface
   closeMessageOnSwitch: true,
-  // 切换界面的时候是否取消已经发送但是未响应的http请求。
-  // 如果开启,想对单独接口覆盖。可以在单独接口设置
+  // Whether to cancel the http request that has been sent but not responded when switching the interface.
+  // If it is enabled, I want to overwrite a single interface. Can be set in a separate interface
   removeAllHttpPending: true,
 };
@@ -59,6 +59,20 @@ export interface LocaleSetting {
   availableLocales: LocaleType[];
 }
+export interface TransitionSetting {
+  //  Whether to open the page switching animation
+  enable: boolean;
+
+  // Route basic switching animation
+  basicTransition: RouterTransitionEnum;
+
+  // Whether to open page switching loading
+  openPageLoading: boolean;
+
+  // Whether to open the top progress bar
+  openNProgress: boolean;
+}
+
 export interface ProjectConfig {
   locale: LocaleSetting;
@@ -86,6 +100,9 @@ export interface ProjectConfig {
   // 多标签页设置
   multiTabsSetting: MultiTabsSetting;
+
+  transitionSetting: TransitionSetting;
+
   // pageLayout是否开启keep-alive
   openKeepAlive: boolean;
@@ -97,18 +114,8 @@ export interface ProjectConfig {
   showBreadCrumbIcon: boolean;
   // 使用error-handler-plugin
   useErrorHandle: boolean;
-  // 开启页面切换动画
-  openRouterTransition: boolean;
-  // 路由切换动画
-  routerTransition: RouterTransitionEnum;
-  // 是否开启登录安全校验
-  openLoginVerify: boolean;
-  // 是否开启页面切换loading
-  openPageLoading: boolean;
   // 是否开启回到顶部
   useOpenBackTop: boolean;
-  // 开启顶部进度条
-  openNProgress: boolean;
   // 是否可以嵌入iframe页面
   canEmbedIFramePage: boolean;
   // 切换界面的时候是否删除未关闭的message及notify
@@ -7,10 +7,13 @@
   import { appStore } from '/@/store/modules/app';
   import { useRouter } from 'vue-router';
+  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
   export default defineComponent({
     name: 'Redirect',
     setup() {
       const { currentRoute, replace } = useRouter();
+      const { getOpenPageLoading, getEnableTransition } = useTransitionSetting();
+
       const { params, query } = unref(currentRoute);
       const { path } = params;
       const _path = Array.isArray(path) ? path.join('/') : path;
@@ -18,8 +21,7 @@
         path: '/' + _path,
         query,
       });
-      const { openRouterTransition, openPageLoading } = appStore.getProjectConfig;
-      if (openRouterTransition && openPageLoading) {
+      if (unref(getEnableTransition) && unref(getOpenPageLoading)) {
         setTimeout(() => {
           appStore.setPageLoadingAction(false);
         }, 0);
@@ -12,24 +12,24 @@
     lodash-es "^4.17.15"
     resize-observer-polyfill "^1.5.1"
-"@ant-design/colors@^4.0.0":
-  version "4.0.5"
-  resolved "https://registry.npmjs.org/@ant-design/colors/-/colors-4.0.5.tgz#d7d100d7545cca8f624954604a6892fc48ba5aae"
-  integrity sha512-3mnuX2prnWOWvpFTS2WH2LoouWlOgtnIpc6IarWN6GOzzLF8dW/U8UctuvIPhoboETehZfJ61XP+CGakBEPJ3Q==
+"@ant-design/colors@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/@ant-design/colors/-/colors-5.0.0.tgz#46b73b4cc6935b35fc8b84555e8e42c8cfc190e6"
+  integrity sha512-Pe1rYorgVC1v4f+InDXvIlQH715pO1g7BsOhy/ehX/U6ebPKqojmkYJKU3lF+84Zmvyar7ngZ28hesAa1nWjLg==
   dependencies:
-    tinycolor2 "^1.4.1"
+    "@ctrl/tinycolor" "^3.1.6"
 "@ant-design/icons-svg@^4.0.0":
   version "4.1.0"
   resolved "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c"
   integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==
-"@ant-design/icons-vue@^5.1.5":
-  version "5.1.5"
-  resolved "https://registry.npmjs.org/@ant-design/icons-vue/-/icons-vue-5.1.5.tgz#8e83ba90a29b7ed8b4c2e7282f5908b9b3de519b"
-  integrity sha512-j1qHhzFCLh4UNoOoVNDFKp4qbzX2bpc/am+rNCqNDeze/TpbQ38nSBSmNPucHuD7koQtAjBW+AIcnToYCgKvpA==
+"@ant-design/icons-vue@^5.1.6":
+  version "5.1.6"
+  resolved "https://registry.npmjs.org/@ant-design/icons-vue/-/icons-vue-5.1.6.tgz#af15cbf2375d95199e90166adce4c9f6ad1c17f1"
+  integrity sha512-1KY04c/0iDM88ICdu6EW2/ZPOrH+FyL0uvR350XnVqvnDiLijdcrRaLzkZgCdBcy7cy5t5+onXKocymndCOdRA==
   dependencies:
-    "@ant-design/colors" "^4.0.0"
+    "@ant-design/colors" "^5.0.0"
     "@ant-design/icons-svg" "^4.0.0"
     "@babel/runtime" "^7.10.4"
     lodash "^4.17.15"
@@ -992,6 +992,11 @@
   resolved "https://registry.npmjs.org/@commitlint/types/-/types-11.0.0.tgz#719cf05fcc1abb6533610a2e0f5dd1e61eac14fe"
   integrity sha512-VoNqai1vR5anRF5Tuh/+SWDFk7xi7oMwHrHrbm1BprYXjB2RJsWLhUrStMssDxEl5lW/z3EUdg8RvH/IUBccSQ==
+"@ctrl/tinycolor@^3.1.6":
+  version "3.1.7"
+  resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.1.7.tgz#1585f67629882002a9f8e15a2941c9a4321bf80c"
+  integrity sha512-/0C6fjXbCwu22k8mMsKRSAo9zgu61d2p75Or9IuIC0Vu5CWN88t2QHK93LhNnxnqHWf5SFwFU28w9cKfTmnfvg==
+
 "@eslint/eslintrc@^0.2.1":
   version "0.2.1"
   resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz#f72069c330461a06684d119384435e12a5d76e3c"
@@ -1847,13 +1852,13 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
-ant-design-vue@2.0.0-beta.15:
-  version "2.0.0-beta.15"
-  resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-beta.15.tgz#3c787dabb70a33885d0e751e58f9a5610ed06134"
-  integrity sha512-OxZy+ZYU3LauIL4Rhqwy441K/iD++Cit6upnQy5+LVUrX0PSObPqPqMWVpncbAmJJYTEz88gkvgGeYqBdzouWA==
+ant-design-vue@2.0.0-rc.2:
+  version "2.0.0-rc.2"
+  resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-rc.2.tgz#fd3b4a5a64fccbb53ed488a194317a040de2223e"
+  integrity sha512-XA7X/7HHIveiTh41bZWGfoQ2Rys/rqWknK2zzdHwVnfw9ST3v+ciMKH0Uegyn7m14QL/EdUkC8zGsXpiSXqKNQ==
   dependencies:
     "@ant-design-vue/use" "^0.0.1-0"
-    "@ant-design/icons-vue" "^5.1.5"
+    "@ant-design/icons-vue" "^5.1.6"
     "@babel/runtime" "^7.10.5"
     "@simonwep/pickr" "~1.7.0"
     add-dom-event-listener "^1.0.2"
@@ -7705,11 +7710,6 @@ through@2, &quot;through@&gt;=2.2.7 &lt;3&quot;, through@^2.3.6, through@^2.3.8:
   resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
-tinycolor2@^1.4.1:
-  version "1.4.2"
-  resolved "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
-  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
-
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"