RhenCloud/Cloud-Home
1
0
Fork 0
mirror of https://github.com/RhenCloud/Cloud-Home.git synced 2026-03-10 06:32:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 更新各组件样式，添加社交链接滚动功能，优化配置

Browse Source
This commit is contained in:
Rhen Cloud
2026-02-25 19:20:15 +08:00
parent d5c9b4d3c8
commit f29a5401ed
12 changed files with 239 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/AboutSection.vue
View File

@@ -1,12 +1,12 @@
<template>
<section class="card flex flex-col gap-2.5">
<section class="card main-section flex flex-col gap-2.5">
<h2 class="m-0 mb-1">个人简介</h2>
<p class="text-text-muted text-sm m-0 mb-3 block">关于我 · About Me</p>
<div class="flex flex-wrap justify-center gap-3.5">
<article
v-if="age"
class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-primary/40 hover:shadow-lg-dark hover:bg-gradient-to-br hover:from-primary/6"
class="flex-1 min-w-35 flex items-center justify-between gap-2 bg-linear-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-primary/40 hover:shadow-lg-dark hover:bg-linear-to-br hover:from-primary/6"
>
<div class="flex items-center gap-2">
<span class="text-xl leading-none">🎂</span>
@@ -21,7 +21,7 @@
<article
v-if="profile?.gender"
class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark"
class="flex-1 min-w-35 flex items-center justify-between gap-2 bg-linear-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark"
>
<div class="flex items-center gap-2">
<span class="text-xl leading-none">⚧️</span>
@@ -36,7 +36,7 @@
<article
v-if="profile?.pronouns"
class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark"
class="flex-1 min-w-35 flex items-center justify-between gap-2 bg-linear-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark"
>
<div class="flex items-center gap-2">
<span class="text-xl leading-none">🗣️</span>
@@ -51,7 +51,7 @@
<article
v-if="profile?.location"
class="flex-1 min-w-[140px] flex items-center justify-between gap-2 bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark"
class="flex-1 min-w-35 flex items-center justify-between gap-2 bg-linear-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-2.5 px-3.5 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark"
>
<div class="flex items-center gap-2">
<span class="text-xl leading-none">📍</span>
@@ -69,7 +69,7 @@
<article
v-for="item in items"
:key="item.title"
class="bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-3 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark"
class="bg-linear-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-3 shadow-md-dark transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg-dark"
>
<div class="flex items-center gap-2 mb-1.5">
<span class="text-2xl leading-none">{{ item.icon }}</span>

20
app/components/FriendsSection.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="card panel 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">欢迎互换友链 · Friends</p>
<div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
<p class="text-sm text-white/60 mb-3">欢迎互换友链 · Friends</p>
<div class="grid grid-cols-1 gap-4 w-full max-w-275 mx-auto sm:grid-cols-2">
<article
v-for="f in displayedFriends"
:key="f.url"
class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-pink-400/50 w-[290px] h-[145px] flex flex-col"
class="rounded-[14px] border border-white/10 bg-linear-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-0.75 hover:border-pink-400/50 w-72.5 h-36.25 flex flex-col"
>
<div class="flex items-center justify-between mb-1.5">
<div class="flex items-center gap-2 min-w-0">
@@ -56,7 +56,7 @@
@click.self="closeDialog"
>
<div
class="min-w-[280px] max-w-[420px] bg-gradient-to-br from-pink-500/12 to-white/8 border border-white/15 rounded-2xl p-4 shadow-xl"
class="min-w-70 max-w-105 bg-linear-to-br from-pink-500/12 to-white/8 border border-white/15 rounded-2xl p-4 shadow-xl"
>
<h3 class="m-0 mb-2">{{ dialogTitle }}</h3>
<p class="text-text-muted text-sm mb-4">{{ dialogText }}</p>
@@ -80,15 +80,15 @@
@click.self="showFormModal = false"
>
<div
class="w-[92%] max-w-[540px] bg-gradient-to-br from-white/8 to-primary/6 border border-white/15 rounded-2xl p-6 shadow-xl"
class="w-[92%] max-w-135 bg-linear-to-br from-white/8 to-primary/6 border border-white/15 rounded-2xl p-6 shadow-xl"
>
<h3 class="m-0 mb-4 text-center">申请友链</h3>
<div class="mb-4 text-sm text-text-primary">
<div class="mb-2 font-semibold">请在申请前在你站点添加以下信息（示例 JSON）：</div>
<pre class="bg-white/6 border border-white/10 rounded-lg p-3 text-xs overflow-auto">
<code>{{ exampleJson }}</code>
</pre>
<div class="mb-2 font-semibold">请在申请前在你站点添加本站信息：</div>
<pre
class="bg-white/6 border border-white/10 rounded-lg p-3 text-xs overflow-auto"
><code class="font-mono whitespace-pre">{{ exampleJson }}</code></pre>
</div>
<form class="grid grid-cols-1 sm:grid-cols-2 gap-3" @submit.prevent="submitForm">
@@ -103,7 +103,7 @@
</label>
<!-- URL 与 Email 同行 -->
<label class="flex fl ex-col gap-1 text-sm text-text-primary font-semibold">
<label class="flex flex-col gap-1 text-sm text-text-primary font-semibold">
网站链接 *
<input
v-model="form.url"

