update

2026-01-02 20:36:49 +08:00
parent 8ee70869ec
commit eb38ca1edc
13 changed files with 1646 additions and 13160 deletions
--- a/app/components/main/SocialLinks.vue
+++ b/app/components/main/SocialLinks.vue
@@ -2,24 +2,15 @@
  <section class="flex flex-col gap-2.5">
    <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-4 py-2 rounded-full bg-white/40 backdrop-blur-md border border-white/40 text-zinc-700 text-sm font-semibold transition-all duration-300 hover:bg-white/60 hover:border-white/60 hover-text-black hover:-translate-y-1 hover:shadow-lg dark:bg-slate-800/40 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-slate-800/60 dark:hover:text-white">
-          <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"
-              size="16"
-              class="text-current" />
-            <NuxtImg
-              v-else
-              :src="iconFor(link).src"
-              :alt="link.name"
-              loading="lazy"
-              class="w-full h-full" />
-          </span>
-          <span>{{ link.name }}</span>
-        </NuxtLink>
+        <UTooltip :text="link.name">
+          <NuxtLink
+            :to="link.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-white/40 backdrop-blur-md border border-white/40 text-zinc-700 transition-all duration-300 hover:bg-white/60 hover:border-white/60 hover:text-black hover:-translate-y-1 hover:shadow-lg dark:bg-slate-800/40 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-slate-800/60 dark:hover:text-white">
+            <Icon v-if="iconFor(link)" :name="iconFor(link)" size="22" class="text-current" />
+          </NuxtLink>
+        </UTooltip>
      </template>
    </div>
  </section>
@@ -28,7 +19,6 @@
 <script setup>
 import siteConfig from "~/config";

