style(theme): expand color palettes and refine dark mode styles

- Expand CSS variables for primary and secondary colors to include full 50-950 scales in `main.css`. - Update components to reference specific color shades (e.g., `primary-400`, `secondary-200`) instead of generic variables. - Add dark mode background and text colors to Events, Hall of Fame, and Index sections. - Adjust image aspect ratio in the Events component.
chore(assets): migrate local images to remote storage
2025-11-28 17:27:34 +08:00 · 2025-11-28 16:45:30 +08:00 · 2025-11-28 11:54:11 +08:00 · 2025-11-27 23:07:24 +08:00 · 2025-11-27 17:53:42 +08:00 · 2025-11-15 13:25:42 +08:00
45 changed files with 3485 additions and 2571 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,6 @@ logs
 .env.*
 !.env.example

-repomix-output.xml
+repomix-output.xml
+
+content/members/members.csv
--- a/.repomixignore
+++ b/.repomixignore
@@ -0,0 +1,10 @@
+# Add patterns to ignore here, one per line
+# Example:
+# *.log
+# tmp/
+pnpm-workspace.yaml
+public/
+app/assets/
+docs/
+*.md
+countries.ts
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 [Tootaio Studio]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -1,75 +1,229 @@
-# Nuxt Minimal Starter
+# 永平中学校友会官网（YPHS Alumni）

-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+一个基于 Nuxt 4 与 Nuxt Content 打造的内容型网站，面向永平中学校友与社会公众，提供新闻公告、活动预告、名人堂与校友组织介绍等信息。项目内置基础的后台界面脚手架，支持后续扩展会员管理与内容发布流程。

-## Setup
+![Nuxt](https://img.shields.io/badge/Nuxt-4-00DC82?logo=nuxt.js&logoColor=white)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript&logoColor=white)
+![TailwindCSS](https://img.shields.io/badge/TailwindCSS-4.x-06B6D4?logo=tailwindcss&logoColor=white)
+![License](https://img.shields.io/badge/License-MIT-red)

-Make sure to install dependencies:
+- 线上地址：https://yphsalumni.org
+- 技术栈：Nuxt 4（Vue 3 + Nitro）、TypeScript、Tailwind CSS 4、@nuxt/ui、@nuxt/content、@nuxt/image、SEO/Sitemap/Robots 模块

+
+**项目亮点**
+- 内容优先：使用 Markdown + 前置属性（Frontmatter）管理新闻、活动、名人堂。
+- 现代 UI：采用 @nuxt/ui + Tailwind CSS 4，内置响应式导航与主题样式。
+- SEO 友好：内置 @nuxtjs/seo、@nuxtjs/sitemap、@nuxtjs/robots 与合理的默认 `<head>` 元信息。
+- 可扩展的后台：提供基础的「仪表盘 / 内容列表 / 模态编辑器」结构，便于后续对接真实后端。
+- 零后端即可上线：作为纯内容站点可静态导出部署，也可运行 SSR 部署。
+
+
+## 目录结构
+
+关键目录说明：
+
+- `app/`
+  - `pages/` 路由页面（首页、新闻、活动、名人堂、关于、入会申请、后台等）
+  - `layouts/` 页面布局（`default`、`admin-dashboard`）
+  - `components/` 组件（首页模块、后台弹窗、输入组件等）
+  - `assets/css/` 样式（Tailwind 入口与 Markdown 样式）
+  - `composables/` 可复用逻辑（日期格式化、国家数据等）
+  - `data/` 静态数据（如国家拨号表）
+- `content/` Markdown 内容（`news/`、`events/`、`hall-of-fames/`）
+- `content.config.ts` 内容集合与字段 Schema 定义
+- `public/` 公开静态资源（Logo、封面图、音频、图片等）
+- `nuxt.config.ts` Nuxt 主配置（模块、SEO、站点信息等）
+- `docs/` 产品与信息架构文档
+
+
+## 功能概览
+
+- 首页：英雄区 + 最新新闻 + 活动卡片 + 名人堂预览 + 捐赠占位模块
+- 新闻：列表与详情（Markdown 渲染，支持封面、标签、SEO 字段）
+- 活动：列表与详情（日期/地点/封面，支持嵌入媒体）
+- 名人堂：人物详情 + 图集 + 外链视频/媒体嵌入
+- 关于页面：会徽含义、校歌音频等
+- 入会申请：UI 表单（当前为占位，未连通后端）
+- 后台（占位）：仪表盘、会员籍管理（示例数据）、新闻/活动/名人堂入口与新建弹窗（`md-editor-v3`）
+
+
+## 环境要求
+
+- Node.js ≥ 18.20 或 20.x（推荐 20 LTS）
+- 包管理器：pnpm（推荐）/ npm / yarn / bun
+
+启用 pnpm（建议）：
 ```bash
-# npm
-npm install
+corepack enable
+corepack prepare pnpm@latest --activate
+```

-# pnpm
+
+## 本地开发
+
+安装依赖：
+```bash
 pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```

-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
+启动开发服务器（默认 http://localhost:3000）：
 ```bash
-# npm
-npm run dev
-
-# pnpm
 pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```

-## Production

-Build the application for production:
+## 构建与预览

+SSR 构建与本地预览：
 ```bash
-# npm
-npm run build
-
-# pnpm
 pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
 pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
 ```

-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+静态导出（适合静态站部署，如 Netlify/Cloudflare Pages/Nginx 静态目录）：
+```bash
+pnpm generate
+# 产物在 .output/public （仓库中有 dist -> .output/public 的软链）
+```
+
+
+## 部署指引
+
+- 静态托管：执行 `pnpm generate` 后，将 `.output/public`（或 `dist` 软链）上传到任意静态空间（如 Cloudflare Pages、Netlify、GitHub Pages、Nginx 静态目录）。
+- Node SSR：执行 `pnpm build` 后，以 Node 方式运行 `.output/server/index.mjs`，或使用平台的 Nuxt 运行时适配（Vercel/Netlify Functions/自托管 Node）。
+- SEO：请在 `nuxt.config.ts` 的 `site.url` 与 `app.head` 中更新为你自己的域名与元信息。
+
+
+## 内容写作与数据结构
+
+项目使用 `@nuxt/content` 管理内容，字段规则见 `content.config.ts`。在对应目录新增 Markdown 文件即可出现在站点中。
+
+示例：新闻（`content/news/20251001-official-web-launch.md`）
+```md
+---
+title: "永中校友会官网正式上线"
+date: "2025-10-01"
+updated: "2025-10-01"
+author: "作者名"
+description: "用于列表摘要与 SEO 的简短说明"
+cover: "/news/20251001-official-web-launch/Screenshot.png"
+tags: ["活动", "公告"]
+category: "通知"
+highlight: true
+seoTitle: "SEO 标题"
+seoDescription: "SEO 描述"
+ogImage: "/images/og/news-launch.jpg"
+---
+
+正文使用 Markdown 书写，支持图片、表格、引用与 HTML 块。
+```
+
+示例：活动（`content/events/20250927-return-to-school.md`）
+```md
+---
+title: "活动标题"
+subtitle: "活动副标题"
+date: "2025-09-27"
+location: "地点名称"
+cover: "/events/20250927-return-to-school/event-photo-1.jpg"
+---
+
+活动详情正文...
+```
+
+示例：名人堂（`content/hall-of-fames/he-si-rong.md`）
+```md
+---
+name: "人物姓名"
+photo: "/hall-of-fame/he-si-rong/人物头像.png"
+title: "人物头衔"
+description: "简短介绍"
+gallery:
+  [
+    "/hall-of-fame/he-si-rong/图1.webp",
+    "/hall-of-fame/he-si-rong/图2.webp"
+  ]
+---
+
+正文可包含媒体嵌入。
+```
+
+
+## 定制与配置
+
+- 站点信息与 SEO：`nuxt.config.ts`
+  - `app.head.titleTemplate` 与默认 `title`
+  - Meta、OG、Twitter 卡片默认值
+  - `site.url`（用于站点地图与 SEO）
+- 导航与页脚：`app/layouts/default.vue`
+- 样式与主题色：`app/assets/css/main.css`（Tailwind v4 与自定义 CSS 变量）
+- Markdown 渲染样式：`app/assets/css/markdown.css`
+- 首页区块：`app/components/index/*.vue`
+- TikTok 嵌入组件：`app/components/TikTokEmbed.vue`
+- 后台布局与侧边导航：`app/layouts/admin-dashboard.vue`、`app/composables/useDashboardSidebarLinks.ts`
+- 分析脚本：`public/analytics.js`（默认使用 Umami，若不需要可在 `nuxt.config.ts` 中移除 `<script src="/analytics.js">` 注入）
+
+
+## 后台与数据（现状）
+
+- 后台页面为 UI 脚手架，方便未来接入真实后端（当前示例页使用占位数据或仅展示结构）。
+- 成员管理页使用示例 API（`jsonplaceholder`）占位，待替换为校友会实际后端服务。
+- 入会申请页面为 UI 表单与校验演示，暂未接入存储与流程（页面顶部已加“功能未开放”提示遮罩）。
+
+若需接入真实后端，建议：
+- 认证与权限：OAuth/JWT + 角色权限
+- 数据库存储：PostgreSQL / MySQL；缓存：Redis
+- 内容发布：保留 Markdown/Content 模式，或引入 Headless CMS（如 Strapi/Directus）
+
+
+## 开发者指南
+
+- 代码风格：TypeScript + Nuxt 约定式目录；组件与页面尽量保持职责单一
+- 内容 schema：若新增内容类型，请在 `content.config.ts` 中定义并校验字段
+- 资源放置：公共图片/音频/图标放在 `public/`，内容相关配图走 `public/{模块}/...`
+- 性能与无障碍：优先图片懒加载、合理的语义化标签与可访问性属性
+
+
+## 路线图（Roadmap）
+
+- [ ] 入会申请流程与后台审核对接
+- [ ] 后台：内容 CRUD（新闻/活动/名人堂）与草稿/发布流
+- [ ] 捐赠模块与支付对接
+- [ ] 多语言与国际化（i18n）
+- [ ] 校友企业/招聘板块
+- [ ] 活动报名、签到与相册
+
+
+## 贡献指南
+
+欢迎 Issue 与 PR：
+1) Fork 本仓库并新建分支
+2) 本地开发与验证（`pnpm dev`）
+3) 提交 PR 并说明修改动机与影响范围
+
+内容贡献：
+- 新增/修改 Markdown 请遵循 `content.config.ts` 中的 schema 字段
+- 提交前请自查封面路径与日期格式是否规范
+
+
+## 安全与隐私
+
+- 如发现安全问题，请通过电子邮件私下报告给维护者，并避免公开披露（可在此处填写邮箱或表单链接）。
+- 分析脚本（Umami）可选启用，默认文件位于 `public/analytics.js`，请替换为你自己的域名与 `website-id`，或移除注入脚本。
+
+
+## 许可证
+
+本项目计划以开源方式发布。建议选择并添加合适的开源许可证（如 MIT、Apache-2.0）。
+- 若你决定使用 MIT：请在仓库根目录新增 `LICENSE` 文件并写明 MIT 许可条款。
+- 在未选择明确许可证前，请勿对外分发未授权的二进制或闭源衍生物。
+
+
+## 致谢
+
+- 设计与技术支持：Tootaio Studio
+- 内容与资料：永平中学校友会
+- 技术框架与生态：Nuxt 团队与社区、@nuxt/ui、Tailwind CSS
+
+—— 连接校友 · 传承精神 ——
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1,9 +1,36 @@
-@import "./markdown.css";
+/* @import "./markdown.css"; */

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --color-primary: #fb9e3a;
+  --color-primary-50: #fff8f0;
+  --color-primary-100: #feecd8;
+  --color-primary-200: #fdd4ab;
+  --color-primary-300: #fbb674;
+  --color-primary-400: #fb9e3a;
+  --color-primary-500: #f9840a;
+  --color-primary-600: #dd6b06;
+  --color-primary-700: #b74f07;
+  --color-primary-800: #943e0d;
+  --color-primary-900: #7a340e;
+  --color-primary-950: #461902;
+
  --color-secondary: #fcef91;
