添加loading动画

assets/css/main.scss

@@ -19,3 +19,55 @@
 .h-\[52px\] {
   height: 52px;
 }
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #f8fafc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.loading-wave {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  height: 40px;
+  gap: 8px;
+}
+
+.loading-wave > div {
+  width: 8px;
+  height: 100%;
+  background: linear-gradient(45deg, #60a5fa, #3b82f6);
+  border-radius: 4px;
+  animation: wave 1s ease-in-out infinite;
+}
+
+.loading-wave > div:nth-child(2) { animation-delay: 0.1s; }
+.loading-wave > div:nth-child(3) { animation-delay: 0.2s; }
+.loading-wave > div:nth-child(4) { animation-delay: 0.3s; }
+.loading-wave > div:nth-child(5) { animation-delay: 0.4s; }
+
+.loading-text {
+  color: #3b82f6;
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+}
+
+@keyframes wave {
+  0%, 100% { transform: scaleY(0.5); }
+  50% { transform: scaleY(1); }
+}

layouts/default.vue

@@ -1,4 +1,16 @@
 <template>
+    <div v-if="loading" class="loading-overlay">
+        <div class="loading-container">
+            <div class="loading-wave">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+            <div class="loading-text">加载中...</div>
+        </div>
+    </div>
     <a-layout class="layout">
         <a-layout-header class="header">
             <div class="header-content max-w-3xl mx-auto px-4 flex items-center">
@@ -27,6 +39,15 @@
 
 <script setup>
 import { GithubOutlined } from '@ant-design/icons-vue'
+import { ref, onMounted } from 'vue'
+
+const loading = ref(true)
+
+onMounted(() => {
+    setTimeout(() => {
+        loading.value = false
+    }, 300)
+})
 </script>
 
 <style scoped>

pages/index.vue

@@ -27,3 +27,6 @@
 
 <script setup>
 </script>
+
+<style scoped>
+</style>