From 6314eaf3d1326847e8f8f5c67cd4b7821d08b895 Mon Sep 17 00:00:00 2001 From: chansee97 Date: Mon, 1 Apr 2024 12:38:30 +0800 Subject: [PATCH] chore: remove NProgress --- package.json | 2 - src/layouts/components/header/Breadcrumb.vue | 2 +- src/modules/nprogress.ts | 11 --- src/router/guard.ts | 8 +- src/store/app/index.ts | 1 - src/styles/index.css | 1 - src/styles/nprogress.css | 84 -------------------- src/typings/global.d.ts | 1 - 8 files changed, 5 insertions(+), 105 deletions(-) delete mode 100644 src/modules/nprogress.ts delete mode 100644 src/styles/nprogress.css diff --git a/package.json b/package.json index 3126e06..975af9d 100644 --- a/package.json +++ b/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", diff --git a/src/layouts/components/header/Breadcrumb.vue b/src/layouts/components/header/Breadcrumb.vue index 9259981..ed4a96d 100644 --- a/src/layouts/components/header/Breadcrumb.vue +++ b/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 { diff --git a/src/modules/nprogress.ts b/src/modules/nprogress.ts deleted file mode 100644 index 0cf5a1d..0000000 --- a/src/modules/nprogress.ts +++ /dev/null @@ -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 -} diff --git a/src/router/guard.ts b/src/router/guard.ts index 3023755..cc2d7dd 100644 --- a/src/router/guard.ts +++ b/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() }) } diff --git a/src/store/app/index.ts b/src/store/app/index.ts index 4b98ab1..d0cf436 100644 --- a/src/store/app/index.ts +++ b/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) diff --git a/src/styles/index.css b/src/styles/index.css index 7991a1f..c09a6a2 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1,6 +1,5 @@ @import './reset.css'; @import './transition.css'; -@import './nprogress.css'; html, body, diff --git a/src/styles/nprogress.css b/src/styles/nprogress.css deleted file mode 100644 index c3ad48c..0000000 --- a/src/styles/nprogress.css +++ /dev/null @@ -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); - } -} diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts index 99650e4..e235773 100644 --- a/src/typings/global.d.ts +++ b/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