添加友链功能，加载 YAML 文件，优化样式和交互效果，更新依赖

package-lock.json

@@ -12,8 +12,10 @@
         "@fortawesome/fontawesome-free": "^6.7.2",
         "element-plus": "^2.9.5",
         "github-calendar": "^2.3.4",
+        "js-yaml": "^4.1.0",
         "vue": "^3.5.13",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "yaml": "^2.7.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
@@ -1019,6 +1021,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@@ -1353,6 +1361,18 @@
       "integrity": "sha512-eL23u8oFooYTq6TtJKjp2RYjZnCkUYQvC0T/6fJfWykXJ3quvdDdzKZ3CEjy8b3JGOvLTjDYMEMIp5243R906A==",
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/local-pkg": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
@@ -1908,6 +1928,18 @@
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
       "dev": true
+    },
+    "node_modules/yaml": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
     }
   }
 }

package.json

@@ -13,8 +13,10 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "element-plus": "^2.9.5",
     "github-calendar": "^2.3.4",
+    "js-yaml": "^4.1.0",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "yaml": "^2.7.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

public/links.yml

@@ -0,0 +1,11 @@
+- category: "朋友们"
+  links:
+    - avatar: "https://images.kisechan.space/icon.jpg"
+      title: "Kisechan's Blog"
+      description: "Kisechan 的博客"
+    - avatar: "https://example.com/avatar.png"
+      title: "技术博客"
+      description: "这是一个技术博客"
+    - avatar: "https://example.com/avatar.png"
+      title: "技术博客"
+      description: "这是一个技术博客"

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/views/LinksView.vue

@@ -1,13 +1,180 @@
 <template>
-  <div class="about-container">
+  <div class="friend-links">
-    <el-main>
+    <!-- 友链列表 -->
-      <p>Links</p>
+    <el-card
-    </el-main>
+      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">
+        <el-card
+          v-for="(link, linkIndex) in category.links"
+          :key="linkIndex"
+          class="link-card"
+          @mouseenter="hoverEffect(`${categoryIndex}-${linkIndex}`)"
+          @mouseleave="resetEffect"
+          :style="cardStyle(`${categoryIndex}-${linkIndex}`)"
+        >
+          <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>
+    <!-- <el-card class="add-link-card">
+      <div class="add-link-header">添加友链</div>
+      <div class="add-link-content">
+        <p>请按照以下格式提交您的友链信息：</p>
+        <pre>
+avatar: "您的头像链接"
+title: "您的博客标题"
+description: "您的博客描述"</pre
+        >
+        <p>
+          并发送至：<a href="mailto:links@kisechan.space"
+            >links@kisechan.space</a
+          >
+        </p>
+      </div>
+    </el-card> -->
   </div>
 </template>
 
-<style scoped>
+<script>
-</style>
+import yaml from "js-yaml";
+import { ref } from "vue";
 
-<script setup>
+export default {
-</script>
+  name: "FriendLinks",
+  setup() {
+    const friendLinks = ref([]);
+    const hoveredCardId = ref(null);
+
+    // 加载 YAML 文件
+    fetch("/links.yml")
+      .then((response) => response.text())
+      .then((text) => {
+        friendLinks.value = yaml.load(text);
+      })
+      .catch((error) => {
+        console.error("Failed to load YAML file:", error);
+      });
+
+    const hoverEffect = (cardId) => {
+      hoveredCardId.value = cardId;
+    };
+
+    const resetEffect = () => {
+      hoveredCardId.value = null;
+    };
+
+    const cardStyle = (cardId) => {
+      return {
+        transform: hoveredCardId.value === cardId ? "scale(1.05)" : "scale(1)",
+        transition: "transform 0.3s ease",
+      };
+    };
+
+    return {
+      friendLinks,
+      hoverEffect,
+      resetEffect,
+      cardStyle,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.friend-links {
+  padding: 20px;
+}
+
+.add-link-card {
+  margin-bottom: 20px;
+}
+
+.add-link-header {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.add-link-content {
+  font-size: 1em;
+  color: #333;
+}
+
+.add-link-content pre {
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.add-link-content a {
+  color: #409eff;
+  text-decoration: none;
+}
+
+.add-link-content a:hover {
+  text-decoration: underline;
+}
+
+.category-card {
+  margin-bottom: 20px;
+}
+
+.category-header {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.links-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 15px;
+}
+
+.link-card {
+  width: 100%;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+
+.link-card:hover {
+  z-index: 2;
+}
+
+.link-content {
+  display: flex;
+  align-items: center;
+}
+
+.link-avatar {
+  margin-right: 15px;
+}
+
+.link-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.link-title {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.link-description {
+  font-size: 0.9em;
+  color: #666;
+}
+</style>