update

2026-01-02 15:44:10 +08:00
parent 4a2a3f82fc
commit 8ee70869ec
7 changed files with 198 additions and 80 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
 import siteConfig from "~/config";
 // import { siteMetaData } from "./data";

@@ -12,27 +11,29 @@ useHead({

 const desktopBg = siteConfig.theme.background || "";
 const mobileBg = siteConfig.theme.backgroundMobile || "";
-const currentBg = ref<string>(desktopBg);
-
-onMounted(() => {
-  if (mobileBg && window.innerWidth <= 768) {
-    currentBg.value = mobileBg;
-  }
-});
-
-const bgStyle = computed(() =>
-  currentBg.value ? { backgroundImage: "url(" + currentBg.value + ")" } : {},
-);
 </script>

 <template>
  <UApp>
    <meta name="color-scheme" content="light dark" />
    <div class="relative">
+      <!-- Desktop Background -->
      <div
-        v-if="currentBg"
-        class="fixed inset-0 -z-20 bg-cover bg-center pointer-events-none"
-        :style="bgStyle" />
+        v-if="desktopBg"
+        class="fixed inset-0 -z-20 bg-cover bg-center pointer-events-none hidden md:block"
+        :style="{ backgroundImage: `url(${desktopBg})` }" />
+
+      <!-- Mobile Background -->
+      <div
+        v-if="mobileBg"
+        class="fixed inset-0 -z-20 bg-cover bg-center pointer-events-none block md:hidden"
+        :style="{ backgroundImage: `url(${mobileBg})` }" />
+
+      <!-- Fallback if mobileBg is missing but desktopBg exists -->
+      <div
+        v-if="!mobileBg && desktopBg"
+        class="fixed inset-0 -z-20 bg-cover bg-center pointer-events-none block md:hidden"
+        :style="{ backgroundImage: `url(${desktopBg})` }" />

      <div class="dark:text-zinc-300">
        <NuxtLoadingIndicator />
--- a/app/components/blog/card.vue
+++ b/app/components/blog/card.vue
@@ -7,6 +7,7 @@ interface Props {
  image?: string;
  alt?: string;
  tags?: Array<string>;
+  categories?: Array<string>;
  published?: boolean;
 }

@@ -19,33 +20,44 @@ withDefaults(defineProps<Props>(), {
  alt: "no-alt",
  ogImage: "/blogs-img/blog.jpg",
  tags: () => [],
+  categories: () => [],
  published: false,
 });
 </script>

 <template>
  <article
-    class="group bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 m-2 overflow-hidden rounded-2xl shadow-sm hover:shadow-xl transition-all duration-500 text-zinc-700 dark:text-zinc-300">
-    <NuxtLink :to="path">
-      <div class="overflow-hidden">
+    class="group bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 overflow-hidden rounded-2xl shadow-sm hover:shadow-xl transition-all duration-500 text-zinc-700 dark:text-zinc-300 h-full flex flex-col">
+    <NuxtLink :to="path" class="flex flex-col h-full">
+      <div class="overflow-hidden aspect-video">
        <NuxtImg
-          class="lg:h-48 md:h-36 w-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
-          width="300"
+          class="h-full w-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
          :src="image"
          :alt="alt" />
      </div>
-      <div class="px-5 py-5">
+      <div class="px-5 py-5 flex flex-col flex-grow">
        <div class="flex items-center justify-between mb-3">
-          <div class="flex items-center text-xs font-medium text-zinc-500 dark:text-zinc-400">
+          <div
+            class="flex items-center text-sm font-medium text-zinc-500 dark:text-zinc-400 whitespace-nowrap flex-shrink-0">
            <Icon name="mdi:calendar" class="mr-1.5 opacity-70 w-4 h-4" />
            {{ date }}
          </div>
          <div class="flex items-center gap-1.5 flex-wrap">
-            <template v-for="tag in tags.slice(0, 2)" :key="tag">
-              <span
-                class="bg-violet-500/10 text-violet-600 dark:text-violet-400 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider border border-violet-500/20">
-                {{ tag }}
-              </span>
+            <template v-if="categories && categories.length > 0">
+              <template v-for="category in categories.slice(0, 2)" :key="category">
+                <span
+                  class="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider border border-emerald-500/20">
+                  {{ category }}
+                </span>
+              </template>
+            </template>
+            <template v-else>
+              <template v-for="tag in tags.slice(0, 2)" :key="tag">
+                <span
+                  class="bg-violet-500/10 text-violet-600 dark:text-violet-400 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider border border-violet-500/20">
+                  {{ tag }}
+                </span>
+              </template>
            </template>
          </div>
        </div>
--- a/app/components/main/header.vue
+++ b/app/components/main/header.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, watch } from "vue";
 import siteConfig from "~/config";

 const colorMode = useColorMode();
@@ -10,56 +11,115 @@ const route = useRoute();
 function isActive(path: string) {
  return route.path === path || route.path.startsWith(path + "/");
 }
+
+const isMenuOpen = ref(false);
+function toggleMenu() {
+  isMenuOpen.value = !isMenuOpen.value;
+}
+
+// 路由变化时关闭菜单
+watch(
+  () => route.path,
+  () => {
+    isMenuOpen.value = false;
+  },
+);
 </script>

 <template>
-  <header class="fixed top-0 left-0 right-0 z-50 h-16 backdrop-blur-sm font-semibold">
-    <div class="flex justify-center px-6 container max-w-5xl mx-auto items-center h-full">
-      <nav class="items-center">
-        <div
-          class="inline-flex items-center gap-3 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-3 py-2 transition-all duration-300 hover:shadow-xl">
-          <div class="hidden sm:flex items-center justify-center h-8 w-8 rounded-full bg-white/0">
-            <NuxtLink
-              to="/"
-              class="relative rounded-full p-1"
-              :class="{
-                'shadow-md dark:shadow-sm dark:shadow-zinc-50 scale-105': isActive('/'),
-                'hover:bg-violet-400/40 dark:hover:bg-violet/10': !isActive('/'),
-              }">
+  <header class="fixed top-0 left-0 right-0 z-50 h-16 backdrop-blur-sm font-semibold px-4 sm: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">
+          <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
+            >
+          </NuxtLink>
+
+          <div class="flex items-center gap-2">
+            <ClientOnly>
+              <button
+                class="h-10 w-10 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 active:scale-90"
+                :title="colorMode.value === 'light' ? '切换到深色模式' : '切换到浅色模式'"
+                @click="onClick(colorMode.value === 'light' ? 'dark' : 'light')">
+                <Icon
+                  :name="colorMode.value === 'light' ? 'fa-regular:moon' : 'fa-regular:sun'"
+                  size="18"
+                  :class="colorMode.value === 'light' ? 'text-zinc-700' : 'text-yellow-400'" />
+              </button>
+            </ClientOnly>
+
+            <button
+              class="h-10 w-10 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 active:scale-90"
+              aria-label="菜单"
+              @click="toggleMenu">
+              <Icon
+                :name="isMenuOpen ? 'fa6-solid:xmark' : 'fa6-solid:bars'"
+                size="18"
+                class="text-zinc-800 dark:text-zinc-100" />
+            </button>
+          </div>
+        </div>
+
+        <!-- 桌面端导航栏 -->
+        <div class="hidden sm:flex items-center justify-center w-full relative h-12">
+          <!-- 桌面端导航栏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="{
+              '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="16"
-                class="text-zinc-700 dark:text-zinc-200"
-                :class="{
-                  'shadow-sm scale-105 font-bold': isActive('/'),
-                  'hover:bg-violet-400/40 dark:hover:bg-violet/10': !isActive('/'),
-                }" />
+                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>
          </div>

