feat(ui): implement responsive header and update content

Adds a responsive header with a mobile navigation menu to improve usability on small screens. This also includes adding a new event page, updating an existing event with a schedule, and refactoring the 'Donate' CTA by
inlining it on the homepage.

app/components/index/Donate.vue

@@ -1,14 +0,0 @@
-<template>
-  <UPageCTA
-    class="bg-secondary"
-    title="支持与捐赠"
-    description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
-    :links="donationLinks"
-  />
-</template>
-
-<script lang="ts" setup>
-const donationLinks = ref([{ label: "立即捐赠", icon: "mdi:cash" }]);
-</script>
-
-<style></style>

app/components/index/Events.vue

@@ -1,28 +1,31 @@
 <template>
   <!-- 活动模块 -->
   <UPageSection title="校友活动" class="bg-gray-100">
-    <div class="grid md:grid-cols-3 gap-6">
+    <UPageGrid>
       <div
         v-for="event in events"
         :key="event.id"
         class="bg-white shadow rounded-xl"
       >
-        <img :src="event.cover" :alt="event.title" class="rounded-xl" />
+        <img
+          :src="event.cover"
+          :alt="event.title"
+          class="w-full aspect-[16/9] object-cover rounded-t-xl"
+        />
         <div class="p-6">
           <h4 class="font-semibold text-lg mb-2">{{ event.title }}</h4>
           <p class="text-sm text-gray-600 mb-1">
             日期：{{ useChineseDateFormat(event.date) }}
           </p>
           <p class="text-sm text-gray-600 mb-4">地点：{{ event.location }}</p>
-          <!-- <a
-            :href="event.path"
-            class="bg-primary text-white px-5 py-2 rounded-lg hover:opacity-90"
-            >阅读详情</a
-          > -->
-          <UButton label="阅读详情" :to="event.path" trailing-icon="mdi:glasses"/>
+          <UButton
+            label="阅读详情"
+            :to="event.path"
+            trailing-icon="mdi:book-open-blank-variant-outline"
+          />
         </div>
       </div>
-    </div>
+    </UPageGrid>
   </UPageSection>
 </template>
 

app/layouts/default.vue

@@ -2,11 +2,18 @@
   <UPage>
     <UHeader>
       <template #left>
-        <img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
-        <h1 class="inline text-xl font-bold text-gray-900">
-          <a href="/" class="ml-4 hover:text-primary">永平中学校友会</a>
-        </h1>
+        <NuxtLink to="/">
+          <div class="flex gap-4 items-center">
+            <img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
+            <h1
+              class="inline text-xl font-bold text-gray-900 hover:text-primary"
+            >
+              永平中学校友会
+            </h1>
+          </div>
+        </NuxtLink>
       </template>
+
       <template #right>
         <nav class="space-x-6 hidden md:flex items-center">
           <UNavigationMenu :items="items" />
@@ -19,10 +26,20 @@
           </a>
         </nav>
       </template>
+
+      <template #body>
+        <UNavigationMenu
+          :items="items"
+          orientation="vertical"
+          class="-mx-2.5"
+        />
+      </template>
     </UHeader>
+
     <UMain>
       <slot />
     </UMain>
+
     <UFooter>
       <template #left>
         <p>© 2025 永平中学校友会. 保留所有权利.</p>
@@ -39,9 +56,7 @@
           >
             Tootaio Studio
           </a>
-          <span class="mt-1 text-sm"
-            >2018 级毕业学长（麦祖奕）</span
-          >
+          <span class="mt-1 text-sm">2018 级毕业学长（麦祖奕）</span>
         </p>
       </template>
 

app/pages/index.vue

@@ -20,13 +20,21 @@
 
     <IndexEvents />
     <IndexHallOfFame />
-    <IndexDonate />
+
+    <!-- 捐赠模块 -->
+    <UPageCTA
+      class="bg-secondary"
+      title="支持与捐赠"
+      description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
+      :links="donationLinks"
+    />
+
     <IndexAbout />
   </div>
 </template>
 
 <script lang="ts" setup>
-import type { BlogPostProps, PageCardProps } from "@nuxt/ui";
+import type { BlogPostProps } from "@nuxt/ui";
 
 const heroCta = ref([
   {
@@ -56,11 +64,9 @@ const newsPost = computed<BlogPostProps[]>(() =>
 );
 
 // ========================================================
-// 活动模块
+// 捐赠模块
 // ========================================================
-const { data: events } = await useAsyncData("events", () =>
-  queryCollection("events").order("date", "DESC").limit(3).all()
-);
+const donationLinks = ref([{ label: "立即捐赠", icon: "mdi:cash" }]);
 </script>
 
 <style></style>