update

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"
+        v-if="desktopBg"
-        class="fixed inset-0 -z-20 bg-cover bg-center pointer-events-none"
+        class="fixed inset-0 -z-20 bg-cover bg-center pointer-events-none hidden md:block"
-        :style="bgStyle" />
+        :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 />

app/components/blog/card.vue

@@ -7,6 +7,7 @@ interface Props {
   image?: string;
   alt?: string;
   tags?: Array<string>;
+  categories?: Array<string>;
   published?: boolean;
 }
 
@@ -19,34 +20,45 @@ 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">
+    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">
+    <NuxtLink :to="path" class="flex flex-col h-full">
-      <div class="overflow-hidden">
+      <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"
+          class="h-full w-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
-          width="300"
           :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-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>
         <h2

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">
+  <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 px-6 container max-w-5xl mx-auto items-center h-full">
+    <div class="flex justify-center items-center h-full w-full relative">
-      <nav class="items-center">
+      <nav class="flex items-center justify-center w-full">
-        <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="flex sm:hidden items-center justify-between w-full">
-          <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="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">
-              :class="{
-                'shadow-md dark:shadow-sm dark:shadow-zinc-50 scale-105': isActive('/'),
-                'hover:bg-violet-400/40 dark:hover:bg-violet/10': !isActive('/'),
-              }">
             <Icon
               name="fa-solid:cat"
-                size="16"
+              size="18"
-                class="text-zinc-700 dark:text-zinc-200"
+              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="{
-                  'shadow-sm scale-105 font-bold': isActive('/'),
+              'bg-white dark:bg-slate-800 shadow-sm font-bold': isActive('/'),
-                  'hover:bg-violet-400/40 dark:hover:bg-violet/10': !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>
           </div>
 
-          <ul class="flex items-center space-x-3 sm:space-x-6 text-sm sm:text-lg">
+          <!-- 桌面端导航栏 (居中) -->
+          <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 px-2 py-1 rounded-full transition-all duration-200 flex items-center text-zinc-700 dark:text-zinc-200"
+                  class="relative h-10 px-5 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(
+                    'bg-white dark:bg-slate-800 shadow-sm font-bold': isActive(link.path),
-                    link.path,
+                    'hover:bg-zinc-100 dark:hover:bg-white/10': !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" />
+                  <Icon
-                <span class="hidden sm:inline-block px-auto">{{ link.name }}</span>
+                    v-if="link.icon"
-                <span class="sm:hidden">{{ link.name }}</span>
+                    :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;
 }
 

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>

app/config/index.ts

@@ -40,7 +40,7 @@ const siteConfig = {
 
   theme: {
     background: "/background.webp",
-    backgroundMobile: "",
+    backgroundMobile: "https://www.loliapi.com/acg/pe",
     color: "#bd83f3",
   },
 

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>

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>