Merge pull request #42 from cshaptx4869/patch-14

refactor(main.ts): ♻️ 抽离一些功能为vue插件

src/lang/index.ts

@@ -1,10 +1,10 @@
 import { createI18n } from "vue-i18n";
-import { useAppStore } from "@/store/modules/app";
+import { useAppStoreHook } from "@/store/modules/app";
 // 本地语言包
 import enLocale from "./package/en";
 import zhCnLocale from "./package/zh-cn";
 
-const appStore = useAppStore();
+const appStore = useAppStoreHook();
 
 const messages = {
   "zh-cn": {

src/main.ts

@@ -3,17 +3,11 @@ import App from "./App.vue";
 import router from "@/router";
 import { setupStore } from "@/store";
 import { setupDirective } from "@/directive";
-
-import "@/permission";
-
-import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import { setupElIcons, setupI18n, setupPermission } from "@/plugins";
 
 // 本地SVG图标
 import "virtual:svg-icons-register";
 
-// 国际化
-import i18n from "@/lang/index";
-
 // 样式
 import "element-plus/theme-chalk/dark/css-vars.css";
 import "@/styles/index.scss";
@@ -25,9 +19,10 @@ const app = createApp(App);
 setupDirective(app);
 // 全局注册 状态管理(store)
 setupStore(app);
-
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component);
-}
-
-app.use(router).use(i18n).mount("#app");
+// 全局注册Element-plus图标
+setupElIcons(app);
+// 国际化
+setupI18n(app);
+// 注册动态路由
+setupPermission();
+app.use(router).mount("#app");

src/permission.ts

@@ -1,62 +0,0 @@
-import router from "@/router";
-import { useUserStoreHook } from "@/store/modules/user";
-import { usePermissionStoreHook } from "@/store/modules/permission";
-
-import NProgress from "nprogress";
-import "nprogress/nprogress.css";
-
-NProgress.configure({ showSpinner: false }); // 进度条
-
-const permissionStore = usePermissionStoreHook();
-
-// 白名单路由
-const whiteList = ["/login"];
-
-router.beforeEach(async (to, from, next) => {
-  NProgress.start();
-  const hasToken = localStorage.getItem("token");
-  if (hasToken) {
-    if (to.path === "/login") {
-      // 如果已登录，跳转首页
-      next({ path: "/" });
-      NProgress.done();
-    } else {
-      const userStore = useUserStoreHook();
-      const hasRoles = userStore.user.roles && userStore.user.roles.length > 0;
-      if (hasRoles) {
-        // 未匹配到任何路由，跳转404
-        if (to.matched.length === 0) {
-          from.name ? next({ name: from.name }) : next("/404");
-        } else {
-          next();
-        }
-      } else {
-        try {
-          const { roles } = await userStore.getUserInfo();
-          const accessRoutes = await permissionStore.generateRoutes(roles);
-          accessRoutes.forEach((route) => {
-            router.addRoute(route);
-          });
-          next({ ...to, replace: true });
-        } catch (error) {
-          // 移除 token 并跳转登录页
-          await userStore.resetToken();
-          next(`/login?redirect=${to.path}`);
-          NProgress.done();
-        }
-      }
-    }
-  } else {
-    // 未登录可以访问白名单页面
-    if (whiteList.indexOf(to.path) !== -1) {
-      next();
-    } else {
-      next(`/login?redirect=${to.path}`);
-      NProgress.done();
-    }
-  }
-});
-
-router.afterEach(() => {
-  NProgress.done();
-});

src/plugins/i18n.ts

@@ -0,0 +1,7 @@
+// 国际化
+import i18n from "@/lang/index";
+import type { App } from "vue";
+
+export function setupI18n(app: App<Element>) {
+  app.use(i18n);
+}

src/plugins/icons.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+// 注册所有图标
+export function setupElIcons(app: App<Element>) {
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+  }
+}

src/plugins/index.ts

@@ -0,0 +1,3 @@
+export * from "./icons";
+export * from "./i18n";
+export * from "./permission";

src/plugins/permission.ts

@@ -0,0 +1,60 @@
+import router from "@/router";
+import { useUserStore } from "@/store/modules/user";
+import { usePermissionStore } from "@/store/modules/permission";
+import NProgress from "@/utils/nprogress";
+
+export function setupPermission() {
+  // 白名单路由
+  const whiteList = ["/login"];
+
+  router.beforeEach(async (to, from, next) => {
+    NProgress.start();
+    const hasToken = localStorage.getItem("token");
+    if (hasToken) {
+      if (to.path === "/login") {
+        // 如果已登录，跳转首页
+        next({ path: "/" });
+        NProgress.done();
+      } else {
+        const userStore = useUserStore();
+        const hasRoles =
+          userStore.user.roles && userStore.user.roles.length > 0;
+        if (hasRoles) {
+          // 未匹配到任何路由，跳转404
+          if (to.matched.length === 0) {
+            from.name ? next({ name: from.name }) : next("/404");
+          } else {
+            next();
+          }
+        } else {
+          const permissionStore = usePermissionStore();
+          try {
+            const { roles } = await userStore.getUserInfo();
+            const accessRoutes = await permissionStore.generateRoutes(roles);
+            accessRoutes.forEach((route) => {
+              router.addRoute(route);
+            });
+            next({ ...to, replace: true });
+          } catch (error) {
+            // 移除 token 并跳转登录页
+            await userStore.resetToken();
+            next(`/login?redirect=${to.path}`);
+            NProgress.done();
+          }
+        }
+      }
+    } else {
+      // 未登录可以访问白名单页面
+      if (whiteList.indexOf(to.path) !== -1) {
+        next();
+      } else {
+        next(`/login?redirect=${to.path}`);
+        NProgress.done();
+      }
+    }
+  });
+
+  router.afterEach(() => {
+    NProgress.done();
+  });
+}

src/store/modules/app.ts

@@ -3,6 +3,7 @@ import defaultSettings from "@/settings";
 // 导入 Element Plus 中英文语言包
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 import en from "element-plus/es/locale/lang/en";
+import { store } from "@/store";
 
 // setup
 export const useAppStore = defineStore("app", () => {
@@ -86,3 +87,9 @@ export const useAppStore = defineStore("app", () => {
     activeTopMenuPath,
   };
 });
+
+// 手动提供给 useStore() 函数 pinia 实例
+// https://pinia.vuejs.org/zh/core-concepts/outside-component-usage.html#using-a-store-outside-of-a-component
+export function useAppStoreHook() {
+  return useAppStore(store);
+}

src/utils/nprogress.ts

@@ -0,0 +1,18 @@
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+// 进度条
+NProgress.configure({
+  // 动画方式
+  easing: "ease",
+  // 递增进度条的速度
+  speed: 500,
+  // 是否显示加载ico
+  showSpinner: false,
+  // 自动递增间隔
+  trickleSpeed: 200,
+  // 初始化时的最小百分比
+  minimum: 0.3,
+});
+
+export default NProgress;