-          <ul class="flex items-center space-x-3 sm:space-x-6 text-sm sm:text-lg">
-            <li v-for="link in siteConfig.navbar.links" :key="link.path">
-              <NuxtLink
-                :to="link.path"
-                class="relative px-2 py-1 rounded-full transition-all duration-200 flex items-center text-zinc-700 dark:text-zinc-200"
-                :class="{
-                  'shadow-md dark:shadow-sm dark:shadow-zinc-50 scale-105 font-bold': isActive(
-                    link.path,
-                  ),
-                  'hover:bg-violet-400/40 dark:hover:bg-violet/10': !isActive(link.path),
-                }">
-                <Icon v-if="link.icon" :name="link.icon" size="16" class="mr-2" />
-                <span class="hidden sm:inline-block px-auto">{{ link.name }}</span>
-                <span class="sm:hidden">{{ link.name }}</span>
-              </NuxtLink>
-            </li>
-          </ul>
+          <!-- 桌面端导航栏 (居中) -->
+          <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">
+              <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="{
+                    '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),
+                  }">
+                  <Icon
+                    v-if="link.icon"
+                    :name="link.icon"
+                    size="18"
+                    class="mr-2 flex items-center" />
+                  <span>{{ link.name }}</span>
+                </NuxtLink>
+              </li>
+            </ul>
+          </div>

