添加加载状态指示器，优化友链列表渲染逻辑，确保数据加载完成后显示内容

src/views/LinksView.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="friend-links">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <el-skeleton :rows="10" animated />
+    </div>
     <!-- 友链列表 -->
+    <template v-else>
+      <div>
         <el-card
           v-for="(category, categoryIndex) in friendLinks"
           :key="categoryIndex"
@@ -47,6 +53,8 @@ url: "您的博客链接"</pre
       </div>
     </el-card> -->
       </div>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -58,7 +66,7 @@ export default {
   setup() {
     const friendLinks = ref([]);
     const hoveredCardId = ref(null);
-
+    const loading = ref(true);
     // 加载 YAML 文件
     fetch("/links.yml")
       .then((response) => response.text())
@@ -67,6 +75,9 @@ export default {
       })
       .catch((error) => {
         console.error("Failed to load YAML file:", error);
+      })
+      .finally(() => {
+        loading.value = false; // 数据加载完成后，设置 loading 为 false
       });
 
     const hoverEffect = (cardId) => {
@@ -94,10 +105,10 @@ export default {
       resetEffect,
       cardStyle,
       openLink,
+      loading,
     };
   },
 };
-
 </script>
 
 <style scoped>
@@ -185,4 +196,8 @@ export default {
   font-size: 0.9em;
   color: #666;
 }
+
+.loading-container {
+  padding: 20px;
+}
 </style>