添加首页加载状态

src/views/index.vue

@@ -2,17 +2,16 @@
 import {
   defineAsyncComponent,
   onMounted,
+  ref,
   shallowRef,
   type Component,
 } from 'vue';
 import { getConfigKey, changeValue } from '@/api/system/config';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 
-const currentComponent = shallowRef<Component | null>(
-  defineAsyncComponent(
-    () => import('@/views/configManage/neOverview/index.vue')
-  )
-);
+const currentComponent = shallowRef<Component | null>(null);
+
+const spinning = ref<boolean>(true);
 
 /**匹配views里面所有的.vue或.tsx文件 */
 const views = import.meta.glob('../views/**/*.{vue,tsx}') as Record<
@@ -36,24 +35,43 @@ function findView(dirName: string): () => Promise<Component> {
       return views[dir];
     }
   }
-  return () => import('@/views/error/404.vue');
+  return () => import('@/views/configManage/neOverview/index.vue');
 }
 
 onMounted(() => {
   //获取当前系统设置的首页路径
   getConfigKey('sys.homePage').then(res => {
+    spinning.value = false;
     if (res.code === RESULT_CODE_SUCCESS && res.data) {
+      console.log(spinning);
       if (res.data) {
         const asyncComponent = findView(`${res.data}`);
         currentComponent.value = defineAsyncComponent(asyncComponent);
       }
+    } else {
+      currentComponent.value = defineAsyncComponent(
+        () => import('@/views/configManage/neOverview/index.vue')
+      );
     }
   });
 });
 </script>
 
 <template>
-  <component :is="currentComponent" />
+  <a-spin
+    size="large"
+    :spinning="spinning"
+    style="
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      min-height: 362px;
+    "
+  >
+    <component :is="currentComponent" />
+  </a-spin>
 </template>
 
 <style lang="less" scoped></style>