-          <div class="ml-2 flex items-center">
+          <!-- 桌面端主题切换 (右上角) -->
+          <div class="absolute right-0 flex items-center">
            <ClientOnly>
              <button
                :title="colorMode.value === 'light' ? '切换到深色模式' : '切换到浅色模式'"
-                class="relative h-9 w-9 rounded-full bg-white/20 dark:bg-white/5 flex items-center justify-center transition-all duration-300 hover:scale-110 hover:bg-white/40 dark:hover:bg-white/10 focus:outline-none shadow-sm border border-white/20"
+                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"
                @click="onClick(colorMode.value === 'light' ? 'dark' : 'light')">
                <Icon
                  name="fa-regular:moon"
@@ -81,26 +141,70 @@ function isActive(path: string) {
                      : 'opacity-0 scale-75 translate-y-1'
                  " />
              </button>
-
-              <template #fallback>
-                <Icon name="fa-solid:spinner" size="18" class="icon-svg text-zinc-400" />
-              </template>
            </ClientOnly>
          </div>
        </div>
+
+        <!-- 移动端下拉菜单 -->
+        <transition
+          enter-active-class="transition duration-300 ease-out"
+          enter-from-class="translate-y-2 opacity-0 scale-95"
+          enter-to-class="translate-y-0 opacity-100 scale-100"
+          leave-active-class="transition duration-200 ease-in"
+          leave-from-class="translate-y-0 opacity-100 scale-100"
+          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">
+            <div class="p-2">
+              <ul class="space-y-1">
+                <li v-for="link in siteConfig.navbar.links" :key="link.path">
+                  <NuxtLink
+                    :to="link.path"
+                    class="flex items-center justify-between px-4 py-3.5 rounded-2xl text-zinc-700 dark:text-zinc-200 transition-all active:scale-[0.98]"
+                    :class="
+                      isActive(link.path)
+                        ? 'bg-violet-500/10 text-violet-600 dark:text-violet-400 font-bold'
+                        : 'hover:bg-zinc-100 dark:hover:bg-white/5'
+                    ">
+                    <div class="flex items-center gap-3">
+                      <div
+                        class="w-8 h-8 rounded-xl flex items-center justify-center transition-colors"
+                        :class="
+                          isActive(link.path) ? 'bg-violet-500/20' : 'bg-zinc-100 dark:bg-white/5'
+                        ">
+                        <Icon v-if="link.icon" :name="link.icon" size="16" />
+                      </div>
+                      <span class="text-sm">{{ link.name }}</span>
+                    </div>
+                    <Icon name="fa6-solid:chevron-right" size="10" class="opacity-30" />
+                  </NuxtLink>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </transition>
      </nav>
    </div>
  </header>

+  <!-- 移动端菜单遮罩 -->
+  <div
+    v-if="isMenuOpen"
+    class="fixed inset-0 z-40 bg-black/5 sm:hidden"
+    @click="isMenuOpen = false"></div>
+
  <!-- Spacer to prevent page content being hidden under fixed header -->
  <div class="h-16" aria-hidden="true"></div>
 </template>

 <style scoped>
 .icon-svg {
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
  width: 1.125rem;
-  /* 18px */
+  /*ms-px */
  height: 1.125rem;
 }

--- a/app/components/main/recent.vue
+++ b/app/components/main/recent.vue
@@ -36,6 +36,7 @@ const formattedData = computed(() => {
        alt: articles.alt || "no alter data available",
        date: articles.date || "not-date-available",
        tags: articles.tags || [],
+        categories: articles.categories || [],
        published: articles.published || false,
      };
    }) || []
