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,16 +0,0 @@
-<template>
-  <div>
-    <!-- 捐赠模块 -->
-    <section id="donate" class="py-16 text-center bg-secondary">
-      <h3 class="text-2xl font-bold text-gray-900 mb-4">支持与捐赠（功能未开放）</h3>
-      <p class="max-w-2xl mx-auto text-gray-700 mb-6">您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！</p>
-      <a href="#" class="bg-primary text-white px-8 py-3 rounded-xl shadow hover:opacity-90">立即捐赠</a>
-    </section>
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-<style></style>

app/components/index/Events.vue

@@ -1,32 +1,38 @@
 <template>
-  <div>
   <!-- 活动模块 -->
-    <section id="events" class="bg-gray-100 py-16">
+  <UPageSection title="校友活动" class="bg-gray-100">
-      <div class="max-w-6xl mx-auto px-4">
+    <UPageGrid>
-        <h3 class="text-2xl font-bold text-gray-900 mb-6">校友活动</h3>
+      <div
-        <div class="grid md:grid-cols-3 gap-6">
+        v-for="event in events"
-          <div v-for="event in events" :key="event.id" class="bg-white shadow rounded-xl">
+        :key="event.id"
-            <img :src="event.cover" :alt="event.title" class="rounded-xl" />
+        class="bg-white shadow 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-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:book-open-blank-variant-outline"
+          />
         </div>
       </div>
-        </div>
+    </UPageGrid>
-      </div>
+  </UPageSection>
-    </section>
-  </div>
 </template>
 
 <script lang="ts" setup>
-const { data: events } = await useAsyncData('events', () =>
+const { data: events } = await useAsyncData("events", () =>
-  queryCollection('events')
+  queryCollection("events").order("date", "DESC").limit(3).all()
-    .order("date", "DESC")
+);
-    .limit(3)
-    .all()
-)
 </script>
 
 <style></style>

app/components/index/HallOfFame.vue

@@ -1,31 +1,33 @@
 <template>
-  <div>
+  <UPageSection title="名人堂">
-    <section id="hall-of-fame" class="py-16">
-      <div class="max-w-6xl mx-auto px-4">
-        <h3 class="text-2xl font-bold text-center text-gray-900 mb-6">名人堂</h3>
     <div class="grid md:grid-cols-4 gap-6">
-          <div v-for="person in persons" :key="person.id" class="flex flex-col items-center cursor-pointer transition hover:scale-105 hover:drop-shadow-2xl hover:-translate-y-1" @click="jumpToPersonIntro(person.path)">
+      <div
-            <img :src="person.photo" :alt="person.name" class="w-40 rounded-full border-primary border-4" />
+        v-for="person in persons"
+        :key="person.id"
+        class="flex flex-col items-center cursor-pointer transition hover:scale-105 hover:drop-shadow-2xl hover:-translate-y-1"
+        @click="jumpToPersonIntro(person.path)"
+      >
+        <img
+          :src="person.photo"
+          :alt="person.name"
+          class="w-40 rounded-full border-primary border-4"
+        />
         <h4 class="text-lg font-bold">{{ person.name }}</h4>
         <p class="text-sm text-gray-500">{{ person.title }}</p>
       </div>
     </div>
-      </div>
+  </UPageSection>
-    </section>
-  </div>
 </template>
 
 <script lang="ts" setup>
-const { data: persons } = await useAsyncData('hall-of-fames', () =>
+const { data: persons } = await useAsyncData("hall-of-fames", () =>
-  queryCollection('hallOfFames')
+  queryCollection("hallOfFames").limit(4).all()
-    .limit(4)
+);
-    .all()
-)
 
-var router = useRouter()
+var router = useRouter();
 const jumpToPersonIntro = (path: string) => {
-  router.push(path)
+  router.push(path);
-}
+};
 </script>
 
 <style></style>

app/components/index/Hero.vue

