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

@@ -1,3 +1,9 @@
+## 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

@@ -1,4 +1,4 @@
-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

@@ -1,5 +1,8 @@
 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

@@ -1,3 +1,5 @@
+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

@@ -1,6 +1,6 @@
-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';