@@ -47,16 +48,13 @@ const formattedData = computed(() => {
  <section class="pb-10 px-4">
    <div class="flex flex-row items-center justify-between pt-10 pb-6">
      <div class="flex items-center space-x-3">
-        <div class="p-2 bg-primary-10 rounded-lg">
-          <Icon name="mdi:star-three-points-outline" size="1.5em" class="text-primary" />
-        </div>
        <h2 class="text-3xl font-bold text-zinc-800 dark:text-zinc-100 tracking-tight">
          Recent Posts
        </h2>
      </div>
      <NuxtLink
        to="/blogs"
-        class="group flex items-center gap-1 text-sm font-semibold text-primary hover-text-primary transition-colors">
+        class="group flex items-center gap-1 text-sm font-semibold text-zinc-900 dark:text-zinc-50 hover-text-primary transition-colors">
        查看全部文章
        <Icon
          name="heroicons:arrow-right-20-solid"
@@ -64,18 +62,19 @@ const formattedData = computed(() => {
      </NuxtLink>
    </div>

-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
      <template v-for="post in formattedData" :key="post.title">
        <div
-          class="transition-transform transform hover:scale-[1.02] hover:shadow-lg rounded-lg overflow-hidden">
+          class="transition-transform transform hover:scale-[1.02] hover:shadow-lg rounded-lg overflow-hidden h-full">
          <BlogCard
+            class="h-full"
            :path="post.path"
            :title="post.title"
            :date="formatDate(post.date)"
            :description="post.description"
            :image="post.image"
            :alt="post.alt"
-            :tags="post.tags"
+            :categories="post.categories"
            :published="post.published" />
        </div>
      </template>
--- a/app/config/index.ts
+++ b/app/config/index.ts
@@ -40,7 +40,7 @@ const siteConfig = {

  theme: {
    background: "/background.webp",
-    backgroundMobile: "",
+    backgroundMobile: "https://www.loliapi.com/acg/pe",
    color: "#bd83f3",
  },

--- a/app/pages/categories/[category].vue
+++ b/app/pages/categories/[category].vue
@@ -31,6 +31,7 @@ const formattedData = computed(() => {
          alt: articles.alt || "no alter data available",
          date: articles.date || "not-date-available",
          tags: articles.tags || [],
+          categories: articles.categories || [],
          published: articles.published || false,
        };
      }) || []
@@ -79,6 +80,7 @@ useHead({
        :image="post.image"
        :alt="post.alt"
        :tags="post.tags"
+        :categories="post.categories"
        :published="post.published" />
      <BlogEmpty v-if="formattedData.length === 0" />
    </div>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -6,7 +6,7 @@
      <MainHero />

      <div class="relative">
-        <div class="container max-w-5xl mx-auto text-zinc-600 px-4 py-8 relative z-10">
+        <div class="container max-w-7xl mx-auto text-zinc-600 px-4 py-8 relative z-10">
          <MainRecent />
        </div>
      </div>