feat(loadingBar): 增加加载条与主题颜色适配

src/App.vue

@@ -41,6 +41,9 @@
             primaryColor: designStore.appTheme,
             primaryColorHover: '#57a3f3',
           },
+          LoadingBar: {
+            colorLoading: designStore.appTheme,
+          },
         };
       });
 

src/components/Application/Application.vue

@@ -1,6 +1,5 @@
 <template>
   <n-loading-bar-provider>
-    <LoadingContent />
     <n-dialog-provider>
       <DialogContent />
       <n-notification-provider>
@@ -21,7 +20,6 @@
     NMessageProvider,
     NLoadingBarProvider,
   } from 'naive-ui';
-  import { LoadingContent } from '@/components/LoadingContent';
   import { MessageContent } from '@/components/MessageContent';
   import { DialogContent } from '@/components/DialogContent';
 
@@ -32,7 +30,6 @@
       NNotificationProvider,
       NMessageProvider,
       NLoadingBarProvider,
-      LoadingContent,
       MessageContent,
       DialogContent,
     },

src/layout/index.vue

@@ -65,6 +65,7 @@
   import { PageFooter } from './components/Footer';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+  import { useLoadingBar } from "naive-ui";
 
   export default defineComponent({
     name: 'Layout',
@@ -135,6 +136,8 @@
 
       onMounted(() => {
         window.addEventListener('resize', watchWidth);
+        //挂载在 window 方便与在js中使用
+        window['$loading'] = useLoadingBar();
       });
 
       return {

src/router/router-guards.ts

@@ -12,8 +12,8 @@ const whitePathList = [LOGIN_PATH]; // no redirect whitelist
 export function createRouterGuards(router: Router) {
   const userStore = useUserStoreWidthOut();
   const asyncRouteStore = useAsyncRouteStoreWidthOut();
-  const Loading = window['$loading'] || null;
   router.beforeEach(async (to, from, next) => {
+    const Loading = window['$loading'] || null;
     Loading && Loading.start();
     if (from.path === LOGIN_PATH && to.name === 'errorPage') {
       next(PageEnum.BASE_HOME);
@@ -91,6 +91,7 @@ export function createRouterGuards(router: Router) {
       }
     }
     asyncRouteStore.setKeepAliveComponents(keepAliveComponents);
+    const Loading = window['$loading'] || null;
     Loading && Loading.finish();
   });