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

app/components/AboutSection.vue

@@ -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>

app/components/FriendsSection.vue

@@ -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>
+    <p class="text-sm text-white/60 mb-3">欢迎互换友链 · Friends</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="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>
+          <div class="mb-2 font-semibold">请在申请前在你站点添加本站信息：</div>
-          <pre class="bg-white/6 border border-white/10 rounded-lg p-3 text-xs overflow-auto">
+          <pre
-                    <code>{{ exampleJson }}</code>
+            class="bg-white/6 border border-white/10 rounded-lg p-3 text-xs overflow-auto"
-                </pre>
+          ><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"

app/components/GithubSection.vue

@@ -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>

app/components/HeroSection.vue

@@ -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"

app/components/PageSwitcher.vue

@@ -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));

app/components/ProjectsSection.vue

@@ -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">

app/components/SitesSection.vue

@@ -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">

app/components/SkillsSection.vue

@@ -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>

app/components/SocialLinks.vue

@@ -2,7 +2,35 @@
   <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">
+    <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"
+        >
+          <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"
@@ -15,10 +43,37 @@
           </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>

app/config/siteConfig.ts

@@ -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",
     // },

app/pages/comments.vue

@@ -1,5 +1,6 @@
 <template>
-  <section class="container mx-auto py-8">
+  <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">
@@ -14,7 +15,6 @@
               :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"
@@ -27,6 +27,7 @@
         </section>
       </ClientOnly>
     </section>
+  </main>
 </template>
 
 <script setup lang="ts">
@@ -67,11 +68,10 @@ definePageMeta({
 </script>
 
 <style scoped>
-.container {
+/* .container {
-  max-width: 880px;
   padding-left: 1rem;
   padding-right: 1rem;
-}
+} */
 
 h1 {
   color: #e6eef8;

app/styles.global.css

@@ -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;