feat: added nprogress

frontend/package.json

@@ -1,7 +1,7 @@
 {
     "name": "nginx-ui-frontend-next",
     "private": true,
-    "version": "1.7.2",
+    "version": "1.7.3",
     "type": "commonjs",
     "scripts": {
         "dev": "vite",
@@ -14,12 +14,14 @@
         "@ant-design/icons-vue": "^6.1.0",
         "@types/lodash": "^4.14.188",
         "@types/marked": "^4.0.8",
+        "@types/nprogress": "^0.2.0",
         "@types/sortablejs": "^1.15.0",
         "ant-design-vue": "^3.2.15",
         "apexcharts": "^3.36.3",
         "axios": "^1.2.2",
         "dayjs": "^1.11.7",
         "marked": "^4.2.5",
+        "nprogress": "^0.2.0",
         "pinia": "^2.0.28",
         "pinia-plugin-persistedstate": "^3.0.2",
         "reconnecting-websocket": "^4.4.0",

frontend/src/routes/index.ts

@@ -13,6 +13,8 @@ import {
     SettingOutlined,
     SafetyCertificateOutlined
 } from '@ant-design/icons-vue'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
 
 const {$gettext} = gettext
 
@@ -174,10 +176,14 @@ const router = createRouter({
     routes: routes
 })
 
+NProgress.configure({showSpinner: false})
+
 router.beforeEach((to, from, next) => {
     // @ts-ignore
     document.title = to.name?.() + ' | Nginx UI'
 
+    NProgress.start()
+
     const user = useUserStore()
     const {is_login} = user
 
@@ -189,4 +195,8 @@ router.beforeEach((to, from, next) => {
 
 })
 
+router.afterEach(() => {
+    NProgress.done()
+})
+
 export default router