+  --color-secondary-50: #fffeea;
+  --color-secondary-100: #fffbc5;
+  --color-secondary-200: #fcef91;
+  --color-secondary-300: #f9df53;
+  --color-secondary-400: #f6ca24;
+  --color-secondary-500: #e6b010;
+  --color-secondary-600: #c6880a;
+  --color-secondary-700: #9e610c;
+  --color-secondary-800: #834d12;
+  --color-secondary-900: #6f3f15;
+  --color-secondary-950: #412008;
+}
+
+.dark {
+  --color-gray-800: oklch(85% 0 275);
 }
--- a/app/assets/css/markdown.css
+++ b/app/assets/css/markdown.css
@@ -1,565 +0,0 @@
-/* markdown.css
-   默认：明亮 / 白色背景主题
-   同时提供：.dark .prose 覆盖（如需启用 class-based dark 模式）
-   依赖：全局定义的 CSS 变量 --color-primary 和 --color-secondary
-*/
-
-/* 平滑滚动 */
-html {
-  scroll-behavior: smooth;
-}
-
-/* ---------- 默认：明亮主题（Light） ---------- */
-
-/* 美化 prose 内容样式 */
-.prose {
-  @apply text-gray-800 leading-relaxed;
-  font-feature-settings:
-    "kern" 1,
-    "liga" 1;
-  color: inherit;
-}
-
-/* 标题层级 */
-.prose h1 {
-  @apply text-4xl font-bold mt-8 mb-6 pb-4 border-b border-gray-200;
-  background-image: linear-gradient(
-    90deg,
-    var(--color-primary),
-    var(--color-secondary)
-  );
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-  background-size: 200% 200%;
-  animation: gradientShift 3s ease infinite;
-}
-
-.prose h2 {
-  @apply text-3xl font-bold text-gray-900 mt-10 mb-5 pb-3 border-b border-gray-200 relative;
-}
-
-.prose h2::before {
-  content: "";
-  @apply absolute bottom-0 left-0 w-12 h-0.5 rounded-full;
-  background-image: linear-gradient(
-    90deg,
-    var(--color-primary),
-    var(--color-secondary)
-  );
-}
-
-.prose h3 {
-  @apply text-2xl font-semibold text-gray-800 mt-8 mb-4;
-  color: rgba(31, 41, 55, 0.95);
-}
-
-.prose h4 {
-  @apply text-xl font-semibold text-gray-700 mt-7 mb-3;
-}
-
-.prose h5 {
-  @apply text-lg font-medium text-gray-700 mt-6 mb-3;
-}
-
-.prose h6 {
-  @apply text-base font-medium text-gray-600 mt-5 mb-2 italic;
-}
-
-/* 段落和文本 */
-.prose p {
-  @apply text-gray-700 leading-relaxed mb-5;
-  text-align: justify;
-}
-
-.prose strong {
-  @apply font-bold px-1 rounded;
-  background: linear-gradient(
-    90deg,
-    rgba(252, 239, 145, 0.22),
-    rgba(251, 158, 58, 0.12)
-  );
-  color: rgba(31, 41, 55, 0.95);
-}
-
-.prose em {
-  @apply italic px-1 rounded;
-  color: var(--color-secondary);
-  background: rgba(251, 158, 58, 0.08);
-}
-
-.prose del {
-  @apply line-through px-1 rounded;
-  color: #ef4444;
-  background: rgba(239, 68, 68, 0.06);
-}
-
-/* 链接 */
-.prose a {
-  @apply font-medium relative transition-all duration-300;
-  color: var(--color-secondary);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.prose a:hover {
-  color: var(--color-primary);
-  transform: translateY(1px);
-}
-
-.prose a::after {
-  content: "";
-  @apply absolute bottom-0 left-0 w-0 h-0.5 transition-all duration-300;
-  background: linear-gradient(
-    90deg,
-    var(--color-primary),
-    var(--color-secondary)
-  );
-}
-
-.prose a:hover::after {
-  @apply w-full;
-}
-
-/* 外部链接图标 */
-.prose a[href^="http"]::before {
-  content: "↗";
-  @apply inline-block mr-1 text-xs translate-y-[2px] opacity-70;
-}
-
-.prose h1 a,
-.prose h2 a,
-.prose h3 a,
-.prose h4 a,
-.prose h5 a,
-.prose h6 a {
-  text-decoration: none;
-}
-
-/* 列表 */
-.prose ul {
-  @apply list-none space-y-3 mb-6;
-}
-
-.prose ul li {
-  @apply relative pl-6;
-}
-
-.prose ul li::before {
-  content: "";
-  @apply absolute left-0 top-3 w-1.5 h-1.5 rounded-full;
-  background: var(--color-secondary);
-}
-
-.prose ol {
-  @apply list-decimal list-inside space-y-3 mb-6;
-  counter-reset: list-counter;
-}
-
-.prose ol li {
-  @apply relative pl-8;
-  counter-increment: list-counter;
-}
-
-.prose ol li::before {
-  content: counter(list-counter);
-  @apply absolute left-0 top-0 w-6 h-6 text-white text-xs rounded-full flex items-center justify-center font-bold;
-  background-image: linear-gradient(
-    135deg,
-    var(--color-primary),
-    var(--color-secondary)
-  );
-}
-
-/* 代码块（浅色风格） */
-.prose pre {
-  @apply rounded-xl p-6 my-8 border shadow-sm overflow-x-auto;
-  border: 1px solid rgba(229, 231, 235, 1); /* gray-200 */
-  background: linear-gradient(180deg, #ffffff, #f8fafc);
-  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
-  backdrop-filter: blur(6px);
-}
-
-.prose code {
-  @apply px-2 py-1 rounded text-sm font-mono;
-  background: rgba(243, 244, 246, 0.8); /* gray-50-ish */
-  border: 1px solid rgba(229, 231, 235, 1);
-  color: #0f172a;
-}
-
-.prose pre code {
-  @apply bg-transparent p-0 text-current border-none;
-  color: #0f172a;
-}
-
-/* 引用块（浅色友好） */
-.prose blockquote {
-  @apply pl-6 italic text-gray-700 my-8 py-4 pr-6 rounded-r-xl relative overflow-hidden;
-  border-left: 4px solid transparent;
-  border-image: linear-gradient(
-      to bottom,
-      rgba(252, 239, 145, 0.9),
-      rgba(251, 158, 58, 0.9)
-    )
-    1;
-  background: linear-gradient(
-    90deg,
-    rgba(252, 239, 145, 0.06),
-    rgba(255, 255, 255, 0)
-  );
-}
-
-.prose blockquote::before {
-  content: '"';
-  @apply absolute -top-4 -left-2 text-6xl opacity-20 font-serif;
-  color: var(--color-primary);
-}
-
-.prose blockquote p {
-  @apply mb-3 last:mb-0 relative z-10;
-}
-
-/* 图片 */
-.prose img {
-  @apply rounded-2xl my-8 mx-auto transition-all duration-500 border-2;
-  border-color: rgba(226, 232, 240, 0.6); /* gray-200 */
-  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
-}
-
-.prose img:hover {
-  @apply scale-[1.02];
-  border-color: var(--color-secondary);
-}
-
-.prose figure {
-  @apply my-8 text-center;
-}
-
-.prose figcaption {
-  @apply text-sm text-gray-500 mt-3 italic;
-}
-
-/* 表格 */
-.prose table {
-  @apply w-full border-collapse my-8 text-sm rounded-xl overflow-hidden shadow-sm;
-}
-
-.prose thead {
-  background-image: linear-gradient(
-    90deg,
-    rgba(252, 239, 145, 0.18),
-    rgba(251, 158, 58, 0.12)
-  );
-}
-
-.prose th {
-  @apply border px-6 py-4 text-left font-bold text-gray-800 text-sm uppercase tracking-wider;
-  border-color: rgba(226, 232, 240, 0.6);
-  background: rgba(250, 250, 250, 0.8);
-}
-
-.prose td {
-  @apply border px-6 py-4 text-gray-700;
-  border-color: rgba(226, 232, 240, 0.4);
-}
-
-.prose tr:nth-child(even) {
-  @apply bg-gray-50;
-}
-
-.prose tr:hover {
-  background: rgba(251, 158, 58, 0.06);
-  transition: background 0.2s;
-}
-
-/* 分割线 */
-.prose hr {
-  @apply border-gray-200 my-12 relative;
-}
-
-.prose hr::before {
-  content: "";
-  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full opacity-20;
-  background-image: linear-gradient(
-    90deg,
-    var(--color-primary),
-    var(--color-secondary)
-  );
-}
-
-/* 任务列表（checkbox） */
-.prose input[type="checkbox"] {
-  @apply mr-3 rounded w-5 h-5 transition-all duration-200;
-  background: #fff;
-  border: 1px solid rgba(226, 232, 240, 0.8);
-}
-
-.prose input[type="checkbox"]:checked {
-  background-image: linear-gradient(
-    90deg,
-    var(--color-primary),
-    var(--color-secondary)
-  );
-  border: none;
-}
-
-.prose .task-list-item {
-  @apply list-none pl-0 flex items-start;
-}
-
-.prose .task-list-item input[type="checkbox"] {
-  @apply mt-0.5 flex-shrink-0;
-}
-
-/* 强调和标记 */
-.prose mark {
-  @apply px-2 py-1 rounded font-medium;
-  background: linear-gradient(
-    120deg,
-    rgba(252, 239, 145, 0.22),
-    rgba(251, 158, 58, 0.18)
-  );
-  color: #8a4b00;
-}
-
-/* 键盘按键 */
-.prose kbd {
-  @apply border rounded-lg px-3 py-1.5 text-sm font-mono shadow-sm;
-  background: rgba(247, 249, 250, 0.9);
-  border-color: rgba(226, 232, 240, 0.8);
-  color: #0f172a;
-}
-
-/* 动画定义 */
-@keyframes gradientShift {
-  0%,
-  100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-}
-
-/* 滚动条（浅色） */
-.prose pre::-webkit-scrollbar {
-  @apply h-2;
-}
-
-.prose pre::-webkit-scrollbar-track {
-  @apply rounded-full;
-  background: rgba(243, 244, 246, 0.9);
-}
-
-.prose pre::-webkit-scrollbar-thumb {
-  border-radius: 9999px;
-  background-image: linear-gradient(
-    90deg,
-    var(--color-primary),
-    var(--color-secondary)
-  );
-}
-
-/* 移动端优化 */
-@media (max-width: 768px) {
-  .prose {
-    @apply text-base;
-  }
-  .prose h1 {
-    @apply text-3xl;
-  }
-  .prose h2 {
-    @apply text-2xl;
-  }
-  .prose h3 {
-    @apply text-xl;
-  }
-  .prose pre {
-    @apply p-4;
-  }
-}
-
-/* 打印优化 */
-@media print {
-  .prose {
-    @apply text-black;
-  }
-  .prose a {
-    @apply text-black no-underline;
-  }
-  .prose pre {
-    @apply bg-gray-100 border border-gray-300;
-  }
-}
-
-/* ---------- 可选：深色模式覆盖（.dark class 优先） ---------- */
-/* 如果你使用 Tailwind 的 class-based dark 模式（<html class="dark">），.dark .prose 会生效 */
-/* 也可替换为 @media (prefers-color-scheme: dark) {...} 来自动跟随系统 dark 模式 */
-
-.dark .prose {
-  @apply text-gray-200;
-  color: inherit;
-}
-
-.dark .prose h1 {
-  border-color: rgba(55, 65, 81, 0.5);
-}
-.dark .prose h2 {
-  color: #fff;
-  border-color: rgba(55, 65, 81, 0.4);
-}
-.dark .prose p {
-  @apply text-gray-300;
-}
-
-.dark .prose pre {
-  border: 1px solid rgba(55, 65, 81, 0.6);
-  background: linear-gradient(
-    135deg,
-    rgba(17, 24, 39, 0.9),
-    rgba(31, 41, 55, 0.9)
-  );
-  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
-}
-
-.dark .prose code {
-  background: rgba(31, 41, 55, 0.6);
-  border: 1px solid rgba(55, 65, 81, 0.5);
-  color: #e6eef8;
-}
-
-.dark .prose blockquote {
-  border-image: linear-gradient(
-      to bottom,
-      var(--color-primary),
-      var(--color-secondary)
-    )
-    1;
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.02),
-    rgba(255, 255, 255, 0)
-  );
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.dark .prose table thead {
-  background-image: linear-gradient(
-    90deg,
-    rgba(252, 239, 145, 0.06),
-    rgba(251, 158, 58, 0.04)
-  );
-}
-.dark .prose tr:nth-child(even) {
-  background: rgba(255, 255, 255, 0.02);
-}
-.dark .prose td,
-.dark .prose th {
-  color: rgba(255, 255, 255, 0.9);
-}
-.dark .prose img {
-  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
-  border-color: rgba(55, 65, 81, 0.5);
-}
-.dark .prose kbd {
-  background: rgba(31, 41, 55, 0.7);
-  border-color: rgba(55, 65, 81, 0.6);
-  color: #e6eef8;
-}
-
-/* 滚动条（深色） */
-.dark .prose pre::-webkit-scrollbar-track {
-  background: rgba(17, 24, 39, 0.8);
-}
-.dark .prose pre::-webkit-scrollbar-thumb {
-  background-image: linear-gradient(
-    90deg,
-    var(--color-primary),
-    var(--color-secondary)
-  );
-}
-
-@media (prefers-color-scheme: dark) {
-  .prose {
-    @apply text-gray-200;
-    color: inherit;
-  }
-
-  .prose h1 {
-    border-color: rgba(55, 65, 81, 0.5);
-  }
-  .prose h2 {
-    color: #fff;
-    border-color: rgba(55, 65, 81, 0.4);
-  }
-  .prose p {
-    @apply text-gray-300;
-  }
-
-  .prose pre {
-    border: 1px solid rgba(55, 65, 81, 0.6);
-    background: linear-gradient(
-      135deg,
-      rgba(17, 24, 39, 0.9),
-      rgba(31, 41, 55, 0.9)
-    );
-    box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
-  }
-
-  .prose code {
-    background: rgba(31, 41, 55, 0.6);
-    border: 1px solid rgba(55, 65, 81, 0.5);
-    color: #e6eef8;
-  }
-
-  .prose blockquote {
-    border-image: linear-gradient(
-        to bottom,
-        var(--color-primary),
-        var(--color-secondary)
-      )
-      1;
-    background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.02),
-      rgba(255, 255, 255, 0)
-    );
-    color: rgba(255, 255, 255, 0.9);
-  }
-
-  .prose table thead {
-    background-image: linear-gradient(
-      90deg,
-      rgba(252, 239, 145, 0.06),
-      rgba(251, 158, 58, 0.04)
-    );
-  }
-  .prose tr:nth-child(even) {
-    background: rgba(255, 255, 255, 0.02);
-  }
-  .prose td,
-  .prose th {
-    color: rgba(255, 255, 255, 0.9);
-  }
-  .prose img {
-    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
-    border-color: rgba(55, 65, 81, 0.5);
-  }
-  .prose kbd {
-    background: rgba(31, 41, 55, 0.7);
-    border-color: rgba(55, 65, 81, 0.6);
-    color: #e6eef8;
-  }
-
-  /* 滚动条（深色） */
-  .prose pre::-webkit-scrollbar-track {
-    background: rgba(17, 24, 39, 0.8);
-  }
-  .prose pre::-webkit-scrollbar-thumb {
-    background-image: linear-gradient(
-      90deg,
-      var(--color-primary),
-      var(--color-secondary)
-    );
-  }
-}
--- a/app/components/index/Events.vue
+++ b/app/components/index/Events.vue
@@ -1,23 +1,23 @@
 <template>
  <!-- 活动模块 -->
