RhenCloud/Cloud-Home
1
0
Fork 0
mirror of https://github.com/RhenCloud/Cloud-Home.git synced 2026-01-22 17:39:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: 格式化代码

Browse Source
This commit is contained in:
RhenCloud
2025-12-19 19:38:01 +08:00
parent 618723a689
commit 4d8644629b
37 changed files with 6516 additions and 6200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
app/components/SocialLinks.vue
View File

@@ -1,77 +1,78 @@
<template>
<section class="card flex flex-col gap-2.5">
<h2 class="m-0 mb-1 text-lg font-semibold">社交链接</h2>
<p class="text-text-muted text-sm m-0 mb-3 block">社交账号 · Links</p>
<div class="flex flex-wrap gap-2.5">
<template v-for="link in links" :key="link.url">
<NuxtLink
:to="link.url"
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/10 text-text-primary text-sm font-medium transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary hover:-translate-y-1"
>
<span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
<i v-if="iconFor(link).fa" :class="iconFor(link).fa" />
<NuxtImg
v-else
:src="iconFor(link).src"
:alt="link.name"
loading="lazy"
class="w-full h-full"
/>
</span>
<span>{{ link.name }}</span>
</NuxtLink>
</template>
</div>
</section>
</template>
<script setup>
import { onMounted } from "vue";
defineProps({
links: {
type: Array,
required: true,
},
});
const iconMap = {
bilibili: "fa-brands fa-bilibili",
github: "fa-brands fa-github",
blog: "fa-solid fa-rss",
email: "fa-solid fa-envelope",
mail: "fa-solid fa-envelope",
telegram: "fa-brands fa-telegram",
twitter: "fa-brands fa-x-twitter",
x: "fa-brands fa-x-twitter",
linkedin: "fa-brands fa-linkedin",
youtube: "fa-brands fa-youtube",
facebook: "fa-brands fa-facebook",
instagram: "fa-brands fa-instagram",
reddit: "fa-brands fa-reddit",
discord: "fa-brands fa-discord",
weibo: "fa-brands fa-weibo",
zhihu: "fa-brands fa-zhihu",
wechat: "fa-brands fa-weixin",
weixin: "fa-brands fa-weixin",
qq: "fa-brands fa-qq",
};
const iconFor = (link) => {
const key = (link.name || "").toLowerCase();
if (iconMap[key]) return { fa: iconMap[key] };
if (link.icon) return { src: link.icon };
return null;
};
onMounted(() => {
const id = "fa-cdn";
if (document.getElementById(id)) return;
const link = document.createElement("link");
link.id = id;
link.rel = "stylesheet";
link.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?font-display=swap";
link.crossOrigin = "anonymous";
link.referrerPolicy = "no-referrer";
document.head.appendChild(link);
});
</script>
<template>
<section class="card flex flex-col gap-2.5">
<h2 class="m-0 mb-1 text-lg font-semibold">社交链接</h2>
<p class="text-text-muted text-sm m-0 mb-3 block">社交账号 · Links</p>
<div class="flex flex-wrap gap-2.5">
<template v-for="link in links" :key="link.url">
<NuxtLink
:to="link.url"
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/10 text-text-primary text-sm font-medium transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary hover:-translate-y-1"
>
<span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
<i v-if="iconFor(link).fa" :class="iconFor(link).fa" />
<NuxtImg
v-else
:src="iconFor(link).src"
:alt="link.name"
loading="lazy"
class="w-full h-full"
/>
</span>
<span>{{ link.name }}</span>
</NuxtLink>
</template>
</div>
</section>
</template>
<script setup>
import { onMounted } from "vue";
defineProps({
links: {
type: Array,
required: true,
},
});
const iconMap = {
bilibili: "fa-brands fa-bilibili",
github: "fa-brands fa-github",
blog: "fa-solid fa-rss",
email: "fa-solid fa-envelope",
mail: "fa-solid fa-envelope",
telegram: "fa-brands fa-telegram",
twitter: "fa-brands fa-x-twitter",
x: "fa-brands fa-x-twitter",
linkedin: "fa-brands fa-linkedin",
youtube: "fa-brands fa-youtube",
facebook: "fa-brands fa-facebook",
instagram: "fa-brands fa-instagram",
reddit: "fa-brands fa-reddit",
discord: "fa-brands fa-discord",
weibo: "fa-brands fa-weibo",
zhihu: "fa-brands fa-zhihu",
wechat: "fa-brands fa-weixin",
weixin: "fa-brands fa-weixin",
qq: "fa-brands fa-qq",
};
const iconFor = (link) => {
const key = (link.name || "").toLowerCase();
if (iconMap[key]) return { fa: iconMap[key] };
if (link.icon) return { src: link.icon };
return null;
};
onMounted(() => {
const id = "fa-cdn";
if (document.getElementById(id)) return;
const link = document.createElement("link");
link.id = id;
link.rel = "stylesheet";
link.href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?font-display=swap";
link.crossOrigin = "anonymous";
link.referrerPolicy = "no-referrer";
document.head.appendChild(link);
});
</script>