feat(app): restructure to multi-page layout and add content pages

Converts the website from a single-page design with anchor links to a full multi-page application. This change improves site organization, navigation, and scalability.

- Adds new top-level pages: `/news`, `/events`, and `/about`.
- Introduces a new section for the 40th Anniversary at `/40th-anniversary`, including a proposal sub-page.
- Updates the default layout with a new navigation menu, a promotional banner, social links, and page transitions.

app/components/index/About.vue

@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <!-- 关于我们 -->
-    <section id="about" class="max-w-6xl mx-auto py-16 px-4">
-      <h3 class="text-2xl font-bold text-gray-900 mb-4">关于校友会</h3>
-      <p class="text-gray-700 leading-relaxed">
-        永平中学校友会成立的宗旨是连接全球校友，传承母校精神，支持在校学生成长。我们定期举办活动，推动交流与合作，并积极回馈母校。
-      </p>
-    </section>
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-<style></style>

app/layouts/default.vue

@@ -1,12 +1,18 @@
 <template>
   <UPage>
+    <UBanner
+      title="永中校友会 40 周年庆典活动火热筹募中！"
+      icon="hugeicons:party"
+      close
+      :actions="bannerActions"
+    />
     <UHeader>
       <template #left>
         <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"
+              class="text-xl font-bold text-gray-900 hover:text-primary hidden md:inline"
             >
               永平中学校友会
             </h1>
@@ -14,17 +20,25 @@
         </NuxtLink>
       </template>
 
+      <template #default>
+        <UNavigationMenu :items="items" content-orientation="vertical" />
+      </template>
+
       <template #right>
-        <nav class="space-x-6 hidden md:flex items-center">
-          <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>
+        <UColorModeButton />
+        <UButton
+          v-for="link in socialLinks"
+          color="neutral"
+          variant="ghost"
+          v-bind="link"
+        />
+        <UButton
+          icon="line-md:account-add"
+          to="/join-us"
+          color="primary"
+          variant="solid"
+          label="加入"
+        />
       </template>
 
       <template #body>
@@ -37,7 +51,9 @@
     </UHeader>
 
     <UMain>
-      <slot />
+      <Transition name="page" mode="out-in">
+        <NuxtPage />
+      </Transition>
     </UMain>
 
     <UFooter>
@@ -61,29 +77,104 @@
       </template>
 
       <template #right>
-        <a href="#">
-          <Icon name="mdi-facebook" />
-        </a>
-        <a href="#">
-          <Icon name="mdi-instagram" />
-        </a>
-        <a href="#">
-          <Icon name="mdi-gmail" />
-        </a>
+        <UButton
+          v-for="link in socialLinks"
+          color="neutral"
+          variant="ghost"
+          v-bind="link"
+        />
       </template>
     </UFooter>
   </UPage>
 </template>
 
 <script setup lang="ts">
-import type { NavigationMenuItem } from "@nuxt/ui";
+import type { NavigationMenuItem, ButtonProps } from "@nuxt/ui";
 
 const route = useRoute();
 
+const bannerActions = ref<ButtonProps[]>([
+  {
+    label: "查看策划书",
+    variant: "outline",
+    icon: "lucide:arrow-right",
+    to: "/40th-anniversary/proposal",
+  },
+]);
+
 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") },