2
app/components/GithubSection.vue
View File

@@ -1,5 +1,5 @@
<template>
<section class="card flex flex-col gap-2.5">
<section class="card main-section flex flex-col gap-2.5">
<h2 class="m-0 mb-1">GitHub</h2>
<div class="mt-3">
<h3 class="m-0 mb-1">提交热力图</h3>

6
app/components/HeroSection.vue
View File

@@ -1,8 +1,10 @@
<template>
<section class="card grid grid-cols-[120px_1fr] gap-4 items-center hover:shadow-lg-dark group">
<section
class="card main-section grid grid-cols-[120px_1fr] gap-4 items-center hover:shadow-lg-dark group"
>
<div class="relative">
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-primary/30 to-accent/20 blur-xl group-hover:blur-2xl transition-all duration-300 opacity-0 group-hover:opacity-100"
class="absolute inset-0 rounded-full bg-linear-to-br from-primary/30 to-accent/20 blur-xl group-hover:blur-2xl transition-all duration-300 opacity-0 group-hover:opacity-100"
/>
<NuxtImg
class="relative w-30 h-30 rounded-full object-cover border-2 border-primary/40 shadow-md-dark bg-white transition-transform duration-300 group-hover:scale-105"

2
app/components/PageSwitcher.vue
View File

@@ -46,7 +46,7 @@ const pages = [
{ name: "sites", label: "网站" },
{ name: "projects", label: "项目" },
{ name: "friends", label: "友链" },
{ name: "comments", label: "留言" },
// { name: "comments", label: "留言" },
];
const currentIndex = computed(() => pages.findIndex((item) => item.name === route.name));

4
app/components/ProjectsSection.vue
View File

@@ -2,11 +2,11 @@
<section class="card panel flex flex-col gap-2.5">
<h2 class="m-0 mb-1 text-lg font-semibold">项目作品</h2>
<p class="text-sm text-white/60 mb-3">一些正在维护或已发布的项目 · Projects</p>
<div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
<div class="grid grid-cols-1 gap-4 w-full max-w-275 mx-auto sm:grid-cols-2">
<article
v-for="p in projects"
:key="p.url"
class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-yellow-400/50 w-[290px] h-[145px] flex flex-col"
class="rounded-[14px] border border-white/10 bg-linear-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-0.75 hover:border-yellow-400/50 w-72.5 h-36.25 flex flex-col"
>
<div class="flex items-center justify-between mb-1.5">
<h3 class="font-medium truncate">

2
app/components/SitesSection.vue
View File

@@ -8,7 +8,7 @@
<article
v-for="site in sites"
:key="site.url"
class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-blue-400/50 w-[290px] h-[145px] flex flex-col"
class="rounded-[14px] border border-white/10 bg-linear-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-blue-400/50 w-[290px] h-[145px] flex flex-col"
>
<div class="flex items-center justify-between mb-1.5">
<h3 class="font-medium truncate">

6
app/components/SkillsSection.vue
View File

@@ -1,5 +1,5 @@
<template>
<section class="card flex flex-col gap-2.5">
<section class="card main-section flex flex-col gap-2.5">
<div>
<h2 class="m-0 mb-1 font-semibold">技能专长</h2>
<p class="text-text-muted text-sm m-0 mb-3">我常用的工具与技术 · Skills & Technologies</p>
@@ -8,7 +8,7 @@
<article
v-for="group in skills"
:key="group.title"
class="bg-gradient-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-primary/50 hover:shadow-lg-dark hover:bg-gradient-to-br hover:from-primary/8"
class="bg-linear-to-br from-white/5 to-white/2 border border-white/10 rounded-2xl p-3.5 shadow-md-dark transition-all duration-300 hover:-translate-y-1 hover:border-primary/50 hover:shadow-lg-dark hover:bg-linear-to-br hover:from-primary/8"
>
<header class="mb-3">
<h3 class="text-base font-semibold m-0">{{ group.title }}</h3>
@@ -24,7 +24,7 @@
:alt="item"
:title="item"
loading="lazy"
class="w-7 h-7 rounded-2xl"
class="w-6 h-6 rounded-2xl"
/>
</span>
</div>

