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>