+  { label: "首页", to: "/" },
+  { label: "新闻", to: "/news", active: route.path.startsWith("/news") },
+  {
+    label: "活动",
+    to: "/events",
+    active: route.path.startsWith("/events"),
+    children: [
+      {
+        label: "40 周年庆",
+        to: "/40th-anniversary",
+        active: route.path.startsWith("/40th-anniversary"),
+        badge: {
+          label: "Hot",
+          color: "error",
+        },
+      },
+    ],
+  },
+  {
+    label: "关于校友会",
+    to: "/about",
+    active: route.path.startsWith("/about"),
+  },
+  {
+    label: "友情链接",
+    children: [
+      {
+        label: "永平中学官网",
+        icon: "mdi:book-education",
+        to: "https://yphs.edu.my/",
+        target: "_blank",
+      },
+      {
+        label: "桃李教育网",
+        icon: "mdi:web",
+        to: "https://efuxi.vtour.my/",
+        target: "_blank",
+      },
+      {
+        label: "董总 Dong Zong",
+        icon: "mdi:web",
+        to: "https://www.dongzong.my/",
+        target: "_blank",
+      },
+    ],
+  },
+  // { label: "捐赠", to: "#donate", active: route.path.startsWith("#donate") },
+  // { label: "关于", to: "#about", active: route.path.startsWith("#about") },
+]);
+
+const socialLinks = ref<ButtonProps[]>([
+  {
+    icon: "line-md:tiktok",
+    to: "https://www.tiktok.com/@yphs.alumni",
+    target: "_blank",
+  },
+  {
+    icon: "line-md:facebook",
+    to: "https://www.facebook.com/YPHS.Alumni/",
+    target: "_blank",
+  },
 ]);
 </script>
+
+<style lang="css" scoped>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>

app/pages/40th-anniversary.vue

@@ -0,0 +1,19 @@
+<template>
+  <UContainer>
+    <UDashboardToolbar>
+      <UNavigationMenu :items="subPages" />
+    </UDashboardToolbar>
+    <NuxtPage />
+  </UContainer>
+</template>
+
+<script lang="ts" setup>
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+const subPages = ref<NavigationMenuItem[]>([
+  { label: "庆祝四十载", to: "/40th-anniversary", exact: true },
+  { label: "策划案", to: "/40th-anniversary/proposal" },
+]);
+</script>
+
+<style></style>

app/pages/40th-anniversary/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    40 周年庆纪念页
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>

app/pages/40th-anniversary/proposal.vue

@@ -0,0 +1,58 @@
+<template>
+  <UPage>
+    <UPageBody>
+      <UContainer>
+        <UPage>
+          <template #default>
+            <UStepper :items="proposalSteps" size="xs" disabled/>
+            <UPageHeader
+              title="永平中学校友会 40 周年纪念册筹划"
+              description="四十载薪火相传，情系永平，共创未来"
+            />
+
+            <UPageSection title="纪念册定位">
+              <h3>目标受众</h3>
+              <ul>
+                <li>各届校友（老中青三代）</li>
+                <li>教职员工与校董会</li>
+                <li>在校学生与家长</li>
+                <li>地区社会贤达 / 赞助商 / 友校代表</li>
+              </ul>
+              <h3>风格方向</h3>
+              <p>庄重 × 情感 × 历史厚度 × 现代视觉感</p>
+              <p>
+                → 类似大学纪念刊风格，不是单纯的活动册，而是一部
+                *时代见证作品*。
+              </p>
+            </UPageSection>
+
+            <UPageSection
+              title="总体结构规划"
+              description="建议页数：120～160 页"
+            >
+            </UPageSection>
+          </template>
+        </UPage>
+      </UContainer>
+    </UPageBody>
+  </UPage>
+</template>
+
+<script lang="ts" setup>
+import type { StepperItem } from "@nuxt/ui";
+
+useSeoMeta({
+  title: "40 周年纪念册筹划",
+});
+
+const proposalSteps = ref<StepperItem[]>([
+  { title: "筹划期", description: "成立编辑组，确定风格、预算、印刷规格" },
+  { title: "资料收集期", description: "访谈、征文、收照片、整理档案" },
+  { title: "撰写与设计期", description: "文稿成稿、图片修复、初稿排版" },
+  { title: "审校与赞助期", description: "校对、内容确认、广告页洽谈" },
+  { title: "印刷准备期", description: "定稿送印、样书确认" },
+  { title: "发布期", description: "校庆活动同步发行、媒体推广、线上版本上线" },
+]);
+</script>
+
+<style></style>

app/pages/about.vue

