feat(about): add page for 1956 middle highschool tuition class

This commit introduces a new page dedicated to the 'Middle Highschool Tuition Class' of 1956 (中补班). The page displays a letter written in 2022, calling for a reunion of these special alumni. A navigation
link has been added to the 'About' section for easy access to this historical content.

app/layouts/default.vue

@@ -132,6 +132,13 @@ const items = computed<NavigationMenuItem[]>(() => [
         active: route.path.startsWith("/about/founded-history"),
         icon: "mdi:history",
       },
+      {
+        label: "特殊校友：中补班",
+        description: "永平中学补习班（1956年）：一封迟来的贴文",
+        to: "/about/middle-highschool-tuition-class",
+        active: route.path.startsWith("/about/middle-highschool-tuition-class"),
+        icon: "mdi:mail"
+      }
     ],
   },
   {

app/pages/about/middle-highschool-tuition-class.vue

@@ -0,0 +1,138 @@
+<template>
+  <UPage class="bg-gradient-to-br from-amber-50 to-amber-100 p-8">
+    <UPageHero title="特殊校友" description="中补班 (1956年): 一封迟来的貼文" />
+    <UContainer>
+      <div class="flex justify-center items-center">
+        <div
+          class="relative max-w-2xl paper-texture bg-amber-50 shadow-md border border-amber-200 rounded-xl p-12 font-letter text-gray-800 leading-relaxed handwritten tracking-wide"
+        >
+          <UModal
+            v-model:open="imagePopup"
+            title="中补班乙班合影"
+            description="永平学校中辅乙同学合影 - 一九五六年八月九日"
+            fullscreen
+          >
+            <img
+              src="/about/中补班乙.jpg"
+              alt="中补班乙班"
+              class="sm:absolute sm:-top-25 sm:-right-60 md:right-0 sm:rotate-12 md:w-60 lg:w-80 transition-all cursor-pointer"
+            />
+            <template #body>
+              <img
+                src="/about/中补班乙.jpg"
+                alt="中补班乙班"
+                class="max-w-full max-h-full object-contain mx-auto"
+              />
+            </template>
+          </UModal>
+          <div class="text-xl mb-2 font-bold">致：1956年永中中补班</div>
+          <div class="text-lg mb-6 font-semibold">“诚” “毅”两班老校友：</div>
+
+          <p class="indent-8 mb-4">
+            各位老同学：别来无恙？这句问候的话迟到了六十多年。想当年大家还是青涩年少，六十五年后的今天，如果还健在人间，想必齿危发秃，两鬓斑白，如果早已驾鹤西去，回顾一坯黄土，会否感慨此生：凡是尘土必归于尘土！
+          </p>
+
+          <p class="indent-8 mb-4">
+            但这个迟到的讯息，现在发出，将穿越65年的时间和空间，一定要，也一定会传到你们的心弦，引起共鸣，因为它共同的曲调是永中的校歌：黉舍巍峨著令名，时闻弦诵声。。。
+          </p>
+
+          <p class="indent-8 mb-4">
+            还健在的老同学，请响应这个号召，已经移民的，请魂兮归来，让我们老同学聚在一起，见证和欣赏生命天空最后的夕阳红，莫道桑榆晚，红霞尚满天！
+          </p>
+
+          <p class="indent-8 mb-6">
+            召集人：刘用周　电话：江回潮　电话：马文钦　电话：杨青发　电话：可以再提名
+          </p>
+
+          <p class="text-right mt-8">2022年4月15日</p>
+        </div>
+      </div>
+      <p class="my-4 text-center font-bold">
+        中补班同学名册就記忆如下：马文钦提供
+      </p>
+      <UCard>
+        <div class="space-x-4 space-y-2">
+          <UBadge
+            v-for="name in schoolMates"
+            size="xl"
+            variant="subtle"
+            class="hover:scale-120 transition-all cursor-pointer"
+            >{{ name }}</UBadge
+          >
+        </div>
+      </UCard>
+      <p class="my-4 text-center font-bold">
+        黄绍楠校长，李华光等老师的墨宝赠言，尤为珍贵
+      </p>
+      <UCarousel
+        v-slot="{ item }"
+        :items="giveWords"
+        class="w-full max-w-xs mx-auto"
+        arrows
+        dots
+      >
+        <img :src="item" width="320" height="320" class="rounded-lg" />
+      </UCarousel>
+    </UContainer>
+  </UPage>
+</template>
+
+<script lang="ts" setup>
+useSeoMeta({
+  title: "致中补班的一封信",
+  ogTitle: "致中补班的一封信",
+});
+
+const imagePopup = ref<boolean>(false);
+
+const schoolMates = ref<string[]>([
+  "萧泽金",
+  "黄荣发",
+  "彭海恩",
+  "掦楚玉",
+  "揚楚英",
+  "林进财",
+  "马文钦",
+  "陳玉英",
+  "黄清蘭",
+  "池伟青",
+  "冯金才",
+  "張波香",
+  "陈红金",
+  "黄鳳娇",
+  "戴成雄",
+  "黄光兴",
+  "余新礼",
+  "刘用周",
+  "杨青发",
+  "江回潮",
+]);
+
+const giveWords = ref<string[]>([
+  "/about/黄绍南校长赠言.jpg",
+  "/about/李华光赠言.jpg",
+  "/about/某老师赠言.jpg",
+  "/about/赵老师赠言.jpg",
+]);
+</script>
+
+<style>
+/* @import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Noto+Serif+SC:wght@400;500&family=Zhi+Mang+Xing&display=swap"); */
+/* 自定义字体风格组合 */
+.font-letter {
+  /* font-family: "Zhi Mang Xing", "Great Vibes", "Noto Serif SC", serif; */
+  font-weight: 400;
+}
+/* 添加信纸背景纹理（可换 URL 为你自己的纹理图）*/
+.paper-texture {
+  background-image: radial-gradient(
+    rgba(255, 255, 255, 0.5) 1px,
+    transparent 1px
+  );
+  background-size: 4px 4px;
+}
+/* 微微倾斜文字，模拟手写不规整 */
+.handwritten {
+  transform: rotate(-0.3deg);
+}
+</style>