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

2026-03-10 14:42:39 +08:00 · 2026-02-25 19:20:15 +08:00
parent d5c9b4d3c8
commit f29a5401ed
12 changed files with 239 additions and 74 deletions
--- a/app/components/AboutSection.vue
+++ b/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>
--- a/app/components/FriendsSection.vue
+++ b/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>
-    <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"
--- a/app/components/GithubSection.vue
+++ b/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>
--- a/app/components/HeroSection.vue
+++ b/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"
--- a/app/components/PageSwitcher.vue
+++ b/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));
--- a/app/components/ProjectsSection.vue
+++ b/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">
--- a/app/components/SitesSection.vue
+++ b/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">
--- a/app/components/SkillsSection.vue
+++ b/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>
--- a/app/components/SocialLinks.vue
+++ b/app/components/SocialLinks.vue
@@ -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>