@@ -1,35 +0,0 @@
-<template>
-  <div>
-    <!-- Hero Banner -->
-    <section class="relative bg-secondary py-32 md:py-48 lg:py-64 text-center bg-cover bg-center"
-      style="background-image: url('/hero-image.jpg');">
-      <!-- 遮罩 -->
-      <div class="absolute inset-0 bg-black/40"></div>
-
-      <!-- 内容 -->
-      <div class="relative z-10 max-w-3xl mx-auto px-4">
-        <h2 class="text-3xl md:text-5xl font-extrabold text-white drop-shadow-lg">
-          连接校友 · 传承精神
-        </h2>
-        <p class="mt-4 text-lg text-gray-100">
-          马来西亚柔佛永平中学校友会官方网站
-        </p>
-        <div class="mt-6 space-x-4">
-          <a href="/join-us" class="bg-primary text-white px-6 py-3 rounded-xl shadow hover:opacity-90">
-            立即加入我们
-          </a>
-          <!-- <a href="#donate"
-            class="bg-white border-2 border-secondary text-secondary px-6 py-3 rounded-xl hover:bg-secondary hover:text-white">
-            支持捐赠
-          </a> -->
-        </div>
-      </div>
-    </section>
-
-  </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style></style>

app/components/index/News.vue

@@ -1,37 +0,0 @@
-<template>
-  <div>
-    <!-- 新闻公告 -->
-    <section id="news" class="max-w-6xl mx-auto py-16 px-4">
-      <h2 class="text-2xl font-bold text-gray-900 mb-6">最新新闻与公告</h2>
-      <div class="grid md:grid-cols-3 gap-6">
-        <article v-for="n in news" :key="n.id" @click="jumpToNewsDetail(n.stem)"
-          class="bg-secondary/10 rounded-xl shadow cursor-pointer transition transform hover:-translate-y-1 hover:scale-105 hover:shadow-xl duration-300 ease-in-out">
-          <img class="rounded-xl" :src="n.cover" :alt="n.title">
-          <div class="p-5">
-            <h3 class="font-semibold mb-2">{{ n.title }}</h3>
-            <div class="px-1 w-max bg-secondary/25 border-secondary border-2 rounded-xl text-primary text-sm mb-2">{{
-              useChineseDateFormat(n.date) }}</div>
-            <p class="text-sm text-gray-600">{{ n.description }}</p>
-          </div>
-        </article>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const { data: news } = await useAsyncData('news', () =>
-  queryCollection('news')
-    .order("date", "DESC")
-    .limit(3)
-    .all()
-)
-
-const router = useRouter();
-
-const jumpToNewsDetail = (newsPath: string) => {
-  router.push(newsPath);
-}
-</script>
-
-<style></style>

app/layouts/default.vue

@@ -1,51 +1,66 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <UPage>
-    <!-- 导航栏 -->
+    <UHeader>
-    <header class="bg-white shadow-md sticky top-0 z-50">
+      <template #left>
-      <div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
+        <NuxtLink to="/">
-        <div>
+          <div class="flex gap-4 items-center">
-          <img class="inline w-16" src="/Logo.svg" alt="YPHS Alumni" />
+            <img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
-          <h1 class="inline text-xl font-bold text-gray-900">
+            <h1
-            <a href="/" class="ml-4 hover:text-primary">永平中学校友会</a>
+              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">
-          <a href="#news" class="hover:text-primary">新闻</a>
+          <UNavigationMenu :items="items" />
-          <a href="#events" class="hover:text-primary">活动</a>
+          <a
-          <a href="#donate" class="hover:text-primary">捐赠（未开放）</a>
+            href="/join-us"
-          <a href="#about" class="hover:text-primary">关于</a>
+            class="inline-flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-xl shadow hover:opacity-90"
-          <a href="/join-us"
+          >
-            class="inline-flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-xl shadow hover:opacity-90">
             加入
             <Icon name="mdi:account-plus" class="w-5 h-5" />
           </a>
         </nav>
-      </div>
+      </template>
-    </header>
 
-    <!-- 主体部分 -->
+      <template #body>
-    <main class="flex-1">
+        <UNavigationMenu
+          :items="items"
+          orientation="vertical"
+          class="-mx-2.5"
+        />
+      </template>
+    </UHeader>
+
+    <UMain>
       <slot />
-    </main>
+    </UMain>
 
-    <!-- 页脚 -->
+    <UFooter>
-    <footer class="bg-gray-900 text-gray-300 py-6">
+      <template #left>
-      <div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
-        <div class="text-center md:text-left">
         <p>© 2025 永平中学校友会. 保留所有权利.</p>
-        </div>
+      </template>
 
-        <div>
+      <template #default>
         <p class="mt-1">
           Powered by:
