add NProgress

package.json

@@ -22,6 +22,7 @@
     "axios-mock-adapter": "^1.21.4",
     "chart.js": "^4.1.2",
     "jwt-decode": "^3.1.2",
+    "nprogress": "^0.2.0",
     "postcss-purgecss": "^5.0.0",
     "prismjs": "^1.29.0",
     "roboto-fontface": "^0.10.0",
@@ -92,4 +93,4 @@
   "resolutions": {
     "postcss": "8"
   }
-}
+}

src/main.ts

@@ -8,10 +8,14 @@ import store from '@/store'
 import '@core/scss/template/index.scss'
 import '@layouts/styles/index.scss'
 import '@styles/styles.scss'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
 import { createApp } from 'vue'
-
 loadFonts()
 
+// Nprogress
+NProgress.configure({ showSpinner: false })
+
 // Create vue app
 const app = createApp(App)
 
@@ -21,3 +25,23 @@ app
 .use(router)
 .use(store)
 .mount('#app')
+
+
+// 导航守卫
+router.beforeEach((to, from, next) => {
+  // 通过 Vuex Store 检查用户是否已登录
+  const isAuthenticated = store.state.auth.token !== null
+  if (to.meta.requiresAuth && !isAuthenticated) {
+    // 如果路由需要登录权限且用户未登录，则跳转到登录页面
+    next('/login')
+  }
+  else {
+    // 否则，允许继续进行路由导航
+    NProgress.start()
+    next()
+  }
+})
+
+router.afterEach(() => {
+  NProgress.done()
+})

src/router/index.ts

@@ -1,5 +1,4 @@
-import store from '@/store'
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -121,18 +120,4 @@ const router = createRouter({
   ],
 })
 
-// 导航守卫
-router.beforeEach((to, from, next) => {
-  // 通过 Vuex Store 检查用户是否已登录
-  const isAuthenticated = store.state.auth.token !== null
-  if (to.meta.requiresAuth && !isAuthenticated) {
-    // 如果路由需要登录权限且用户未登录，则跳转到登录页面
-    next('/login')
-  }
-  else {
-    // 否则，允许继续进行路由导航
-    next()
-  }
-})
-
 export default router

src/styles/styles.scss

@@ -2,3 +2,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+#nprogress .bar {
+  background: #7D34FD !important;
+  top: env(safe-area-inset-top) !important;
+}
+
+#nprogress .peg {
+  box-shadow: 0 0 10px #7D34FD, 0 0 5px #7D34FD !important;
+  -webkit-transform: rotate(0deg) translate(0px, -1px);
+  -ms-transform: rotate(0deg) translate(0px, -1px);
+      transform: rotate(0deg) translate(0px, -1px);
+}

yarn.lock

@@ -5287,6 +5287,11 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 nth-check@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"