refactor: refactor setting

CHANGELOG.zh_CN.md

@@ -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)

package.json

@@ -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",

src/hooks/core/useContext.ts

@@ -5,9 +5,8 @@ export const createContext = <T>(
   contextInjectKey: InjectionKey<T> = Symbol(),
   _readonly = true
 ) => {
-  const state = reactive({
-    ...context,
-  });
+  const state = reactive({ ...context });
+
   const provideData = _readonly ? readonly(state) : state;
   provide(contextInjectKey, provideData);
 };

src/hooks/setting/useRootSetting.ts

@@ -12,16 +12,10 @@ type RootSetting = Omit<
 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,

src/hooks/setting/useTransitionSetting.ts

@@ -0,0 +1,33 @@
+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,
+  };
+}

src/layouts/default/content/index.less

@@ -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%;
     }
   }
 }

src/layouts/default/content/index.tsx

@@ -1,23 +1,31 @@
 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>
       );

src/layouts/default/multitabs/index.tsx

@@ -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;

src/layouts/default/setting/SettingDrawer.tsx

@@ -17,6 +17,7 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 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,
@@ -189,6 +187,13 @@ export default defineComponent({
       getGrayMode,
     } = useRootSetting();
 
+    const {
+      getOpenPageLoading,
+      getBasicTransition,
+      getEnableTransition,
+      getOpenNProgress,
+    } = useTransitionSetting();
+
     const {
       getIsHorizontal,
       getShowMenu,
@@ -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),
           })}
         </>
       );

src/layouts/default/setting/enum.ts

@@ -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 = [

src/layouts/default/setting/handler.ts

@@ -66,17 +66,20 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<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 };

src/layouts/page/index.tsx

@@ -11,6 +11,7 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 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}
                   >

src/layouts/page/useTransition.ts

@@ -1,11 +1,12 @@
-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);
   }

src/router/guard/index.ts

@@ -16,7 +16,7 @@ import { tabStore } from '/@/store/modules/tab';
 
 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);
 }