From f36e47cf250dca73f300a3705f9e76bf71595586 Mon Sep 17 00:00:00 2001 From: chansee97 Date: Mon, 18 Mar 2024 20:04:53 +0800 Subject: [PATCH] chore: add `nprogress` --- package.json | 2 + src/directives/copy.ts | 2 +- src/directives/index.ts | 8 --- src/directives/permission.ts | 2 +- src/main.ts | 27 +++++----- src/modules/assets.ts | 7 +++ src/modules/directives.ts | 10 ++++ src/modules/index.ts | 9 ---- src/modules/nprogress.ts | 8 +++ src/router/guard.ts | 8 +-- src/styles/{css => }/index.css | 3 +- src/styles/nprogress.css | 84 +++++++++++++++++++++++++++++ src/styles/{css => }/reset.css | 0 src/styles/{css => }/transition.css | 0 src/typings/global.d.ts | 1 + src/views/userCenter/index.vue | 2 +- 16 files changed, 134 insertions(+), 39 deletions(-) delete mode 100644 src/directives/index.ts create mode 100644 src/modules/assets.ts create mode 100644 src/modules/directives.ts delete mode 100644 src/modules/index.ts create mode 100644 src/modules/nprogress.ts rename src/styles/{css => }/index.css (94%) create mode 100644 src/styles/nprogress.css rename src/styles/{css => }/reset.css (100%) rename src/styles/{css => }/transition.css (100%) diff --git a/package.json b/package.json index ac997b0..0182cee 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "alova": "^2.17.1", "echarts": "^5.5.0", "md-editor-v3": "^4.11.3", + "nprogress": "^0.2.0", "pinia": "^2.1.7", "pinia-plugin-persist": "^1.0.0", "qs": "^6.12.0", @@ -67,6 +68,7 @@ "@iconify-json/icon-park-outline": "^1.1.15", "@iconify/vue": "^4.1.1", "@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/directives/copy.ts b/src/directives/copy.ts index 6200cbc..f483d91 100644 --- a/src/directives/copy.ts +++ b/src/directives/copy.ts @@ -4,7 +4,7 @@ interface CopyHTMLElement extends HTMLElement { _copyText: string } -export function setupCopy(app: App) { +export function install(app: App) { const { isSupported, copy } = useClipboard() const permissionWrite = usePermission('clipboard-write') diff --git a/src/directives/index.ts b/src/directives/index.ts deleted file mode 100644 index 878e4c5..0000000 --- a/src/directives/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { App } from 'vue' -import { setupPermission } from './permission' -import { setupCopy } from './copy' - -export function installDirectives(app: App) { - setupPermission(app) - setupCopy(app) -} diff --git a/src/directives/permission.ts b/src/directives/permission.ts index 7810227..efe212d 100644 --- a/src/directives/permission.ts +++ b/src/directives/permission.ts @@ -1,7 +1,7 @@ import type { App, Directive } from 'vue' import { usePermission } from '@/hooks' -export function setupPermission(app: App) { +export function install(app: App) { const { hasPermission } = usePermission() function updatapermission(el: HTMLElement, permission: Auth.RoleType | Auth.RoleType[]) { diff --git a/src/main.ts b/src/main.ts index 4637576..daa2839 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,30 +1,29 @@ -import App from './App.vue' +import type { App } from 'vue' +import AppVue from './App.vue' import AppLoading from './components/common/appLoading.vue' -import { installDirectives } from './directives' import { installRouter } from '@/router' import { installPinia } from '@/store' -// 全局引入的静态资源 -import 'uno.css' -import '@/styles/css/index.css' -import 'virtual:svg-icons-register' - async function setupApp() { // 载入全局loading加载状态 const appLoading = createApp(AppLoading) appLoading.mount('#appLoading') // 创建vue实例 - const app = createApp(App) - - // 注册模块 Vue-router - installRouter(app) + const app = createApp(AppVue) // 注册模块Pinia - installPinia(app) + await installPinia(app) - // 安装自定义指令 - installDirectives(app) + // 注册模块 Vue-router + await installRouter(app) + + /* 注册模块 Vue-router/Pinia */ + Object.values( + import.meta.glob<{ install: (app: App) => void }>('./modules/*.ts', { + eager: true, + }), + ).map(i => app.use(i)) // 卸载载入动画 appLoading.unmount() diff --git a/src/modules/assets.ts b/src/modules/assets.ts new file mode 100644 index 0000000..6817e28 --- /dev/null +++ b/src/modules/assets.ts @@ -0,0 +1,7 @@ +import 'uno.css' +import '@/styles/index.css' +import 'virtual:svg-icons-register' + +// 全局引入的静态资源 +export function install() { +} diff --git a/src/modules/directives.ts b/src/modules/directives.ts new file mode 100644 index 0000000..0f73430 --- /dev/null +++ b/src/modules/directives.ts @@ -0,0 +1,10 @@ +import type { App } from 'vue' + +export function install(app: App) { + /* 自动注册指令 */ + Object.values( + import.meta.glob<{ install: (app: App) => void }>('@/directives/*.ts', { + eager: true, + }), + ).map(i => app.use(i)) +} diff --git a/src/modules/index.ts b/src/modules/index.ts deleted file mode 100644 index 32bddc2..0000000 --- a/src/modules/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { App } from 'vue' -import piniaPluginPersist from 'pinia-plugin-persist' - -// 安装pinia全局状态库 -export function install(app: App) { - const pinia = createPinia() - pinia.use(piniaPluginPersist) - app.use(pinia) -} diff --git a/src/modules/nprogress.ts b/src/modules/nprogress.ts new file mode 100644 index 0000000..b4a8bbb --- /dev/null +++ b/src/modules/nprogress.ts @@ -0,0 +1,8 @@ +import NProgress from 'nprogress' + +// 安装pinia全局状态库 +export function install() { + NProgress.configure({ easing: 'ease', speed: 500 }) + // mount on window + window.$NProgress = NProgress +} diff --git a/src/router/guard.ts b/src/router/guard.ts index 3295004..79f22fd 100644 --- a/src/router/guard.ts +++ b/src/router/guard.ts @@ -11,8 +11,8 @@ export function setupRouterGuard(router: Router) { window.open(to.meta.herf) return false } - // 开始 loadingBar - window.$loadingBar?.start() + // 开始 NProgress + window.$NProgress?.start() // 权限操作 const routeStore = useRouteStore() @@ -67,7 +67,7 @@ export function setupRouterGuard(router: Router) { router.afterEach((to) => { // 修改网页标题 document.title = `${to.meta.title} - ${title}` - // 结束 loadingBar - window.$loadingBar?.finish() + // 结束 NProgress + window.$NProgress?.done() }) } diff --git a/src/styles/css/index.css b/src/styles/index.css similarity index 94% rename from src/styles/css/index.css rename to src/styles/index.css index 436c191..10d471d 100644 --- a/src/styles/css/index.css +++ b/src/styles/index.css @@ -1,5 +1,6 @@ @import './reset.css'; @import './transition.css'; +@import './nprogress.css'; html, body, @@ -29,4 +30,4 @@ body, } .dark::view-transition-new(root) { z-index: 1; -} \ No newline at end of file +} diff --git a/src/styles/nprogress.css b/src/styles/nprogress.css new file mode 100644 index 0000000..8b9c457 --- /dev/null +++ b/src/styles/nprogress.css @@ -0,0 +1,84 @@ +/* Make clicks pass-through */ +#nprogress { + pointer-events: none; +} + +#nprogress .bar { + background: #29d; + + 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 #29d, 0 0 5px #29d; + 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: #29d; + border-left-color: #29d; + 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/styles/css/reset.css b/src/styles/reset.css similarity index 100% rename from src/styles/css/reset.css rename to src/styles/reset.css diff --git a/src/styles/css/transition.css b/src/styles/transition.css similarity index 100% rename from src/styles/css/transition.css rename to src/styles/transition.css diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts index 6869fd2..382c08a 100644 --- a/src/typings/global.d.ts +++ b/src/typings/global.d.ts @@ -3,6 +3,7 @@ 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 diff --git a/src/views/userCenter/index.vue b/src/views/userCenter/index.vue index 837399f..972c368 100644 --- a/src/views/userCenter/index.vue +++ b/src/views/userCenter/index.vue @@ -48,7 +48,7 @@ function handleValidateClick() { - + {{ userInfo?.id }}