-  <UPageSection title="校友活动" class="bg-gray-100">
+  <UPageSection title="校友活动" class="bg-gray-100 dark:bg-slate-800">
    <UPageGrid>
      <div
        v-for="event in events"
        :key="event.id"
-        class="bg-white shadow rounded-xl"
+        class="bg-white dark:bg-slate-700 shadow rounded-xl"
      >
        <img
          :src="event.cover"
          :alt="event.title"
-          class="w-full aspect-[16/9] object-cover rounded-t-xl"
+          class="w-full aspect-video object-cover rounded-t-xl"
        />
        <div class="p-6">
          <h4 class="font-semibold text-lg mb-2">{{ event.title }}</h4>
-          <p class="text-sm text-gray-600 mb-1">
+          <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
            日期：{{ useChineseDateFormat(event.date) }}
          </p>
-          <p class="text-sm text-gray-600 mb-4">地点：{{ event.location }}</p>
+          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">地点：{{ event.location }}</p>
          <UButton
            label="阅读详情"
            :to="event.path"
@@ -31,7 +31,11 @@

 <script lang="ts" setup>
 const { data: events } = await useAsyncData("events", () =>
-  queryCollection("events").order("date", "DESC").limit(3).all()
+  queryCollection("events")
+    .where("draft", "=", false)
+    .order("date", "DESC")
+    .limit(3)
+    .all()
 );
 </script>

--- a/app/components/index/HallOfFame.vue
+++ b/app/components/index/HallOfFame.vue
@@ -10,10 +10,10 @@
        <img
          :src="person.photo"
          :alt="person.name"
-          class="w-40 rounded-full border-primary border-4"
+          class="w-40 rounded-full border-primary-400 border-4"
        />
        <h4 class="text-lg font-bold">{{ person.name }}</h4>
-        <p class="text-sm text-gray-500">{{ person.title }}</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ person.title }}</p>
      </div>
    </div>
  </UPageSection>
