邮件列表加载动画优化和打包拆分

mail-vue/src/router/index.js

@@ -1,4 +1,5 @@
 import {createRouter, createWebHistory} from 'vue-router'
+import NProgress from 'nprogress';
 import {useUiStore} from "@/store/ui.js";
 
 const routes = [
@@ -74,8 +75,25 @@ const router = createRouter({
     routes
 })
 
+NProgress.configure({
+    showSpinner: false,   // 不显示旋转图标
+    trickleSpeed: 50,    // 自动递增速度
+    minimum: 0.1          // 最小百分比
+});
+
+let timer
+
 router.beforeEach(async (to, from, next) => {
 
+    if (timer) {
+        clearTimeout(timer)
+    }
+
+    // 延迟 50ms 才启动进度条
+    timer = setTimeout(() => {
+        NProgress.start()
+    }, 50)
+
     const token = localStorage.getItem('token')
 
     if (!token && to.name !== 'login') {
@@ -99,6 +117,9 @@ router.beforeEach(async (to, from, next) => {
 
 router.afterEach((to) => {
 
+    clearTimeout(timer)
+    NProgress.done();
+
     const uiStore = useUiStore()
     if (to.meta.menu) {
         if (['content', 'email', 'send'].includes(to.meta.name)) {