feat(about): add organizational structure page

This commit introduces a new page to display the alumni association's organizational structure.

- Adds a new page at `/about/org-structure` to showcase the committee members.
- Displays each member's photo, position, name, and a brief description of their role.
- The structure is organized into categories: Leadership Team, Functional Departments, and Specialized Departments.
- A navigation link has been added to the main layout sidebar for easy access.

app/layouts/default.vue

@@ -132,6 +132,12 @@ const items = computed<NavigationMenuItem[]>(() => [
         active: route.path.startsWith("/about/founded-history"),
         icon: "mdi:history",
       },
+      {
+        label: "组织架构",
+        to: "/about/org-structure/20",
+        active: route.path.startsWith("/about/org-structure"),
+        icon: "mdi:account-group",
+      },
       {
         label: "特殊校友：中补班",
         description: "永平中学补习班（1956年）：一封迟来的贴文",

app/pages/about/org-structure.vue

@@ -0,0 +1,16 @@
+<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: "20 届", to: "/about/org-structure/20" }]);
+</script>
+
+<style></style>

app/pages/about/org-structure/[slug].vue

@@ -0,0 +1,227 @@
+<template>
+  <UPage>
+    <UPageHeader
+      :title="`第 ${generation} 届组织架构`"
+      description="精英汇聚，携手共创卓越未来"
+    />
+    <UPageBody>
+      <UPageSection
+        v-for="category in categories"
+        :key="category"
+        :title="category"
+      >
+        <!-- <h2 class="text-3xl font-extrabold text-center mb-10">领导团队</h2> -->
+        <UPageGrid class="!grid-cols-1 sm:!grid-cols-2 lg:!grid-cols-4">
+          <UCard
+            v-for="person in orgStructure.filter((p) => p.category == category)"
+            :key="person.name"
+          >
+            <template #header>
+              <h3 class="text-xl font-semibold mb-2">{{ person.position }}</h3>
+              <div class="text-2xl font-bold">{{ person.name }}</div>
+            </template>
+            <template #default>
+              <div class="text-center">
+                <img
+                  class="h-40 w-auto object-contain inline rounded-md"
+                  :src="person.photo"
+                  :alt="person.name"
+                />
+              </div>
+            </template>
+            <template #footer
+              ><p class="text-muted">{{ person.description }}</p></template
+            >
+          </UCard>
+        </UPageGrid>
+      </UPageSection>
+    </UPageBody>
+  </UPage>
+</template>
+
+<script lang="ts" setup>
+useSeoMeta({
+  title: "组织架构",
+  description:
+    "永平中学校友会组织架构，领导团队、职能部门与专项部门精英汇聚，携手共创卓越未来。",
+  keywords:
+    "永平中学校友会, 校友会组织架构, 领导团队, 职能部门, 专项部门, 理事会成员",
+  ogTitle: "永平中学校友会组织架构",
+  ogDescription:
+    "了解永平中学校友会的领导团队、职能与专项部门，见证校友情谊与组织力量。",
+  ogImage: "/org-structure/ogImage.png",
+  ogType: "website",
+});
+
+const route = useRoute();
+const generation = route.params.slug;
+
+const categories = ref(["领导团队", "职能部门", "专项部门"]);
+
+const orgStructure = ref([
+  {
+    name: "李煜斌",
+    position: "主席",
+    category: "领导团队",
+    photo: "/org-structure/李煜斌.png",
+    description:
+      "全面领导与战略决策，统筹理事会整体工作，确保组织愿景与使命的实现。",
+  },
+  {
+    name: "郑惠忠",
+    position: "副主席",
+    category: "领导团队",
+    photo: "/org-structure/郑惠忠.png",
+    description: "协助主席制定战略方向，分管外部关系与合作伙伴发展。",
+  },
+  {
+    name: "陈月丽",
+    position: "副主席",
+    category: "领导团队",
+    photo: "/org-structure/陈月丽.png",
+    description: "协助主席处理内部事务，分管人力资源与组织文化建设。",
+  },
+  {
+    name: "余东照",
+    position: "副主席",
+    category: "领导团队",
+    photo: "/org-structure/余东照.png",
+    description: "协助主席推动重点项目，分管创新业务与发展规划。",
+  },
+  {
+    name: "蓝宜宏",
+    position: "秘书",
+    category: "职能部门",
+    photo: "/org-structure/蓝宜宏.png",
+    description: "文件管理、会议组织、行政协调与日常事务处理。",
+  },
+  {
+    name: "陈冠宇",
+    position: "副秘书",
+    category: "职能部门",
+    photo: "/org-structure/陈冠宇.png",
+    description: "协助秘书处理文档、会议安排与行政支持工作。",
+  },
+  {
+    name: "余粝栎",
+    position: "财政",
+    category: "职能部门",
+    photo: "/org-structure/余粝栎.png",
+    description: "全面财务管理、预算控制、资金运作与财务报告。",
+  },
+  {
+    name: "曾国书",
+    position: "副财政",
+    category: "职能部门",
+    photo: "/org-structure/曾国书.jpg",
+    description: "协助财政处理账务、报销与日常财务管理工作。",
+  },
+  {
+    name: "颜志宝",
+    position: "总务",
+    category: "职能部门",
+    photo: "/org-structure/颜志宝.png",
+    description: "物资采购、资产管理、场地协调与后勤保障服务。",
+  },
+  {
+    name: "温敬富",
+    position: "副总务",
+    category: "职能部门",
+    photo: "/org-structure/温敬富.png",
+    description: "协助总务处理物资管理、设备维护与后勤支持。",
+  },
+  {
+    name: "胡少菲",
+    position: "总务",
+    category: "职能部门",
+    photo: "/org-structure/胡少菲.png",
+    description: "文化活动策划、康乐项目组织与会员联谊活动。",
+  },
+  {
+    name: "林剑宝",
+    position: "副总务",
+    category: "职能部门",
+    photo: "/org-structure/林剑宝.png",
+    description: "协助文康组织文体活动、兴趣小组与社交聚会。",
+  },
+  {
+    name: "余美枫",
+    position: "福利主任",
+    category: "专项部门",
+    photo: "/org-structure/余美枫.png",
+    description: "会员福利规划、实施与评估，提升会员满意度。",
+  },
+  {
+    name: "郑惠国",
+    position: "副福利主任",
+    category: "专项部门",
+    photo: "/org-structure/郑惠国.png",
+    description: "协助会员福利规划、实施与评估，提升会员满意度。",
+  },
+  {
+    name: "程靖原",
+    position: "会员籍暨咨询管理",
+    category: "专项部门",
+    photo: "/org-structure/程靖原.png",
+    description: "会员信息管理、咨询服务提供与会员关系维护。",
+  },
+  {
+    name: "许福源",
+    position: "副会员籍暨咨询管理",
+    category: "专项部门",
+    photo: "/org-structure/许福源.png",
+    description: "协助会员管理、咨询响应与信息系统维护。",
+  },
+  {
+    name: "麦祖奕",
+    position: "副会员籍暨咨询管理",
+    category: "专项部门",
+    photo: "/org-structure/麦祖奕.png",
+    description: "协助会员管理、咨询响应与信息系统开发。",
+  },
+  {
+    name: "许浩铭",
+    position: "奖励金主任",
+    category: "专项部门",
+    photo: "/org-structure/许浩铭.png",
+    description: "奖励金制度设计、评审组织与发放管理。",
+  },
+  {
+    name: "黄楚茵",
+    position: "副奖励金主任",
+    category: "专项部门",
+    photo: "/org-structure/黄楚茵.png",
+    description: "协助奖励金评审、资料审核与发放流程管理。",
+  },
+  {
+    name: "陈廷添",
+    position: "理事",
+    category: "专项部门",
+    photo: "/org-structure/陈廷添.png",
+    description: "参与理事会决策、专项工作推进与建议提出。",
+  },
+  {
+    name: "邱康勤",
+    position: "理事",
+    category: "专项部门",
+    photo: "/org-structure/邱康勤.png",
+    description: "参与理事会决策、专项工作推进与建议提出。",
+  },
+  {
+    name: "张键国",
+    position: "稽查",
+    category: "专项部门",
+    photo: "/org-structure/张键国.png",
+    description: "内部审计、合规监督与风险控制管理。",
+  },
+  {
+    name: "许皓杰",
+    position: "稽查",
+    category: "专项部门",
+    photo: "/org-structure/许皓杰.png",
+    description: "内部审计、合规监督与风险控制管理。",
+  },
+]);
+</script>
+
+<style></style>

