add NProgress

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);
+}