chore: add nprogress

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",

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')
 

src/directives/index.ts

@@ -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)
-}

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[]) {

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()

src/modules/assets.ts

@@ -0,0 +1,7 @@
+import 'uno.css'
+import '@/styles/index.css'
+import 'virtual:svg-icons-register'
+
+// 全局引入的静态资源
+export function install() {
+}

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))
+}

src/modules/index.ts

@@ -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)
-}

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
+}

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()
   })
 }

src/styles/index.css

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

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);
+  }
+}

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

src/views/userCenter/index.vue

@@ -48,7 +48,7 @@ function handleValidateClick() {
         <n-space size="large">
           <n-avatar round :size="128" :src="userInfo?.avatar" />
 
-          <n-descriptions label-placement="left" :column="2" :title="`傍晚好，${userInfo?.userName}，这里是简单的个人中心模板`">
+          <n-descriptions label-placement="left" :column="2" :title="`傍晚好，${userInfo?.nickName}，这里是简单的个人中心模板`">
             <n-descriptions-item label="id">
               {{ userInfo?.id }}
             </n-descriptions-item>