--- a/app/error.vue
+++ b/app/error.vue
@@ -164,7 +164,7 @@ const errorColor = computed(() => {
              <button
                @click="goHome"
                class="px-5 py-2.5 rounded-md text-white font-medium transition-colors flex items-center gap-2"
-                style="background-color: var(--color-primary)"
+                style="background-color: var(--color-primary-400)"
              >
                <span>返回首页</span>
              </button>
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -12,7 +12,7 @@
          <div class="flex gap-4 items-center">
            <img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
            <h1
-              class="text-xl font-bold text-gray-900 hover:text-primary hidden md:inline"
+              class="text-xl font-bold text-gray-900 hover:text-primary-400 hidden md:inline"
            >
              永平中学校友会
            </h1>
@@ -52,7 +52,9 @@

    <UMain>
      <Transition name="page" mode="out-in">
-        <NuxtPage />
+        <div>
+          <NuxtPage />
+        </div>
      </Transition>
    </UMain>

@@ -105,6 +107,11 @@ const bannerActions = ref<ButtonProps[]>([
 const items = computed<NavigationMenuItem[]>(() => [
  { label: "首页", to: "/" },
  { label: "新闻", to: "/news", active: route.path.startsWith("/news") },
+  {
+    label: "会员",
+    to: "/members",
+    active: route.path.startsWith("/members"),
+  },
  {
    label: "活动",
    to: "/events",
@@ -122,7 +129,7 @@ const items = computed<NavigationMenuItem[]>(() => [
    ],
  },
  {
-    label: "关于校友会",
+    label: "关于",
    to: "/about",
    active: route.path.startsWith("/about"),
    children: [
@@ -132,10 +139,23 @@ 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年）：一封迟来的贴文",
+        to: "/about/middle-highschool-tuition-class",
+        active: route.path.startsWith("/about/middle-highschool-tuition-class"),
+        icon: "mdi:mail",
+      },
    ],
  },
  {
-    label: "友情链接",
+    label: "链接",
    children: [
      {
        label: "永平中学官网",
--- a/app/pages/about/founded-history.vue
+++ b/app/pages/about/founded-history.vue
@@ -131,7 +131,7 @@
                  :class="[
                    'px-4',
                    'py-2',
-                    idx < 2 ? 'font-bold text-primary' : '',
+                    idx < 2 ? 'font-bold text-primary-400' : '',
                  ]"
                >
                  {{ donor.amount }}
@@ -167,7 +167,7 @@
                  {{ money.format(serviceDonor.amount) }}
                </td>
              </tr>
-              <tr class="bg-amber-50 font-semibold text-primary">
+              <tr class="bg-amber-50 font-semibold text-primary-400">
                <td class="px-4 py-2">总额</td>
                <td class="px-4 py-2">专业服务及装修项目</td>
                <td class="px-4 py-2">{{ money.format(33170) }}</td>
--- a/app/pages/about/middle-highschool-tuition-class.vue
+++ b/app/pages/about/middle-highschool-tuition-class.vue
@@ -0,0 +1,146 @@
+<template>
+  <UPage class="bg-gradient-to-br from-amber-50 to-amber-100 p-2 md:p-8">
+    <UPageHero title="特殊校友" description="中补班 (1956年): 一封迟来的貼文" />
+    <UContainer>
+      <div class="flex justify-center items-center">
+        <div
+          class="p-4 md:p-12 text-justify relative max-w-2xl paper-texture bg-amber-50 shadow-md border border-amber-200 rounded-xl 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 text-center">
+          <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: "致：1956年永中中补班 — 永平中学校友会",
+  ogTitle: "致中补班的一封信",
+  ogDescription:
+    "致亲爱的1956年‘诚’、‘毅’两班老校友：虽迟六十余年，愿这条讯息穿越时间，召集大家重聚，共叙曾经校园情怀与夕阳红岁月。",
+  ogUrl: "https://yphsalumni.org/about/middle-highschool-tuition-class/",
+  ogType: "article",
+  ogImage: "/about/中补班乙.jpg",
+  ogImageAlt: "永平学校中辅乙同学合影",
+  articlePublishedTime: "2022-04-15T00:00:00+08:00",
+  author: "永平中学校友会",
+});
+
+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>
--- a/app/pages/about/org-structure.vue
+++ b/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>
--- a/app/pages/about/org-structure/[slug].vue
+++ b/app/pages/about/org-structure/[slug].vue
@@ -0,0 +1,228 @@
+<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: "https://img.yphsalumni.org/i/2025/11/28/qq4k4z.png",
+  ogType: "website",
+});
+
+const route = useRoute();
+const generation = route.params.slug;
+
+const categories = ref(["领导团队", "职能部门", "专项部门"]);
+
+// TODO: Fetch from api
+const orgStructure = ref([
+  {
+    name: "李煜斌",
+    position: "主席",
+    category: "领导团队",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qm2sjz.png",
+    description:
+      "全面领导与战略决策，统筹理事会整体工作，确保组织愿景与使命的实现。",
+  },
+  {
+    name: "郑惠忠",
+    position: "副主席",
+    category: "领导团队",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qm3nod.png",
+    description: "协助主席制定战略方向，分管外部关系与合作伙伴发展。",
+  },
+  {
+    name: "陈月丽",
+    position: "副主席",
+    category: "领导团队",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qm41qp.png",
+    description: "协助主席处理内部事务，分管人力资源与组织文化建设。",
+  },
+  {
+    name: "余东照",
+    position: "副主席",
+    category: "领导团队",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qm4izj.png",
+    description: "协助主席推动重点项目，分管创新业务与发展规划。",
+  },
+  {
+    name: "蓝宜宏",
+    position: "秘书",
+    category: "职能部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qmrsai.png",
+    description: "文件管理、会议组织、行政协调与日常事务处理。",
+  },
+  {
+    name: "陈冠宇",
+    position: "副秘书",
+    category: "职能部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qms4el.png",
+    description: "协助秘书处理文档、会议安排与行政支持工作。",
+  },
+  {
+    name: "余粝栎",
+    position: "财政",
+    category: "职能部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qmsnhy.png",
+    description: "全面财务管理、预算控制、资金运作与财务报告。",
+  },
+  {
+    name: "曾国书",
+    position: "副财政",
+    category: "职能部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qmslmm.jpg",
+    description: "协助财政处理账务、报销与日常财务管理工作。",
+  },
+  {
+    name: "颜志宝",
+    position: "总务",
+    category: "职能部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qnfyb0.png",
+    description: "物资采购、资产管理、场地协调与后勤保障服务。",
+  },
+  {
+    name: "温敬富",
+    position: "副总务",
+    category: "职能部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qnglal.png",
+    description: "协助总务处理物资管理、设备维护与后勤支持。",
+  },
+  {
+    name: "胡少菲",
+    position: "康乐",
+    category: "职能部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qnre6r.png",
+    description: "文化活动策划、康乐项目组织与会员联谊活动。",
+  },
+  {
+    name: "林剑宝",
+    position: "副康乐",
+    category: "职能部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qns52y.png",
+    description: "协助文康组织文体活动、兴趣小组与社交聚会。",
+  },
+  {
+    name: "余美枫",
+    position: "福利主任",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qodchd.png",
+    description: "会员福利规划、实施与评估，提升会员满意度。",
+  },
+  {
+    name: "郑惠国",
+    position: "副福利主任",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qoe3ua.png",
+    description: "协助会员福利规划、实施与评估，提升会员满意度。",
+  },
+  {
+    name: "程靖原",
+    position: "会员籍暨咨询管理",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qof326.png",
+    description: "会员信息管理、咨询服务提供与会员关系维护。",
+  },
+  {
+    name: "许福源",
+    position: "副会员籍暨咨询管理",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qog4aa.png",
+    description: "协助会员管理、咨询响应与信息系统维护。",
+  },
+  {
+    name: "麦祖奕",
+    position: "副会员籍暨咨询管理",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qoo8lx.png",
+    description: "协助会员管理、咨询响应与信息系统开发。",
+  },
+  {
+    name: "许浩铭",
+    position: "奖励金主任",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qoos64.png",
+    description: "奖励金制度设计、评审组织与发放管理。",
+  },
+  {
+    name: "黄楚茵",
+    position: "副奖励金主任",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qoxrim.png",
+    description: "协助奖励金评审、资料审核与发放流程管理。",
+  },
+  {
+    name: "陈廷添",
+    position: "理事",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qoyjo8.png",
+    description: "参与理事会决策、专项工作推进与建议提出。",
+  },
+  {
+    name: "邱康勤",
+    position: "理事",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qp8tni.png",
+    description: "参与理事会决策、专项工作推进与建议提出。",
+  },
+  {
+    name: "张键国",
+    position: "稽查",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qp99ia.png",
+    description: "内部审计、合规监督与风险控制管理。",
+  },
+  {
+    name: "许皓杰",
+    position: "稽查",
+    category: "专项部门",
+    photo: "https://img.yphsalumni.org/i/2025/11/28/qp9l0z.png",
+    description: "内部审计、合规监督与风险控制管理。",
+  },
+]);
+</script>
+
+<style></style>
--- a/app/pages/events/[slug].vue
+++ b/app/pages/events/[slug].vue
@@ -1,24 +1,19 @@
 <template>
-  <div class="min-h-screen bg-white">
-    <!-- 装饰性背景元素（浅色柔和光晕） -->
-    <div class="fixed inset-0 overflow-hidden pointer-events-none">
-      <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-100/40 rounded-full blur-3xl"></div>
-      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-100/40 rounded-full blur-3xl"></div>
-      <div
-        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-cyan-100/40 rounded-full blur-3xl">
-      </div>
-    </div>
-
+  <div class="min-h-screen">
    <section class="relative py-16 px-4 sm:px-6 lg:px-8">
      <div class="container mx-auto max-w-4xl">
        <!-- 内容卡片 -->
        <div class="relative">
          <!-- 卡片装饰边框（浅色渐变） -->
-          <div class="absolute inset-0 bg-gradient-to-r from-blue-100 to-purple-100 rounded-2xl blur-sm"></div>
+          <!-- <div class="absolute inset-0 bg-linear-to-r from-blue-100 to-purple-100 rounded-2xl blur-sm"></div> -->

-          <div class="relative bg-white rounded-xl border border-gray-200 shadow-xl overflow-hidden">
+          <div
+            class="relative rounded-xl border border-gray-200 shadow-xl overflow-hidden"
+          >
            <!-- 顶部装饰条（明亮渐变） -->
-            <div class="h-1 bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400"></div>
+            <div
+              class="h-1 bg-linear-to-r from-blue-400 via-purple-400 to-cyan-400"
+            ></div>

            <div class="p-8 sm:p-10 lg:p-12">
              <!-- 内容渲染器 -->
@@ -26,16 +21,32 @@
                <ContentRenderer :value="event ?? {}">
                  <template #empty>
                    <div class="text-center py-16">
-                      <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
-                        <svg class="w-8 h-8 text-blue-500 animate-spin" fill="none" viewBox="0 0 24 24">
-                          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
-                          </circle>
-                          <path class="opacity-75" fill="currentColor"
-                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
-                          </path>
+                      <div
+                        class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4"
+                      >
+                        <svg
+                          class="w-8 h-8 text-blue-500 animate-spin"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                        >
+                          <circle
+                            class="opacity-25"
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            stroke-width="4"
+                          ></circle>
+                          <path
+                            class="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                          ></path>
                        </svg>
                      </div>
-                      <p class="text-gray-700 text-lg font-medium">内容加载中...</p>
+                      <p class="text-gray-700 text-lg font-medium">
+                        内容加载中...
+                      </p>
                      <p class="text-gray-400 text-sm mt-2">请稍等片刻</p>
                    </div>
                  </template>
@@ -50,16 +61,43 @@
 </template>

 <script lang="ts" setup>
-const route = useRoute()
-const { data: event } = await useAsyncData('event-detail', () =>
-  queryCollection('events')
-    .path(`/events/${route.params.slug}`)
-    .first()
-)
+const route = useRoute();
+const { data: event } = await useAsyncData("event-detail", () =>
+  queryCollection("events").path(`/events/${route.params.slug}`).first()
+);

-useHead({
-  title: event.value?.title
-})
+if (event.value) {
+  // 1. 确定图片：优先用 ogImage，没有就用 cover
+  const shareImage = event.value.ogImage || event.value.cover;
+
+  // 2. 确定标题和描述：优先用 seoTitle，没有就用 title
+  const shareTitle = event.value.seoTitle || event.value.title;
+  const shareDesc = event.value.seoDescription || event.value.description;
+
+  // 3. 注入 SEO
+  useSeoMeta({
+    // 基础
+    title: shareTitle,
+    description: shareDesc,
+
+    // Open Graph (Facebook / WhatsApp)
+    ogTitle: shareTitle,
+    ogDescription: shareDesc,
+    ogImage: shareImage,
+    ogType: "article",
+
+    // Twitter Card
+    twitterCard: "summary_large_image",
+    twitterTitle: shareTitle,
+    twitterDescription: shareDesc,
+    twitterImage: shareImage,
+  });
+
+  // 如果你用了 nuxt-og-image 模块生成动态图
+  if (shareImage) {
+    defineOgImage({ url: shareImage });
+  }
+}
 </script>

 <style scoped></style>
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -12,7 +12,11 @@
 import type { ChangelogVersionProps } from "@nuxt/ui";

 const { data: events } = await useAsyncData("events", () =>
-  queryCollection("events").order("date", "DESC").limit(3).all()
+  queryCollection("events")
+    .where("draft", "=", false)
+    .order("date", "DESC")
+    .limit(3)
+    .all()
 );

 // 将 news 数据转换成 UBlogPosts 可用格式
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -2,12 +2,8 @@
  <UPage>
    <!-- Hero Banner -->
    <UPageHero
-      class="bg-cover bg-center"
-      style="
-        background-image: url(&quot;/hero-image.jpg&quot;);
-        background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent black */
-        background-blend-mode: lighten;
-      "
+      :class="heroClass"
+      :style="heroStyle"
      title="连接校友 · 传承精神"
      description="马来西亚柔佛永平中学校友会官方网站"
      :links="heroCta"
@@ -23,7 +19,7 @@

    <!-- 捐赠模块 -->
    <UPageCTA
-      class="bg-secondary"
+      class="bg-secondary-200 dark:bg-secondary-900"
      title="支持与捐赠（功能暂未开放）"
      description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
      :links="donationLinks"
@@ -34,11 +30,30 @@
 <script lang="ts" setup>
 import type { BlogPostProps } from "@nuxt/ui";

+useSeoMeta({
+  title: "首页",
+});
+
+const colorMode = useColorMode()
+const heroClass = 'bg-cover bg-center'
+const heroStyle = computed(() => ({
+  backgroundImage: colorMode.value === 'dark' 
+    ? 'url("https://img.yphsalumni.org/i/2025/11/28/qzxrpq.png")'
+    : 'url("https://img.yphsalumni.org/i/2025/11/28/qk9fe8.png")',
+  backgroundPositionY: '-40px',
+  backgroundRepeat: 'no-repeat',
+  backgroundColor: colorMode.value === 'dark' 
+    ? 'rgba(0, 0, 0, 0.5)' 
+    : 'rgba(255, 255, 255, 0.5)',
+  backgroundBlendMode: colorMode.value === 'dark' ? 'darken' : 'lighten'
+}))
+
 const heroCta = ref([
  {
    label: "立即加入我们",
    to: "/join-us",
    icon: "mdi:account-plus",
+    "data-umami-event": "Join Us Btn Click",
  },
 ]);

--- a/app/pages/join-us/index.vue
+++ b/app/pages/join-us/index.vue
@@ -113,7 +113,7 @@ const handleSubmit = () => {
 </script>

 <template>
-  <UPage class="bg-primary">
+  <UPage class="bg-primary-400">
    <div
      class="cursor-not-allowed fixed flex items-center justify-center min-h-screen min-w-screen bg-black opacity-50"
    >
--- a/app/pages/members/index.vue
+++ b/app/pages/members/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <UPage>
+    <UContainer>
+      <UPageHeader title="会员总览" description="查询每个会员的信息" />
+      <UPageBody>
+        <UTable :data="members" :columns="columns" />
+      </UPageBody>
+    </UContainer>
+  </UPage>
+</template>
+
+<script lang="ts" setup>
+import type { TableColumn } from "@nuxt/ui";
+import { z } from "zod";
+
+useSeoMeta({
+  title: "会员总览",
+  description:
+    "永平中学校友会会员总览，查询每位校友的毕业年份、届别、加入年份与现居国家。",
+  keywords: "永平中学校友会, 校友会员, 毕业届别, 会员名录, 校友查询",
+  ogTitle: "永平中学校友会会员总览",
+  ogDescription: "浏览永平中学校友会会员资料，了解各届校友的分布与加入年份。",
+  // ogImage: "/members/ogImage.png",
+  ogType: "website",
+});
+
+const MemberSchema = z.object({
+  memberId: z.string(),
+  chineseName: z.string(),
+  englishName: z.string(),
+  // ic: z.string(),
+  // mobile: z.string(),
+  // home: z.string(),
+  // email: z.string(),
+  graduateLevel: z.string(),
+  graduateYear: z.string(),
+  // marriageNtatus: z.string(),
+  livingCountry: z.string(),
+  // addressLine1: z.string(),
+  // addressLine2: z.string(),
+  // addressLine3: z.string(),
+  joinedYear: z.string(),
+  // receiptNumber: z.string(),
+});
+
+type Member = z.infer<typeof MemberSchema>;
+
+const { data: members } = await useAsyncData("members", async () => {
+  const file = await queryCollection("members").first();
+  // ✅ 关键点：取 meta.body
+  return MemberSchema.array().parse(file?.meta.body);
+});
+
+const columns: TableColumn<Member>[] = [
+  {
+    accessorKey: "memberId",
+    header: "会员编号",
+  },
+  {
+    accessorKey: "chineseName",
+    header: "中文姓名",
+  },
+  {
+    accessorKey: "englishName",
+    header: "英文姓名",
+  },
+  {
+    accessorKey: "graduateYear",
+    header: "毕业/离校年份",
+  },
+  {
+    accessorKey: "graduateLevel",
+    header: "毕业/离校届别",
+    cell: ({ row }) => {
+      switch (row.original.graduateLevel) {
+        case "j":
+          // 初中毕业
+          // 如果 row.original.graduateYear 不能转换成数字，就写成初中毕业
+          // 否则计算届别
+          return isNaN(Number(row.original.graduateYear)) || row.original.graduateYear.trim() == ""
+            ? "初中毕业"
+            : `初中第 ${Number(row.original.graduateYear) - 1958} 届`;
+        case "s":
+          // 高中毕业
+          return isNaN(Number(row.original.graduateYear)) || row.original.graduateYear.trim() == ""
+            ? "高中毕业"
+            : `高中第 ${Number(row.original.graduateYear) - 1965} 届`;
+        case "dj1":
+          return "初一肆业";
+        case "dj2":
+          return "初二肆业";
+        case "dj3":
+          return "初三肆业";
+        case "ds1":
+          return "高一肆业";
+        case "ds2":
+          return "高二肆业";
+        case "ds3":
+          return "高三肆业";
+        default:
+          break;
+      }
+    },
+  },
+  {
+    accessorKey: "joinedYear",
+    header: "加入年份",
+  },
+  {
+    accessorKey: "livingCountry",
+    header: "现居国家",
+  },
+];
+</script>
+
+<style></style>
--- a/app/pages/news/[slug].vue
+++ b/app/pages/news/[slug].vue
@@ -18,16 +18,43 @@
 </template>

 <script lang="ts" setup>
-const route = useRoute()
-const { data: n } = await useAsyncData('new-detail', () =>
-  queryCollection('news')
-    .path(`/news/${route.params.slug}`)
-    .first()
-)
+const route = useRoute();
+const { data: n } = await useAsyncData("new-detail", () =>
+  queryCollection("news").path(`/news/${route.params.slug}`).first()
+);

-useHead({
-  title: n.value?.title
-})
+if (n.value) {
+  // 1. 确定图片：优先用 ogImage，没有就用 cover
+  const shareImage = n.value.ogImage || n.value.cover;
+
+  // 2. 确定标题和描述：优先用 seoTitle，没有就用 title
+  const shareTitle = n.value.seoTitle || n.value.title;
+  const shareDesc = n.value.seoDescription || n.value.description;
+
+  // 3. 注入 SEO
+  useSeoMeta({
+    // 基础
+    title: shareTitle,
+    description: shareDesc,
+
+    // Open Graph (Facebook / WhatsApp)
+    ogTitle: shareTitle,
+    ogDescription: shareDesc,
+    ogImage: shareImage,
+    ogType: "article",
+
+    // Twitter Card
+    twitterCard: "summary_large_image",
+    twitterTitle: shareTitle,
+    twitterDescription: shareDesc,
+    twitterImage: shareImage,
+  });
+
+  // 如果你用了 nuxt-og-image 模块生成动态图
+  if (shareImage) {
+    defineOgImage({ url: shareImage });
+  }
+}
 </script>

-<style></style>
+<style></style>
--- a/content.config.ts
+++ b/content.config.ts
@@ -1,4 +1,5 @@
 import { defineContentConfig, defineCollection, z } from "@nuxt/content";
+import { asSeoCollection } from "@nuxtjs/seo/content";

 export default defineContentConfig({
  collections: {
@@ -12,31 +13,35 @@ export default defineContentConfig({
        date: z.coerce.date(),
        location: z.string(),
        cover: z.string().url(),
+        draft: z.boolean().optional().default(false),
      }),
    }),
    // 新闻集合
-    news: defineCollection({
-      type: "page",
-      source: "news/*.md",
-      schema: z.object({
-        title: z.string(),
-        date: z.coerce.date(),
-        updated: z.coerce.date().optional(),
-        author: z.string(),
-        description: z.string(),
-        cover: z.string().optional(),
-        tags: z.array(z.string()).optional(),
-        category: z.enum(["活动", "通知", "招聘", "博客"]).optional(),
-        highlight: z.boolean().optional(),
-        seoTitle: z.string().optional(),
-        seoDescription: z.string().optional(),
-        ogImage: z.string().optional(),
-      }),
-    }),
+    news: defineCollection(
+      asSeoCollection({
+        type: "page",
+        source: "news/*.md",
+        schema: z.object({
+          title: z.string(),
+          date: z.coerce.date(),
+          updated: z.coerce.date().optional(),
+          author: z.string(),
+          description: z.string(),
+          cover: z.string().optional(),
+          tags: z.array(z.string()).optional(),
+          category: z.enum(["活动", "通知", "招聘", "博客"]).optional(),
+          highlight: z.boolean().optional(),
+          seoTitle: z.string().optional(),
+          seoDescription: z.string().optional(),
+          ogImage: z.string().optional(),
+          draft: z.boolean().optional().default(false),
+        }),
+      })
+    ),
    // 名人堂
    hallOfFames: defineCollection({
      type: "page",
-      source: "hall-of-fames/*md",
+      source: "hall-of-fames/*.md",
      schema: z.object({
        name: z.string(),
        photo: z.string().url(),
@@ -45,5 +50,28 @@ export default defineContentConfig({
        gallery: z.array(z.string()),
      }),
    }),
+    // 会员名册
+    members: defineCollection({
+      type: "data",
+      source: "members/members.csv",
+      schema: z.object({
+        // id: z.number(),
+        // chinese_name: z.string(),
+        // english_name: z.string(),
+        // ic: z.string(),
+        // mobile: z.string(),
+        // home: z.string(),
+        // email: z.string(),
+        // graduate_level: z.string(),
+        // graduate_year: z.string(),
+        // marriage_status: z.string(),
+        // living_country: z.string(),
+        // address_line_1: z.string(),
+        // address_line_2: z.string(),
+        // address_line_3: z.string(),
+        // joined_year: z.string(),
+        // receipt_number: z.string(),
+      }),
+    }),
  },
 });
--- a/content/events/20250927-return-to-school.md
+++ b/content/events/20250927-return-to-school.md
@@ -3,16 +3,16 @@ title: "927 永中 • 钟意你"
 subtitle: "永中校友会 39周年庆" 
 date: "2025-09-27"
 location: "永平中学校园"
-cover: "/events/20250927-return-to-school/event-photo-1.jpg"
+cover: "https://img.yphsalumni.org/i/2025/11/28/qr1l7k.jpg"
 ---
 # 永中校友会39周年会庆午宴 温馨欢聚350人

-![来宾打卡照](/events/20250927-return-to-school/event-photo-1.jpg)
+![来宾打卡照](https://img.yphsalumni.org/i/2025/11/28/qr1l7k.jpg)
 来宾打卡照（星洲日报记者，邹智敏摄）

 永平中学校友会于 9 月 27 日举办“927 永中·钟意你”39 周年会庆午宴，吸引约 350 位校友与社会贤达齐聚一堂，共度温馨时光，场面热闹盛大。

-![嘉宾合照](/events/20250927-return-to-school/event-photo-2.jpg)
+![嘉宾合照](https://img.yphsalumni.org/i/2025/11/28/qr1rrx.jpg)
 与会嘉宾向永中校友会献上祝福，左起：许敏捷、王飞兴、林添顺、李煜斌、刘镇东、蓝宜宏、傅庆隆、张嘉群及郑凯聪（星洲日报记者，邹智敏摄）

 本次会庆出席嘉宾包括：
--- a/content/events/20251009-roulian-xiaoyouhui-20th.md
+++ b/content/events/20251009-roulian-xiaoyouhui-20th.md
@@ -1,11 +1,13 @@
 ---
-title: "柔联校友会 20 届历史就职典礼"
+title: "柔联校友会 20 届理事就职典礼"
 subtitle: "中学生写作比赛颁奖" 
 date: "2025-10-09"
 location: "富华冷气酒家 2 楼"
-cover: "/events/20251009-roulian-xiaoyouhui-20th/event-photo-1.jpg"
+cover: "https://img.yphsalumni.org/i/2025/11/28/qryfft.jpg"
 ---
-# 柔联校友会 20 届历史就职典礼
+# 柔联校友会 20 届理事就职典礼
+
+![新届理事合照](https://img.yphsalumni.org/i/2025/11/28/qryfft.jpg)

 柔佛州华校校友联合会日前举办第 20 届理事就职典礼与 2025 年 “林赛花教育基金” 柔佛州中学生现场写作比赛颁奖典礼，由马来西亚华校校友会联合总会会长萧成兴担任监誓人。

--- a/content/events/20251115-graduation-ceremony-60.md
+++ b/content/events/20251115-graduation-ceremony-60.md
@@ -0,0 +1,113 @@
+---
+title: "永平中学第 60 届毕业典礼"
+subtitle: "暨初中第 67 届毕业典礼"
+date: "2025-11-15"
+location: "永平中学邱廉书礼堂"
+cover: "https://img.yphsalumni.org/i/2025/11/27/st6hzt.jpg"
+draft: false
+
+# SEO 主要字段
+description: "永平中学高中第 60 届与初中第 67 届毕业典礼圆满举行，师生与家长齐聚邱廉书礼堂，共同见证学子的重要里程碑，并向荣休教师刘连升老师致以诚挚祝福。"
+keywords:
+  - 永平中学
+  - 毕业典礼
+  - 高中第60届
+  - 初中第67届
+  - 校园活动
+  - 刘连升老师
+  - 永中校友会
+
+# --- SEO 专用字段 (对应你的 Zod Schema) ---
+
+# 对应 schema: seoTitle
+# 如果不填，代码里会默认使用 title
+seoTitle: "永平中学第 60 届毕业典礼｜初中第 67 届毕业典礼"
+
+# 对应 schema: seoDescription
+# 如果不填，代码里会默认使用 description
+seoDescription: "2025 年永平中学毕业典礼隆重举行，包含师长致辞、奖学金颁发、荣休老师欢送，以及学生精彩演出等精彩环节。"
+
+# 对应 schema: ogImage
+# 只有当你想要分享的图片和封面图不一样时才填，否则代码里会默认用 cover
+ogImage: "https://img.yphsalumni.org/i/2025/11/27/st6hzt.jpg"
+---
+
+# 永平中学高中第 60 届、初中第 67 届毕业典礼圆满举行
+
+![高三毕业生与嘉宾合照](https://img.yphsalumni.org/i/2025/11/27/st6hzt.jpg)
+
+2025 年 11 月 15 日，永平中学邱廉书礼堂见证了一个充满祝福与感动的重要时刻：高中第 60 届与初中第 67 届毕业典礼隆重举行。礼堂内座无虚席，毕业生、家长、师长与嘉宾齐聚一堂，共同庆祝学子们学习旅程的重要里程碑。
+
+经过六年的努力与成长，高三学生正式迎来人生的新阶段；初三毕业生亦迈向更高层次的挑战。典礼在庄严的国州歌声中启幕，掀开充满意义的一天。
+
+## 董事长马彣清博士致词（由代表宣读）
+
+![董事会秘书长黄仰力董事代表致辞](https://img.yphsalumni.org/i/2025/11/27/sndspp.jpg)
+
+因公务繁忙未克出席，马彣清董事长由董事会秘书长黄仰力董事代表致辞。他转达董事长的寄语：“成功从来不是侥幸，而是毅力不断累积的成果。” 同时肯定毕业生在求学路上的坚持，并勉励他们继续以积极态度面对未来。
+
+## 张嘉群校长三项叮咛：以品格与眼界开创未来
+
+![张嘉群校长致辞](https://img.yphsalumni.org/i/2025/11/27/smvqcm.jpg)
+
+张嘉群校长在致辞中寄语毕业生，并提出三项叮咛，期许他们在往后的道路上继续发光发热：
+
+### 叮咛一：永怀初心
+
+* 保持对学习的好奇与热情
+* 无论未来走得多远，都不要忘记自己最初的信念
+
+### 叮咛二：中正致远
+
+* 既要正直谦和，也要坚守原则
+* 不只追求速度，更追求稳健与长远
+
+### 叮咛三：站在巨人肩膀上成为巨人
+
+* 以董事、父母与师长为榜样
+* 持续成长，努力成为对国家、社会与家庭有贡献的人才
+
+## 柔佛州董联会主席兼校务顾问陈大锦先生致辞
+
+![董联会主席兼校务顾问陈大锦先生致辞](https://img.yphsalumni.org/i/2025/11/27/smxf8t.jpg)
+
+陈大锦先生分享了他访问上海中医药大学的见闻，特别是该校完善的奖助学金制度。他希望本校辅导处与升学资讯处能协助学生把握机会，踊跃申请明年 9 月开课的相关奖学金，为升学之路开拓更多可能。
+
+## 欢送刘连升老师光荣荣休
+
+![刘连升老师光荣荣休](https://img.yphsalumni.org/i/2025/11/27/spazik.jpg)
+
+在典礼上，校方特别举行了“欢送刘连升老师荣休”环节，为这位服务永平中学 35 年、深受师生爱戴的资深教师献上诚挚祝福。
+
+刘连升老师在任职期间，以其和蔼可亲的性格与渊博的历史知识，陪伴无数学生走过求学阶段。他不仅课堂上“聊古论今”，从古代帝王先烈谈到世界变迁，更在课余时与学生畅谈时事，从传统文化一路聊到新兴科技与 AI 技术，是学生眼中既严谨又风趣的良师益友。
+
+许多毕业生回忆，与刘老师的关系早已超越师生，成为无话不谈的朋友。他的教学风格温和细腻，待人真诚，使无数学子在成长路上深受启发。
+
+典礼现场气氛温馨感人，全体与会者向刘老师献上热烈掌声，感谢他 35 年来在校园里的付出与贡献。校方也祝愿刘老师退休生活悠然自得、健康安康，继续以他的人生智慧照亮身边的人。
+
+## 颁发董事长设立的奖学金
+
+典礼上同步进行董事长设立的各项奖学金颁发仪式，以表扬在学业、操行与综合表现上有卓越成绩的学生。
+（详见[图集](https://drive.google.com/drive/folders/1n3aRxxBwn-k6jzAOogV2ChBHKDA0c0qG)）
+
+## 特别演出：永中之星冠军林妤桐献唱
+
+![林妤桐学妹献唱](https://img.yphsalumni.org/i/2025/11/27/sr370l.jpg)
+
+在典礼进入高潮之前，校方安排了一场温馨惊喜表演 —— 第一届“永中之星”冠军、来自初三诚的林妤桐学妹献唱两首歌曲：《Forever Young》以及《凤凰花开的路口》。她以清亮而富感染力的歌声，向高三学长姐献上最真挚的祝福，也为典礼增添一份青春与深情的色彩。
+
+## 高三教师团队呈献毕业回忆视频
+
+随后，由高三各班班导师亲自策划的毕业回忆视频在礼堂大屏幕播出。画面记录了学生们在校园中的点点滴滴，从努力备考到日常生活，从欢笑到奋斗，皆在此刻化为珍贵回忆。
+
+校方希望学生们在未来面对困难与挫折时，也能记起这份勇敢、乐观与纯真，继续向前迈进。
+
+## 歌声中道别，在掌声中启航
+
+![高三毕业生合唱](https://img.yphsalumni.org/i/2025/11/27/ss2wuz.jpg)
+
+典礼尾声，高三毕业生深情演唱《再见》，而初三与高三学生共同合唱《毕业歌》，歌声回荡礼堂，为今年的毕业典礼写下温馨句点。现场气氛在歌声中变得格外动人，许多毕业生眼眶泛红，纷纷表示将铭记这一刻。
+
+上午 11 时正，典礼圆满结束。为感谢师生与来宾的参与，马彣清董事长特别准备了供 600 人享用的自助餐，设宴于礼堂楼下。现场气氛融洽温馨。同时，本校友会也成功招收 14 名新会员，为未来的发展注入新的力量。
+
+[2025 年毕业典礼图集](https://drive.google.com/drive/folders/1n3aRxxBwn-k6jzAOogV2ChBHKDA0c0qG)
--- a/content/members/members-sample.csv
+++ b/content/members/members-sample.csv
@@ -0,0 +1 @@
+memberId,chineseName,englishName,ic,mobile,home,email,graduateLevel,,graduateYear,marriageStatus,livingCountry,addressLine1,addressLine2,addressLine3,joinedYear,receiptNumber
--- a/content/news/20251001-official-web-launch.md
+++ b/content/news/20251001-official-web-launch.md
@@ -4,14 +4,13 @@ date: "2025-10-01"
 updated: "2025-10-01"
 author: "麦祖奕学长"
 description: "永中校友会官网正式上线，为校友提供最新资讯、活动报名及互动交流平台。"
-cover: "/news/20251001-official-web-launch/Screenshot.png"
+cover: "https://img.yphsalumni.org/i/2025/11/28/qqc3ft.png"
 tags: ["活动", "公告", "产品更新"]
 category: "通知"
 highlight: true
 seoTitle: "永中校友会官网上线 | 最新活动与资讯平台"
 seoDescription: "永中校友会官网正式上线，校友可在平台获取最新资讯、报名活动及参与互动。"
-ogImage: "/images/og/news-launch.jpg"
-slug: "/news/20251001-official-web-launch"
+ogImage: "https://img.yphsalumni.org/i/2025/11/28/qqc3ft.png"
 ---
 永中校友会官网正式上线啦！🎉

--- a/content/news/20251128-misunderstanding-yphsalumni-and-alumnigroup.md
+++ b/content/news/20251128-misunderstanding-yphsalumni-and-alumnigroup.md
@@ -0,0 +1,40 @@
+---
+title: "永平中学校友会与校友联络处的区别"
+date: "2025-11-28"
+updated: "2025-11-28"
+author: "永平中学校友会"
+description: "毕业校友常说“我都加入校友群组了”，实则误入了校友联络处。本文厘清其与永平中学校友会的区别与使命。"
+cover: "https://img.yphsalumni.org/i/2025/11/28/sbk8ue.jpeg"
+tags: ["永平中学", "校友会", "校友联络处", "区别", "公告"]
+category: "公告"
+highlight: true
+seoTitle: "永平中学校友会与校友联络处的区别 | 官方说明"
+seoDescription: "毕业校友常说“我都加入校友群组了”，实则误入了校友联络处。本文厘清其与永平中学校友会的区别与使命。"
+ogImage: "https://img.yphsalumni.org/i/2025/11/28/sbk8ue.jpeg"
+---
+
+**永平中学校友会致广大校友的一封信**
+
+亲爱的永平中学校友们：
+
+在近期的毕业典礼上，我们欣喜地听到许多新校友分享“我已加入校友群组”的喜悦。这份对母校的深切情谊，令我们深深感动。
+
+我们同时也注意到，部分校友可能产生了一个美丽的误会：大家加入的“校友联络处”群组，是由学校董事会设立的官方联络平台，主要负责校友信息的收集与传达。而我们所熟知的“永平中学校友会”，则是一个由历届毕业生**自发创建、独立运作的校友社区组织**。
+
+自成立以来，永平中学校友会始终秉承以下宗旨，由校友共建、为校友服务：
+
+- **联结校友情谊**：搭建纯粹、活跃的交流平台，让友谊跨越届别。
+- **支持母校发展**：凝聚校友力量，回馈我们共同的永平中学。
+- **推动教育、文化与社区活动**：举办丰富多彩的活动，丰富校友生活。
+- **建立校友与在校生之间的桥梁**：传承经验与关怀，助力学弟学妹成长。
+
+校友联络处与校友会，二者服务校友的初心一致，是相辅相成的伙伴。我们由衷欢迎每一位热心校友加入我们这个充满活力的毕业生社区，共同为母校的发展注入来自校友群体的独特力量！
+
+**加入我们，共同书写校友故事：**
+
+校友会官方平台：https://yphsalumni.org/
+
+<!-- 联系我们：[请在此处填入邮箱或具体负责人联系方式] -->
+
+永平中学校友会<br/>
+2025年11月28日
--- a/docs/20251128-misunderstanding-yphsalumni-and-alumnigroup.md
+++ b/docs/20251128-misunderstanding-yphsalumni-and-alumnigroup.md
@@ -0,0 +1,54 @@
+下面给你一个**实用、可直接交给设计师落地的公告封面设计方案**，基于你们「校友会 vs 校友联络处」容易混淆这一情境，重点是**清晰、正式、易识别、避免再次误会**。
+
+---
+
+# 🎨 公告封面设计方案（适用于官网首页 / Banner / WhatsApp 分享图）
+
+## **1. 视觉主题**
+
+**关键词：清晰区隔、正式感、组织可信度**
+色调保持学校主色系（如#fb9e3a、#fcef91），并加上一条亮色做强调，提升官方感。
+
+---
+
+## **2. 版式构成**
+
+### ### **A. 顶部：醒目的组织身份**
+
+**「永平中学校友会」**
+
+* 使用学校和校友会 logo（左） + 标题文字（右）
+* 字体使用较厚重、带权威感的 Serif / Sans Serif
+* 加上小字「官方公告」标签
+
+---
+
+### **B. 中间：公告主标题（视觉核心）**
+
+标题建议直接点出“澄清 & 提醒”的意图：
+
+* **《校友会与校友联络处群组区分公告》**
+
+字体加粗，居中，字号大，确保在手机上也能一眼看懂。
+
+---
+
+### **C. 配图 / 图标建议**
+
+#### **徽章背景淡化**
+
+校徽做 20% 透明大背景，体现官方权威。
+
+---
+
+## **3. 尺寸 & 格式（设计师直接可用）**
+
+* Website banner: **1920×1080**
+
+---
+
+## **4. 文案建议（印在封面下方的小字）**
+
+> “近期部分校友误将校友联络处群组误认为校友会官方群组，特此澄清。”
+
+---
--- a/docs/Onboarding
+++ b/docs/Onboarding
@@ -0,0 +1,56 @@
+**主题：欢迎加入永平中学校友会！**
+
+亲爱的校友，您好！
+
+感谢您加入 **永平中学校友会（Yong Peng High School Alumni Association）**！
+自您成为会员的这一刻起，我们正式迎来了一位新的伙伴，也多了一份共同守护母校与社区的力量。
+
+---
+
+## 🎉 **我们是谁？**
+
+永平中学校友会成立以来，一直致力于：
+
+* **联结校友情谊**
+* **支持母校发展**
+* **推动教育、文化与社区活动**
+* **建立校友与在校生之间的桥梁**
+
+您的加入，让我们更有力量继续前进。
+
+---
+
+## 📌 **作为会员，您可享有：**
+
+* 活动、讲座、聚会的**优先参与权**
+* 校友资讯、重要公告的**第一时间通知**
+* 参与校友会项目、社区计划的**贡献机会**
+* 与来自各领域校友建立联系的**交流平台**
+
+---
+
+## 🗓️ **接下来能做什么？**
+
+为帮助您更快融入校友会生态，我们建议：
+
+1. **保存本会的官方联系方式**（WhatsApp / 社媒）
+2. **访问我们的官网**
+3. **留意即将发布的活动资讯**
+4. 若愿意参与志工 / 筹委，请随时回复我们
+
+---
+
+## ❤️ **我们欢迎您与我们同行**
+
+无论您身处何地，校友会的大门永远为您敞开。
+让我们一同继续延续永中的精神，传承、回馈、成长。
+
+若您有任何疑问，欢迎随时与我们联系。
+
+谢谢您再次加入我们，
+**欢迎回家！**
+
+**永平中学校友会**
+Yong Peng High School Alumni Association
+https://yphsalumni.org
+
--- a/docs/PPT
+++ b/docs/PPT
@@ -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-2.jpg 作封面/过渡图
+- 图片素材：新闻/活动封面取自 public/news/*、public/events/*、public/hall-of-fame/*
+- 最少字多图：每页 3–5 条要点，每条不超过一行半
+
+演示备选方案（网络不稳时）
+
+- 准备 30–60 秒无声/配乐屏录视频（首页→新闻→活动→名人堂→入会）
+- 关键页面截图备选：主页、新闻详情、活动详情、名人堂人物页、后台仪表盘
+- 本地二维码图片（指向官网），避免临场生成失败
+
+可选加页（视场合增减）
+
+- 用户故事：校友/老师/在校生各 1 个使用场景
+- 隐私与安全：不采集敏感信息、分析工具与停用开关
+- 合作与赞助：纪念册/活动共创与鸣谢方式
+- FAQ：如何投稿、如何加入志愿者、如何反馈问题
+
+素材清单（制作 PPT 前先备齐）
+
+- Logo 与主视觉：public/Logo.svg、public/hero-image-2.jpg
+- 二维码：yphsalumni.org（建议白底黑码，配校色边框）
+- 页面截图：主页、新闻、活动、名人堂、入会、后台
+- 文案确认：宗旨口号、愿景 1 句话、路线图 3–5 条
+- 联系方式：官方邮箱/表单链接、官方社媒链接
--- a/docs/PPT
+++ b/docs/PPT
@@ -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-2.jpg
+- 页面截图：主页、新闻、活动、名人堂、入会（与后台仪表盘）
+- 一页式“交付清单与价值”图（可用饼图/图标矩阵）
+
+合规与落地建议
+
+- 确认开源协议（建议 MIT）并在仓库根目录添加 LICENSE
+- 在 README.md 保留“报效/开源”说明与致谢，PPT 与通稿用同一表述
+- 金额声明附说明：不含域名/服务器/第三方服务费
+- 现场背景板与屏幕页脚统一“技术支持：Tootaio Studio”
+
+需要的话，我可以：
+
+- 直接为你生成一份可放映的 Marp/Reveal.js Markdown 幻灯，或输出 PPTX 模板（含上述文案与占位图）。
+- 创建“交付与价值”信息图一页（AI 矢量），用于 PPT 与对外物料。
--- a/docs/Statistic
+++ b/docs/Statistic
@@ -0,0 +1,57 @@
+### 🎓 校友群体类（展示规模）
+
+* **注册会员人数**（基础指标）
+* **校友分布地区数**（如「分布于 12 个国家」）
+* **历届毕业生总数**
+* **校友企业数**（若可统计，代表社会影响力）
+* **理事人数 / 活跃志工人数**
+
+---
+
+### 💰 贡献与资源类（展示凝聚力）
+
+* **教育基金总额**（例如「林赛花教育基金已累计 RM XXX,XXX」）
+* **奖助学金受惠人数**
+* **年度捐款总额 / 参与人数**
+* **历年活动赞助商数量**
+
+---
+
+### 🏛️ 历史与传承类（展示深度）
+
+* **成立年份 / 周年数**（基础指标）
+* **举办活动次数**（历届聚会 / 座谈 / 校庆）
+* **出版刊物 / 纪念册数量**
+* **历届理事会届数**
+
+---
+
+### 🌏 影响与传播类（展示影响面）
+
+* **官方网站访问量 / 月均访问数**
+* **社交媒体关注人数 / 互动量**
+* **媒体报道次数**（可简化为“媒体曝光数”）
+
+---
+
+### 💡 进阶玩法（让页面更有活力）
+
+* **“活跃率”**：例如「本年度活动参与率 72%」
+* **“成长曲线”**：每年会员人数变化趋势（用小图表示）
+* **“校友情谊值”**：趣味指标，比如根据活动签到 / 捐赠 / 投稿自动算出的综合分数（可 Gamify）
+
+---
+
+### ✅ 推荐组合（简洁又有格调）
+
+| 分类     | 指标          | 示例展示         |
+| -------- | ------------- | ---------------- |
+| 校友群体 | 会员总数      | 1,237 位注册会员 |
+| 成立历程 | 成立时间      | 创立于 1985 年   |
+| 贡献力量 | 教育基金累计  | RM 245,000       |
+| 活动热度 | 年度活动次数  | 12 场活动        |
+| 社群影响 | Facebook 关注 | 3.4k Followers   |
+
+---
+
+要我帮你把这五个指标设计成一个统一风格的 **Statistic Card UI**（适合放在 Nuxt + @nuxt/ui 项目里）吗？我可以直接给出结构和样式建议 🔥
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,14 +5,15 @@ export default defineNuxtConfig({
  compatibilityDate: "2025-07-15",
  devtools: { enabled: true },
  modules: [
+    "@nuxt/ui",
+    "@nuxtjs/seo",
    "@nuxt/content",
    "@nuxt/image",
-    "@nuxt/ui",
    "reka-ui/nuxt",
    "@nuxtjs/robots",
-    "@nuxtjs/seo",
    "@nuxtjs/sitemap",
  ],
+  ssr: true,
  css: ["~/assets/css/main.css"],
  vite: {
    plugins: [tailwindcss()],
@@ -50,7 +51,7 @@ export default defineNuxtConfig({
        { property: "og:url", content: "https://yphsalumni.org" }, // ✅ 换成你网站的真实域名
        {
          property: "og:image",
-          content: "https://yphsalumni.org/hero-image.jpg",
+          content: "https://img.yphsalumni.org/i/2025/11/28/qk9fe8.png",
        }, // ✅ 上传一张封面图

        // Twitter Card
@@ -62,13 +63,13 @@ export default defineNuxtConfig({
        },
        {
          name: "twitter:image",
-          content: "https://yphsalumni.org/hero-image.jpg",
+          content: "https://img.yphsalumni.org/i/2025/11/28/qk9fe8.png",
        },
      ],
    },
  },
  site: {
-    url: "https://yphsalumni.com",
+    url: "https://yphsalumni.org",
    name: "永中校友会 YPHS Alumni",
  },
 });
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/about/中补班乙.jpg
+++ b/public/about/中补班乙.jpg
--- a/public/about/李华光赠言.jpg
+++ b/public/about/李华光赠言.jpg
--- a/public/about/某老师赠言.jpg
+++ b/public/about/某老师赠言.jpg
--- a/public/about/赵老师赠言.jpg
+++ b/public/about/赵老师赠言.jpg
--- a/public/about/黄绍南校长赠言.jpg
+++ b/public/about/黄绍南校长赠言.jpg
--- a/public/events/20250927-return-to-school/event-photo-1.jpg
+++ b/public/events/20250927-return-to-school/event-photo-1.jpg
--- a/public/events/20250927-return-to-school/event-photo-2.jpg
+++ b/public/events/20250927-return-to-school/event-photo-2.jpg
--- a/public/events/20251009-roulian-xiaoyouhui-20th/event-photo-1.jpg
+++ b/public/events/20251009-roulian-xiaoyouhui-20th/event-photo-1.jpg
--- a/public/hero-image.jpg
+++ b/public/hero-image.jpg
--- a/public/news/20251001-official-web-launch/Screenshot.png
+++ b/public/news/20251001-official-web-launch/Screenshot.png
--- a/repomix.config.json
+++ b/repomix.config.json
@@ -0,0 +1,42 @@
+{
+  "$schema": "https://repomix.com/schemas/latest/schema.json",
+  "input": {
+    "maxFileSize": 52428800
+  },
+  "output": {
+    "filePath": "repomix-output.xml",
+    "style": "xml",
+    "parsableStyle": false,
+    "fileSummary": true,
+    "directoryStructure": true,
+    "files": true,
+    "removeComments": false,
+    "removeEmptyLines": false,
+    "compress": false,
+    "topFilesLength": 5,
+    "showLineNumbers": false,
+    "truncateBase64": false,
+    "copyToClipboard": false,
+    "includeFullDirectoryStructure": false,
+    "tokenCountTree": false,
+    "git": {
+      "sortByChanges": true,
+      "sortByChangesMaxCommits": 100,
+      "includeDiffs": false,
+      "includeLogs": false,
+      "includeLogsCount": 50
+    }
+  },
+  "include": [],
+  "ignore": {
+    "useGitignore": true,
+    "useDefaultPatterns": true,
+    "customPatterns": []
+  },
+  "security": {
+    "enableSecurityCheck": true
+  },
+  "tokenCount": {
+    "encoding": "o200k_base"
+  }
+}
Author	SHA1	Message	Date
xiaomai	6de61c24b2	style(theme): expand color palettes and refine dark mode styles - Expand CSS variables for primary and secondary colors to include full 50-950 scales in `main.css`. - Update components to reference specific color shades (e.g., `primary-400`, `secondary-200`) instead of generic variables. - Add dark mode background and text colors to Events, Hall of Fame, and Index sections. - Adjust image aspect ratio in the Events component.	2025-11-28 17:27:34 +08:00
xiaomai	f6bbd95b77	chore(assets): migrate local images to remote storage - Replace local image paths with remote URLs in components, content, and config. - Remove local image files from the public directory to reduce repository size. - Add dark mode support for the hero background image in `index.vue`.	2025-11-28 16:45:30 +08:00
xiaomai	a28bb3a54d	feat(news): enhance SEO meta tags and add clarification article - Update news detail page to use `useSeoMeta` for comprehensive Open Graph and Twitter Card support. - Implement logic to prioritize `ogImage` and `seoTitle` with fallbacks to standard fields. - Add new content article clarifying the distinction between the Alumni Association and the Alumni Liaison Office. - Add documentation drafts for onboarding messages and announcement design.	2025-11-28 11:54:11 +08:00
xiaomai	9bca019b50	feat(seo): improve SEO configuration and enable SSR - Enable `ssr: true` in `nuxt.config.ts` for server-side rendering of meta tags. - Implement `useSeoMeta` in `events/.vue` with fallback logic for Open Graph and Twitter cards. - Update `content.config.ts` to use `asSeoCollection` for the news collection. - Migrate event markdown frontmatter to use standardized SEO fields.	2025-11-27 23:07:24 +08:00
xiaomai	6288a1b01b	feat(content): add draft support for content collections This commit introduces a draft system for the 'events' and 'news' collections. A `draft` boolean field has been added to the content schema, and frontend queries are now updated to only fetch and display content where `draft` is `false`. This allows content to be created and saved without being publicly visible, improving the publishing workflow.	2025-11-27 17:53:42 +08:00
xiaomai	c7da09d327	refactor(ui): adopt Nuxt UI prose styles and apply various fixes Replaces custom `markdown.css` with the default prose styling from Nuxt UI to simplify the styling architecture. This commit also includes several other fixes and improvements: - fix(members): Correctly handle empty `graduateYear` strings in the member list. - fix(layout): Wrap `NuxtPage` in a div to resolve page transition issues. - feat(seo): Add a meta title to the homepage. - docs(content): Correct the title and add an image to an event page.	2025-11-15 13:25:42 +08:00
xiaomai	2ac1428c34	feat(members): add member ID to members list This commit introduces a 'Member ID' column to the members table, making it the first column for easy reference. - The member data schema and sample CSV have been updated to include the `memberId`. - The members page now displays the `memberId` for each member. - Additionally, a version query string has been added to the hero image URL to force a cache refresh.	2025-11-02 22:37:17 +08:00
xiaomai	3da20d0097	feat(members): add members listing page This commit introduces a new `/members` page to display a directory of alumni association members. - Member data is sourced from a CSV file (`content/members/members.csv`) and managed via Nuxt Content. - The page presents member information in a table, including calculated graduation class (`届别`). - A link to the new page has been added to the main navigation. - Minor UI tweaks and data corrections in other sections are also included.	2025-11-02 22:09:57 +08:00
xiaomai	f5d9963f3c	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.	2025-11-02 15:25:19 +08:00
xiaomai	cf6dfac6a3	docs(presentation): add drafts for launch presentation slides This commit adds two draft documents for the official website launch presentation. These files outline the structure, key messages, and content for the slides. - `PPT Designs v1.md`: Provides a standard presentation structure covering the project's goals, features, and roadmap. - `PPT Designs v2.md`: Offers a more refined narrative focusing on value, contribution, and open-source aspects, including copy for press releases and announcements.	2025-11-02 00:23:52 +08:00
xiaomai	2649cca69d	docs: add comprehensive project documentation and MIT license Replaces the generic Nuxt starter README with detailed documentation specific to the YPHS Alumni website project. The new README.md now includes: - Project overview, tech stack, and key features - Local development, build, and deployment instructions - Content authoring guide for news, events, and hall of fame - Project roadmap and contribution guidelines Additionally, this commit adds an MIT license file to formally establish the project's open-source status.	2025-11-01 23:38:39 +08:00
xiaomai	59fc6cb13d	feat(seo): improve SEO and add analytics tracking This commit introduces several enhancements for SEO and analytics. - Updates the canonical site URL from `yphsalumni.com` to `yphsalumni.org`. - Enriches the 'middle-highschool-tuition-class' page with detailed Open Graph (og) meta tags for better social sharing. - Implements Umami event tracking for the 'Join Us' button on the homepage.	2025-11-01 23:31:45 +08:00
xiaomai	33334a7515	style(ui): improve layout and responsiveness of tuition class page This commit adjusts the styling on the 'Middle/High School Tuition Class' page to enhance its appearance and readability, particularly on mobile devices. - Implemented responsive padding for the main page and content container. - Justified the main text block for better readability. - Centered the student name badges. - Added configuration files for the `repomix` project analysis tool.	2025-10-30 17:48:30 +08:00
xiaomai	c468da8780	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.	2025-10-27 22:18:07 +08:00
				`@@ -0,0 +1 @@`
				`memberId,chineseName,englishName,ic,mobile,home,email,graduateLevel,,graduateYear,marriageStatus,livingCountry,addressLine1,addressLine2,addressLine3,joinedYear,receiptNumber`