feat:增加Loading组件

docs/.vitepress/theme/components/MyLayout.vue

@@ -1,16 +1,59 @@
+<template>
+  <div>
+    <Transition name="fade">
+      <div v-if="isLoading" class="elegant-loading">
+        <Loading />
+      </div>
+    </Transition>
+    
+    <Transition name="slide-up">
+      <div v-show="!isLoading">
+        <DefaultTheme.Layout v-bind="$attrs">
+          <template #doc-before>
+            <ArticleMetadat />
+          </template>
+        </DefaultTheme.Layout>
+      </div>
+    </Transition>
+  </div>
+</template>
+
 <script setup lang="ts">
 import DefaultTheme from 'vitepress/theme'
 import ArticleMetadat from './ArticleMetadata.vue';
+import Loading from './Loading.vue';
+import { ref, onMounted } from 'vue'
+
+const isLoading = ref(true)
+
+onMounted(() => {
+  const handleLoad = () => {
+    isLoading.value = false
+  }
+
+  // 防止错过load加载完成
+  if (document.readyState === 'complete') {
+    isLoading.value = false
+    return
+  }
+
+  // 加载完成事件
+  window.addEventListener('load', handleLoad, { once: true })
+})
 </script>
 
-<template>
-  <DefaultTheme.Layout v-bind="$attrs">
-    <template #doc-before>
-      <ArticleMetadat />
-    </template>
-
-  </DefaultTheme.Layout>
-</template>
-
 <style scoped>
+.elegant-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--vp-c-bg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  backdrop-filter: blur(2px);
+}
 </style>