@@ -0,0 +1,61 @@
+<template>
+  <UPage>
+    <UPageBody>
+      <UContainer>
+        <UPageHeader
+          title="关于校友会"
+          description="永平中学校友会成立的宗旨是连接全球校友，传承母校精神，支持在校学生成长。我们定期举办活动，推动交流与合作，并积极回馈母校。"
+        />
+
+        <UPageSection
+          title="会徽"
+          description="你了解校友会会徽的含义吗"
+          :features="logoFeatures"
+          orientation="horizontal"
+        >
+          <img class="size-88" src="/Logo.svg" alt="YPHS Alumni" />
+        </UPageSection>
+
+        <UPageSection
+          title="永平中学校歌"
+          description="这首伴随着我们整个中学生涯的曲子，想必能勾起您不少的青春回忆吧！"
+          orientation="horizontal"
+          reverse
+        >
+          <div class="flex flex-col gap-y-8">
+            <img class="w-full" src="/about/校歌.webp" alt="YPHS Alumni" />
+            <div class="flex items-center gap-x-8">
+              <p>伴奏版</p>
+              <audio
+                controls
+                class="flex-1"
+                src="/about/永平中学校歌.mp3"
+              ></audio>
+            </div>
+            <div class="flex items-center gap-x-8">
+              <p>咏唱版</p>
+              <audio
+                controls
+                class="flex-1"
+                src="/about/YongPing_SchoolSong_V2.mp3"
+              ></audio>
+            </div>
+          </div>
+        </UPageSection>
+      </UContainer>
+    </UPageBody>
+  </UPage>
+</template>
+
+<script lang="ts" setup>
+import type { PageFeatureProps } from "@nuxt/ui";
+
+const logoFeatures = ref<PageFeatureProps[]>([
+  { title: "九轮", description: "永久随时代齿轮前进" },
+  { title: "太阳九条线", description: "久久发出光芒照耀华友" },
+  { title: "三个菱形", description: "代表校友、董事会及社会人士团结一致" },
+  { title: "两道绿叶", description: "代表组织团结、不断茁壮成长" },
+]);
+</script>
+
+<style></style>

app/pages/events/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <UPage>
+    <UPageBody>
+      <UContainer>
+        <UChangelogVersions :versions="newsPost" />
+      </UContainer>
+    </UPageBody>
+  </UPage>
+</template>
+
+<script lang="ts" setup>
+import type { ChangelogVersionProps } from "@nuxt/ui";
+
+const { data: events } = await useAsyncData("events", () =>
+  queryCollection("events").order("date", "DESC").limit(3).all()
+);
+
+// 将 news 数据转换成 UBlogPosts 可用格式
+const newsPost = computed<ChangelogVersionProps[]>(() =>
+  (events.value || []).map((evt: any) => ({
+    title: evt.title,
+    description: evt.description,
+    image: evt.cover,
+    date: evt.date,
+    to: evt.path, // ✅ 建议加路由跳转
+  }))
+);
+</script>
+
+<style></style>

app/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <UPage>
     <!-- Hero Banner -->
     <UPageHero
       class="bg-cover bg-center"
@@ -28,9 +28,7 @@
       description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
       :links="donationLinks"
     />
-
-    <IndexAbout />
-  </div>
+  </UPage>
 </template>
 
 <script lang="ts" setup>

app/pages/news/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <UPage>
+    <UPageBody>
+      <UContainer>
+        <UChangelogVersions :versions="newsPost" />
+      </UContainer>
+    </UPageBody>
+  </UPage>
+</template>
+
+<script lang="ts" setup>
+import type { ChangelogVersionProps } from "@nuxt/ui";
+
+const { data: news } = await useAsyncData("news", () =>
+  queryCollection("news").order("date", "DESC").all()
+);
+
+// 将 news 数据转换成 UBlogPosts 可用格式
+const newsPost = computed<ChangelogVersionProps[]>(() =>
+  (news.value || []).map((n: any) => ({
+    title: n.title,
+    description: n.description,
+    image: n.cover,
+    date: n.date,
+    to: n.path, // ✅ 建议加路由跳转
+  }))
+);
+</script>
+
+<style></style>

docs/40 周年纪念册策划案.md

