diff --git a/package-lock.json b/package-lock.json index 63ff400..386ad3e 100644 --- a/package-lock.json +++ b/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" + } } } } diff --git a/package.json b/package.json index b20e15c..3801a24 100644 --- a/package.json +++ b/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", diff --git a/public/links.yml b/public/links.yml new file mode 100644 index 0000000..b02c363 --- /dev/null +++ b/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: "这是一个技术博客" \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/views/LinksView.vue b/src/views/LinksView.vue index bbac8c1..a0f338d 100644 --- a/src/views/LinksView.vue +++ b/src/views/LinksView.vue @@ -1,13 +1,180 @@ - + \ No newline at end of file +export default { + 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, + }; + }, +}; + + +