156
app/components/SocialLinks.vue
View File

@@ -2,23 +2,78 @@
<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"
<div class="relative">
<button
v-show="canScrollLeft"
aria-label="向左滚动"
class="scroll-arrow left flex items-center justify-center"
@click="scrollLeft"
>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
<Icon v-if="iconFor(link).name" :name="iconFor(link).name" width="20" height="20" />
</span>
<span>{{ link.name }}</span>
</NuxtLink>
</template>
<path
d="M15 18L9 12L15 6"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div
ref="container"
class="flex flex-nowrap gap-2.5 overflow-x-auto social-links-scroll py-1"
>
<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">
<Icon v-if="iconFor(link).name" :name="iconFor(link).name" width="20" height="20" />
</span>
<span>{{ link.name }}</span>
</NuxtLink>
</template>
</div>
<button
v-show="canScrollRight"
aria-label="向右滚动"
class="scroll-arrow right flex items-center justify-center"
@click="scrollRight"
>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M9 18L15 12L9 6"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
</section>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
defineProps({
links: {
type: Array,
@@ -26,6 +81,10 @@ defineProps({
},
});
const container = ref(null);
const canScrollLeft = ref(false);
const canScrollRight = ref(false);
const iconMap = {
bilibili: "simple-icons:bilibili",
github: "simple-icons:github",
@@ -46,6 +105,7 @@ const iconMap = {
wechat: "simple-icons:wechat",
weixin: "simple-icons:wechat",
qq: "simple-icons:qq",
matrix: "simple-icons:matrix",
};
const iconFor = (link) => {
@@ -54,4 +114,78 @@ const iconFor = (link) => {
if (link.icon) return { src: link.icon };
return null;
};
function updateScrollButtons() {
const el = container.value;
if (!el) return;
canScrollLeft.value = el.scrollLeft > 0;
canScrollRight.value = el.scrollWidth - el.clientWidth - el.scrollLeft > 1;
}
function scrollByAmount(amount) {
const el = container.value;
if (!el) return;
el.scrollBy({ left: amount, behavior: "smooth" });
setTimeout(updateScrollButtons, 300);
}
function scrollLeft() {
scrollByAmount(-200);
}
function scrollRight() {
scrollByAmount(200);
}
onMounted(() => {
updateScrollButtons();
const el = container.value;
if (el) el.addEventListener("scroll", updateScrollButtons, { passive: true });
window.addEventListener("resize", updateScrollButtons);
});
onBeforeUnmount(() => {
const el = container.value;
if (el) el.removeEventListener("scroll", updateScrollButtons);
window.removeEventListener("resize", updateScrollButtons);
});
</script>
<style scoped>
.social-links-scroll {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.social-links-scroll::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.04);
color: var(--color-text-primary, #fff);
border: 1px solid rgba(255, 255, 255, 0.06);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.scroll-arrow.left {
left: 6px;
}
.scroll-arrow.right {
right: 6px;
}
.scroll-arrow:hover {
transform: translateY(-50%) scale(1.05);
}
.scroll-arrow[style*="display: none"] {
visibility: hidden;
}
</style>

29
app/config/siteConfig.ts
View File

@@ -14,9 +14,10 @@ const siteConfig = {
socialLinks: [
{ name: "GitHub", url: "https://github.com/RhenCloud" },
{ name: "Email", url: "mailto:i@rhen.cloud" },
{ name: "Telegram", url: "https://t.me/RhenCloud" },
{ name: "Matrix", url: "https://matrix.to/#/@RhenCloud:matrix.org" },
{ name: "Bilibili", url: "https://space.bilibili.com/1502883335" },
{ name: "Blog", url: "https://blog.rhen.cloud" },
{ name: "Telegram", url: "https://t.me/RhenCloud" },
{ name: "Twitter", url: "https://x.com/RhenCloud75" },
],
@@ -25,7 +26,8 @@ const siteConfig = {
},
about: [
{ title: "Pro-LGBT", desc: "我相信性别多样性是人们应有的自由和权利。", icon: "🧠" },
// { title: "Pro-LGBT", desc: "我相信性别多样性是人们应有的自由和权利。", icon: "🧠" },
{ title: "Night Owl", desc: "灵感通常在深夜降临。", icon: "🌙" },
{ title: "Developer", desc: "专注后端 / 云原生，热爱自动化与高可用。", icon: "🛠️" },
{ title: "Anime Fan", desc: "二次元爱好者，享受故事与想象力。", icon: "🎬" },
{ title: "Just For Fun", desc: "我喜欢尝试新鲜事物，折腾小众技术", icon: "🎮" },
@@ -125,7 +127,6 @@ const siteConfig = {
],
projects: [
{ name: "Cloud Home", url: "https://github.com/RhenCloud/cloud-home", desc: "个人主页模板" },
{
name: "ILP",
url: "https://github.com/RhenCloud/ILP",
@@ -136,6 +137,26 @@ const siteConfig = {
url: "https://github.com/RhenCloud/ILP-Cpp",
desc: "跨平台、多网站、模块化的小说下载器",
},
{
name: "Cloud-Home",
url: "https://github.com/RhenCloud/Cloud-Home",
desc: "个人主页模板",
},
{
name: "Cloud-Blog",
url: "https://github.com/RhenCloud/Cloud-Blog",
desc: "个人博客模板",
},
{
name: "SleepyXposed",
url: "https://github.com/RhenCloud/SleepyXposed",
desc: "基于Xposed的Sleepy客户端",
},
{
name: "cloud-pyprland",
url: "https://github.com/RhenCloud/cloud-pyprland",
desc: "我的pyprland实用插件",
},
],
friends: [
@@ -154,7 +175,7 @@ const siteConfig = {
],
comments: {
enable: true,
enable: false,
// twikoo: {
// url: "https://twikoo.rhen.cloud",
// },

62
app/pages/comments.vue
View File

@@ -1,32 +1,33 @@
<template>
<section class="container mx-auto py-8">
<p v-if="!giscus || !giscus.repo" class="text-sm text-red-500 mb-4">Giscus 未配置。</p>
<ClientOnly>
<section class="card panel flex flex-col gap-2.5">
<h2 class="m-0 mb-1 text-lg font-semibold">留言板</h2>
<p class="text-sm text-white/60 mb-3">在这里留下想说的话吧 · Comments</p>
<div class="giscus-wrapper">
<component
:is="GiscusComponent"
v-if="GiscusComponent"
:repo="giscus.repo"
:repo-id="giscus.repoId"
:category="giscus.category"
:category-id="giscus.categoryId"
:mapping="giscus.mapping"
:strict="giscus.strict"
:reactions-enabled="giscus.reactionsEnabled"
:emit-metadata="giscus.emitMetadata"
:input-position="giscus.inputPosition"
:theme="'/css/giscus.css'"
lang="zh-CN"
class="giscus"
/>
<div v-else id="giscus-container" class="giscus" />
</div>
</section>
</ClientOnly>
</section>
<main class="page">
<section class="card main-section flex flex-col gap-2.5 mx-auto py-8">
<p v-if="!giscus || !giscus.repo" class="text-sm text-red-500 mb-4">Giscus 未配置。</p>
<ClientOnly>
<section class="card panel flex flex-col gap-2.5">
<h2 class="m-0 mb-1 text-lg font-semibold">留言板</h2>
<p class="text-sm text-white/60 mb-3">在这里留下想说的话吧 · Comments</p>
<div class="giscus-wrapper">
<component
:is="GiscusComponent"
v-if="GiscusComponent"
:repo="giscus.repo"
:repo-id="giscus.repoId"
:category="giscus.category"
:category-id="giscus.categoryId"
:mapping="giscus.mapping"
:reactions-enabled="giscus.reactionsEnabled"
:emit-metadata="giscus.emitMetadata"
:input-position="giscus.inputPosition"
:theme="'/css/giscus.css'"
lang="zh-CN"
class="giscus"
/>
<div v-else id="giscus-container" class="giscus" />
</div>
</section>
</ClientOnly>
</section>
</main>
</template>
<script setup lang="ts">
@@ -67,11 +68,10 @@ definePageMeta({
</script>
<style scoped>
.container {
max-width: 880px;
/* .container {
padding-left: 1rem;
padding-right: 1rem;
}
} */
h1 {
color: #e6eef8;

12
app/styles.global.css
View File

@@ -10,6 +10,9 @@
color-scheme: light dark;
background: #0f1629;
color: #e8eefc;
--site-content-max-width: 960px;
--main-max-width: 890px;
--main-min-width: 85%;
}
body {
@@ -48,7 +51,7 @@
@layer components {
.info-card {
@apply rounded-[14px] border border-white/10
bg-gradient-to-br from-white/5 to-white/0
bg-linear-to-br from-white/5 to-white/0
px-4 py-3.5 transition-all duration-200;
}
}
@@ -158,7 +161,7 @@
}
.page {
max-width: 960px;
max-width: var(--site-content-max-width);
margin: 0 auto;
padding: 2rem 1rem 3rem;
display: flex;
@@ -166,6 +169,11 @@
gap: 1rem;
}
.main-section {
max-width: var(--main-max-width);
/* min-width: var(--main-min-width); */
}
.chips {
display: flex;
flex-wrap: wrap;