-import { onMounted } from "vue";
 const links = siteConfig.socialLinks;

 const iconMap = {
@@ -55,20 +45,8 @@ const iconMap = {

 const iconFor = (link) => {
  const key = (link.name || "").toLowerCase();
-  if (iconMap[key]) return { name: iconMap[key] };
-  if (link.icon) return { src: link.icon };
+  if (iconMap[key]) return iconMap[key];
+  if (link.icon) return 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>
--- a/app/components/main/header.vue
+++ b/app/components/main/header.vue
@@ -27,22 +27,16 @@ watch(
 </script>

 <template>
-  <header class="fixed top-0 left-0 right-0 z-50 h-16 backdrop-blur-sm font-semibold px-4 sm:px-8">
+  <header class="fixed top-0 left-0 right-0 z-50 h-20 backdrop-blur-sm font-semibold px-4 lg:px-8">
    <div class="flex justify-center items-center h-full w-full relative">
      <nav class="flex items-center justify-center w-full">
        <!-- 移动端导航栏 -->
-        <div class="flex sm:hidden items-center justify-between w-full">
+        <div class="flex lg:hidden items-center justify-between w-full">
          <NuxtLink
            to="/"
            class="flex items-center gap-2 h-10 px-4 rounded-full bg-white/80 dark:bg-slate-900/80 border border-zinc-200/50 dark:border-white/10 shadow-sm backdrop-blur-xl transition-transform active:scale-95">
-            <Icon
-              name="fa-solid:cat"
-              size="18"
-              class="text-zinc-700 dark:text-zinc-200 flex items-center" />
-            <span
-              class="text-base font-bold bg-linear-to-r from-zinc-900 to-zinc-600 dark:from-zinc-100 dark:to-zinc-400 bg-clip-text text-transparent"
-              >{{ siteConfig.siteMeta.title }}</span
-            >
+            <Icon name="fa-solid:cat" size="18" class="text-primary flex items-center" />
+            <span class="text-base font-bold text-primary">{{ siteConfig.siteMeta.title }}</span>
          </NuxtLink>

          <div class="flex items-center gap-2">
@@ -71,34 +65,28 @@ watch(
        </div>

        <!-- 桌面端导航栏 -->
-        <div class="hidden sm:flex items-center justify-center w-full relative h-12">
+        <div class="hidden lg:flex items-center justify-center w-full relative h-14">
          <!-- 桌面端导航栏logo (左上角) -->
          <div
-            class="absolute left-0 h-12 flex items-center rounded-full border bg-white/80 dark:bg-slate-900/80 border-zinc-200/50 dark:border-white/10 shadow-sm backdrop-blur-xl transition-transform px-1"
+            class="absolute left-0 h-14 flex items-center rounded-full border bg-white/80 dark:bg-slate-900/80 border-zinc-200/50 dark:border-white/10 shadow-sm backdrop-blur-xl transition-transform px-1"
            :class="{
              'bg-white dark:bg-slate-800 shadow-sm font-bold': isActive('/'),
              'hover:bg-zinc-100 dark:hover:bg-white/10': !isActive('/'),
            }">
-            <NuxtLink to="/" class="flex h-10 duration-200 items-center gap-2 px-4 text-base">
-              <Icon
-                name="fa-solid:cat"
-                size="18"
-                class="flex items-center text-zinc-700 dark:text-zinc-200" />
-              <span
-                class="font-bold bg-linear-to-r from-zinc-900 to-zinc-600 dark:from-zinc-100 dark:to-zinc-400 bg-clip-text text-transparent"
-                >{{ siteConfig.siteMeta.title }}</span
-              >
+            <NuxtLink to="/" class="flex h-12 duration-200 items-center gap-2 px-4 text-lg">
+              <Icon name="fa-solid:cat" size="20" class="flex items-center text-primary" />
+              <span class="font-bold text-primary">{{ siteConfig.siteMeta.title }}</span>
            </NuxtLink>
          </div>

          <!-- 桌面端导航栏 (居中) -->
          <div
-            class="inline-flex items-center h-12 bg-white/70 dark:bg-slate-900/50 backdrop-blur-xl shadow-[0_4px_20px_-2px_rgba(0,0,0,0.1)] border border-zinc-200/50 dark:border-white/5 rounded-full px-1.5 transition-all duration-300 hover:shadow-xl">
-            <ul class="flex items-center space-x-1.5 text-base">
+            class="inline-flex items-center h-14 bg-white/70 dark:bg-slate-900/50 backdrop-blur-xl shadow-[0_4px_20px_-2px_rgba(0,0,0,0.1)] border border-zinc-200/50 dark:border-white/5 rounded-full px-1.5 transition-all duration-300 hover:shadow-xl">
+            <ul class="flex items-center space-x-1.5 text-lg">
              <li v-for="link in siteConfig.navbar.links" :key="link.path">
                <NuxtLink
                  :to="link.path"
-                  class="relative h-10 px-5 rounded-full transition-all duration-200 flex items-center text-zinc-700 dark:text-zinc-200"
+                  class="relative h-12 px-6 rounded-full transition-all duration-200 flex items-center text-zinc-700 dark:text-zinc-200"
                  :class="{
                    'bg-white dark:bg-slate-800 shadow-sm font-bold': isActive(link.path),
                    'hover:bg-zinc-100 dark:hover:bg-white/10': !isActive(link.path),
@@ -106,7 +94,7 @@ watch(
                  <Icon
                    v-if="link.icon"
                    :name="link.icon"
-                    size="18"
+                    size="20"
                    class="mr-2 flex items-center" />
                  <span>{{ link.name }}</span>
                </NuxtLink>
@@ -119,11 +107,11 @@ watch(
            <ClientOnly>
              <button
                :title="colorMode.value === 'light' ? '切换到深色模式' : '切换到浅色模式'"
-                class="relative h-12 w-12 rounded-full bg-white/80 dark:bg-slate-900/80 border border-zinc-200/50 dark:border-white/10 shadow-sm flex items-center justify-center transition-all hover:scale-110 active:scale-95 backdrop-blur-xl"
+                class="relative h-14 w-14 rounded-full bg-white/80 dark:bg-slate-900/80 border border-zinc-200/50 dark:border-white/10 shadow-sm flex items-center justify-center transition-all hover:scale-110 active:scale-95 backdrop-blur-xl"
                @click="onClick(colorMode.value === 'light' ? 'dark' : 'light')">
                <Icon
                  name="fa-regular:moon"
-                  size="18"
+                  size="20"
                  class="icon-svg transition-all duration-300 text-zinc-700 dark:text-white-200"
                  :class="
                    colorMode.value === 'light'
@@ -133,7 +121,7 @@ watch(

                <Icon
                  name="fa-regular:sun"
-                  size="18"
+                  size="20"
                  class="icon-svg absolute transition-all duration-300 text-yellow-400"
                  :class="
                    colorMode.value === 'dark'
@@ -155,7 +143,7 @@ watch(
          leave-to-class="translate-y-2 opacity-0 scale-95">
          <div
            v-if="isMenuOpen"
-            class="sm:hidden absolute top-full right-0 mt-3 w-56 overflow-hidden bg-white/95 dark:bg-slate-900/95 backdrop-blur-2xl border border-zinc-200/60 dark:border-white/10 rounded-3xl shadow-2xl z-50 origin-top-right">
+            class="lg:hidden absolute top-full right-0 mt-3 w-56 overflow-hidden bg-white/95 dark:bg-slate-900/95 backdrop-blur-2xl border border-zinc-200/60 dark:border-white/10 rounded-3xl shadow-2xl z-50 origin-top-right">
            <div class="p-2">
              <ul class="space-y-1">
                <li v-for="link in siteConfig.navbar.links" :key="link.path">
@@ -191,11 +179,11 @@ watch(
  <!-- 移动端菜单遮罩 -->
  <div
    v-if="isMenuOpen"
-    class="fixed inset-0 z-40 bg-black/5 sm:hidden"
+    class="fixed inset-0 z-40 bg-black/5 lg:hidden"
    @click="isMenuOpen = false"></div>

  <!-- Spacer to prevent page content being hidden under fixed header -->
-  <div class="h-16" aria-hidden="true"></div>
+  <div class="h-20" aria-hidden="true"></div>
 </template>

 <style scoped>
--- a/app/components/main/hero.vue
+++ b/app/components/main/hero.vue
@@ -1,6 +1,32 @@
 <script setup lang="ts">
 import siteConfig from "~/config";
 import SocialLinks from "./SocialLinks.vue";
+import Typed from "typed.js";
+
+const descriptions = siteConfig.hero.description;
+const typedElement = ref<HTMLElement | null>(null);
+const randomDescription = ref(descriptions[0]);
+let typed: Typed | null = null;
+
+onMounted(() => {
+  if (siteConfig.hero.typed?.enable && typedElement.value) {
+    typed = new Typed(typedElement.value, {
+      strings: descriptions,
+      typeSpeed: siteConfig.hero.typed.typeSpeed || 100,
+      backSpeed: siteConfig.hero.typed.backSpeed || 50,
+      loop: siteConfig.hero.typed.loop ?? true,
+      backDelay: siteConfig.hero.typed.backDelay || 2000,
+    });
+  } else {
+    randomDescription.value = descriptions[Math.floor(Math.random() * descriptions.length)];
+  }
+});
+
+onUnmounted(() => {
+  if (typed) {
+    typed.destroy();
+  }
+});
 </script>

 <template>
@@ -9,7 +35,7 @@ import SocialLinks from "./SocialLinks.vue";
      class="container max-w-5xl mx-auto px-6 min-h-[calc(100vh-4rem)] flex items-center justify-center">
      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="mb-8">
-          <div class="relative h-32 w-32 group">
+          <div class="relative h-40 w-40 group">
            <div
              class="absolute inset-0 bg-primary-gradient rounded-full blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-500"></div>
            <NuxtImg
@@ -32,8 +58,9 @@ import SocialLinks from "./SocialLinks.vue";
          </div>

          <p
-            class="mt-4 max-w-2xl text-base sm:text-lg text-zinc-600 dark:text-zinc-300 relative font-medium leading-relaxed">
-            {{ siteConfig.hero.description }}
+            class="mt-4 max-w-2xl text-lg sm:text-xl text-zinc-600 dark:text-zinc-300 relative font-medium leading-relaxed min-h-[1.5em]">
+            <span v-if="siteConfig.hero.typed?.enable" ref="typedElement"></span>
+            <span v-else>{{ randomDescription }}</span>
          </p>
        </div>

--- a/app/components/main/recent.vue
+++ b/app/components/main/recent.vue
@@ -53,7 +53,7 @@ const formattedData = computed(() => {
        </h2>
      </div>
      <NuxtLink
-        to="/blogs"
+        to="/archive"
        class="group flex items-center gap-1 text-sm font-semibold text-zinc-900 dark:text-zinc-50 hover-text-primary transition-colors">
        查看全部文章
        <Icon