更新友链功能，添加链接和描述，优化链接点击事件

public/links.yml

@@ -3,9 +3,18 @@
     - avatar: "https://images.kisechan.space/icon.jpg"
       title: "Kisechan's Blog"
       description: "Kisechan 的博客"
+      url: "https://blog.kisechan.space"
     - avatar: "https://example.com/avatar.png"
-      title: "技术博客"
+      title: "个人博客"
-      description: "这是一个技术博客"
+      description: "这是一个个人博客"
+      url: "https://example.com/personal-blog"
+- category: "友情链接"
+  links:
     - avatar: "https://example.com/avatar.png"
-      title: "技术博客"
+      title: "友情链接1"
-      description: "这是一个技术博客"
+      description: "这是一个友情链接"
+      url: "https://example.com/friend-link-1"
+    - avatar: "https://example.com/avatar.png"
+      title: "友情链接2"
+      description: "这是一个友情链接"
+      url: "https://example.com/friend-link-2"

src/views/LinksView.vue

@@ -17,6 +17,7 @@
           @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" />
@@ -28,14 +29,15 @@
         </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>
         <pre>
 avatar: "您的头像链接"
 title: "您的博客标题"
-description: "您的博客描述"</pre
+description: "您的博客描述"
+url: "您的博客链接"</pre
         >
         <p>
           并发送至：<a href="mailto:links@kisechan.space"
@@ -43,7 +45,7 @@ description: "您的博客描述"</pre
           >
         </p>
       </div>
-    </el-card> -->
+    </el-card>
   </div>
 </template>
 
@@ -82,14 +84,20 @@ export default {
       };
     };
 
+    const openLink = (url) => {
+      window.open(url, "_blank");
+    };
+
     return {
       friendLinks,
       hoverEffect,
       resetEffect,
       cardStyle,
+      openLink,
     };
   },
 };
+
 </script>
 
 <style scoped>