-            <a href="https://tootaio.com" target="_blank" class="font-semibold hover:underline" style="color: #e24545;">
+          <a
+            href="https://tootaio.com"
+            target="_blank"
+            class="font-semibold hover:underline"
+            style="color: #e24545"
+          >
             Tootaio Studio
           </a>
-            <span class="mt-1 text-sm text-gray-400">2018 级毕业学长（麦祖奕）</span>
+          <span class="mt-1 text-sm">2018 级毕业学长（麦祖奕）</span>
         </p>
-        </div>
+      </template>
 
-        <div class="flex space-x-4 mt-3 md:mt-0">
+      <template #right>
         <a href="#">
           <Icon name="mdi-facebook" />
         </a>
@@ -55,8 +70,20 @@
         <a href="#">
           <Icon name="mdi-gmail" />
         </a>
-        </div>
+      </template>
-      </div>
+    </UFooter>
-    </footer>
+  </UPage>
-  </div>
 </template>
+
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+const route = useRoute();
+
+const items = computed<NavigationMenuItem[]>(() => [
+  { label: "新闻", to: "#news", active: route.path.startsWith("#news") },
+  { label: "活动", to: "#events", active: route.path.startsWith("#events") },
+  { label: "捐赠", to: "#donate", active: route.path.startsWith("#donate") },
+  { label: "关于", to: "#about", active: route.path.startsWith("#about") },
+]);
+</script>

app/pages/index.vue

@@ -1,16 +1,72 @@
 <template>
   <div>
-    <IndexHero />
+    <!-- Hero Banner -->
-    <IndexNews />
+    <UPageHero
+      class="bg-cover bg-center"
+      style="
+        background-image: url(&quot;/hero-image.jpg&quot;);
+        background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent black */
+        background-blend-mode: lighten;
+      "
+      title="连接校友 · 传承精神"
+      description="马来西亚柔佛永平中学校友会官方网站"
+      :links="heroCta"
+    />
+
+    <!-- News Blog Posts -->
+    <UPageSection title="新闻与公告">
+      <UBlogPosts :posts="newsPost" />
+    </UPageSection>
+
     <IndexEvents />
     <IndexHallOfFame />
-    <IndexDonate />
+
+    <!-- 捐赠模块 -->
+    <UPageCTA
+      class="bg-secondary"
+      title="支持与捐赠"
+      description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
+      :links="donationLinks"
+    />
+
     <IndexAbout />
   </div>
 </template>
 
 <script lang="ts" setup>
+import type { BlogPostProps } from "@nuxt/ui";
 
+const heroCta = ref([
+  {
+    label: "立即加入我们",
+    to: "/join-us",
+    icon: "mdi:account-plus",
+  },
+]);
+
+// ========================================================
+// 新闻模块
+// ========================================================
+const { data: news } = await useAsyncData("news", () =>
+  queryCollection("news").order("date", "DESC").limit(3).all()
+);
+
+// 将 news 数据转换成 UBlogPosts 可用格式
+const newsPost = computed<BlogPostProps[]>(() =>
+  (news.value || []).map((n: any) => ({
+    title: n.title,
+    description: n.description,
+    image: n.cover,
+    date: n.date,
+    to: n.path, // ✅ 建议加路由跳转
+    variant: "subtle",
+  }))
+);
+
+// ========================================================
+// 捐赠模块
+// ========================================================
+const donationLinks = ref([{ label: "立即捐赠", icon: "mdi:cash" }]);
 </script>
 
 <style></style>

content/events/20250927-return-to-school.md

@@ -42,6 +42,31 @@ cover: "/events/20250927-return-to-school/event-photo-1.jpg"
 
 午宴当天，永中二十四节令鼓队与舞蹈社学员带来精彩表演，“永中之星 1.0”歌唱赛校友组冠军 **黄秋慧** 与学生组冠军 **林妤桐** 亦倾情献唱。现场欢声笑语不断，气氛热烈温馨，为会庆增添了浓厚的节日色彩。
 
+## 午宴 • 流程表
+
+| 时间    | 流程                                                                    |
+| ------- | ----------------------------------------------------------------------- |
+| 12.30pm | 二十四节令鼓迎宾/校友交流                                               |
+| 01.00pm | 仪式开始                                                                |
+| 01.02pm | 唱国歌州歌                                                              |
+| 01.05pm | 大会主席李煜斌致欢迎词                                                  |
+| 01.10pm | 大会开幕嘉宾-投资贸易及工业部副部长暨伊斯干达公主城国会议员YB刘镇东致词 |
+|         | 赠送纪念品给予大会开幕嘉宾                                              |
+| 01.20pm | 大会荣誉嘉宾-亚依淡区国会议员拿督斯里YB魏家祥博士工程师致辞             |
+|         | 赠送纪念品给予大会荣誉嘉宾                                              |
+| 01.25pm | 大会荣誉嘉宾-柔佛州行政议员暨永平区州议员 YB 林添顺致词                 |
+|         | 赠送纪念品给予大会荣誉嘉宾                                              |
+| 01.40pm | 永平中学-舞蹈团表演                                                     |
+| 01.50pm | 永平中学张嘉群校长致词                                                  |
+| 01.55pm | 切生日蛋糕                                                              |
+| 02.00pm | 播放上午校友回校活动                                                    |
+| 02.05pm | 永中之星1.0冠军得主表演（校友组-黄秋慧，及在籍学生组-林妤桐）           |
+| 02.35pm | 工委会主席蓝宜宏学长致谢词                                              |
+| 02.40pm | 永中校友会理事会带领唱校歌                                              |
+| 02.45pm | 欢送嘉宾离席                                                            |
+
+我们 40 周年庆再会！感谢大家的莅临！感恩！
+
 ---
 
 <iframe 

content/events/20251009-roulian-xiaoyouhui-20th.md

@@ -0,0 +1,79 @@
+---
+title: "柔联校友会 20 届历史就职典礼"
+subtitle: "中学生写作比赛颁奖" 
+date: "2025-10-09"
+location: "富华冷气酒家 2 楼"
+cover: "/events/20251009-roulian-xiaoyouhui-20th/event-photo-1.jpg"
+---
+# 柔联校友会 20 届历史就职典礼
+
+柔佛州华校校友联合会日前举办第 20 届理事就职典礼与 2025 年 “林赛花教育基金” 柔佛州中学生现场写作比赛颁奖典礼，由马来西亚华校校友会联合总会会长萧成兴担任监誓人。
+
+联合会主席陈星和在致词时强调，华教事业的发展离不开团结与传承，新一届理事会将继续致力于推动华文教育，弘扬中华文化。
+
+## 柔佛州华校校友会联合会
+
+### 第20届理事会
+
+| 职位       | 姓名                                           |
+| ---------- | ---------------------------------------------- |
+| 主席       | 陈星和                                         |
+| 副主席     | 陈月丽、陈重存、颜青积                         |
+| 总务       | 李秀琴                                         |
+| 副总务     | 李煜斌                                         |
+| 财政       | 陈保妤                                         |
+| 副财政     | 吴沺成                                         |
+| 文书       | 莫文豪                                         |
+| 副文书     | 林道民                                         |
+| 教育主任   | 姚理介                                         |
+| 副教育主任 | 陈成祖                                         |
+| 文娱主任   | 郑臻董                                         |
+| 副文娱主任 | 梁德荣                                         |
+| 联络主任   | 郑伟亮                                         |
+| 副联络主任 | 郑清华                                         |
+| 查账       | 涂馨尹、谢祥庆                                 |
+| 理事       | 何国光、吕哲明、罗升隆、黄如龙、郑明裕、温维华 |
+
+---
+
+赞助金移交仪式上，妙妙机构执行董事荘坡政将赞助金移交给峇株文艺协会，以支持文艺出版与推广工作，随后颁发奖状与奖金给 26 名获奖学生。
+
+## 🏆 2025年“林賽花教育基金”柔佛州中學生現場寫作比賽得獎名單
+
+### 🥇 初中组
+
+| 奖项   | 姓名   | 学校               |
+| ------ | ------ | ------------------ |
+| 特优奖 | 彭艺元 | 居銮中华中学       |
+| 特优奖 | 黄守蒽 | 居銮中华中学       |
+| 特优奖 | 方乐颖 | 居銮中华中学       |
+| 优秀奖 | 余姿亿 | 永平中学           |
+| 优秀奖 | 廖玮乐 | 永平中学           |
+| 优秀奖 | 卓婧琳 | 峇株吧辖华仁中学   |
+| 优秀奖 | 叶贯均 | 峇株吧辖华仁中学   |
+| 优秀奖 | 董清清 | 峇株吧辖华仁中学   |
+| 优秀奖 | 林婉仪 | 峇株吧辖华仁中学   |
+| 优秀奖 | 陈惠敏 | 峇株吧辖华仁中学   |
+| 优秀奖 | 曾愉峻 | 居銮中华中学       |
+| 优秀奖 | 曾佳滢 | 利丰港培华独立中学 |
+| 优秀奖 | 陆颖霏 | 新山宽柔中学       |
+
+---
+
+### 🥈 高中组
+
+| 奖项   | 姓名   | 学校             |
+| ------ | ------ | ---------------- |
+| 特优奖 | 王祺齐 | 永平中学         |
+| 特优奖 | 汤滢菲 | 居銮中华中学     |
+| 特优奖 | 陈思宇 | 居銮中华中学     |
+| 优秀奖 | 黄婉芯 | 拿督国中         |
+| 优秀奖 | 林欣慧 | 拿督国中         |
+| 优秀奖 | 蔡欣艳 | 拿督国中         |
+| 优秀奖 | 许恩芮 | 永平中学         |
+| 优秀奖 | 陈佳萱 | 宽柔中学古来分校 |
+| 优秀奖 | 苏新致 | 永平中学         |
+| 优秀奖 | 刘祈悦 | 峇株吧辖华仁中学 |
+| 优秀奖 | 林淳希 | 峇株吧辖华仁中学 |
+| 优秀奖 | 黄子宸 | 新山宽柔中学     |
+| 优秀奖 | 苏祐萱 | 新山宽柔中学     |

content/news/20251001-official-web-launch.md

@@ -11,6 +11,7 @@ highlight: true
 seoTitle: "永中校友会官网上线 | 最新活动与资讯平台"
 seoDescription: "永中校友会官网正式上线，校友可在平台获取最新资讯、报名活动及参与互动。"
 ogImage: "/images/og/news-launch.jpg"
+slug: "/news/20251001-official-web-launch"
 ---
 永中校友会官网正式上线啦！🎉
 

package.json

@@ -31,6 +31,7 @@
     "vue-sonner": "^2.0.9"
   },
   "devDependencies": {
+    "@iconify-json/lucide": "^1.2.70",
     "sass-embedded": "^1.93.2"
   }
 }

pnpm-lock.yaml

@@ -66,6 +66,9 @@ importers:
         specifier: ^2.0.9
         version: 2.0.9(@nuxt/kit@4.1.3(magicast@0.3.5))(@nuxt/schema@4.1.3)(nuxt@4.1.3(@parcel/watcher@2.5.1)(@types/node@24.7.0)(@vue/compiler-sfc@3.5.22)(better-sqlite3@12.4.1)(db0@0.3.4(better-sqlite3@12.4.1))(ioredis@5.8.1)(lightningcss@1.30.1)(magicast@0.3.5)(rollup@4.52.4)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(typescript@5.9.3)(vite@7.1.9(@types/node@24.7.0)(jiti@2.6.1)(lightningcss@1.30.1)(sass-embedded@1.93.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(yaml@2.8.1))
     devDependencies:
+      '@iconify-json/lucide':
+        specifier: ^1.2.70
+        version: 1.2.70
       sass-embedded:
         specifier: ^1.93.2
         version: 1.93.2
@@ -528,6 +531,9 @@ packages:
   '@floating-ui/vue@1.1.9':
     resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
 
+  '@iconify-json/lucide@1.2.70':
+    resolution: {integrity: sha512-56s9NdBKgshywVY1e4gOcxzAbU1J649e/jLHBJU1tyNqRs7mFLVEGwj2mmzHJ5YAZB5Tsngi4f/ocTBPlG06ZA==}
+
   '@iconify/collections@1.0.602':
     resolution: {integrity: sha512-bpHY7qw+a5QbYlsyROx3Ar2jb8hMMvUOrp99a+pQTHDM+pAVR76WMYriRdW0mKcDo9L3uoU5u0uI9LY+jfbkOQ==}
 
@@ -5959,6 +5965,10 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@iconify-json/lucide@1.2.70':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/collections@1.0.602':
     dependencies:
       '@iconify/types': 2.0.0