@@ -0,0 +1,148 @@
+# 40 周年纪念册策划案
+
+## 🏛 一、纪念册定位
+
+**主题定位**：
+
+> 「四十载薪火相传，情系永平，共创未来」
+
+**目标受众**：
+
+* 各届校友（老中青三代）
+* 教职员工与校董会
+* 在校学生与家长
+* 地区社会贤达 / 赞助商 / 友校代表
+
+**风格方向**：
+庄重 × 情感 × 历史厚度 × 现代视觉感
+→ 类似大学纪念刊风格，不是单纯的活动册，而是一部 *时代见证作品*。
+
+---
+
+## 📘 二、总体结构规划（建议页数：120～160 页）
+
+### **封面**
+
+* 主视觉设计：校徽 × 火焰 / 时光流线 / 数字“40”标志
+* 副标题：“1986—2026 四十周年纪念册”
+* 封底：赞助单位 + 出版声明 + QR码（导向线上影像纪录）
+
+---
+
+### **前序部分（约 10 页）**
+
+1. **题词与献词**
+
+   * 校友会主席致辞
+   * 校长致辞
+   * 董事长致辞
+   * 特邀嘉宾寄语（如地方议员 / 教育界代表）
+
+2. **编委会名单**
+
+   * 筹委会 / 编辑组 / 摄影 / 设计 / 出版等名单
+
+3. **大事记总览**
+
+   * 用年表形式列出 1986–2026 的重要节点
+   * 例如：创会、历届理事更替、重大活动、奖学金设立、母校建设捐助等
+
+---
+
+### **第一章｜溯源篇：起点与精神（约 20 页）**
+
+* 成立背景（1980s 马来西亚华教环境）
+* 永平中学历史简介
+* 校友会成立缘起、第一届理事成员介绍
+* “校友情”的精神与口号传承
+* 早期活动影像、报纸剪报、珍贵照片扫描件
+
+---
+
+### **第二章｜成长篇：四十年的足迹（约 40 页）**
+
+分阶段叙述，每 10 年为一章：
+
+* **1986–1996**：创业维艰期
+* **1997–2006**：稳定扩展期
+* **2007–2016**：数码化与社会联结期
+* **2017–2026**：复兴与再创辉煌
+
+每个阶段包含：
+
+* 代表性活动介绍（如校庆、义演、体育赛、募捐项目等）
+* 重要人物访谈（理事长 / 校友代表）
+* 历史照片 & 当年文宣再现
+* 时代感对比（旧照片 vs 现今校园）
+
+---
+
+### **第三章｜人物篇：传承与榜样（约 25 页）**
+
+* **杰出校友特写**（5–8 人）
+  * 各领域代表：教育、企业、科技、文化、公益、艺术等
+  * 每人一页访谈式报道 + 肖像照 + 人生金句
+  * **幕后人物**：长期服务校友会者（秘书、摄影、活动志工）
+  * **纪念人物**：已故贡献校友与老师纪念
+
+---
+
+### **第四章｜情感篇：故事与回忆（约 25 页）**
+
+* “我们的青春”主题征文（精选 10–15 篇）
+* “老照片背后的故事”——由投稿校友自述
+* 班级回忆录（部分毕业届集体投稿）
+* 手写留言页 / QR码链接至音视频寄语
+
+---
+
+### **第五章｜未来篇：传承与愿景（约 15 页）**
+
+* 永平中学未来建设规划（教育蓝图）
+* 校友会未来十年计划
+* 青年校友接班计划
+* “数字校友会”构想/推介：网站 / 校友数据库
+
+---
+
+### **第六章｜花絮与活动特辑（约 15 页）**
+
+> 如果本书是在庆典活动前几天印刷好，然后活动当天发出
+
+* 本次四十周年庆典活动全记录
+
+  * 开幕典礼
+  * 校友之夜
+  * 义跑 / 晚宴 / 展览 / 演出
+  * 纪念品设计展示
+
+---
+
+### **附录**
+
+* 校友会历届理事名录
+* 捐款鸣谢名单（依金额分级）
+* 赞助与广告页
+* 联系方式与 QR Link（线上相册、纪录片、网站）
+
+---
+
+## 🧭 三、工作时间规划（8 个月执行建议）
+
+| 阶段           | 时长    | 工作内容                                 |
+| -------------- | ------- | ---------------------------------------- |
+| 1️⃣ 筹划期       | 第1月   | 成立编辑组，确定风格、预算、印刷规格     |
+| 2️⃣ 资料收集期   | 第2–3月 | 访谈、征文、收照片、整理档案             |
+| 3️⃣ 撰写与设计期 | 第4–5月 | 文稿成稿、图片修复、初稿排版             |
+| 4️⃣ 审校与赞助期 | 第6月   | 校对、内容确认、广告页洽谈               |
+| 5️⃣ 印刷准备期   | 第7月   | 定稿送印、样书确认                       |
+| 6️⃣ 发布期       | 第8月   | 校庆活动同步发行、媒体推广、线上版本上线 |
+
+---
+
+## 💡 四、可拓展创意（让纪念册更现代）
+
+* 📱 **AR互动页**：扫描校徽出现 3D 校史影片
+* 🌐 **线上纪念册版**（在校友会官网嵌入同步信息）
+* 🎬 **纪录片二维码嵌入**（对应章节）
+* 🕊️ **数字留言墙**（供校友写下祝福）

