首页添加 加载状态

src/views/index.vue

@@ -4,6 +4,7 @@ import { getConfigKey } from '@/api/system/config';
 import {
   defineAsyncComponent,
   onMounted,
+  ref,
   shallowRef,
   type Component,
 } from 'vue';
@@ -14,6 +15,8 @@ import useRouterStore from '@/store/modules/router';
 const routerStore = useRouterStore();
 const currentComponent = shallowRef<Component | null>(null);
 
+const spinning = ref<boolean>(true);
+
 /**匹配views里面所有的.vue或.tsx文件 */
 const views = import.meta.glob('../views/**/*.{vue,tsx}') as Record<
   string,
@@ -50,11 +53,17 @@ onMounted(() => {
     useLayoutStore().changeConf('layout', 'mix');
     //获取当前系统设置的首页路径
     getConfigKey('sys.homePage').then(res => {
+      spinning.value = false;
+
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
         if (res.data) {
           const asyncComponent = findView(`${res.data}`);
           currentComponent.value = defineAsyncComponent(asyncComponent);
         }
+      } else {
+        currentComponent.value = defineAsyncComponent(
+          () => import('@/views/configManage/neOverview/index.vue')
+        );
       }
     });
   }
@@ -62,6 +71,19 @@ onMounted(() => {
 </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>