From 3c96ba8ae785d0148076803f70f121a4efcb63cd Mon Sep 17 00:00:00 2001
From: Kisechan <kisechan_@outlook.com>
Date: Wed, 5 Mar 2025 23:07:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8A=A0=E8=BD=BD=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E6=8C=87=E7=A4=BA=E5=99=A8=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=8F=8B=E9=93=BE=E5=88=97=E8=A1=A8=E6=B8=B2=E6=9F=93=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=EF=BC=8C=E7=A1=AE=E4=BF=9D=E6=95=B0=E6=8D=AE=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E5=AE=8C=E6=88=90=E5=90=8E=E6=98=BE=E7=A4=BA=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/LinksView.vue | 69 +++++++++++++++++++++++++----------------
 1 file changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/views/LinksView.vue b/src/views/LinksView.vue
index 77c3355..82de1f0 100644
--- a/src/views/LinksView.vue
+++ b/src/views/LinksView.vue
@@ -1,35 +1,41 @@
 <template>
   <div class="friend-links">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <el-skeleton :rows="10" animated />
+    </div>
     <!-- 友链列表 -->
-    <el-card
-      v-for="(category, categoryIndex) in friendLinks"
-      :key="categoryIndex"
-      class="category-card"
-    >
-      <template #header>
-        <div class="category-header">{{ category.category }}</div>
-      </template>
-      <div class="links-container">
+    <template v-else>
+      <div>
         <el-card
-          v-for="(link, linkIndex) in category.links"
-          :key="linkIndex"
-          class="link-card"
-          @mouseenter="hoverEffect(`${categoryIndex}-${linkIndex}`)"
-          @mouseleave="resetEffect"
-          :style="cardStyle(`${categoryIndex}-${linkIndex}`)"
-          @click="openLink(link.url)"
+          v-for="(category, categoryIndex) in friendLinks"
+          :key="categoryIndex"
+          class="category-card"
         >
-          <div class="link-content">
-            <el-avatar :src="link.avatar" class="link-avatar" />
-            <div class="link-info">
-              <div class="link-title">{{ link.title }}</div>
-              <div class="link-description">{{ link.description }}</div>
-            </div>
+          <template #header>
+            <div class="category-header">{{ category.category }}</div>
+          </template>
+          <div class="links-container">
+            <el-card
+              v-for="(link, linkIndex) in category.links"
+              :key="linkIndex"
+              class="link-card"
+              @mouseenter="hoverEffect(`${categoryIndex}-${linkIndex}`)"
+              @mouseleave="resetEffect"
+              :style="cardStyle(`${categoryIndex}-${linkIndex}`)"
+              @click="openLink(link.url)"
+            >
+              <div class="link-content">
+                <el-avatar :src="link.avatar" class="link-avatar" />
+                <div class="link-info">
+                  <div class="link-title">{{ link.title }}</div>
+                  <div class="link-description">{{ link.description }}</div>
+                </div>
+              </div>
+            </el-card>
           </div>
         </el-card>
-      </div>
-    </el-card>
-    <!-- <el-card class="add-link-card">
+        <!-- <el-card class="add-link-card">
       <div class="add-link-header">添加友链</div>
       <div class="add-link-content">
         <p>请按照以下格式提交您的友链信息：</p>
@@ -46,6 +52,8 @@ url: "您的博客链接"</pre
         </p>
       </div>
     </el-card> -->
+      </div>
+    </template>
   </div>
 </template>
 
@@ -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>