nuxt.config.ts

@@ -29,28 +29,46 @@ export default defineNuxtConfig({
       ],
       meta: [
         // 基础 SEO
-        { name: "description", content: "永平中学校友会官网 - 连接校友，共享资源，传承母校精神。" },
-        { name: "keywords", content: "永平中学, 校友会, 永平中学校友, 永平校友, 同学会" },
+        {
+          name: "description",
+          content: "永平中学校友会官网 - 连接校友，共享资源，传承母校精神。",
+        },
+        {
+          name: "keywords",
+          content: "永平中学, 校友会, 永平中学校友, 永平校友, 同学会",
+        },
         { name: "author", content: "永平中学校友会" },
         { name: "viewport", content: "width=device-width, initial-scale=1" },
 
         // Open Graph（Facebook/LinkedIn）
         { property: "og:title", content: "永平中学校友会" },
-        { property: "og:description", content: "永平中学校友会官网 - 连接校友，共享资源，传承母校精神。" },
+        {
+          property: "og:description",
+          content: "永平中学校友会官网 - 连接校友，共享资源，传承母校精神。",
+        },
         { property: "og:type", content: "website" },
         { property: "og:url", content: "https://yphsalumni.org" }, // ✅ 换成你网站的真实域名
-        { property: "og:image", content: "https://yphsalumni.org/hero-image.jpg" }, // ✅ 上传一张封面图
+        {
+          property: "og:image",
+          content: "https://yphsalumni.org/hero-image.jpg",
+        }, // ✅ 上传一张封面图
 
         // Twitter Card
         { name: "twitter:card", content: "summary_large_image" },
         { name: "twitter:title", content: "永平中学校友会" },
-        { name: "twitter:description", content: "连接校友，共享资源，传承母校精神。" },
-        { name: "twitter:image", content: "https://yphsalumni.org/hero-image.jpg" },
+        {
+          name: "twitter:description",
+          content: "连接校友，共享资源，传承母校精神。",
+        },
+        {
+          name: "twitter:image",
+          content: "https://yphsalumni.org/hero-image.jpg",
+        },
       ],
     },
   },
   site: {
     url: "https://yphsalumni.com",
-    name: "永中校友会 YPHS Alumni"
-  }
+    name: "永中校友会 YPHS Alumni",
+  },
 });

package.json

@@ -22,7 +22,7 @@
     "html2pdf.js": "^0.12.1",
     "maska": "^3.2.0",
     "md-editor-v3": "^6.0.1",
-    "nuxt": "^4.1.3",
+    "nuxt": "^4.2.0",
     "reka-ui": "^2.5.1",
     "tailwindcss": "^4.1.14",
     "typescript": "^5.9.3",