Merge pull request #94 from Learnware-LAMDA/feat(frontend)/router_progress_bar

feat(frontend): add router change progress

frontend/package.json

@@ -22,6 +22,7 @@
     "dayjs": "^1.10.7",
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
+    "nprogress": "^0.2.0",
     "vue": "^3.2.47",
     "vue-chartjs": "^5.2.0",
     "vue-i18n": "^9.2.2",
@@ -35,6 +36,7 @@
     "@mdi/font": "^7.2.96",
     "@types/js-yaml": "^4.0.6",
     "@types/node": "^20.8.4",
+    "@types/nprogress": "^0.2.2",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "@vitejs/plugin-vue": "^4.1.0",

frontend/packages/admin/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import store from "@main/store";
 import { Component } from "vue";
+import NProgress from "@main/plugins/nprogress";
 
 const Router = createRouter({
   history: createWebHashHistory(),
@@ -137,6 +138,8 @@ const Router = createRouter({
 });
 
 Router.beforeEach((to, _from, next) => {
+  NProgress.start();
+
   if (to.matched.some((record) => record.meta.requiredLogin)) {
     if (store && !store.getters.getLoggedIn) {
       store.commit("setShowGlobalError", true);
@@ -153,4 +156,8 @@ Router.beforeEach((to, _from, next) => {
   }
 });
 
+Router.afterEach(() => {
+  NProgress.done();
+});
+
 export default Router;

frontend/packages/main/src/plugins/nprogress/index.ts

@@ -0,0 +1,13 @@
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import "./style.scss";
+
+NProgress.configure({
+  easing: "ease",
+  speed: 500,
+  showSpinner: false,
+  trickleSpeed: 200,
+  minimum: 0.3,
+});
+
+export default NProgress;

frontend/packages/main/src/plugins/nprogress/nprogress.ts

@@ -0,0 +1,12 @@
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+NProgress.configure({
+  easing: "ease",
+  speed: 500,
+  showSpinner: false,
+  trickleSpeed: 200,
+  minimum: 0.3,
+});
+
+export default NProgress;

frontend/packages/main/src/plugins/nprogress/style.scss

@@ -0,0 +1,4 @@
+#nprogress .bar {
+  @apply h-1;
+  background-color: rgb(var(--v-theme-primary));
+}

frontend/packages/main/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import store from "../store";
-import { Component } from "vue";
+import type { Component } from "vue";
+import NProgress from "../plugins/nprogress";
 
 const Router = createRouter({
   history: createWebHashHistory(),
@@ -189,6 +190,8 @@ const Router = createRouter({
 });
 
 Router.beforeEach((to, from, next) => {
+  NProgress.start();
+
   if (from.name === to.name) {
     return next(false);
   }
@@ -208,4 +211,8 @@ Router.beforeEach((to, from, next) => {
   }
 });
 
+Router.afterEach(() => {
+  NProgress.done();
+});
+
 export default Router;

frontend/pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
+      nprogress:
+        specifier: ^0.2.0
+        version: 0.2.0
       vue:
         specifier: ^3.2.47
         version: 3.2.47
@@ -60,6 +63,9 @@ importers:
       '@types/node':
         specifier: ^20.8.4
         version: 20.8.4
+      '@types/nprogress':
+        specifier: ^0.2.2
+        version: 0.2.2
       '@typescript-eslint/eslint-plugin':
         specifier: ^6.7.5
         version: 6.7.5(@typescript-eslint/parser@6.7.5)(eslint@8.43.0)(typescript@5.2.2)
@@ -585,6 +591,10 @@ packages:
       undici-types: 5.25.3
     dev: true
 
+  /@types/nprogress@0.2.2:
+    resolution: {integrity: sha512-2wLrSJXLztGmr7wXwM0hA/wuIOY9DznVdd+ZFofHOiXcj9JnVt+2ZeLRJ7v5ZVlmheSkUOSg3Q3O4Ce7yji79A==}
+    dev: true
+
   /@types/semver@7.5.3:
     resolution: {integrity: sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==}
     dev: true
@@ -2544,6 +2554,10 @@ packages:
       path-key: 3.1.1
     dev: true
 
+  /nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
+
   /nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
     dependencies: