From 6473bdcc15b51b44169a4b2c38fbacf1afd17e31 Mon Sep 17 00:00:00 2001
From: xiaomai <xiaomai@ramatex.com.my>
Date: Thu, 23 Oct 2025 09:16:59 +0800
Subject: [PATCH] refactor(ui): adopt Nuxt UI components for homepage and
 layout

This commit refactors the main layout and homepage to utilize components from the Nuxt UI library, simplifying the
codebase and reducing custom boilerplate.

- The default layout is now built with `UPage`, `UHeader`, `UMain`, and `UFooter`.
- The homepage (`pages/index.vue`) has been updated to use `UPageHero` and `UBlogPosts`.
- The `IndexHero` and `IndexNews` components have been removed as their functionality is now integrated directly into
the index page.
- `Donate`, `Events`, and `HallOfFame` components are now wrapped with `UPageCTA` or `UPageSection`.
---
 app/components/index/Donate.vue              |  18 ++-
 app/components/index/Events.vue              |  51 ++++----
 app/components/index/HallOfFame.vue          |  46 ++++----
 app/components/index/Hero.vue                |  35 ------
 app/components/index/News.vue                |  37 ------
 app/layouts/default.vue                      | 116 ++++++++++---------
 app/pages/index.vue                          |  56 ++++++++-
 content/news/20251001-official-web-launch.md |   1 +
 package.json                                 |   1 +
 pnpm-lock.yaml                               |  10 ++
 10 files changed, 188 insertions(+), 183 deletions(-)
 delete mode 100644 app/components/index/Hero.vue
 delete mode 100644 app/components/index/News.vue

diff --git a/app/components/index/Donate.vue b/app/components/index/Donate.vue
index d90b41a..e73db7b 100644
--- a/app/components/index/Donate.vue
+++ b/app/components/index/Donate.vue
@@ -1,16 +1,14 @@
 <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>
+  <UPageCTA
+    class="bg-secondary"
+    title="支持与捐赠"
+    description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
+    :links="donationLinks"
+  />
 </template>
 
 <script lang="ts" setup>
-
+const donationLinks = ref([{ label: "立即捐赠", icon: "mdi:cash" }]);
 </script>
 
-<style></style>
\ No newline at end of file
+<style></style>
diff --git a/app/components/index/Events.vue b/app/components/index/Events.vue
index c06caea..79d35ce 100644
--- a/app/components/index/Events.vue
+++ b/app/components/index/Events.vue
@@ -1,32 +1,35 @@
 <template>
-  <div>
-    <!-- 活动模块 -->
-    <section id="events" class="bg-gray-100 py-16">
-      <div class="max-w-6xl mx-auto px-4">
-        <h3 class="text-2xl font-bold text-gray-900 mb-6">校友活动</h3>
-        <div class="grid md:grid-cols-3 gap-6">
-          <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" />
-            <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>
-            </div>
-          </div>
+  <!-- 活动模块 -->
+  <UPageSection title="校友活动" class="bg-gray-100">
+    <div class="grid md:grid-cols-3 gap-6">
+      <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" />
+        <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"/>
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </UPageSection>
 </template>
 
 <script lang="ts" setup>
-const { data: events } = await useAsyncData('events', () =>
-  queryCollection('events')
-    .order("date", "DESC")
-    .limit(3)
-    .all()
-)
+const { data: events } = await useAsyncData("events", () =>
+  queryCollection("events").order("date", "DESC").limit(3).all()
+);
 </script>
 
-<style></style>
\ No newline at end of file
+<style></style>
diff --git a/app/components/index/HallOfFame.vue b/app/components/index/HallOfFame.vue
index f9f2b6b..8098970 100644
--- a/app/components/index/HallOfFame.vue
+++ b/app/components/index/HallOfFame.vue
@@ -1,31 +1,33 @@
 <template>
-  <div>
-    <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)">
-            <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>
+  <UPageSection title="名人堂">
+    <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)"
+      >
+        <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>
-    </section>
-  </div>
+    </div>
+  </UPageSection>
 </template>
 
 <script lang="ts" setup>
-const { data: persons } = await useAsyncData('hall-of-fames', () =>
-  queryCollection('hallOfFames')
-    .limit(4)
-    .all()
-)
+const { data: persons } = await useAsyncData("hall-of-fames", () =>
+  queryCollection("hallOfFames").limit(4).all()
+);
 