docs/PPT Designs v1.md

@@ -0,0 +1,89 @@
+目标时长
+
+- 5–7 分钟（6–8 页），节奏轻快，现场可插入 60–90 秒演示
+
+推荐结构（6–8 页）
+
+- 封面：项目名称、口号、日期与主办单位
+- 为什么做：痛点与目标
+- 核心功能：面向校友和公众的主要板块
+- 设计与技术：品牌视觉与技术栈亮点
+- 运营与上线：内容节奏、参与方式与上线计划
+- 路线图：后续可期与合作方向
+- 现场演示：30–90 秒 Demo 流程说明
+- 行动号召与致谢：访问方式、参与方式、鸣谢
+
+每页文案示例（可直接放入 PPT）
+
+- 封面
+    - 标题：永平中学校友会官网上线发布
+    - 口号：连接校友 · 传承精神
+    - 时间地点：2025.10 永平中学
+    - 主办：永平中学校友会 | 技术支持：Tootaio Studio
+    - 右侧放二维码（yphsalumni.org）+ public/Logo.svg
+- 为什么做（愿景与价值）
+    - 信息更集中：新闻公告、活动安排、校友故事统一发布
+    - 连接更紧密：线上平台增强校友互联与参与感
+    - 传承更长久：记录校史、人事与精神资产
+    - 数字化基建：为后续报名、征文、捐赠等打基础
+- 核心功能（首发）
+    - 新闻与公告：重要信息一处直达
+    - 校友活动：预告、报名与回顾
+    - 名人堂：优秀校友故事与图集
+    - 关于校友会：宗旨、会徽、校歌
+    - 入会申请：表单已就绪（当前为占位，逐步开通）
+    - 后台脚手架：内容与会员管理后续接通
+- 设计与技术（可信与可持续）
+    - 视觉基因：主色 #fb9e3a、副色 #fcef91（温暖、亲和、纪念感）
+    - 易读排版：专属 Markdown 样式，移动优先
+    - 技术栈：Nuxt 4、TypeScript、Tailwind CSS、@nuxt/ui、@nuxt/content
+    - SEO 就绪：Sitemap、Robots、Meta/OG/Twitter 卡片
+    - 部署灵活：可静态托管，也可 SSR 托管
+- 运营与上线（如何用起来）
+    - 内容节奏：每周1–2篇新闻/活动；名人堂按策划发布
+    - 投稿机制：校友/老师/班级提供图文，统一编审发布
+    - 渠道联动：官网首发，同步 Facebook/TikTok
+    - 数据分析：尊重隐私的访问统计，用于优化内容结构
+- 路线图（Roadmap）
+    - Q4：入会表单接通审核流程、内容 CRUD 后台
+    - Q1：活动报名/签到、相册；捐赠模块调研
+    - Q2：校友企业与招聘、专题档案与时间轴
+    - 长期：多语言、校友地图、移动端优化
+- 现场演示（30–90 秒）
+    - 首页开场 → 打开一条新闻 → 切到活动详情 → 看名人堂图集
+    - 快速展示入会表单（目前“功能未开放”提示）
+    - 如需：展示后台仪表盘框架（结构就绪，等接入）
+- 行动号召与致谢
+    - 访问：yphsalumni.org（扫码关注）
+    - 参与：投稿、提供史料、报名志愿者、提供赞助与合作
+    - 关注我们：Facebook「永平中学校友会」、TikTok「@yphs.alumni」
+    - 致谢：校董会/校方/校友与志愿者、Tootaio Studio 技术支持
+
+视觉与排版建议
+
+- 版式：16:9，黑/深灰背景或浅色质感底，突出橙色点缀
+- 字体：中文优先思源黑体/Noto Sans SC；标题粗体、正文中等
+- 统一元素：使用 public/Logo.svg 与 public/hero-image.jpg 作封面/过渡图
+- 图片素材：新闻/活动封面取自 public/news/*、public/events/*、public/hall-of-fame/*
+- 最少字多图：每页 3–5 条要点，每条不超过一行半
+
+演示备选方案（网络不稳时）
+
+- 准备 30–60 秒无声/配乐屏录视频（首页→新闻→活动→名人堂→入会）
+- 关键页面截图备选：主页、新闻详情、活动详情、名人堂人物页、后台仪表盘
+- 本地二维码图片（指向官网），避免临场生成失败
+
+可选加页（视场合增减）
+
+- 用户故事：校友/老师/在校生各 1 个使用场景
+- 隐私与安全：不采集敏感信息、分析工具与停用开关
+- 合作与赞助：纪念册/活动共创与鸣谢方式
+- FAQ：如何投稿、如何加入志愿者、如何反馈问题
+
+素材清单（制作 PPT 前先备齐）
+
+- Logo 与主视觉：public/Logo.svg、public/hero-image.jpg
+- 二维码：yphsalumni.org（建议白底黑码，配校色边框）
+- 页面截图：主页、新闻、活动、名人堂、入会、后台
+- 文案确认：宗旨口号、愿景 1 句话、路线图 3–5 条
+- 联系方式：官方邮箱/表单链接、官方社媒链接

docs/PPT Designs v2.md

@@ -0,0 +1,109 @@
+呈现原则
+
+- 低调而清晰：把“报效 + 价值 + 开源”讲清楚，不喧宾夺主。
+- 一致口径：PPT、主持人口播、新闻通稿用同一措辞。
+- 可验证与可持续：展示交付范围和开源地址，强调长期可维护。
+
+推荐版式（7–9 页）
+
+- 封面：项目名、口号、日期、主办单位、技术支持
+- 背景与目标：为什么要做官网
+- 亮点与模块：新闻/活动/名人堂/关于/入会（占位）/后台脚手架
+- 交付与价值：高定项目、价值、交付清单
+- 开源与授权：开源协议、仓库地址、版权说明
+- 运营与上线：内容节奏、参与方式、渠道联动
+- 路线图：后续工作与可期
+- 现场演示：流程提示（30–90 秒）
+- 鸣谢与行动号召：访问方式、参与方式、致谢
+
+关键页完整文案（可直接放入 PPT）
+
+- 封面
+    - 标题：永平中学校友会官网上线发布
+    - 口号：连接校友 · 传承精神
+    - 时间地点：2025.10 永平中学
+    - 主办单位：永平中学校友会
+    - 技术支持（赞助）：Tootaio Studio
+    - 右侧放站点二维码（yphsalumni.org）与 public/Logo.svg
+- 背景与目标
+    - 信息更集中：新闻公告、活动、校友故事统一发布
+    - 连接更紧密：线上平台增强凝聚力与参与感
+    - 长期可持续：标准化内容、可复用组件、开源治理
+    - 数字化基建：为报名、征文、捐赠等后续功能打基础
+- 亮点与模块
+    - 新闻/公告：首发权威信息，SEO 友好
+    - 校友活动：预告、回顾与多媒体内容
+    - 名人堂：人物故事与图集
+    - 关于校友会：宗旨、会徽、校歌
+    - 入会申请：表单就绪（将逐步开通流程）
+    - 管理后台：内容与会员管理脚手架，随时对接后端
+- 交付与价值（高定与报效）
+    - 本项目由 Tootaio Studio 报效永平中学校友会
+    - 价值：RM 30,000（高定项目）
+    - 交付清单（概览）
+        - 产品与信息架构：栏目与内容模型设计
+        - 视觉与 UI：主题风格、导航、Markdown 样式与组件库适配
+        - 前端开发：Nuxt 4、TypeScript、Tailwind、@nuxt/ui、@nuxt/content 集成
+        - 内容迁移与示例：新闻/活动/名人堂样例、封面与图集
+        - SEO 与分析：Sitemap/Robots/OG 元信息、可选 Umami 统计接入
+        - 构建与部署：静态导出/SSR 双方案、上线脚本与文档
+    - 说明：以上价值不含域名、服务器及第三方服务费用
+- 开源与授权（透明与共建）
+    - 代码开源：项目源代码公开，便于校友与开发者共建
+    - 开源协议：MIT/Apache-2.0（二选一，建议在仓库添加 LICENSE）
+    - 仓库地址：Github 仓库链接与二维码（上线后填入）
+    - 版权说明：代码遵循开源协议；文字与图片等内容版权归原作者/校友会所有
+    - 贡献方式：提交 Issue/PR，按 content.config.ts 字段规范撰写内容
+- 运营与上线
+    - 内容节奏：每周 1–2 篇新闻/活动；名人堂按策划发布
+    - 参与方式：投稿、提供史料、报名志愿者、技术共建
+    - 渠道联动：官网首发，同步 Facebook/TikTok
+    - 数据与隐私：尊重用户隐私，分析仅用于内容优化
+- 路线图（示例）
+    - Q4：入会表单接通审核流程、内容后台 CRUD
+    - Q1：活动报名/签到、相册；捐赠模块调研
+    - Q2：校友企业与招聘、专题档案与时间轴
+    - 长期：多语言、校友地图、移动端优化
+- 现场演示（30–90 秒）
+    - 首页 → 新闻详情 → 活动详情 → 名人堂图集 → 入会表单（现提示“功能未开放”）
+    - 若网络不稳：准备 45 秒屏录视频与关键页面截图备用
+- 鸣谢与行动号召
+    - 访问：yphsalumni.org（扫码）
+    - 参与：投稿/志愿者/合作/赞助（留邮箱或表单链接）
+    - 鸣谢：校董会/校方/校友与志愿者、Tootaio Studio 技术支持
+    - 结束语：连接校友 · 传承精神
+
+金额与赞助信息的呈现技巧
+
+- 将“报效/价值/开源”分散露出，避免单页过度“商业化”：封面页署名（技术支持）、中段“交付与价值”页清晰展现、高尾页鸣谢再次确认。
+- “RM30,000”用一行大数字配副标题“高定项目（报效）”，旁边放交付清单，强调价值而不过度营销。
+- 视觉上弱化工作室 Logo（相对校友会 Logo 约 1/2–1/3 宽度），保持庄重。
+
+主持人口播（15–20 秒）
+
+- “本次官网由 Tootaio Studio 报效搭建，项目价值 RM 三万，为高定定制并全面开源。感谢工作室团队的专业支持，也欢迎校友与开发者共同参与建设。”
+
+新闻通稿段落（可复用）
+
+- “永平中学校友会官网今日正式上线。该项目由 Tootaio Studio 报效支持，项目价值 RM30,000，为高定定制网站并以开源方式发布。平台将持续发布新闻活动、名人堂故事等内容，欢迎校友访问
+yphsalumni.org 并参与共建。”
+
+素材清单
+
+- 官网二维码（yphsalumni.org）
+- 仓库二维码（开源后补充）
+- Logo：public/Logo.svg、主视觉 public/hero-image.jpg
+- 页面截图：主页、新闻、活动、名人堂、入会（与后台仪表盘）
+- 一页式“交付清单与价值”图（可用饼图/图标矩阵）
+
+合规与落地建议
+
+- 确认开源协议（建议 MIT）并在仓库根目录添加 LICENSE
+- 在 README.md 保留“报效/开源”说明与致谢，PPT 与通稿用同一表述
+- 金额声明附说明：不含域名/服务器/第三方服务费
+- 现场背景板与屏幕页脚统一“技术支持：Tootaio Studio”
+
+需要的话，我可以：
+
+- 直接为你生成一份可放映的 Marp/Reveal.js Markdown 幻灯，或输出 PPTX 模板（含上述文案与占位图）。
+- 创建“交付与价值”信息图一页（AI 矢量），用于 PPT 与对外物料。