refactor: refactor the project to solve the hot update problem caused by…

refactor: refactor the project to solve the hot update problem caused by circular dependencies close #301

.vscode/settings.json

@@ -138,6 +138,7 @@
   "vetur.format.defaultFormatter.ts": "prettier-tslint",
   "vetur.format.defaultFormatter.js": "prettier",
   "vetur.languageFeatures.codeActions": false,
+  "vetur.validation.script": false,
   "vetur.format.defaultFormatterOptions": {
     "js-beautify-html": {
       "wrap_attributes": "force-expand-multiline"
@@ -188,6 +189,11 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
+  "[vue]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": false
+    }
+  },
   "i18n-ally.localesPaths": ["src/locales/lang"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sortKeys": true,

CHANGELOG.zh_CN.md

+## Wip
+
+### ✨ Refactor
+
+- 重构项目以解决循环依赖项导致的热更新问题
+
 ## 2.0.3 (2021-03-07)
 
 ### ✨ Features

package.json

@@ -53,7 +53,7 @@
   "devDependencies": {
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
-    "@iconify/json": "^1.1.312",
+    "@iconify/json": "^1.1.313",
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.7.0",
     "@types/crypto-js": "^4.0.1",
@@ -119,7 +119,7 @@
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
-    "esbuild": "0.8.56",
+    "esbuild": "0.8.57",
     "rollup": "2.40.0"
   },
   "repository": {

src/api/sys/user.ts

@@ -5,6 +5,7 @@ import {
   GetUserInfoByUserIdParams,
   GetUserInfoByUserIdModel,
 } from './model/userModel';
+
 import { ErrorMessageMode } from '/@/utils/http/axios/types';
 
 enum Api {

src/components/Table/src/types/table.ts

@@ -5,10 +5,12 @@ import type {
   ColumnProps,
   TableRowSelection as ITableRowSelection,
 } from 'ant-design-vue/lib/table/interface';
+
 import { ComponentType } from './componentType';
 import { VueNode } from '/@/utils/propTypes';
-// import { ColumnProps } from './column';
+
 export declare type SortOrder = 'ascend' | 'descend';
+
 export interface TableCurrentDataSource<T = Recordable> {
   currentDataSource: T[];
 }

src/directives/permission.ts

@@ -5,12 +5,13 @@
  */
 import type { App, Directive, DirectiveBinding } from 'vue';
 
-import { appStore } from '/@/store/modules/app';
+import projectSetting from '/@/settings/projectSetting';
 import { usePermission } from '/@/hooks/web/usePermission';
 import { PermissionModeEnum } from '/@/enums/appEnum';
-const { hasPermission } = usePermission();
 
 function isAuth(el: Element, binding: any) {
+  const { hasPermission } = usePermission();
+
   const value = binding.value;
   if (!value) return;
   if (!hasPermission(value)) {
@@ -19,7 +20,7 @@ function isAuth(el: Element, binding: any) {
 }
 
 function isBackMode() {
-  return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
+  return projectSetting.permissionMode === PermissionModeEnum.BACK;
 }
 
 const mounted = (el: Element, binding: DirectiveBinding<any>) => {

src/hooks/web/usePermission.ts

@@ -9,6 +9,7 @@ import { useTabs } from './useTabs';
 import router, { resetRouter } from '/@/router';
 // import { RootRoute } from '/@/router/routes';
 
+import projectSetting from '/@/settings/projectSetting';
 import { PermissionModeEnum } from '/@/enums/appEnum';
 import { RoleEnum } from '/@/enums/roleEnum';
 
@@ -24,7 +25,7 @@ export function usePermission() {
   async function togglePermissionMode() {
     appStore.commitProjectConfigState({
       permissionMode:
-        appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK
+        projectSetting.permissionMode === PermissionModeEnum.BACK
           ? PermissionModeEnum.ROLE
           : PermissionModeEnum.BACK,
     });
@@ -51,7 +52,7 @@ export function usePermission() {
    * Determine whether there is permission
    */
   function hasPermission(value?: RoleEnum | RoleEnum[] | string | string[], def = true): boolean {
-    const permMode = appStore.getProjectConfig.permissionMode;
+    const permMode = projectSetting.permissionMode;
     if (PermissionModeEnum.ROLE === permMode) {
       // Visible by default
       if (!value) {
@@ -81,7 +82,7 @@ export function usePermission() {
    * @param roles
    */
   async function changeRole(roles: RoleEnum | RoleEnum[]): Promise<void> {
-    if (appStore.getProjectConfig.permissionMode !== PermissionModeEnum.ROLE) {
+    if (projectSetting.permissionMode !== PermissionModeEnum.ROLE) {
       throw new Error(
         'Please switch PermissionModeEnum to ROLE mode in the configuration to operate!'
       );

src/layouts/default/setting/components/SettingFooter.vue

@@ -19,17 +19,23 @@
 <script lang="ts">
   import { defineComponent, unref } from 'vue';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useI18n } from '/@/hooks/web/useI18n';
   import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
+
   import { appStore } from '/@/store/modules/app';
-  import defaultSetting from '/@/settings/projectSetting';
+  import { permissionStore } from '/@/store/modules/permission';
+  import { tabStore } from '/@/store/modules/tab';
+  import { userStore } from '/@/store/modules/user';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
   import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
   import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
 
+  import defaultSetting from '/@/settings/projectSetting';
   export default defineComponent({
     name: 'SettingFooter',
     components: { CopyOutlined, RedoOutlined },
@@ -63,6 +69,9 @@
       function handleClearAndRedo() {
         localStorage.clear();
         appStore.resumeAllState();
+        permissionStore.commitResetState();
+        tabStore.commitResetState();
+        userStore.commitResetState();
         location.reload();
       }
       return {

src/layouts/page/useCache.ts

@@ -3,17 +3,21 @@ import type { RouteLocation } from 'vue-router';
 import { computed, ref, unref } from 'vue';
 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 import { tryTsxEmit } from '/@/utils/helper/vueHelper';
-import { tabStore, PAGE_LAYOUT_KEY } from '/@/store/modules/tab';
 
 import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 
 const ParentLayoutName = 'ParentLayout';
 
+const PAGE_LAYOUT_KEY = '__PAGE_LAYOUT__';
+
 export function getKey(component: FunctionalComponent & { type: Indexable }, route: RouteLocation) {
   return !!component?.type.parentView ? {} : { key: route.fullPath };
 }
 
 export function useCache(isPage: boolean) {
+  const { getters } = useStore();
+
   const name = ref('');
   const { currentRoute } = useRouter();
 
@@ -38,7 +42,7 @@ export function useCache(isPage: boolean) {
     if (!unref(getOpenKeepAlive)) {
       return [];
     }
-    const cached = tabStore.getCachedMapState;
+    const cached = getters['app-tab/getCachedMapState'];
 
     if (isPage) {
       //  page Layout

src/main.ts

@@ -17,9 +17,11 @@ import { setupStore } from '/@/store';
 import { setupErrorHandle } from '/@/logics/error-handle';
 import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
-
 import { registerGlobComp } from '/@/components/registerGlobComp';
 
+// router-guard
+import '/@/router/guard';
+
 // Register icon Sprite
 import 'vite-plugin-svg-icons/register';
 
@@ -32,6 +34,7 @@ import { isDevMode } from '/@/utils/env';
 
   // Multilingual configuration
   await setupI18n(app);
+
   // Configure routing
   setupRouter(app);
 

src/router/guard/index.ts

-import { Router } from 'vue-router';
+import router from '/@/router';
 
 import { createProgressGuard } from './progressGuard';
 import { createPermissionGuard } from './permissionGuard';
@@ -10,14 +10,12 @@ import { createHttpGuard } from './httpGuard';
 import { createPageGuard } from './pageGuard';
 import { createStateGuard } from './stateGuard';
 
-export function createGuard(router: Router) {
-  createPageGuard(router);
-  createPageLoadingGuard(router);
-  createHttpGuard(router);
-  createScrollGuard(router);
-  createMessageGuard(router);
-  createTitleGuard(router);
-  createProgressGuard(router);
-  createPermissionGuard(router);
-  createStateGuard(router);
-}
+createPageGuard(router);
+createPageLoadingGuard(router);
+createHttpGuard(router);
+createScrollGuard(router);
+createMessageGuard(router);
+createTitleGuard(router);
+createProgressGuard(router);
+createPermissionGuard(router);
+createStateGuard(router);

src/router/guard/stateGuard.ts

 import type { Router } from 'vue-router';
 import { appStore } from '/@/store/modules/app';
+import { tabStore } from '/@/store/modules/tab';
+import { userStore } from '/@/store/modules/user';
+import { permissionStore } from '/@/store/modules/permission';
 import { PageEnum } from '/@/enums/pageEnum';
 import { removeTabChangeListener } from '/@/logics/mitt/tabChange';
 
@@ -8,6 +11,9 @@ export function createStateGuard(router: Router) {
     // Just enter the login page and clear the authentication information
     if (to.path === PageEnum.BASE_LOGIN) {
       appStore.resumeAllState();
+      permissionStore.commitResetState();
+      tabStore.commitResetState();
+      userStore.commitResetState();
       removeTabChangeListener();
     }
   });

src/router/index.ts

@@ -3,7 +3,6 @@ import type { App } from 'vue';
 
 import { createRouter, createWebHashHistory } from 'vue-router';
 
-import { createGuard } from './guard';
 import { basicRoutes, LoginRoute } from './routes';
 import { REDIRECT_NAME } from './constant';
 
@@ -30,7 +29,6 @@ export function resetRouter() {
 // config router
 export function setupRouter(app: App<Element>) {
   app.use(router);
-  createGuard(router);
 }
 
 export default router;

src/store/modules/app.ts

@@ -10,10 +10,6 @@ import { Persistent } from '/@/utils/cache/persistent';
 import { deepMerge } from '/@/utils';
 
 import { resetRouter } from '/@/router';
-import { permissionStore } from './permission';
-import { tabStore } from './tab';
-
-import { userStore } from './user';
 
 export interface LockInfo {
   pwd: string | undefined;
@@ -66,10 +62,6 @@ export default class App extends VuexModule {
   async resumeAllState() {
     resetRouter();
     Persistent.clearAll();
-
-    permissionStore.commitResetState();
-    tabStore.commitResetState();
-    userStore.commitResetState();
   }
 
   @Action

src/store/modules/lock.ts

+import type { LockInfo } from '/@/store/types';
+
 import { VuexModule, getModule, Module, Mutation, Action } from 'vuex-module-decorators';
 import store from '/@/store';
 
@@ -8,11 +10,6 @@ import { Persistent } from '/@/utils/cache/persistent';
 
 import { userStore } from './user';
 
-export interface LockInfo {
-  pwd: string | undefined;
-  isLock: boolean;
-}
-
 const NAME = 'app-lock';
 hotModuleUnregisterModule(NAME);
 @Module({ dynamic: true, namespaced: true, store, name: NAME })

src/store/modules/tab.ts

-import { toRaw } from 'vue';
+import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router';
 
-import { unref } from 'vue';
+import { toRaw, unref } from 'vue';
 import { Action, Module, Mutation, VuexModule, getModule } from 'vuex-module-decorators';
 import { hotModuleUnregisterModule } from '/@/utils/helper/vuexHelper';
 
@@ -9,8 +9,8 @@ import { PageEnum } from '/@/enums/pageEnum';
 import store from '/@/store';
 import router from '/@/router';
 import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/constant';
-import { RouteLocationNormalized, RouteLocationRaw } from 'vue-router';
 import { getRoute } from '/@/router/helper/routeHelper';
+
 import { useGo, useRedo } from '/@/hooks/web/usePage';
 import { cloneDeep } from 'lodash-es';
 

src/store/modules/user.ts

@@ -3,6 +3,7 @@ import type {
   GetUserInfoByUserIdModel,
   GetUserInfoByUserIdParams,
 } from '/@/api/sys/model/userModel';
+import type { UserInfo } from '/@/store/types';
 
 import store from '/@/store/index';
 import { VuexModule, Module, getModule, Mutation, Action } from 'vuex-module-decorators';
@@ -10,7 +11,7 @@ import { hotModuleUnregisterModule } from '/@/utils/helper/vuexHelper';
 
 import { PageEnum } from '/@/enums/pageEnum';
 import { RoleEnum } from '/@/enums/roleEnum';
-import { CacheTypeEnum, ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum';
+import { ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum';
 
 import { useMessage } from '/@/hooks/web/useMessage';
 
@@ -18,29 +19,13 @@ import router from '/@/router';
 
 import { loginApi, getUserInfoById } from '/@/api/sys/user';
 
-import { Persistent, BasicKeys } from '/@/utils/cache/persistent';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { ErrorMessageMode } from '/@/utils/http/axios/types';
-import projectSetting from '/@/settings/projectSetting';
-
-export type UserInfo = Omit<GetUserInfoByUserIdModel, 'roles'>;
-
-const { permissionCacheType } = projectSetting;
-const isLocal = permissionCacheType === CacheTypeEnum.LOCAL;
+import { getAuthCache, setAuthCache } from '/@/utils/auth/index';
 
 const NAME = 'app-user';
 hotModuleUnregisterModule(NAME);
 
-function getCache<T>(key: BasicKeys) {
-  const fn = isLocal ? Persistent.getLocal : Persistent.getSession;
-  return fn(key) as T;
-}
-
-function setCache(key: BasicKeys, value) {
-  const fn = isLocal ? Persistent.setLocal : Persistent.setSession;
-  return fn(key, value);
-}
-
 @Module({ namespaced: true, name: NAME, dynamic: true, store })
 class User extends VuexModule {
   // user info
@@ -53,15 +38,15 @@ class User extends VuexModule {
   private roleListState: RoleEnum[] = [];
 
   get getUserInfoState(): UserInfo {
-    return this.userInfoState || getCache<UserInfo>(USER_INFO_KEY) || {};
+    return this.userInfoState || getAuthCache<UserInfo>(USER_INFO_KEY) || {};
   }
 
   get getTokenState(): string {
-    return this.tokenState || getCache<string>(TOKEN_KEY);
+    return this.tokenState || getAuthCache<string>(TOKEN_KEY);
   }
 
   get getRoleListState(): RoleEnum[] {
-    return this.roleListState.length > 0 ? this.roleListState : getCache<RoleEnum[]>(ROLES_KEY);
+    return this.roleListState.length > 0 ? this.roleListState : getAuthCache<RoleEnum[]>(ROLES_KEY);
   }
 
   @Mutation
@@ -74,19 +59,19 @@ class User extends VuexModule {
   @Mutation
   commitUserInfoState(info: UserInfo): void {
     this.userInfoState = info;
-    setCache(USER_INFO_KEY, info);
+    setAuthCache(USER_INFO_KEY, info);
   }
 
   @Mutation
   commitRoleListState(roleList: RoleEnum[]): void {
     this.roleListState = roleList;
-    setCache(ROLES_KEY, roleList);
+    setAuthCache(ROLES_KEY, roleList);
   }
 
   @Mutation
   commitTokenState(info: string): void {
     this.tokenState = info;
-    setCache(TOKEN_KEY, info);
+    setAuthCache(TOKEN_KEY, info);
   }
 
   /**

src/store/types.ts

+export interface LockInfo {
+  pwd: string | undefined;
+  isLock: boolean;
+}
+
+export interface UserInfo {
+  // 用户id
+  userId: string | number;
+  // 用户名
+  username: string;
+  // 真实名字
+  realName: string;
+  // 介绍
+  desc?: string;
+}

src/utils/auth/index.ts

+import { Persistent, BasicKeys } from '/@/utils/cache/persistent';
+import { CacheTypeEnum } from '/@/enums/cacheEnum';
+import projectSetting from '/@/settings/projectSetting';
+import { TOKEN_KEY } from '/@/enums/cacheEnum';
+
+const { permissionCacheType } = projectSetting;
+const isLocal = permissionCacheType === CacheTypeEnum.LOCAL;
+
+export function getToken() {
+  return getAuthCache(TOKEN_KEY);
+}
+
+export function getAuthCache<T>(key: BasicKeys) {
+  const fn = isLocal ? Persistent.getLocal : Persistent.getSession;
+  return fn(key) as T;
+}
+
+export function setAuthCache(key: BasicKeys, value) {
+  const fn = isLocal ? Persistent.setLocal : Persistent.setSession;
+  return fn(key, value);
+}

src/utils/cache/persistent.ts

-import type { UserInfo } from '/@/store/modules/user';
-import type { LockInfo } from '/@/store/modules/lock';
+import type { LockInfo, UserInfo } from '/@/store/types';
+
 import { ProjectConfig } from '/#/config';
 
 import { createLocalStorage, createSessionStorage } from '/@/utils/cache';

src/utils/env.ts

 import type { GlobEnvConfig } from '/#/config';
 
-import { useGlobSetting } from '/@/hooks/setting';
+import { warn } from '/@/utils/log';
 import pkg from '../../package.json';
 import { getConfigFileName } from '../../build/getConfigFileName';
 
 export function getCommonStoragePrefix() {
-  const globSetting = useGlobSetting();
-  return `${globSetting.shortName}__${getEnv()}`.toUpperCase();
+  const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
+  return `${VITE_GLOB_APP_SHORT_NAME}__${getEnv()}`.toUpperCase();
 }
 
 // Generate cache key according to version
@@ -21,7 +21,27 @@ export function getAppEnvConfig() {
     ? // Get the global configuration (the configuration will be extracted independently when packaging)
       ((import.meta.env as unknown) as GlobEnvConfig)
     : window[ENV_NAME as any]) as unknown) as GlobEnvConfig;
-  return ENV;
+
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+  } = ENV;
+
+  if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
+    warn(
+      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+    );
+  }
+  return {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+  };
 }
 
 /**

src/utils/http/axios/axiosTransform.ts

@@ -4,6 +4,12 @@
 import type { AxiosRequestConfig, AxiosResponse } from 'axios';
 import type { RequestOptions, Result } from './types';
 
+export interface CreateAxiosOptions extends AxiosRequestConfig {
+  prefixUrl?: string;
+  transform?: AxiosTransform;
+  requestOptions?: RequestOptions;
+}
+
 export abstract class AxiosTransform {
   /**
    * @description: Process configuration before request

src/utils/http/axios/checkStatus.ts

 import { useMessage } from '/@/hooks/web/useMessage';
-import { userStore } from '/@/store/modules/user';
 import { useI18n } from '/@/hooks/web/useI18n';
+import router from '/@/router';
+import { PageEnum } from '/@/enums/pageEnum';
+
 const { createMessage } = useMessage();
 
 const error = createMessage.error!;
@@ -15,7 +17,7 @@ export function checkStatus(status: number, msg: string): void {
     // Return to the current page after successful login. This step needs to be operated on the login page.
     case 401:
       error(t('sys.api.errMsg401'));
-      userStore.logout(true);
+      router.push(PageEnum.BASE_LOGIN);
       break;
     case 403:
       error(t('sys.api.errMsg403'));

src/utils/http/axios/index.ts

@@ -2,10 +2,10 @@
 // The axios configuration can be changed according to the project, just change the file, other files can be left unchanged
 
 import type { AxiosResponse } from 'axios';
-import type { CreateAxiosOptions, RequestOptions, Result } from './types';
-import { VAxios } from './Axios';
-import { AxiosTransform } from './axiosTransform';
+import type { RequestOptions, Result } from './types';
+import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform';
 
+import { VAxios } from './Axios';
 import { checkStatus } from './checkStatus';
 
 import { useGlobSetting } from '/@/hooks/setting';
@@ -14,12 +14,12 @@ import { useMessage } from '/@/hooks/web/useMessage';
 import { RequestEnum, ResultEnum, ContentTypeEnum } from '/@/enums/httpEnum';
 
 import { isString } from '/@/utils/is';
+import { getToken } from '/@/utils/auth';
 import { setObjToUrlParams, deepMerge } from '/@/utils';
 import { errorStore } from '/@/store/modules/error';
 import { errorResult } from './const';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { createNow, formatRequestDate } from './helper';
-import { userStore } from '/@/store/modules/user';
 
 const globSetting = useGlobSetting();
 const prefix = globSetting.urlPrefix;
@@ -137,7 +137,7 @@ const transform: AxiosTransform = {
    */
   requestInterceptors: (config) => {
     // 请求之前处理config
-    const token = userStore.getTokenState;
+    const token = getToken();
     if (token) {
       // jwt token
       config.headers.Authorization = token;

src/utils/http/axios/types.ts

-import type { AxiosRequestConfig } from 'axios';
-import type { AxiosTransform } from './axiosTransform';
 export type ErrorMessageMode = 'none' | 'modal' | 'message' | undefined;
 
 export interface RequestOptions {
@@ -20,12 +18,6 @@ export interface RequestOptions {
   ignoreCancelToken?: boolean;
 }
 
-export interface CreateAxiosOptions extends AxiosRequestConfig {
-  prefixUrl?: string;
-  transform?: AxiosTransform;
-  requestOptions?: RequestOptions;
-}
-
 export interface Result<T = any> {
   code: number;
   type: 'success' | 'error' | 'warning';

src/views/demo/system/account/index.vue

@@ -3,7 +3,7 @@
     <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
     <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5">
       <template #toolbar>
-        <a-button type="primary" @click="handleCreate"> 新增账号 </a-button>
+        <a-button type="primary" @click="handleCreate">新增账号</a-button>
       </template>
       <template #action="{ record }">
         <TableAction

src/views/sys/login/RegisterForm.vue

@@ -47,7 +47,7 @@
         class="enter-x"
         size="large"
         block
-        @click="handleReset"
+        @click="handleRegister"
         :loading="loading"
       >
         {{ t('sys.login.registerButton') }}
@@ -103,7 +103,7 @@
 
       const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
 
-      async function handleReset() {
+      async function handleRegister() {
         const data = await validForm();
         if (!data) return;
         console.log(data);
@@ -114,7 +114,7 @@
         formRef,
         formData,
         getFormRules,
-        handleReset,
+        handleRegister,
         loading,
         handleBackLogin,
         getShow,

yarn.lock

@@ -1117,10 +1117,10 @@
   dependencies:
     cross-fetch "^3.0.6"
 
-"@iconify/json@^1.1.312":
-  version "1.1.312"
-  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.312.tgz#d8e92f31acfb326dcbfa4daea2d4ba885423c186"
-  integrity sha512-bYgaMaNB17MkLL1UgRRD6fv9Vp80kny7KA4SVMxonBEsVtZ+53dCK0R7RccrC45X1mspG8MejUaEw/AaEmWHZQ==
+"@iconify/json@^1.1.313":
+  version "1.1.313"
+  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.313.tgz#c225be3c5ce3280a2c34e753a65dc257b85b6652"
+  integrity sha512-gv00rSX4apKE0i/fUjXp5+sBb8LHzzdJqrXkBNVby7Nl7yzRqeQ/EyY+7ixtSpEu3f1P/co/vrgdbZN6wlw6DA==
 
 "@intlify/core-base@9.0.0":
   version "9.0.0"
@@ -1312,14 +1312,14 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/fs-extra@^9.0.8":
+"@types/fs-extra@^9.0.6", "@types/fs-extra@^9.0.8":
   version "9.0.8"
   resolved "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.8.tgz#32c3c07ddf8caa5020f84b5f65a48470519f78ba"
   integrity sha512-bnlTVTwq03Na7DpWxFJ1dvnORob+Otb8xHyUqUWhqvz/Ksg8+JXPlR52oeMSZ37YEOa5PyccbgUNutiQdi13TA==
   dependencies:
     "@types/node" "*"
 
-"@types/glob@^7.1.1":
+"@types/glob@^7.1.1", "@types/glob@^7.1.3":
   version "7.1.3"
   resolved "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
   integrity sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==
@@ -1515,6 +1515,13 @@
   resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.0.tgz#dd3e6699ba3237f0348cd085e4698780204842f9"
   integrity sha512-37RSHht+gzzgYeobbG+KWryeAW8J33Nhr69cjTqSYymXVZEN9NbRYWoYlRtDhHKPVT1FyNKwaTPC1NynKZpzRA==
 
+"@types/yargs@^15.0.12":
+  version "15.0.13"
+  resolved "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz#34f7fec8b389d7f3c1fd08026a5763e072d3c6dc"
+  integrity sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@types/yargs@^16.0.0":
   version "16.0.0"
   resolved "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.0.tgz#0e033b23452da5d61b6c44747612cb80ac528751"
@@ -2219,6 +2226,15 @@ bl@^1.0.0:
     readable-stream "^2.3.5"
     safe-buffer "^5.1.1"
 
+bl@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
+  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
 bluebird@^3.5.0, bluebird@^3.7.2:
   version "3.7.2"
   resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@@ -2310,7 +2326,7 @@ buffer-from@^1.0.0, buffer-from@^1.1.1:
   resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
-buffer@^5.2.1, buffer@^5.4.3:
+buffer@^5.2.1, buffer@^5.4.3, buffer@^5.5.0:
   version "5.7.1"
   resolved "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
   integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -2582,6 +2598,11 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
+cli-spinners@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.5.0.tgz#12763e47251bf951cb75c201dfa58ff1bcb2d047"
+  integrity sha512-PC+AmIuK04E6aeSs/pUccSujsTzBhu4HzC2dL+CfJB/Jcc2qTRbEwZQDfIUpt2Xl8BodYBEq8w4fc0kU2I9DjQ==
+
 cli-truncate@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
@@ -2632,6 +2653,11 @@ clone-response@1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
+
 clone@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
@@ -3342,6 +3368,13 @@ deepmerge@^4.2.2:
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
+defaults@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
+  dependencies:
+    clone "^1.0.2"
+
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -3533,6 +3566,22 @@ download@^7.1.0:
     p-event "^2.1.0"
     pify "^3.0.0"
 
+dpdm@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/dpdm/-/dpdm-3.6.0.tgz#d8612e9899725287f8ad5b705cb081a5158d2f2f"
+  integrity sha512-+DRT3o/5mIbjKENtKUEDX0qOk0xIBDllDITtvHRH+5Yppz2aJAHQkozj3oiIPLWWfup8CuuBl3xWvk5yD5oaOg==
+  dependencies:
+    "@types/fs-extra" "^9.0.6"
+    "@types/glob" "^7.1.3"
+    "@types/yargs" "^15.0.12"
+    chalk "^4.1.0"
+    fs-extra "^9.0.1"
+    glob "^7.1.6"
+    ora "^5.2.0"
+    tslib "^2.1.0"
+    typescript "^4.1.3"
+    yargs "^16.2.0"
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -3704,10 +3753,10 @@ esbuild-register@^2.2.0:
   dependencies:
     jsonc-parser "^3.0.0"
 
-esbuild@0.8.56, esbuild@^0.8.52, esbuild@^0.8.54, esbuild@^0.8.56:
-  version "0.8.56"
-  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.8.56.tgz#9c7c3d6e614db7367afa348adb0ab287c296735e"
-  integrity sha512-PTMdAWK3JI2MNW811znGssGP5GR44tQPr++VQ1rPP0n8Z1cTKbCPD3S/kXPLr3ZZDIwAaVm08fuFym6Rp8l/0A==
+esbuild@0.8.57, esbuild@^0.8.52, esbuild@^0.8.54, esbuild@^0.8.56:
+  version "0.8.57"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.8.57.tgz#a42d02bc2b57c70bcd0ef897fe244766bb6dd926"
+  integrity sha512-j02SFrUwFTRUqiY0Kjplwjm1psuzO1d6AjaXKuOR9hrY0HuPsT6sV42B6myW34h1q4CRy+Y3g4RU/cGJeI/nNA==
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -5045,7 +5094,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -5279,6 +5328,11 @@ is-hexadecimal@^1.0.0:
   resolved "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
+is-interactive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
+  integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
+
 is-jpg@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz#2e1997fa6e9166eaac0242daae443403e4ef1d97"
@@ -6596,6 +6650,20 @@ optipng-bin@^7.0.0:
     bin-wrapper "^4.0.0"
     logalot "^2.0.0"
 
+ora@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/ora/-/ora-5.3.0.tgz#fb832899d3a1372fe71c8b2c534bbfe74961bb6f"
+  integrity sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==
+  dependencies:
+    bl "^4.0.3"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-spinners "^2.5.0"
+    is-interactive "^1.0.0"
+    log-symbols "^4.0.0"
+    strip-ansi "^6.0.0"
+    wcwidth "^1.0.1"
+
 os-filter-obj@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/os-filter-obj/-/os-filter-obj-2.0.0.tgz#1c0b62d5f3a2442749a2d139e6dddee6e81d8d16"
@@ -7370,7 +7438,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.1.1:
+readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.1.1, readable-stream@^3.4.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -8762,7 +8830,7 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3:
+tslib@^2.0.3, tslib@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
   integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
@@ -8820,7 +8888,7 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@4.2.3:
+typescript@4.2.3, typescript@^4.1.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
   integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==
@@ -9282,6 +9350,13 @@ warning@^4.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
+wcwidth@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
+  dependencies:
+    defaults "^1.0.3"
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"