-var router = useRouter()
+var router = useRouter();
 const jumpToPersonIntro = (path: string) => {
-  router.push(path)
-}
+  router.push(path);
+};
 </script>
 
-<style></style>
\ No newline at end of file
+<style></style>
diff --git a/app/components/index/Hero.vue b/app/components/index/Hero.vue
deleted file mode 100644
index 8b8e996..0000000
--- a/app/components/index/Hero.vue
+++ /dev/null
@@ -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>
diff --git a/app/components/index/News.vue b/app/components/index/News.vue
deleted file mode 100644
index ec70cc4..0000000
--- a/app/components/index/News.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 85117d5..8668daf 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,62 +1,74 @@
 <template>
-  <div class="min-h-screen flex flex-col">
-    <!-- 导航栏 -->
-    <header class="bg-white shadow-md sticky top-0 z-50">
-      <div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
-        <div>
-          <img class="inline w-16" 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>
-        </div>
+  <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>
+      </template>
+      <template #right>
         <nav class="space-x-6 hidden md:flex items-center">
-          <a href="#news" class="hover:text-primary">新闻</a>
-          <a href="#events" class="hover:text-primary">活动</a>
-          <a href="#donate" class="hover:text-primary">捐赠（未开放）</a>
-          <a href="#about" class="hover:text-primary">关于</a>
-          <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">
+          <UNavigationMenu :items="items" />
+          <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>
-    </header>
-
-    <!-- 主体部分 -->
-    <main class="flex-1">
+      </template>
+    </UHeader>
+    <UMain>
       <slot />
-    </main>
+    </UMain>
+    <UFooter>
+      <template #left>
+        <p>© 2025 永平中学校友会. 保留所有权利.</p>
+      </template>
 
-    <!-- 页脚 -->
-    <footer class="bg-gray-900 text-gray-300 py-6">
-      <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 #default>
+        <p class="mt-1">
+          Powered by:
+          <a
+            href="https://tootaio.com"
+            target="_blank"
+            class="font-semibold hover:underline"
+            style="color: #e24545"
+          >
+            Tootaio Studio
+          </a>
+          <span class="mt-1 text-sm"
+            >2018 级毕业学长（麦祖奕）</span
+          >
+        </p>
+      </template>
 
-        <div>
-          <p class="mt-1">
-            Powered by:
-            <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>
-          </p>
-        </div>
-
-        <div class="flex space-x-4 mt-3 md:mt-0">
-          <a href="#">
-            <Icon name="mdi-facebook" />
-          </a>
-          <a href="#">
-            <Icon name="mdi-instagram" />
-          </a>
-          <a href="#">
-            <Icon name="mdi-gmail" />
-          </a>
-        </div>
-      </div>
-    </footer>
-  </div>
+      <template #right>
+        <a href="#">
+          <Icon name="mdi-facebook" />
+        </a>
+        <a href="#">
+          <Icon name="mdi-instagram" />
+        </a>
+        <a href="#">
+          <Icon name="mdi-gmail" />
+        </a>
+      </template>
+    </UFooter>
+  </UPage>
 </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>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index de8cba4..bdeb291 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,7 +1,23 @@
 <template>
   <div>
-    <IndexHero />
-    <IndexNews />
+    <!-- Hero Banner -->
+    <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 />
@@ -10,7 +26,41 @@
 </template>
 
 <script lang="ts" setup>
+import type { BlogPostProps, PageCardProps } 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 { data: events } = await useAsyncData("events", () =>
+  queryCollection("events").order("date", "DESC").limit(3).all()
+);
 </script>
 
-<style></style>
\ No newline at end of file
+<style></style>
diff --git a/content/news/20251001-official-web-launch.md b/content/news/20251001-official-web-launch.md
index ba962a9..d356a7d 100644
--- a/content/news/20251001-official-web-launch.md
+++ b/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"
 ---
 永中校友会官网正式上线啦！🎉
 
diff --git a/package.json b/package.json
index b25ccdc..2a21f2e 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue-sonner": "^2.0.9"
   },
   "devDependencies": {
+    "@iconify-json/lucide": "^1.2.70",
     "sass-embedded": "^1.93.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c05d3d9..abfac50 100644
--- a/pnpm-lock.yaml
+++ b/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