chore: remove NProgress

package.json

@@ -56,7 +56,6 @@
     "chroma-js": "^2.4.2",
     "echarts": "^5.5.0",
     "md-editor-v3": "^4.11.3",
-    "nprogress": "^0.2.0",
     "performant-array-to-tree": "^1.11.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
@@ -71,7 +70,6 @@
     "@iconify/vue": "^4.1.1",
     "@types/chroma-js": "^2.4.4",
     "@types/node": "^20.11.28",
-    "@types/nprogress": "^0.2.3",
     "@types/qs": "^6.9.12",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",

src/layouts/components/header/Breadcrumb.vue

@@ -42,7 +42,7 @@ const appStore = useAppStore()
 
 .list-enter-from,.list-leave-to {
   opacity: 0;
-  transform: translateY(-30px);
+  transform: translateX(-30px);
 }
 
 .list-leave-active {

src/modules/nprogress.ts

@@ -1,11 +0,0 @@
-import NProgress from 'nprogress'
-import { useAppStore } from '@/store'
-
-export function install() {
-  // 初始载入，初始化body的css变量
-  const appStore = useAppStore()
-  appStore.setPrimaryColor(appStore.primaryColor)
-
-  NProgress.configure({ easing: 'ease', speed: 500 })
-  window.$NProgress = NProgress
-}

src/router/guard.ts

@@ -15,8 +15,8 @@ export function setupRouterGuard(router: Router) {
       window.open(to.meta.herf)
       return false
     }
-    // 开始 NProgress
-    appStore.showProgress && window.$NProgress?.start()
+    // 开始 loadingBar
+    appStore.showProgress && window.$loadingBar?.start()
 
     // 判断有无TOKEN,登录鉴权
     const isLogin = Boolean(local.get('token'))
@@ -67,7 +67,7 @@ export function setupRouterGuard(router: Router) {
   router.afterEach((to) => {
     // 修改网页标题
     document.title = `${to.meta.title} - ${title}`
-    // 结束 NProgress
-    appStore.showProgress && window.$NProgress?.done()
+    // 结束 loadingBar
+    appStore.showProgress && window.$loadingBar?.finish()
   })
 }

src/store/app/index.ts

@@ -67,7 +67,6 @@ export const useAppStore = defineStore('app-store', {
     },
     /* 设置主题色 */
     setPrimaryColor(color: string) {
-      docEle.value.style.setProperty('--primary-color', color)
       const brightenColor = chroma(color).brighten(1).hex()
       const darkenColor = chroma(color).darken(1).hex()
       set(this.theme, 'common.primaryColor', color)

src/styles/index.css

@@ -1,6 +1,5 @@
 @import './reset.css';
 @import './transition.css';
-@import './nprogress.css';
 
 html,
 body,

src/styles/nprogress.css

@@ -1,84 +0,0 @@
-/* Make clicks pass-through */
-#nprogress {
-  pointer-events: none;
-}
-
-#nprogress .bar {
-  background: var(--primary-color);
-
-  position: fixed;
-  z-index: 1031;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 2px;
-}
-
-/* Fancy blur effect */
-#nprogress .peg {
-  display: block;
-  position: absolute;
-  right: 0px;
-  width: 100px;
-  height: 100%;
-  box-shadow: 0 0 10px var(--primary-color), 0 0 5px var(--primary-color);
-  opacity: 1.0;
-
-  -webkit-transform: rotate(3deg) translate(0px, -4px);
-  -ms-transform: rotate(3deg) translate(0px, -4px);
-  transform: rotate(3deg) translate(0px, -4px);
-}
-
-/* Remove these to get rid of the spinner */
-#nprogress .spinner {
-  display: block;
-  position: fixed;
-  z-index: 1031;
-  top: 15px;
-  right: 15px;
-}
-
-#nprogress .spinner-icon {
-  width: 18px;
-  height: 18px;
-  box-sizing: border-box;
-
-  border: solid 2px transparent;
-  border-top-color: var(--primary-color);
-  border-left-color: var(--primary-color);
-  border-radius: 50%;
-
-  -webkit-animation: nprogress-spinner 400ms linear infinite;
-  animation: nprogress-spinner 400ms linear infinite;
-}
-
-.nprogress-custom-parent {
-  overflow: hidden;
-  position: relative;
-}
-
-.nprogress-custom-parent #nprogress .spinner,
-.nprogress-custom-parent #nprogress .bar {
-  position: absolute;
-}
-
-@-webkit-keyframes nprogress-spinner {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@keyframes nprogress-spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}

src/typings/global.d.ts

@@ -3,7 +3,6 @@ interface Window {
   $dialog: import('naive-ui').DialogApi
   $message: import('naive-ui').MessageApi
   $notification: import('naive-ui').NotificationApi
-  $NProgress: import('NProgress').NProgress
 }
 
 declare const AMap: any