feat(content): add founding history page for the alumni association

This commit introduces a new page detailing the founding history of the alumni association.

- Adds the new page at `/about/founded-history` which includes the origin story, organizational structure, and a list of donors for the clubhouse.
- Restructures the `/about` route by moving the existing page to `/about/index` to accommodate nested pages.
- Updates the main navigation menu to include a dropdown link to the new 'Founding History' page.
- Adds a link to the old alumni website under 'Friendly Links' for historical reference.

app/layouts/default.vue

@@ -125,6 +125,14 @@ const items = computed<NavigationMenuItem[]>(() => [
     label: "关于校友会",
     to: "/about",
     active: route.path.startsWith("/about"),
+    children: [
+      {
+        label: "创会简史",
+        to: "/about/founded-history",
+        active: route.path.startsWith("/about/founded-history"),
+        icon: "mdi:history",
+      },
+    ],
   },
   {
     label: "友情链接",
@@ -147,6 +155,12 @@ const items = computed<NavigationMenuItem[]>(() => [
         to: "https://www.dongzong.my/",
         target: "_blank",
       },
+      {
+        label: "永中校友网 - 旧站",
+        icon: "mdi:web-clock",
+        to: "https://vtour.my/yphsalumni/",
+        target: "_blank",
+      },
     ],
   },
   // { label: "捐赠", to: "#donate", active: route.path.startsWith("#donate") },

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

@@ -2,37 +2,34 @@
   <UPage>
     <UPageBody>
       <UContainer>
-        <UPage>
-          <template #default>
-            <UStepper :items="proposalSteps" size="xs" disabled/>
-            <UPageHeader
-              title="永平中学校友会 40 周年纪念册筹划"
-              description="四十载薪火相传，情系永平，共创未来"
-            />
+        <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="纪念册定位">
+            <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>
+          <UPageSection
+            title="总体结构规划"
+            description="建议页数：120～160 页"
+          >
+          </UPageSection>
+        </template>
       </UContainer>
     </UPageBody>
   </UPage>

app/pages/about/founded-history.vue

@@ -0,0 +1,339 @@
+<template>
+  <UPage>
+    <UPageBody>
+      <UContainer>
+        <UPageHeader title="校友会创立简史" description="2017 年整理" />
+      </UContainer>
+      <UPageSection title="源起与经过">
+        <p>
+          一所学校的发展，校友可扮演着重要的角色，而校友会的成立，则能更有效的凝聚众人的力量，回馈母校的培育恩情，永平中学建校三十多年，培育了数以千计的莘莘学子，毕业校友遍布全国各地，在文教界、工商界各领域均卓有成就。为凝聚校友情谊，加强与母校的联系，这一股力量开始在校友心中醖酿，盼着有校友会的成立，期盼透过群体的力量，共同协助母校的建设与发展，群策群力，回馈母校。
+        </p>
+        <p>
+          自七十年代始便有成立校友会的构想，李文鍊校长也数次为此而南北奔波，号召校友发起组织，可是因为种种原因而胎死腹中。直到一九八四年十月十日方正式产生了筹委会，成员有：刘响华、杨顺发、刘振昌、罗玉珍、黄保成、范志清、郑祥才、刘用周、许莉云、陈美英、刘建万、陈家发、陈仁芳、周国盛、余养耕、何民荣、陈崠甡、陈亚瑞。由于筹委会成立伊始，百事待举，惟以起草章程和招收会员为主。因此这一群热心的校友即展开工作，访问友会收集资料，并通过郭进财先生协助申请注册工作。
+        </p>
+        <p>
+          然而立意草创，始业惟艰。由于个人因素致使筹委会未能有效的协调与配合，因此进度缓慢。鉴于早日落实校友会成立的意愿，众校友在一九八四年十二月十八日决定重组筹委会，结果杨顺发荣任主席，副主席：范志清，财政：王飞兴，秘书：罗玉珍，助理秘书：陈宋丽，委员：许志毅、黄保成、陈美英、郑祥才、刘建万、陈仁芳，查账：罗细妹、吴恒发。
+        </p>
+        <p>
+          在彼等的热诚推动与互助之下，各项工作顺利展开，一九八六年一月二十三日，永中校友会终于获得社团注册官批准成立，同年三月九日即召开会员大会选出了第一届理事会，这是历史性的一刻，在永中校友的心中写下辉煌灿烂的一页。自此校友会立下了根基，藉此迈向新的里程碑，为母语、母校、中华文化做出贡献。
+        </p>
+        <p>
+          由于经费不足，一直未能自置会所，直到一九八九年方与永平树胶公会合租永平种植合作社商业大厦四楼一单位，并获得名誉主席马文清报效装修费用，才落实有一个“家”的愿望。
+        </p>
+        <p>
+          至2010年校友会庆祝创会25周年，在余深智学长及中马区学长陈亚龙，郑惠民，吴恒灿，陈杰民，何宗荣等推动下，由余和安主席与刘建万筹委会主席及理事，校友们的踊跃支持下，成功筹得46万零吉的会所基金（参见征信录附表），其中马文清学长捐献10万元。2011年也成功购置现址之会所。并于2012年6月23日举办本会庆祝27周年庆会所启用仪式“623校友团圆日”暨第14届理事就职典礼晚宴，当晚也推介了永中校友全球服务网，让校友从网站获取更多有关母校发展的最新资讯。
+        </p>
+      </UPageSection>
+      <UPageSection title="组织与结构">
+        <p>
+          自永中校友会成立之后，依章程第四条拟定，凡曾在永中就读，年龄达十八岁以上，而现已离校，不在任何中学肆业之校友均可申请为会员；并规定每年四月底之前必须召开会员大会一次，每二年得举行改选，产生理事会。以下为各股职责：
+        </p>
+        <ul>
+          <li>主席：为会员大会及理事会主持人，执行会务及其他事项。</li>
+          <li>
+            秘书：执行会员大会及理事会依章程所达致的议决案的行政工作，处理及保管本会的一切文件。
+          </li>
+          <li>财政：负责会计，出纳及一切财务事宜。</li>
+          <li>总务：负责一切庶务事项。</li>
+          <li>康乐股：负责一切育乐活动。</li>
+          <li>文教股：负责学术，出版等事项。</li>
+          <li>福利股：谋求会员福利。</li>
+          <li>会员局：收集及整理会员资料档案。</li>
+        </ul>
+        <p>
+          本会常年规划举办各项健康文艺表演，各种专题讲座等活动，让乡民增进知识、发扬优良的传统文化及提倡健康的社会风气。并举办了许多活动，包括“新春大团拜”、“校友回校日”、“卡拉ok歌唱比赛”、“小型旅游”，“庆生会”等，都能获得热烈的响应。
+        </p>
+        <p>
+          2015年5月份成立本会属下永平合唱团，2017年成立本会属下永中校友排球组。
+        </p>
+        <p>
+          为加强各界校友联系，本会在Whatsapp成立了历届校友联系人群组，并架设永中校友网站（yphs-alumni.org）及在面子书成立永中校友网（YongPeng
+          Yphsalumni）以不时分享各项活动资讯。
+        </p>
+        <p>
+          本会目前的会务稳健发展，规模日宏，会员人数不断增加。作为华教先锋，本会始终立场鲜明，坚持立会宗旨，也配合董教总方针维护华教。本会向来与时并进，走在时代尖端，关注时局及各类社会问题，并提出针砭。
+        </p>
+        <p>
+          历届理事们凭着一股强烈的使命感，对校友会不离不弃，默默地为校友会付出，贡献良多。包括老中青三代的理事紧密结合，和谐共处如一家人。在大家通力合作之下，必将秉承一贯的光辉传统，谱下更美好的篇章。
+        </p>
+      </UPageSection>
+      <UPageSection
+        title="永平中学校友会二十五周年购置会所筹募基金征信录"
+        description="（1986年-2010年）制成牌匾，置挂会所"
+        headline="2012年6月23日"
+      >
+        <div class="overflow-x-auto rounded-2xl shadow-lg">
+          <table class="min-w-full border-collapse bg-white text-gray-800">
+            <thead
+              class="bg-gray-100 text-left text-sm font-semibold uppercase tracking-wide"
+            >
+              <tr>
+                <th class="w-32 border-b border-gray-200 px-4 py-3">金额</th>
+                <th class="border-b border-gray-200 px-4 py-3">捐献者名单</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100 text-sm leading-relaxed">
+              <tr
+                v-for="(donor, idx) in donors"
+                :key="donor.amount"
+                class="hover:bg-gray-50"
+              >
+                <td
+                  :class="[
+                    'px-4',
+                    'py-2',
+                    idx < 2 ? 'font-bold text-primary' : '',
+                  ]"
+                >
+                  {{ donor.amount }}
+                </td>
+                <td class="px-4 py-2">{{ donor.peoples.join("，") }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <p>总筹得：马币四十六万元正</p>
+        <div class="overflow-x-auto rounded-2xl shadow-lg mt-10">
+          <table class="min-w-full border-collapse bg-white text-gray-800">
+            <thead
+              class="bg-gray-100 text-left text-sm font-semibold uppercase tracking-wide"
+            >
+              <tr>
+                <th class="w-40 border-b border-gray-200 px-4 py-3">项目</th>
+                <th class="border-b border-gray-200 px-4 py-3">详情</th>
+                <th class="w-40 border-b border-gray-200 px-4 py-3">
+                  价值（马币）
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100 text-sm leading-relaxed">
+              <tr
+                class="hover:bg-gray-50"
+                v-for="serviceDonor in serviceDonations"
+                :key="serviceDonor.name"
+              >
+                <td class="px-4 py-2">{{ serviceDonor.name }}</td>
+                <td class="px-4 py-2">{{ serviceDonor.item }}</td>
+                <td class="px-4 py-2">
+                  {{ money.format(serviceDonor.amount) }}
+                </td>
+              </tr>
+              <tr class="bg-amber-50 font-semibold text-primary">
+                <td class="px-4 py-2">总额</td>
+                <td class="px-4 py-2">专业服务及装修项目</td>
+                <td class="px-4 py-2">{{ money.format(33170) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </UPageSection>
+    </UPageBody>
+  </UPage>
+</template>
+
+<script lang="ts" setup>
+const money = new Intl.NumberFormat("zh-CN", {
+  style: "currency",
+  currency: "MYR",
+  maximumFractionDigits: 0,
+});
+
+const donors = ref<{ amount: string; peoples: string[] }[]>([
+  { amount: "十万元", peoples: ["马文清"] },
+  { amount: "五万元", peoples: ["余深智太平局绅"] },
+  { amount: "一万八千元", peoples: ["余和安"] },
+  { amount: "一万七千元", peoples: ["郑惠民"] },
+  { amount: "一万五千元", peoples: ["陈亚龙", "刘建万"] },
+  { amount: "一万二千元", peoples: ["吴恒灿", "郑惠顺"] },
+  {
+    amount: "一万元",
+    peoples: [
+      "YB拿督魏家祥博士",
+      "刘文兴",
+      "蓝群华",
+      "陈月丽",
+      "林俊伟",
+      "黄振兴",
+    ],
+  },
+  { amount: "六千元", peoples: ["盛添寿"] },
+  { amount: "五千五百元", peoples: ["何宗荣"] },
+  {
+    amount: "五千元",
+    peoples: ["杨文松", "吴荣贵", "黄宗海", "余根业", "陈德福"],
+  },
+  {
+    amount: "三千元",
+    peoples: [
+      "拿督张玉兴",
+      "黄金斗",
+      "王飞兴",
+      "周隆发",
+      "黄世纯",
+      "陈正龙",
+      "美术广告",
+      "富华冷气酒家",
+    ],
+  },
+  {
+    amount: "二千五百元",
+    peoples: [
+      "陈伟权",
+      "余清安",
+      "陈杰民",
+      "陈芳龙",
+      "许赐福",
+      "林玻璃有限公司",
+    ],
+  },
+  { amount: "两千元", peoples: ["周厚钿", "刘振昌", "刘用周"] },
+  { amount: "一千六百元", peoples: ["余东照"] },
+  { amount: "一千五百元", peoples: ["YB林其妹", "余新礼", "林建宝"] },
+  {
+    amount: "一千元",
+    peoples: [
+      "拿督黄仰白",
+      "陈宋丽",
+      "郑惠忠",
+      "黄荣发",
+      "江仁瑞",
+      "杨惜平",
+      "黄招兴",
+      "林家祥",
+      "杨顺发",
+      "江义顺",
+      "陈俊浩",
+      "黄仰惠",
+      "江先利",
+      "吴福华",
+      "余养耕",
+      "范志清",
+      "黎星堂",
+      "邱财德",
+      "邱祥春",
+      "覃庆星",
+      "陈秀彩",
+      "张珠英",
+      "吴恒发",
+      "余赐喜",
+      "林仁钦",
+      "黄潮明",
+      "谭丕光",
+      "郑双",
+      "林有兴",
+      "颜丰樑",
+      "周卓开",
+      "江梅香",
+      "谭信飞",
+      "邬焕铭",
+      "王振现",
+      "汤孝森",
+      "王辉恩",
+      "许秀莉",
+      "潘瑞平",
+      "王启耕",
+      "瞿军圣",
+      "余养廉",
+      "Yeak Nai Siew",
+      "许永隆有限公司",
+      "永平合作社",
+      "永平留台同学会",
+    ],
+  },
+  { amount: "八百元", peoples: ["余清洋"] },
+  {
+    amount: "五百元",
+    peoples: [
+      "黄楚茵",
+      "余莉莉",
+      "陈仁芳",
+      "郑惠国",
+      "王桂友",
+      "赖致圣",
+      "陈亚友",
+      "陈成德",
+      "阮文琼",
+      "李万同",
+      "刘素贞",
+      "林宝益",
+      "陈芳桂",
+      "余明瑞",
+      "郑金顺",
+      "汤孝式",
+      "林远来",
+      "苏继仁",
+      "张森錪",
+      "盛永錥",
+      "陈增华",
+      "胡少菲",
+      "邱亚泉",
+      "王文发",
+      "瞿夏莲",
+      "林奕用",
+      "王奕琪",
+      "王亚勇",
+      "林炳坤",
+      "郑宇曙",
+      "财兴铁厂",
+      "萧茶餐室",
+    ],
+  },
+  { amount: "四百元", peoples: ["福名氏"] },
+  {
+    amount: "三百元",
+    peoples: [
+      "许木春",
+      "杜丕石",
+      "张东升",
+      "陈祖利",
+      "余惠敏",
+      "余光云",
+      "余云志",
+      "福州会馆",
+      "张德满",
+      "黄锦彪",
+      "黄福顺",
+      "吴云景",
+      "黄奕洲",
+      "林新桦",
+      "廖国华",
+      "黄金星",
+      "和合汽车服务中心",
+      "顺兴车厂",
+      "闽南公会",
+      "友爱慈善社",
+      "林氏宗亲会",
+      "通达柅轮",
+      "和隆金铺",
+      "万裕兴有限公司",
+      "永平马来亚银行",
+      "super yes computer",
+    ],
+  },
+  {
+    amount: "二百元",
+    peoples: [
+      "罗联永",
+      "王仕德",
+      "黄祖严",
+      "蔡晓芳",
+      "黄美新",
+      "胡述良",
+      "萧月英",
+      "蔡立义",
+      "林瑞平",
+      "张秀兰",
+    ],
+  },
+  { amount: "一百元", peoples: ["林春英", "黄友和", "象棋公会", "永平歌友会"] },
+]);
+
+const serviceDonations = ref<{ name: string; item: string; amount: number }[]>([
+  { name: "美珠", item: "报效地砖", amount: 25000 },
+  { name: "刘文兴", item: "报效漆料", amount: 3000 },
+  { name: "何世荣", item: "报效画作", amount: 3000 },
+  { name: "余云志律师", item: "报效律师费", amount: 2170 },
+]);
+</script>
+
+<style></style>

app/pages/join-us/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, reactive, computed, defineComponent, h } from 'vue';
-import { Icon } from '@iconify/vue';
+import { ref, reactive, computed, defineComponent, h } from "vue";
+import { Icon } from "@iconify/vue";
 import { vMaska } from "maska/vue";
 
 // Reka primitive parts we actually need
@@ -11,7 +11,7 @@ import {
   RadioGroupRoot,
   RadioGroupItem,
   RadioGroupIndicator,
-} from 'reka-ui';
+} from "reka-ui";
 
 /**
  * Local lightweight FormField wrapper:
@@ -19,7 +19,7 @@ import {
  * - renders: <Label for="..."> + slot(default) + error paragraph
  */
 const FormField = defineComponent({
-  name: 'FormField',
+  name: "FormField",
   props: {
     label: { type: String, required: false },
     error: { type: String, required: false },
@@ -28,13 +28,13 @@ const FormField = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        'div',
-        { class: 'grid gap-2' },
+        "div",
+        { class: "grid gap-2" },
         [
           props.label ? h(Label, { for: props.for }, () => props.label) : null,
           slots.default ? slots.default() : null,
           props.error
-            ? h('p', { class: 'text-sm text-red-600 mt-1' }, () => props.error)
+            ? h("p", { class: "text-sm text-red-600 mt-1" }, () => props.error)
             : null,
         ].filter(Boolean)
       );
@@ -45,30 +45,30 @@ const FormField = defineComponent({
 const currentYear = new Date().getFullYear();
 
 const form = reactive({
-  chineseName: '',
-  englishName: '',
-  ic: '',
-  email: '',
-  phone: '',
+  chineseName: "",
+  englishName: "",
+  ic: "",
+  email: "",
+  phone: "",
   gradYear: null as number | null,
   unknownGradYear: false,
-  educationLevel: '',
-  maritalStatus: '',
-  country: '',
-  address: '',
+  educationLevel: "",
+  maritalStatus: "",
+  country: "",
+  address: "",
 });
 
 const errors = reactive<Record<string, string>>({});
 
 const toUpperCaseEnglish = () => {
-  form.englishName = (form.englishName || '').toUpperCase();
+  form.englishName = (form.englishName || "").toUpperCase();
 };
 
 const graduationBatch = computed(() => {
   if (form.gradYear) {
-    if (form.educationLevel === '高中毕业') {
+    if (form.educationLevel === "高中毕业") {
       return form.gradYear - 1965;
-    } else if (form.educationLevel === '初中毕业') {
+    } else if (form.educationLevel === "初中毕业") {
       return form.gradYear - 1958;
     }
   }
@@ -76,25 +76,28 @@ const graduationBatch = computed(() => {
 });
 
 const validate = () => {
-  errors.chineseName = !form.chineseName ? '请输入中文姓名' : '';
-  errors.englishName = !form.englishName ? '请输入英文姓名' : '';
-  errors.ic = /^\d{6}-\d{2}-\d{4}$/.test(form.ic) ? '' : '格式应为 000000-00-0000';
+  errors.chineseName = !form.chineseName ? "请输入中文姓名" : "";
+  errors.englishName = !form.englishName ? "请输入英文姓名" : "";
+  errors.ic = /^\d{6}-\d{2}-\d{4}$/.test(form.ic)
+    ? ""
+    : "格式应为 000000-00-0000";
   errors.email =
-    (!form.email && form.country !== '马来西亚')
-      ? '国外居住必须填写电邮'
+    !form.email && form.country !== "马来西亚"
+      ? "国外居住必须填写电邮"
       : form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)
-      ? '请输入有效的电邮地址'
-      : '';
+        ? "请输入有效的电邮地址"
+        : "";
   errors.phone =
-    !/^01\d{1}-\d{7,8}$/.test(form.phone) && !/^\+\d{1,3}\s?\d+$/.test(form.phone)
-      ? '请输入马来西亚号 (01x-xxxxxxx) 或带区号的号码'
-      : '';
-  errors.educationLevel = !form.educationLevel ? '请选择毕业层次' : '';
+    !/^01\d{1}-\d{7,8}$/.test(form.phone) &&
+    !/^\+\d{1,3}\s?\d+$/.test(form.phone)
+      ? "请输入马来西亚号 (01x-xxxxxxx) 或带区号的号码"
+      : "";
+  errors.educationLevel = !form.educationLevel ? "请选择毕业层次" : "";
   errors.gradYear =
-    !form.unknownGradYear && !form.gradYear ? '请输入毕业年份或勾选“不详”' : '';
-  errors.maritalStatus = !form.maritalStatus ? '请选择婚姻状态' : '';
-  errors.country = !form.country ? '请选择国家' : '';
-  errors.address = !form.address ? '请输入详细地址' : '';
+    !form.unknownGradYear && !form.gradYear ? "请输入毕业年份或勾选“不详”" : "";
+  errors.maritalStatus = !form.maritalStatus ? "请选择婚姻状态" : "";
+  errors.country = !form.country ? "请选择国家" : "";
+  errors.address = !form.address ? "请输入详细地址" : "";
 
   return Object.values(errors).every((e) => !e);
 };
@@ -102,204 +105,254 @@ const validate = () => {
 const handleSubmit = () => {
   if (validate()) {
     // 如果你已在根组件挂载 Reka 的 ToastProvider + useToast，可替换下面 alert 的实现（见备注）
-    alert('提交成功！理事会将尽快联系您。');
+    alert("提交成功！理事会将尽快联系您。");
   } else {
-    alert('请完善表单信息');
+    alert("请完善表单信息");
   }
 };
 </script>
 
 <template>
-  <div class="cursor-not-allowed fixed flex items-center justify-center min-h-screen min-w-screen bg-black opacity-50">
-    <p class="text-white text-2xl">此功能尚未开放，敬请期待。谢谢</p>
-  </div>
-  <div class="min-h-screen bg-primary py-10">
-    <div class="max-w-3xl mx-auto p-8 bg-white rounded-2xl shadow-lg">
-      <h1 class="text-3xl font-bold mb-6 text-center text-secondary">
-        永平中学校友会入会申请表
-      </h1>
+  <UPage class="bg-primary">
+    <div
+      class="cursor-not-allowed fixed flex items-center justify-center min-h-screen min-w-screen bg-black opacity-50"
+    >
+      <p class="text-white text-2xl">此功能尚未开放，敬请期待。谢谢</p>
+    </div>
+    <UPageBody>
+      <div class="max-w-3xl mx-auto p-8 bg-white rounded-2xl shadow-lg">
+        <h1 class="text-3xl font-bold mb-6 text-center text-secondary">
+          永平中学校友会入会申请表
+        </h1>
 
-      <p class="text-sm text-gray-600 my-6 text-center leading-relaxed">
-        兹申请加入成为永平中学校友会会员，愿遵守会规及议决案，并填此表为据。<br />
-        入会费 <span class="font-bold text-secondary">RM60 / 年</span>。<br />
-        填写此表格之后，会有理事联系您协商入会费事宜。
-      </p>
+        <p class="text-sm text-gray-600 my-6 text-center leading-relaxed">
+          兹申请加入成为永平中学校友会会员，愿遵守会规及议决案，并填此表为据。<br />
+          入会费 <span class="font-bold text-secondary">RM60 / 年</span>。<br />
+          填写此表格之后，会有理事联系您协商入会费事宜。
+        </p>
 
-      <form @submit.prevent="handleSubmit" class="space-y-6">
-        <!-- 中文姓名 -->
-        <FormField label="中文姓名" :error="errors.chineseName" for="chineseName">
-          <input
-            id="chineseName"
-            v-model="form.chineseName"
-            class="w-full border rounded px-3 py-2"
-            placeholder="请输入中文姓名"
-          />
-        </FormField>
-
-        <!-- 英文姓名 -->
-        <FormField label="英文姓名" :error="errors.englishName" for="englishName">
-          <input
-            id="englishName"
-            v-model="form.englishName"
-            @input="toUpperCaseEnglish"
-            class="w-full border rounded px-3 py-2"
-            placeholder="请输入英文姓名"
-          />
-        </FormField>
-
-        <!-- IC -->
-        <FormField label="IC" :error="errors.ic" for="ic">
-          <input
-            id="ic"
-            v-model="form.ic"
-            class="w-full border rounded px-3 py-2"
-            placeholder="000000-00-0000"
-            v-maska="'######-##-####'"
-          />
-        </FormField>
-
-        <!-- 电邮 -->
-        <FormField label="电邮" :error="errors.email" for="email">
-          <input
-            id="email"
-            v-model="form.email"
-            class="w-full border rounded px-3 py-2"
-            placeholder="选填 / 国外必填"
-          />
-        </FormField>
-
-        <!-- 电话 -->
-        <FormField label="电话" :error="errors.phone" for="phone">
-          <input
-            id="phone"
-            v-model="form.phone"
-            class="w-full border rounded px-3 py-2"
-            placeholder="请输入电话（WhatsApp 号码为佳）"
-          />
-        </FormField>
-
-        <!-- 毕业层次 (使用 Reka Radio primitives) -->
-        <FormField label="毕业层次" :error="errors.educationLevel" for="educationLevel">
-          <RadioGroupRoot
-            v-model="form.educationLevel"
-            class="flex flex-col gap-2"
-            name="educationLevel"
+        <form @submit.prevent="handleSubmit" class="space-y-6">
+          <!-- 中文姓名 -->
+          <FormField
+            label="中文姓名"
+            :error="errors.chineseName"
+            for="chineseName"
           >
-            <RadioGroupItem value="初中毕业" class="flex items-center gap-3">
-              <RadioGroupIndicator class="w-4 h-4 rounded-full border flex items-center justify-center">
-                <span class="block w-2 h-2 rounded-full bg-secondary" />
-              </RadioGroupIndicator>
-              <span>初中毕业</span>
-            </RadioGroupItem>
-
-            <RadioGroupItem value="高中毕业" class="flex items-center gap-3">
-              <RadioGroupIndicator class="w-4 h-4 rounded-full border flex items-center justify-center">
-                <span class="block w-2 h-2 rounded-full bg-secondary" />
-              </RadioGroupIndicator>
-              <span>高中毕业</span>
-            </RadioGroupItem>
-
-            <RadioGroupItem value="辍学/转学肄业" class="flex items-center gap-3">
-              <RadioGroupIndicator class="w-4 h-4 rounded-full border flex items-center justify-center">
-                <span class="block w-2 h-2 rounded-full bg-secondary" />
-              </RadioGroupIndicator>
-              <span>辍学/转学肄业</span>
-            </RadioGroupItem>
-
-            <RadioGroupItem value="不确定" class="flex items-center gap-3">
-              <RadioGroupIndicator class="w-4 h-4 rounded-full border flex items-center justify-center">
-                <span class="block w-2 h-2 rounded-full bg-secondary" />
-              </RadioGroupIndicator>
-              <span>不确定</span>
-            </RadioGroupItem>
-          </RadioGroupRoot>
-        </FormField>
-
-        <!-- 毕业年份 -->
-        <FormField label="毕业年份" :error="errors.gradYear" for="gradYear">
-          <div class="flex items-center gap-3">
             <input
-              id="gradYear"
-              type="number"
-              v-model="form.gradYear"
-              :min="1957"
-              :max="currentYear"
-              :disabled="form.unknownGradYear"
-              class="w-32 border rounded px-3 py-2"
+              id="chineseName"
+              v-model="form.chineseName"
+              class="w-full border rounded px-3 py-2"
+              placeholder="请输入中文姓名"
             />
-            <label class="flex items-center gap-2 select-none">
-              <CheckboxRoot v-model="form.unknownGradYear" class="w-5 h-5 rounded border flex items-center justify-center">
-                <CheckboxIndicator class="flex items-center justify-center w-full h-full">
-                  <Icon icon="radix-icons:check" class="h-4 w-4 text-secondary" />
-                </CheckboxIndicator>
-              </CheckboxRoot>
-              <span>毕业年份不详</span>
-            </label>
+          </FormField>
 
-            <span class="text-sm text-gray-500" v-if="graduationBatch">
-              您是第 <span class="font-bold">{{ graduationBatch }}</span> 届毕业生
-            </span>
-          </div>
-        </FormField>
+          <!-- 英文姓名 -->
+          <FormField
+            label="英文姓名"
+            :error="errors.englishName"
+            for="englishName"
+          >
+            <input
+              id="englishName"
+              v-model="form.englishName"
+              @input="toUpperCaseEnglish"
+              class="w-full border rounded px-3 py-2"
+              placeholder="请输入英文姓名"
+            />
+          </FormField>
 
-        <!-- 婚姻状态 -->
-        <FormField label="婚姻状态" :error="errors.maritalStatus" for="maritalStatus">
-          <div class="flex flex-col gap-2">
-            <RadioGroupRoot v-model="form.maritalStatus" name="maritalStatus">
-              <RadioGroupItem value="未婚" class="flex items-center gap-3">
-                <RadioGroupIndicator class="w-4 h-4 rounded-full border flex items-center justify-center">
+          <!-- IC -->
+          <FormField label="IC" :error="errors.ic" for="ic">
+            <input
+              id="ic"
+              v-model="form.ic"
+              class="w-full border rounded px-3 py-2"
+              placeholder="000000-00-0000"
+              v-maska="'######-##-####'"
+            />
+          </FormField>
+
+          <!-- 电邮 -->
+          <FormField label="电邮" :error="errors.email" for="email">
+            <input
+              id="email"
+              v-model="form.email"
+              class="w-full border rounded px-3 py-2"
+              placeholder="选填 / 国外必填"
+            />
+          </FormField>
+
+          <!-- 电话 -->
+          <FormField label="电话" :error="errors.phone" for="phone">
+            <input
+              id="phone"
+              v-model="form.phone"
+              class="w-full border rounded px-3 py-2"
+              placeholder="请输入电话（WhatsApp 号码为佳）"
+            />
+          </FormField>
+
+          <!-- 毕业层次 (使用 Reka Radio primitives) -->
+          <FormField
+            label="毕业层次"
+            :error="errors.educationLevel"
+            for="educationLevel"
+          >
+            <RadioGroupRoot
+              v-model="form.educationLevel"
+              class="flex flex-col gap-2"
+              name="educationLevel"
+            >
+              <RadioGroupItem value="初中毕业" class="flex items-center gap-3">
+                <RadioGroupIndicator
+                  class="w-4 h-4 rounded-full border flex items-center justify-center"
+                >
                   <span class="block w-2 h-2 rounded-full bg-secondary" />
                 </RadioGroupIndicator>
-                <span>未婚</span>
+                <span>初中毕业</span>
               </RadioGroupItem>
-              <RadioGroupItem value="已婚" class="flex items-center gap-3">
-                <RadioGroupIndicator class="w-4 h-4 rounded-full border flex items-center justify-center">
+
+              <RadioGroupItem value="高中毕业" class="flex items-center gap-3">
+                <RadioGroupIndicator
+                  class="w-4 h-4 rounded-full border flex items-center justify-center"
+                >
                   <span class="block w-2 h-2 rounded-full bg-secondary" />
                 </RadioGroupIndicator>
-                <span>已婚</span>
+                <span>高中毕业</span>
               </RadioGroupItem>
-              <RadioGroupItem value="其他" class="flex items-center gap-3">
-                <RadioGroupIndicator class="w-4 h-4 rounded-full border flex items-center justify-center">
+
+              <RadioGroupItem
+                value="辍学/转学肄业"
+                class="flex items-center gap-3"
+              >
+                <RadioGroupIndicator
+                  class="w-4 h-4 rounded-full border flex items-center justify-center"
+                >
                   <span class="block w-2 h-2 rounded-full bg-secondary" />
                 </RadioGroupIndicator>
-                <span>其他</span>
+                <span>辍学/转学肄业</span>
+              </RadioGroupItem>
+
+              <RadioGroupItem value="不确定" class="flex items-center gap-3">
+                <RadioGroupIndicator
+                  class="w-4 h-4 rounded-full border flex items-center justify-center"
+                >
+                  <span class="block w-2 h-2 rounded-full bg-secondary" />
+                </RadioGroupIndicator>
+                <span>不确定</span>
               </RadioGroupItem>
             </RadioGroupRoot>
-          </div>
-        </FormField>
+          </FormField>
 
-        <!-- 国家（原生 select，简单且稳定） -->
-        <FormField label="国家" :error="errors.country" for="country">
-          <select id="country" v-model="form.country" class="w-full border rounded px-3 py-2">
-            <option value="" disabled>请选择国家</option>
-            <option>马来西亚</option>
-            <option>新加坡</option>
-            <option>中国</option>
-            <option>美国</option>
-            <option>其他</option>
-          </select>
-        </FormField>
+          <!-- 毕业年份 -->
+          <FormField label="毕业年份" :error="errors.gradYear" for="gradYear">
+            <div class="flex items-center gap-3">
+              <input
+                id="gradYear"
+                type="number"
+                v-model="form.gradYear"
+                :min="1957"
+                :max="currentYear"
+                :disabled="form.unknownGradYear"
+                class="w-32 border rounded px-3 py-2"
+              />
+              <label class="flex items-center gap-2 select-none">
+                <CheckboxRoot
+                  v-model="form.unknownGradYear"
+                  class="w-5 h-5 rounded border flex items-center justify-center"
+                >
+                  <CheckboxIndicator
+                    class="flex items-center justify-center w-full h-full"
+                  >
+                    <Icon
+                      icon="radix-icons:check"
+                      class="h-4 w-4 text-secondary"
+                    />
+                  </CheckboxIndicator>
+                </CheckboxRoot>
+                <span>毕业年份不详</span>
+              </label>
 
-        <!-- 详细地址 -->
-        <FormField label="详细地址" :error="errors.address" for="address">
-          <textarea
-            id="address"
-            v-model="form.address"
-            class="w-full border rounded px-3 py-2"
-            placeholder="请输入现居详细地址"
-            rows="4"
-          />
-        </FormField>
+              <span class="text-sm text-gray-500" v-if="graduationBatch">
+                您是第
+                <span class="font-bold">{{ graduationBatch }}</span> 届毕业生
+              </span>
+            </div>
+          </FormField>
 
-        <div class="text-center mt-8">
-          <button
-            type="submit"
-            class="bg-secondary text-white font-bold px-8 py-2 rounded-xl shadow hover:scale-105 transition"
+          <!-- 婚姻状态 -->
+          <FormField
+            label="婚姻状态"
+            :error="errors.maritalStatus"
+            for="maritalStatus"
           >
-            提交申请
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
+            <div class="flex flex-col gap-2">
+              <RadioGroupRoot v-model="form.maritalStatus" name="maritalStatus">
+                <RadioGroupItem value="未婚" class="flex items-center gap-3">
+                  <RadioGroupIndicator
+                    class="w-4 h-4 rounded-full border flex items-center justify-center"
+                  >
+                    <span class="block w-2 h-2 rounded-full bg-secondary" />
+                  </RadioGroupIndicator>
+                  <span>未婚</span>
+                </RadioGroupItem>
+                <RadioGroupItem value="已婚" class="flex items-center gap-3">
+                  <RadioGroupIndicator
+                    class="w-4 h-4 rounded-full border flex items-center justify-center"
+                  >
+                    <span class="block w-2 h-2 rounded-full bg-secondary" />
+                  </RadioGroupIndicator>
+                  <span>已婚</span>
+                </RadioGroupItem>
+                <RadioGroupItem value="其他" class="flex items-center gap-3">
+                  <RadioGroupIndicator
+                    class="w-4 h-4 rounded-full border flex items-center justify-center"
+                  >
+                    <span class="block w-2 h-2 rounded-full bg-secondary" />
+                  </RadioGroupIndicator>
+                  <span>其他</span>
+                </RadioGroupItem>
+              </RadioGroupRoot>
+            </div>
+          </FormField>
+
+          <!-- 国家（原生 select，简单且稳定） -->
+          <FormField label="国家" :error="errors.country" for="country">
+            <select
+              id="country"
+              v-model="form.country"
+              class="w-full border rounded px-3 py-2"
+            >
+              <option value="" disabled>请选择国家</option>
+              <option>马来西亚</option>
+              <option>新加坡</option>
+              <option>中国</option>
+              <option>美国</option>
+              <option>其他</option>
+            </select>
+          </FormField>
+
+          <!-- 详细地址 -->
+          <FormField label="详细地址" :error="errors.address" for="address">
+            <textarea
+              id="address"
+              v-model="form.address"
+              class="w-full border rounded px-3 py-2"
+              placeholder="请输入现居详细地址"
+              rows="4"
+            />
+          </FormField>
+
+          <div class="text-center mt-8">
+            <button
+              type="submit"
+              class="bg-secondary text-white font-bold px-8 py-2 rounded-xl shadow hover:scale-105 transition"
+            >
+              提交申请
+            </button>
+          </div>
+        </form>
+      </div>
+    </UPageBody>
+  </UPage>
 </template>