From e4abaae179ee342800b4cf604c13d2d92d23ca61 Mon Sep 17 00:00:00 2001
From: longsizhuo <longsizhuo@gmail.com>
Date: Thu, 16 Apr 2026 21:19:53 +0000
Subject: [PATCH] =?UTF-8?q?feat(events):=20/events=20=E5=88=97=E8=A1=A8+?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85+=E6=84=9F=E5=85=B4=E8=B6=A3=20+=20/admin/eve?=
 =?UTF-8?q?nts=20=E7=AE=A1=E7=90=86=E5=8F=B0=20+=20=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E7=AE=A1=E7=90=86=E5=91=98=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

配套后端 involutionhell-backend feat/events-management 分支。

## 新增前端路由
- /events                  公开活动列表（正在进行 / 即将开始 / 历史活动 三段）
- /events/[id]             详情页 + YouTube 回放内嵌 + 感兴趣按钮（登录后可点）
- /admin/events            管理员活动列表 + 删除
- /admin/events/new        新建活动表单
- /admin/events/[id]/edit  编辑活动

## 个人主页管理员入口
新增 app/u/[username]/AdminLinkIfOwnerAdmin.tsx：只有"登录用户 + 是本人 + roles 含 admin"
三条件同时满足才渲染"管理员界面"按钮，对其他人（路人、非 admin 登录者）一律 null
避免社交尴尬（user tester 明确提到"看到朋友主页有管理员按钮会问出来"）。

## ActivityTicker / FloatWindow 迁 API
新增 lib/events-fetch.ts 做服务端拉取 + JSON fallback。
- ActivityTicker 改成 async Server Component，SSR 直接拿 /api/events 数据
- FloatWindow 改成接 event prop，由 app/page.tsx Server Component 拉完数据传下来
- BACKEND_URL 未配 / 后端抖动 → 自动 fallback 到 data/event.json，首页不会白屏

## next.config.mjs rewrites
加了 /api/events 和 /api/admin/events 两对 rewrites（Next [:path*] 不匹配空路径，
所以 /api/events 和 /api/events/:path* 都要显式列）。

## 权限模型
前端通过 useAuth().user.roles.includes("admin") 判定；没加 isAdmin 派生字段，
UserView.roles 已经能满足。真正的安全由后端 @SaCheckRole 兜底，前端 AdminGuard
只负责 UX（非 admin 看到 403 降级界面）。
---
 app/admin/events/AdminGuard.tsx             |  61 ++++
 app/admin/events/EventForm.tsx              | 290 ++++++++++++++++++++
 app/admin/events/[id]/edit/page.tsx         |  85 ++++++
 app/admin/events/layout.tsx                 |  25 ++
 app/admin/events/lib.ts                     |  79 ++++++
 app/admin/events/new/page.tsx               |  36 +++
 app/admin/events/page.tsx                   | 203 ++++++++++++++
 app/components/ActivityTicker.tsx           | 144 +++++-----
 app/components/float-window/FloatWindow.tsx |  37 ++-
 app/events/[id]/InterestButton.tsx          | 101 +++++++
 app/events/[id]/page.tsx                    | 287 +++++++++++++++++++
 app/events/page.tsx                         | 200 ++++++++++++++
 app/events/types.ts                         |  57 ++++
 app/page.tsx                                |  15 +-
 app/u/[username]/AdminLinkIfOwnerAdmin.tsx  |  46 ++++
 app/u/[username]/page.tsx                   |   6 +
 lib/events-fetch.ts                         | 119 ++++++++
 next.config.mjs                             |  19 ++
 18 files changed, 1723 insertions(+), 87 deletions(-)
 create mode 100644 app/admin/events/AdminGuard.tsx
 create mode 100644 app/admin/events/EventForm.tsx
 create mode 100644 app/admin/events/[id]/edit/page.tsx
 create mode 100644 app/admin/events/layout.tsx
 create mode 100644 app/admin/events/lib.ts
 create mode 100644 app/admin/events/new/page.tsx
 create mode 100644 app/admin/events/page.tsx
 create mode 100644 app/events/[id]/InterestButton.tsx
 create mode 100644 app/events/[id]/page.tsx
 create mode 100644 app/events/page.tsx
 create mode 100644 app/events/types.ts
 create mode 100644 app/u/[username]/AdminLinkIfOwnerAdmin.tsx
 create mode 100644 lib/events-fetch.ts

diff --git a/app/admin/events/AdminGuard.tsx b/app/admin/events/AdminGuard.tsx
new file mode 100644
index 00000000..1f558eb5
--- /dev/null
+++ b/app/admin/events/AdminGuard.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+/**
+ * 前端管理员页的权限包装器。
+ *
+ * 做的事：
+ * - 未登录：跳 /login
+ * - 登录但不是 admin：渲染 403 提示
+ * - 是 admin：渲染 children
+ *
+ * 注意这个只是 UX 层的保护——真正的安全由后端 @SaCheckRole("admin") 兜底。
+ * 用户只要能绕过这里也拿不到数据，后端直接返回 401/403。
+ */
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/use-auth";
+import type { ReactNode } from "react";
+
+export function AdminGuard({ children }: { children: ReactNode }) {
+  const { user, status } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (status === "unauthenticated") {
+      router.replace("/login?next=/admin/events");
+    }
+  }, [status, router]);
+
+  if (status === "loading") {
+    return (
+      <main className="pt-32 pb-16 min-h-screen flex items-center justify-center">
+        <p className="font-mono text-xs uppercase tracking-widest text-neutral-500">
+          Loading…
+        </p>
+      </main>
+    );
+  }
+
+  if (status === "unauthenticated") return null;
+
+  const isAdmin = user?.roles?.includes("admin") ?? false;
+  if (!isAdmin) {
+    return (
+      <main className="pt-32 pb-16 min-h-screen flex items-center justify-center px-6">
+        <div className="max-w-lg border border-[#CC0000] p-8 text-center">
+          <div className="font-mono text-[10px] uppercase tracking-[0.3em] text-[#CC0000] mb-3">
+            403 · Forbidden
+          </div>
+          <h1 className="font-serif text-2xl font-black mb-3">你不是管理员</h1>
+          <p className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+            管理员界面仅对 <code>roles</code> 包含 <code>admin</code>{" "}
+            的账号开放。 如果你认为这是误报，联系站点维护者。
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  return <>{children}</>;
+}
diff --git a/app/admin/events/EventForm.tsx b/app/admin/events/EventForm.tsx
new file mode 100644
index 00000000..b1c4f63a
--- /dev/null
+++ b/app/admin/events/EventForm.tsx
@@ -0,0 +1,290 @@
+"use client";
+
+/**
+ * Admin 侧的活动表单（新建 + 编辑共用）。
+ *
+ * 表单字段基本是 EventRequest 的直接映射。
+ * 几个 UX 细节：
+ * - startTime / endTime 用 <input type="datetime-local">，提交前转成 ISO
+ * - speakers 简化成"每行一条 name"，头像/profile URL 暂不支持（延后）
+ * - tags 用"逗号分隔"单行输入
+ * - cover_url / discord / playback 都是可选
+ * - 提交后跳 /admin/events 列表
+ */
+
+import { useState, useRef, type FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import type { EventRequest, EventView, EventStatus } from "@/app/events/types";
+import { createEvent, updateEvent } from "./lib";
+
+interface Props {
+  /** undefined 表示新建；传入 EventView 表示编辑 */
+  initial?: EventView;
+}
+
+const STATUS_OPTIONS: EventStatus[] = [
+  "draft",
+  "published",
+  "archived",
+  "cancelled",
+];
+
+export function EventForm({ initial }: Props) {
+  const router = useRouter();
+  const formRef = useRef<HTMLFormElement>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError(null);
+
+    const fd = new FormData(e.currentTarget);
+    const req: EventRequest = {
+      title: String(fd.get("title") ?? "").trim(),
+      description: String(fd.get("description") ?? ""),
+      coverUrl: emptyToNull(fd.get("coverUrl")),
+      startTime: datetimeLocalToIso(fd.get("startTime")),
+      endTime: datetimeLocalToIso(fd.get("endTime")),
+      discordLink: emptyToNull(fd.get("discordLink")),
+      playbackUrl: emptyToNull(fd.get("playbackUrl")),
+      tags: splitCsv(fd.get("tags")),
+      speakers: parseSpeakers(fd.get("speakers")),
+      status: (fd.get("status") as EventStatus) ?? "draft",
+    };
+
+    try {
+      if (initial) {
+        await updateEvent(initial.id, req);
+      } else {
+        await createEvent(req);
+      }
+      router.push("/admin/events");
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "保存失败");
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <form
+      ref={formRef}
+      onSubmit={onSubmit}
+      className="flex flex-col gap-6 max-w-3xl"
+    >
+      <Field
+        label="标题"
+        name="title"
+        required
+        defaultValue={initial?.title ?? ""}
+      />
+      <Field
+        label="描述"
+        name="description"
+        multiline
+        rows={6}
+        defaultValue={initial?.description ?? ""}
+        hint="支持普通文本，段落用空行分隔。"
+      />
+      <Field
+        label="封面 URL"
+        name="coverUrl"
+        defaultValue={initial?.coverUrl ?? ""}
+        hint="建议 16:9，/event/ 目录下的 webp 最佳。也支持外链。"
+      />
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Field
+          label="开始时间"
+          name="startTime"
+          type="datetime-local"
+          defaultValue={isoToDatetimeLocal(initial?.startTime)}
+        />
+        <Field
+          label="结束时间"
+          name="endTime"
+          type="datetime-local"
+          defaultValue={isoToDatetimeLocal(initial?.endTime)}
+        />
+      </div>
+
+      <Field
+        label="Discord 链接"
+        name="discordLink"
+        defaultValue={initial?.discordLink ?? ""}
+        hint="活动当天的 Discord 入口（频道 / Scheduled Event URL）。"
+      />
+      <Field
+        label="回放链接"
+        name="playbackUrl"
+        defaultValue={initial?.playbackUrl ?? ""}
+        hint="YouTube / 站内 /docs 文章 / Drive 链接均可；YouTube 会被内嵌到详情页。"
+      />
+
+      <Field
+        label="Tags (逗号分隔)"
+        name="tags"
+        defaultValue={initial?.tags?.join(", ") ?? ""}
+        hint="如：career, interview, mock。目前只做展示，未来会支持按 tag 筛选。"
+      />
+
+      <Field
+        label="Speakers (每行一条)"
+        name="speakers"
+        multiline
+        rows={4}
+        defaultValue={initial?.speakers?.map((s) => s.name).join("\n") ?? ""}
+        hint="目前只记录姓名；头像 / profile URL 后续版本支持。"
+      />
+
+      <div className="flex flex-col gap-1.5">
+        <label className="font-mono text-[10px] uppercase tracking-widest text-neutral-500">
+          状态
+        </label>
+        <select
+          name="status"
+          defaultValue={initial?.status ?? "draft"}
+          className="border border-[var(--foreground)] px-3 py-2 bg-[var(--background)] text-[var(--foreground)] font-mono text-xs uppercase"
+        >
+          {STATUS_OPTIONS.map((s) => (
+            <option key={s} value={s}>
+              {s}
+            </option>
+          ))}
+        </select>
+        <p className="text-[11px] text-neutral-500 leading-relaxed">
+          draft = 仅管理员可见；published = 公开；archived = 历史；cancelled =
+          取消。
+        </p>
+      </div>
+
+      {error && (
+        <div className="border border-[#CC0000] p-3 text-sm text-[#CC0000] font-mono">
+          {error}
+        </div>
+      )}
+
+      <div className="flex gap-3 pt-2">
+        <button
+          type="submit"
+          disabled={submitting}
+          className="font-mono text-xs uppercase tracking-widest px-5 py-2 border border-[var(--foreground)] bg-[var(--foreground)] text-[var(--background)] hover:bg-[#CC0000] hover:border-[#CC0000] transition-colors disabled:opacity-50"
+        >
+          {submitting ? "保存中…" : initial ? "保存修改" : "创建活动"}
+        </button>
+        <button
+          type="button"
+          onClick={() => router.push("/admin/events")}
+          className="font-mono text-xs uppercase tracking-widest px-5 py-2 border border-[var(--foreground)] hover:bg-[var(--foreground)] hover:text-[var(--background)] transition-colors"
+        >
+          取消
+        </button>
+      </div>
+    </form>
+  );
+}
+
+interface FieldProps {
+  label: string;
+  name: string;
+  type?: string;
+  required?: boolean;
+  defaultValue?: string;
+  multiline?: boolean;
+  rows?: number;
+  hint?: string;
+}
+
+function Field({
+  label,
+  name,
+  type = "text",
+  required,
+  defaultValue,
+  multiline,
+  rows,
+  hint,
+}: FieldProps) {
+  const base =
+    "border border-[var(--foreground)] px-3 py-2 bg-[var(--background)] text-[var(--foreground)] font-sans text-sm focus:outline-none focus:border-[#CC0000]";
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label
+        htmlFor={name}
+        className="font-mono text-[10px] uppercase tracking-widest text-neutral-500"
+      >
+        {label} {required && <span className="text-[#CC0000]">*</span>}
+      </label>
+      {multiline ? (
+        <textarea
+          id={name}
+          name={name}
+          required={required}
+          rows={rows ?? 4}
+          defaultValue={defaultValue}
+          className={`${base} resize-y`}
+        />
+      ) : (
+        <input
+          id={name}
+          name={name}
+          type={type}
+          required={required}
+          defaultValue={defaultValue}
+          className={base}
+        />
+      )}
+      {hint && (
+        <p className="text-[11px] text-neutral-500 leading-relaxed">{hint}</p>
+      )}
+    </div>
+  );
+}
+
+function emptyToNull(v: FormDataEntryValue | null): string | null {
+  if (v == null) return null;
+  const s = String(v).trim();
+  return s ? s : null;
+}
+
+function splitCsv(v: FormDataEntryValue | null): string[] {
+  if (!v) return [];
+  return String(v)
+    .split(",")
+    .map((x) => x.trim())
+    .filter(Boolean);
+}
+
+/** 每行一个 speaker 名字 → [{name}] */
+function parseSpeakers(v: FormDataEntryValue | null) {
+  if (!v) return [];
+  return String(v)
+    .split(/\r?\n/)
+    .map((l) => l.trim())
+    .filter(Boolean)
+    .map((name) => ({ name }));
+}
+
+/** <input type="datetime-local"> 的 value 是 "YYYY-MM-DDTHH:mm" 本地时间，无时区；
+ *  转成 UTC ISO 字符串再给后端。空值返回 null。 */
+function datetimeLocalToIso(v: FormDataEntryValue | null): string | null {
+  if (!v) return null;
+  const s = String(v).trim();
+  if (!s) return null;
+  // new Date("YYYY-MM-DDTHH:mm") 浏览器按本地时区解析
+  const d = new Date(s);
+  if (Number.isNaN(d.getTime())) return null;
+  return d.toISOString();
+}
+
+/** ISO 字符串 → datetime-local 输入值。未设置时返回 "". */
+function isoToDatetimeLocal(iso: string | null | undefined): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  // datetime-local 需要 YYYY-MM-DDTHH:mm（无秒无时区）
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
diff --git a/app/admin/events/[id]/edit/page.tsx b/app/admin/events/[id]/edit/page.tsx
new file mode 100644
index 00000000..8a367af4
--- /dev/null
+++ b/app/admin/events/[id]/edit/page.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+/**
+ * /admin/events/[id]/edit — 编辑活动。
+ *
+ * 进来先拉 /api/admin/events/{id} 拿完整数据（含 draft 状态的字段），
+ * 然后把数据塞给 <EventForm initial={...}>。
+ */
+
+import { use, useEffect, useState } from "react";
+import Link from "next/link";
+import type { EventView } from "@/app/events/types";
+import { AdminGuard } from "../../AdminGuard";
+import { EventForm } from "../../EventForm";
+import { getAdminEvent } from "../../lib";
+
+interface Param {
+  params: Promise<{ id: string }>;
+}
+
+export default function EditEventPage({ params }: Param) {
+  // React 19 的 new-style async params：用 use() 同步解包 Promise
+  const { id } = use(params);
+  const eventId = Number(id);
+
+  return (
+    <AdminGuard>
+      <EditEventInner eventId={eventId} />
+    </AdminGuard>
+  );
+}
+
+function EditEventInner({ eventId }: { eventId: number }) {
+  const [event, setEvent] = useState<EventView | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const data = await getAdminEvent(eventId);
+        if (!cancelled) setEvent(data);
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : "加载失败");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [eventId]);
+
+  return (
+    <main className="pt-32 pb-16 bg-[var(--background)] min-h-screen">
+      <div className="max-w-4xl mx-auto px-6 lg:px-8">
+        <Link
+          href="/admin/events"
+          className="font-mono text-[10px] uppercase tracking-widest text-neutral-500 hover:text-[#CC0000] transition-colors"
+        >
+          ← 返回活动列表
+        </Link>
+        <header className="mt-4 border-t-4 border-[var(--foreground)] pt-6 mb-8">
+          <div className="font-mono text-[10px] uppercase tracking-[0.3em] text-neutral-500">
+            Admin · Events · Edit #{eventId}
+          </div>
+          <h1 className="font-serif text-3xl md:text-4xl font-black uppercase mt-2 tracking-tight">
+            编辑活动
+          </h1>
+        </header>
+
+        {loading && (
+          <p className="font-mono text-xs text-neutral-500">加载中…</p>
+        )}
+        {error && (
+          <div className="border border-[#CC0000] p-4 text-sm text-[#CC0000] font-mono">
+            {error}
+          </div>
+        )}
+        {event && <EventForm initial={event} />}
+      </div>
+    </main>
+  );
+}
diff --git a/app/admin/events/layout.tsx b/app/admin/events/layout.tsx
new file mode 100644
index 00000000..5ab7c002
--- /dev/null
+++ b/app/admin/events/layout.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { Header } from "@/app/components/Header";
+import { Footer } from "@/app/components/Footer";
+
+/**
+ * Admin 活动后台的共享 layout：
+ * 因为 Header / Footer 是 Server Component（用 next-intl 的 getTranslations），
+ * 不能直接在 "use client" 的 page.tsx 里渲染（会触发
+ * "getTranslations is not supported in Client Components" 500）。
+ * 所以把 Header / Footer 提到这个 Server Component layout 里，
+ * 让 admin page 自己是纯 client 组件只管渲染内容区。
+ */
+export default function AdminEventsLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+}
diff --git a/app/admin/events/lib.ts b/app/admin/events/lib.ts
new file mode 100644
index 00000000..81b2f6a6
--- /dev/null
+++ b/app/admin/events/lib.ts
@@ -0,0 +1,79 @@
+"use client";
+
+/**
+ * Admin 侧的 Events API client（Client-only）。
+ *
+ * 为什么全部客户端：
+ * - Admin 页本身就是交互表单，用 Client Component 合理
+ * - 带 satoken header，必须在浏览器 localStorage 里取；SSR 没有 token
+ * - 避免 SSR 缓存污染 admin 视角的数据
+ */
+
+import type { EventRequest, EventView } from "@/app/events/types";
+
+interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+}
+
+/** 从 localStorage 读 satoken，没登录就 null（调用侧应该已经卡住了） */
+function token(): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem("satoken");
+}
+
+async function request<T>(url: string, init: RequestInit = {}): Promise<T> {
+  const t = token();
+  const res = await fetch(url, {
+    ...init,
+    headers: {
+      "content-type": "application/json",
+      accept: "application/json",
+      ...(t ? { satoken: t } : {}),
+      ...(init.headers ?? {}),
+    },
+  });
+  const json = (await res.json()) as ApiResponse<T>;
+  if (!res.ok || !json.success) {
+    throw new Error(json.message ?? `请求失败 ${res.status}`);
+  }
+  if (json.data === undefined) {
+    throw new Error("后端返回 success 但没有 data");
+  }
+  return json.data;
+}
+
+export function listAdminEvents(): Promise<EventView[]> {
+  return request<EventView[]>("/api/admin/events");
+}
+
+export function getAdminEvent(id: number): Promise<EventView> {
+  return request<EventView>(`/api/admin/events/${id}`);
+}
+
+export function createEvent(req: EventRequest): Promise<EventView> {
+  return request<EventView>("/api/admin/events", {
+    method: "POST",
+    body: JSON.stringify(req),
+  });
+}
+
+export function updateEvent(id: number, req: EventRequest): Promise<EventView> {
+  return request<EventView>(`/api/admin/events/${id}`, {
+    method: "PUT",
+    body: JSON.stringify(req),
+  });
+}
+
+export async function deleteEvent(id: number): Promise<void> {
+  const t = token();
+  const res = await fetch(`/api/admin/events/${id}`, {
+    method: "DELETE",
+    headers: t ? { satoken: t } : {},
+  });
+  if (!res.ok) {
+    const json = (await res.json().catch(() => ({}))) as ApiResponse<unknown>;
+    throw new Error(json.message ?? `删除失败 ${res.status}`);
+  }
+}
diff --git a/app/admin/events/new/page.tsx b/app/admin/events/new/page.tsx
new file mode 100644
index 00000000..43f9fcf9
--- /dev/null
+++ b/app/admin/events/new/page.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+/**
+ * /admin/events/new — 新建活动。
+ * 纯表单页，复用 <EventForm>。
+ */
+
+import Link from "next/link";
+import { AdminGuard } from "../AdminGuard";
+import { EventForm } from "../EventForm";
+
+export default function NewEventPage() {
+  return (
+    <AdminGuard>
+      <main className="pt-32 pb-16 bg-[var(--background)] min-h-screen">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <Link
+            href="/admin/events"
+            className="font-mono text-[10px] uppercase tracking-widest text-neutral-500 hover:text-[#CC0000] transition-colors"
+          >
+            ← 返回活动列表
+          </Link>
+          <header className="mt-4 border-t-4 border-[var(--foreground)] pt-6 mb-8">
+            <div className="font-mono text-[10px] uppercase tracking-[0.3em] text-neutral-500">
+              Admin · Events · New
+            </div>
+            <h1 className="font-serif text-3xl md:text-4xl font-black uppercase mt-2 tracking-tight">
+              新建活动
+            </h1>
+          </header>
+          <EventForm />
+        </div>
+      </main>
+    </AdminGuard>
+  );
+}
diff --git a/app/admin/events/page.tsx b/app/admin/events/page.tsx
new file mode 100644
index 00000000..6dca1c28
--- /dev/null
+++ b/app/admin/events/page.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+/**
+ * /admin/events — 管理员后台活动列表。
+ *
+ * 权限：包在 <AdminGuard> 里，非 admin 看不到数据。
+ * 交互：列表 + 状态标记 + 编辑/删除按钮；顶上一个"新建活动"。
+ */
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import type { EventView } from "@/app/events/types";
+import { AdminGuard } from "./AdminGuard";
+import { deleteEvent, listAdminEvents } from "./lib";
+
+// Header / Footer 由 admin/events/layout.tsx（Server Component）负责渲染
+export default function AdminEventsPage() {
+  return (
+    <AdminGuard>
+      <AdminEventsInner />
+    </AdminGuard>
+  );
+}
+
+function AdminEventsInner() {
+  const [events, setEvents] = useState<EventView[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState<number | null>(null);
+
+  const load = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const list = await listAdminEvents();
+      setEvents(list);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "加载失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  const onDelete = async (id: number, title: string) => {
+    if (
+      !confirm(
+        `确定删除「${title}」？此操作不可逆，会连同所有感兴趣记录一起清空。`,
+      )
+    ) {
+      return;
+    }
+    setDeleting(id);
+    try {
+      await deleteEvent(id);
+      setEvents((xs) => xs.filter((x) => x.id !== id));
+    } catch (e) {
+      alert(e instanceof Error ? e.message : "删除失败");
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  return (
+    <main className="pt-32 pb-16 bg-[var(--background)] min-h-screen">
+      <div className="max-w-6xl mx-auto px-6 lg:px-8">
+        <header className="border-t-4 border-[var(--foreground)] pt-6 mb-10 flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <div className="font-mono text-[10px] uppercase tracking-[0.3em] text-neutral-500">
+              Admin · Events
+            </div>
+            <h1 className="font-serif text-3xl md:text-4xl font-black uppercase mt-2 tracking-tight">
+              活动管理
+            </h1>
+          </div>
+          <Link
+            href="/admin/events/new"
+            className="font-mono text-xs uppercase tracking-widest px-4 py-2 border border-[var(--foreground)] bg-[var(--foreground)] text-[var(--background)] hover:bg-[#CC0000] hover:border-[#CC0000] transition-colors"
+          >
+            + 新建活动
+          </Link>
+        </header>
+
+        {loading && (
+          <p className="font-mono text-xs text-neutral-500">加载中…</p>
+        )}
+        {error && (
+          <div className="border border-[#CC0000] p-4 text-sm text-[#CC0000] font-mono mb-6">
+            {error}
+          </div>
+        )}
+
+        {!loading && events.length === 0 && !error && (
+          <div className="border border-dashed border-[var(--foreground)] p-10 text-center text-neutral-500 font-sans text-sm">
+            还没有活动。点右上角新建。
+          </div>
+        )}
+
+        {events.length > 0 && (
+          <table className="w-full border-collapse border border-[var(--foreground)] text-sm">
+            <thead>
+              <tr className="border-b border-[var(--foreground)] bg-neutral-100 dark:bg-neutral-900">
+                <th className="text-left px-3 py-2 font-mono text-[10px] uppercase tracking-widest">
+                  #
+                </th>
+                <th className="text-left px-3 py-2 font-mono text-[10px] uppercase tracking-widest">
+                  标题
+                </th>
+                <th className="text-left px-3 py-2 font-mono text-[10px] uppercase tracking-widest">
+                  状态
+                </th>
+                <th className="text-left px-3 py-2 font-mono text-[10px] uppercase tracking-widest">
+                  开始时间
+                </th>
+                <th className="text-left px-3 py-2 font-mono text-[10px] uppercase tracking-widest">
+                  感兴趣
+                </th>
+                <th className="text-right px-3 py-2 font-mono text-[10px] uppercase tracking-widest">
+                  操作
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {events.map((e) => (
+                <tr
+                  key={e.id}
+                  className="border-b border-[var(--foreground)]/40 hover:bg-neutral-50 dark:hover:bg-neutral-900/50"
+                >
+                  <td className="px-3 py-3 font-mono text-xs text-neutral-500">
+                    {e.id}
+                  </td>
+                  <td className="px-3 py-3 font-serif font-semibold">
+                    <Link
+                      href={`/admin/events/${e.id}/edit`}
+                      className="hover:text-[#CC0000] transition-colors"
+                    >
+                      {e.title}
+                    </Link>
+                  </td>
+                  <td className="px-3 py-3 font-mono text-xs uppercase">
+                    <StatusPill status={e.status} />
+                  </td>
+                  <td className="px-3 py-3 font-mono text-xs text-neutral-500">
+                    {e.startTime
+                      ? new Date(e.startTime).toLocaleString("zh-CN")
+                      : "—"}
+                  </td>
+                  <td className="px-3 py-3 font-mono text-xs">
+                    {e.interestCount}
+                  </td>
+                  <td className="px-3 py-3 text-right">
+                    <div className="inline-flex gap-2">
+                      <Link
+                        href={`/events/${e.id}`}
+                        target="_blank"
+                        className="font-mono text-[10px] uppercase tracking-widest border border-[var(--foreground)] px-2 py-1 hover:bg-[var(--foreground)] hover:text-[var(--background)] transition-colors"
+                      >
+                        预览
+                      </Link>
+                      <Link
+                        href={`/admin/events/${e.id}/edit`}
+                        className="font-mono text-[10px] uppercase tracking-widest border border-[var(--foreground)] px-2 py-1 hover:bg-[var(--foreground)] hover:text-[var(--background)] transition-colors"
+                      >
+                        编辑
+                      </Link>
+                      <button
+                        type="button"
+                        disabled={deleting === e.id}
+                        onClick={() => onDelete(e.id, e.title)}
+                        className="font-mono text-[10px] uppercase tracking-widest border border-[#CC0000] text-[#CC0000] px-2 py-1 hover:bg-[#CC0000] hover:text-white transition-colors disabled:opacity-50"
+                      >
+                        {deleting === e.id ? "删除中…" : "删除"}
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </main>
+  );
+}
+
+function StatusPill({ status }: { status: string }) {
+  const colorMap: Record<string, string> = {
+    draft: "border-neutral-400 text-neutral-500",
+    published: "border-[#CC0000] text-[#CC0000]",
+    archived: "border-neutral-600 text-neutral-600",
+    cancelled: "border-neutral-400 text-neutral-400 line-through",
+  };
+  return (
+    <span
+      className={`border px-1.5 py-0.5 ${colorMap[status] ?? "border-neutral-400"}`}
+    >
+      {status}
+    </span>
+  );
+}
diff --git a/app/components/ActivityTicker.tsx b/app/components/ActivityTicker.tsx
index f9b7d77a..ee378e5e 100644
--- a/app/components/ActivityTicker.tsx
+++ b/app/components/ActivityTicker.tsx
@@ -1,76 +1,36 @@
-import { activityEventsConfig } from "@/app/types/event";
 import { cn } from "@/lib/utils";
+import { fetchHomepageEvents, type HomepageEvent } from "@/lib/events-fetch";
 
-const { events: rawEvents, settings } = activityEventsConfig;
-
-const {
-  maxItems: configuredMaxItems = 3,
-  rotationIntervalMs: configuredRotationIntervalMs = 8000,
-} = settings;
+/**
+ * 首页顶部活动轮播。
+ *
+ * 数据源已经从 data/event.json 迁移到后端 /api/events（管理员在 /admin/events 维护）。
+ * BACKEND_URL 不可用 / 后端抖动时自动 fallback 到 event.json，保证首屏不会空白。
+ *
+ * 为什么是 Server Component：
+ * - 没有交互状态（纯 CSS 跑马灯动画）
+ * - SSR 时已经能拿到数据，避免 client fetch 造成首屏闪烁
+ * - revalidate: 300 让 Neon 压力稳定在每 5min 一次 SSR
+ *
+ * MAX_ITEMS 和 ROTATION_MS 原先在 event.json 的 settings 字段，迁后端后没对应列，
+ * 直接在这里作为常量；如果真需要动态，再开一张 events_settings 表。
+ */
 
-// 默认配置，从data/event.json中读取配置
-const MAX_ITEMS = configuredMaxItems;
+const MAX_ITEMS = 3;
+const ROTATION_MS = 8000;
 
-/** ActivityTicker 外部传入的样式配置 */
 type ActivityTickerProps = {
-  /** 容器额外类名，用于控制宽度与定位 */
   className?: string;
 };
 
-/**
- * 首页活动轮播组件：
- * - 读取 event.json 配置的活动数量
- * - 横向跑马灯自动滚动，悬停暂停
- * - 每条活动可点击跳转到 Discord
- */
-export function ActivityTicker({ className }: ActivityTickerProps) {
-  const events = rawEvents.slice(0, MAX_ITEMS);
-  const animationDurationMs =
-    configuredRotationIntervalMs * Math.max(events.length, 1);
-  const lastEventIndex = events.length - 1;
+export async function ActivityTicker({ className }: ActivityTickerProps) {
+  const all = await fetchHomepageEvents();
+  const events = all.slice(0, MAX_ITEMS);
 
-  if (events.length === 0) {
-    return null;
-  }
+  if (events.length === 0) return null;
 
-  const renderEvent = (
-    event: (typeof events)[number],
-    keyPrefix: string,
-    idx: number,
-  ) => {
-    let href = event.discord;
-    if (event.deprecated) {
-      href =
-        event.playback ||
-        "https://involutionhell.com/docs/jobs/event-keynote/event-takeway";
-    }
-
-    return (
-      <div
-        key={`${keyPrefix}-${event.name}-${idx}`}
-        className="flex items-center gap-4 whitespace-nowrap"
-      >
-        {idx === lastEventIndex ? (
-          <span className="bg-[#CC0000] text-white px-2 py-0.5 font-mono text-[10px] uppercase tracking-tighter shrink-0">
-            Update
-          </span>
-        ) : null}
-        <a
-          href={href}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="font-sans text-xs font-bold uppercase tracking-widest hover:text-[#CC0000]"
-        >
-          {event.name} —{" "}
-          {event.deprecated ? "Archives Available" : "Event Active"}
-        </a>
-        <span className="text-neutral-400 font-mono text-[10px]">&bull;</span>
-        <span className="font-mono text-[10px] text-neutral-500 uppercase">
-          Edition 1.0.0
-        </span>
-      </div>
-    );
-  };
+  const animationDurationMs = ROTATION_MS * Math.max(events.length, 1);
+  const lastEventIndex = events.length - 1;
 
   return (
     <div
@@ -84,15 +44,69 @@ export function ActivityTicker({ className }: ActivityTickerProps) {
         style={{ animationDuration: `${animationDurationMs}ms` }}
       >
         <div className="flex items-center gap-6 pr-6 shrink-0">
-          {events.map((event, idx) => renderEvent(event, "primary", idx))}
+          {events.map((event, idx) => (
+            <TickerItem
+              key={`primary-${event.name}-${idx}`}
+              event={event}
+              isLast={idx === lastEventIndex}
+            />
+          ))}
         </div>
         <div
           className="flex items-center gap-6 pr-6 shrink-0"
           aria-hidden="true"
         >
-          {events.map((event, idx) => renderEvent(event, "secondary", idx))}
+          {events.map((event, idx) => (
+            <TickerItem
+              key={`secondary-${event.name}-${idx}`}
+              event={event}
+              isLast={idx === lastEventIndex}
+            />
+          ))}
         </div>
       </div>
     </div>
   );
 }
+
+function TickerItem({
+  event,
+  isLast,
+}: {
+  event: HomepageEvent;
+  isLast: boolean;
+}) {
+  // 优先跳详情页（有 id 时），否则老行为：直接 Discord / playback
+  const href =
+    event.id != null
+      ? `/events/${event.id}`
+      : event.deprecated
+        ? event.playback ||
+          "https://involutionhell.com/docs/jobs/event-keynote/event-takeway"
+        : event.discord;
+
+  const isInternal = href.startsWith("/");
+
+  return (
+    <div className="flex items-center gap-4 whitespace-nowrap">
+      {isLast ? (
+        <span className="bg-[#CC0000] text-white px-2 py-0.5 font-mono text-[10px] uppercase tracking-tighter shrink-0">
+          Update
+        </span>
+      ) : null}
+      <a
+        href={href}
+        target={isInternal ? undefined : "_blank"}
+        rel={isInternal ? undefined : "noopener noreferrer"}
+        className="font-sans text-xs font-bold uppercase tracking-widest hover:text-[#CC0000]"
+      >
+        {event.name} —{" "}
+        {event.deprecated ? "Archives Available" : "Event Active"}
+      </a>
+      <span className="text-neutral-400 font-mono text-[10px]">&bull;</span>
+      <span className="font-mono text-[10px] text-neutral-500 uppercase">
+        Edition 1.0.0
+      </span>
+    </div>
+  );
+}
diff --git a/app/components/float-window/FloatWindow.tsx b/app/components/float-window/FloatWindow.tsx
index 8b67f693..522fdba8 100644
--- a/app/components/float-window/FloatWindow.tsx
+++ b/app/components/float-window/FloatWindow.tsx
@@ -4,29 +4,27 @@ import { useState, useCallback } from "react";
 import { usePathname } from "next/navigation";
 import Image from "next/image";
 import { motion, AnimatePresence } from "motion/react";
-import { activityEventsConfig } from "@/app/types/event";
+import type { HomepageEvent } from "@/lib/events-fetch";
 import { cn } from "@/lib/utils";
 import { X, ChevronUp, ExternalLink, Play } from "lucide-react";
 import styles from "./FloatWindow.module.css";
 
-const { events: rawEvents, settings } = activityEventsConfig;
-const { maxItems } = settings;
-
-// 显示所有活动（包括存档的已过期活动）
-// 优先显示未过期的活动，然后是已过期的
-const sortedEvents = [
-  ...rawEvents.filter((e) => !e.deprecated),
-  ...rawEvents.filter((e) => e.deprecated),
-].slice(0, maxItems);
-
-const latestEvent = sortedEvents[0];
-
 /**
- * FloatWindow - 复古报纸风格的活动预告悬浮窗
- * 仅显示最新的一条活动
- * 仅在首页 (/) 可见
+ * FloatWindow - 复古报纸风格的活动预告悬浮窗。
+ * 仅显示最新的一条活动，仅在首页 (/) 可见。
+ *
+ * 数据来源：
+ * - 之前从 data/event.json 直接 import
+ * - 现在由上游 Server Component（app/page.tsx）调 lib/events-fetch.ts 拉 /api/events
+ *   后通过 event prop 传进来；后端失败时 fetch 内部会 fallback 到 JSON
  */
-export function FloatWindow() {
+
+interface FloatWindowProps {
+  /** 要展示的单条活动；null 或已过期时组件不渲染 */
+  event: HomepageEvent | null;
+}
+
+export function FloatWindow({ event }: FloatWindowProps) {
   const pathname = usePathname();
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isDismissed, setIsDismissed] = useState(false);
@@ -37,10 +35,9 @@ export function FloatWindow() {
   const handleDismiss = useCallback(() => setIsDismissed(true), []);
   const handleToggle = useCallback(() => setIsCollapsed((prev) => !prev), []);
 
-  if (!isHomePage || isDismissed || !latestEvent || latestEvent.deprecated)
-    return null;
+  if (!isHomePage || isDismissed || !event || event.deprecated) return null;
 
-  const currentEvent = latestEvent;
+  const currentEvent = event;
 
   return (
     <motion.div
diff --git a/app/events/[id]/InterestButton.tsx b/app/events/[id]/InterestButton.tsx
new file mode 100644
index 00000000..dc423f9e
--- /dev/null
+++ b/app/events/[id]/InterestButton.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+/**
+ * 活动详情页的"感兴趣"按钮（Client Component）。
+ *
+ * 行为：
+ * - 未登录：显示"登录后感兴趣"，点击跳 /login
+ * - 登录：按当前 interested 状态显示切换按钮，乐观更新 count
+ * - 后端幂等接口 POST/DELETE /api/events/{id}/interest，返回新 count，以后端为准
+ *
+ * 不做 SWR 集成：交互简单（只关心自己的点击），直接 useState + fetch 更直白
+ */
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/use-auth";
+
+interface Props {
+  eventId: number;
+  initialCount: number;
+  initialInterested: boolean;
+}
+
+interface InterestResponse {
+  success: boolean;
+  data?: { count: number; interested: boolean };
+  message?: string;
+}
+
+export function InterestButton({
+  eventId,
+  initialCount,
+  initialInterested,
+}: Props) {
+  const { status } = useAuth();
+  const router = useRouter();
+  const [count, setCount] = useState(initialCount);
+  const [interested, setInterested] = useState(initialInterested);
+  const [loading, setLoading] = useState(false);
+
+  if (status === "unauthenticated") {
+    return (
+      <button
+        type="button"
+        onClick={() => router.push("/login")}
+        className="font-mono text-xs uppercase tracking-widest px-4 py-2 border border-[var(--foreground)] hover:bg-[var(--foreground)] hover:text-[var(--background)] transition-colors"
+      >
+        登录后标记感兴趣 · {count}
+      </button>
+    );
+  }
+
+  const toggle = async () => {
+    if (loading || status !== "authenticated") return;
+    setLoading(true);
+
+    // 乐观更新：立刻切换 UI，失败再回滚
+    const prevInterested = interested;
+    const prevCount = count;
+    const nextInterested = !prevInterested;
+    setInterested(nextInterested);
+    setCount((c) => c + (nextInterested ? 1 : -1));
+
+    try {
+      const token = localStorage.getItem("satoken");
+      const res = await fetch(`/api/events/${eventId}/interest`, {
+        method: nextInterested ? "POST" : "DELETE",
+        headers: token ? { satoken: token } : {},
+      });
+      const json = (await res.json()) as InterestResponse;
+      if (!res.ok || !json.success || !json.data) {
+        throw new Error(json.message ?? "操作失败");
+      }
+      // 用后端返回的权威值覆盖乐观值，避免竞争
+      setCount(json.data.count);
+      setInterested(json.data.interested);
+    } catch {
+      // 回滚
+      setInterested(prevInterested);
+      setCount(prevCount);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      disabled={loading}
+      onClick={toggle}
+      className={`font-mono text-xs uppercase tracking-widest px-4 py-2 border transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
+        interested
+          ? "border-[#CC0000] bg-[#CC0000] text-white hover:bg-transparent hover:text-[#CC0000]"
+          : "border-[var(--foreground)] hover:bg-[var(--foreground)] hover:text-[var(--background)]"
+      }`}
+    >
+      {interested ? "已标记 · " : "感兴趣 · "}
+      {count}
+    </button>
+  );
+}
diff --git a/app/events/[id]/page.tsx b/app/events/[id]/page.tsx
new file mode 100644
index 00000000..b853a4f2
--- /dev/null
+++ b/app/events/[id]/page.tsx
@@ -0,0 +1,287 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Header } from "@/app/components/Header";
+import { Footer } from "@/app/components/Footer";
+import type { EventDetailResponse, EventView } from "../types";
+import { InterestButton } from "./InterestButton";
+
+/**
+ * /events/[id] 详情页。SSR 拉 /api/events/{id}。
+ *
+ * 核心信息摆放：
+ *   - 头部：标题 + 时间 + 状态 + tags
+ *   - 描述大段落
+ *   - 讲师列表（有则渲染，没有则隐藏整块）
+ *   - 回放嵌入区：优先 iframe（YouTube 直接内嵌），其次普通链接按钮
+ *   - Discord / 感兴趣按钮（感兴趣是 Client Component 独立管理登录状态）
+ */
+
+export const revalidate = 300;
+
+interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+}
+
+async function fetchDetail(id: string): Promise<EventDetailResponse | null> {
+  const backendUrl = process.env.BACKEND_URL;
+  if (!backendUrl) throw new Error("BACKEND_URL is not configured");
+  const res = await fetch(
+    `${backendUrl}/api/events/${encodeURIComponent(id)}`,
+    {
+      next: { revalidate: 300 },
+      headers: {
+        accept: "application/json",
+        "user-agent": "InvolutionHell-SSR/1.0 (+https://involutionhell.com)",
+      },
+    },
+  );
+  if (res.status === 404) return null;
+  if (!res.ok) {
+    throw new Error(
+      `/api/events/${id} backend ${res.status} ${res.statusText}`,
+    );
+  }
+  const json = (await res.json()) as ApiResponse<EventDetailResponse>;
+  if (!json.success || !json.data) return null;
+  return json.data;
+}
+
+interface Param {
+  params: Promise<{ id: string }>;
+}
+
+export async function generateMetadata({ params }: Param): Promise<Metadata> {
+  const { id } = await params;
+  const data = await fetchDetail(id);
+  if (!data) return { title: `活动 #${id} · Involution Hell` };
+  return {
+    title: `${data.event.title} · Involution Hell`,
+    description: data.event.description || "Involution Hell 社群活动详情。",
+  };
+}
+
+export default async function EventDetailPage({ params }: Param) {
+  const { id } = await params;
+  const data = await fetchDetail(id);
+  if (!data) notFound();
+
+  const event = data.event;
+  const embedUrl = toYoutubeEmbed(event.playbackUrl);
+
+  return (
+    <>
+      <Header />
+      <main className="pt-32 pb-16 bg-[var(--background)] min-h-screen">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          {/* 返回链接 */}
+          <Link
+            href="/events"
+            className="font-mono text-[10px] uppercase tracking-widest text-neutral-500 hover:text-[#CC0000] transition-colors"
+          >
+            ← 所有活动
+          </Link>
+
+          <header className="mt-4 border-t-4 border-[var(--foreground)] pt-6">
+            <div className="flex flex-wrap items-center gap-2 mb-3">
+              <StatusBadge event={event} />
+              {event.tags.map((t) => (
+                <span
+                  key={t}
+                  className="font-mono text-[10px] uppercase tracking-widest text-neutral-500 border border-neutral-400 px-2 py-0.5"
+                >
+                  {t}
+                </span>
+              ))}
+            </div>
+            <h1 className="font-serif text-3xl md:text-5xl font-black uppercase tracking-tight text-[var(--foreground)]">
+              {event.title}
+            </h1>
+            {event.startTime && (
+              <p className="mt-3 font-mono text-xs text-neutral-500">
+                {formatDateTime(event.startTime)}
+                {event.endTime && <> — {formatDateTime(event.endTime)}</>}
+              </p>
+            )}
+          </header>
+
+          {event.coverUrl && (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={event.coverUrl}
+              alt={event.title}
+              className="w-full aspect-[16/9] object-cover border border-[var(--foreground)] mt-6"
+            />
+          )}
+
+          {event.description && (
+            <section className="mt-8 prose prose-neutral dark:prose-invert max-w-none leading-relaxed">
+              {event.description.split(/\n{2,}/).map((para, i) => (
+                <p key={i} className="text-sm md:text-base">
+                  {para}
+                </p>
+              ))}
+            </section>
+          )}
+
+          {event.speakers.length > 0 && (
+            <section className="mt-10">
+              <h2 className="font-mono text-[10px] uppercase tracking-[0.3em] text-neutral-500 mb-4">
+                Speakers
+              </h2>
+              <ul className="flex flex-wrap gap-4">
+                {event.speakers.map((s) => (
+                  <li
+                    key={s.name}
+                    className="flex items-center gap-3 border border-[var(--foreground)] px-3 py-2"
+                  >
+                    {s.avatarUrl && (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={s.avatarUrl}
+                        alt={s.name}
+                        className="w-8 h-8 border border-[var(--foreground)] object-cover"
+                      />
+                    )}
+                    {s.profileUrl ? (
+                      <a
+                        href={s.profileUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="font-serif text-sm font-semibold hover:text-[#CC0000] transition-colors"
+                      >
+                        {s.name}
+                      </a>
+                    ) : (
+                      <span className="font-serif text-sm font-semibold">
+                        {s.name}
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+
+          {/* 回放：YouTube 可嵌入就内嵌，不行就给按钮 */}
+          {event.playbackUrl && (
+            <section className="mt-10">
+              <h2 className="font-mono text-[10px] uppercase tracking-[0.3em] text-neutral-500 mb-4">
+                回放 · Playback
+              </h2>
+              {embedUrl ? (
+                <div className="aspect-video border border-[var(--foreground)]">
+                  <iframe
+                    src={embedUrl}
+                    title={`${event.title} 回放`}
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                    className="w-full h-full"
+                  />
+                </div>
+              ) : (
+                <a
+                  href={event.playbackUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-block font-mono text-xs uppercase tracking-widest px-4 py-2 border border-[var(--foreground)] hover:bg-[var(--foreground)] hover:text-[var(--background)] transition-colors"
+                >
+                  前往回放 →
+                </a>
+              )}
+            </section>
+          )}
+
+          {/* 操作区：感兴趣 + Discord */}
+          <section className="mt-12 flex flex-wrap items-center gap-4 border-t border-[var(--foreground)]/40 pt-6">
+            <InterestButton
+              eventId={event.id}
+              initialCount={event.interestCount}
+              initialInterested={data.interested}
+            />
+            {event.discordLink && (
+              <a
+                href={event.discordLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-mono text-xs uppercase tracking-widest px-4 py-2 border border-[var(--foreground)] bg-[var(--foreground)] text-[var(--background)] hover:bg-[#CC0000] hover:border-[#CC0000] transition-colors"
+              >
+                进入 Discord →
+              </a>
+            )}
+          </section>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+function StatusBadge({ event }: { event: EventView }) {
+  if (event.ongoing)
+    return (
+      <span className="font-mono text-[10px] uppercase tracking-widest bg-[#CC0000] text-white px-2 py-0.5">
+        进行中
+      </span>
+    );
+  if (event.past)
+    return (
+      <span className="font-mono text-[10px] uppercase tracking-widest border border-neutral-400 text-neutral-500 px-2 py-0.5">
+        已结束
+      </span>
+    );
+  if (event.status === "published")
+    return (
+      <span className="font-mono text-[10px] uppercase tracking-widest border border-[var(--foreground)] text-[var(--foreground)] px-2 py-0.5">
+        即将开始
+      </span>
+    );
+  return (
+    <span className="font-mono text-[10px] uppercase tracking-widest border border-neutral-400 text-neutral-500 px-2 py-0.5">
+      {event.status}
+    </span>
+  );
+}
+
+/**
+ * 如果 playback URL 是 YouTube 视频链接，转换成 embed URL。
+ * 其他链接（Drive / 站内 docs）不做 iframe 嵌入，避免 X-Frame-Options 报错。
+ */
+function toYoutubeEmbed(url: string | null | undefined): string | null {
+  if (!url) return null;
+  try {
+    const u = new URL(url);
+    if (u.hostname === "youtu.be") {
+      return `https://www.youtube.com/embed/${u.pathname.slice(1)}`;
+    }
+    if (
+      u.hostname.endsWith("youtube.com") ||
+      u.hostname.endsWith("youtube-nocookie.com")
+    ) {
+      const videoId = u.searchParams.get("v");
+      if (videoId) return `https://www.youtube.com/embed/${videoId}`;
+      // 已经是 /embed/ 路径
+      if (u.pathname.startsWith("/embed/")) return url;
+    }
+  } catch {
+    // 非法 URL 直接跳过
+  }
+  return null;
+}
+
+function formatDateTime(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}
diff --git a/app/events/page.tsx b/app/events/page.tsx
new file mode 100644
index 00000000..55e27396
--- /dev/null
+++ b/app/events/page.tsx
@@ -0,0 +1,200 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Header } from "@/app/components/Header";
+import { Footer } from "@/app/components/Footer";
+import type { EventView } from "./types";
+
+/**
+ * /events 列表页。
+ *
+ * SSR 直连后端（BACKEND_URL）拉 published + archived 活动。
+ * 错误策略参考 /u/[username]/page.tsx：只有网络 / 5xx 才抛，空列表不是错误。
+ *
+ * revalidate: 300 把 Neon 打压力压到每 5min 一次 SSR，和 PR #286 的 profile 策略一致。
+ */
+
+export const revalidate = 300;
+
+interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+}
+
+async function fetchEvents(): Promise<EventView[]> {
+  const backendUrl = process.env.BACKEND_URL;
+  if (!backendUrl) {
+    // 开发环境或 misconfig 时给一个清晰报错，而不是静默空列表
+    throw new Error("BACKEND_URL is not configured");
+  }
+  const res = await fetch(`${backendUrl}/api/events`, {
+    next: { revalidate: 300 },
+    headers: {
+      accept: "application/json",
+      "user-agent": "InvolutionHell-SSR/1.0 (+https://involutionhell.com)",
+    },
+  });
+  if (!res.ok) {
+    throw new Error(`/api/events backend ${res.status} ${res.statusText}`);
+  }
+  const json = (await res.json()) as ApiResponse<EventView[]>;
+  return json.success && json.data ? json.data : [];
+}
+
+export const metadata: Metadata = {
+  title: "活动 · Involution Hell",
+  description:
+    "Coffee Chat、Mock Interview、Career Journey、Open.Onion 等社群活动汇总，直播入口和历史回放一站式。",
+};
+
+export default async function EventsListPage() {
+  const all = await fetchEvents();
+  // 按时间划分：进行中 / 即将开始 / 已结束。ongoing + past 由后端标记，剩下的归"即将开始"
+  const ongoing = all.filter((e) => e.ongoing);
+  const upcoming = all.filter((e) => !e.ongoing && !e.past);
+  const past = all.filter((e) => e.past);
+
+  return (
+    <>
+      <Header />
+      <main className="pt-32 pb-16 bg-[var(--background)] min-h-screen">
+        <div className="max-w-6xl mx-auto px-6 lg:px-8">
+          <header className="border-t-4 border-[var(--foreground)] pt-6 mb-12">
+            <div className="font-mono text-[10px] uppercase tracking-[0.3em] text-neutral-500">
+              Community · Events
+            </div>
+            <h1 className="font-serif text-4xl md:text-5xl font-black uppercase mt-2 tracking-tight text-[var(--foreground)]">
+              社群活动
+            </h1>
+            <p className="mt-4 text-sm md:text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed">
+              社群运营的 Coffee Chat / Mock Interview / Career Journey /
+              Open.Onion 等活动。错过了也没事——每场都会留下回放文档。
+            </p>
+          </header>
+
+          {ongoing.length > 0 && (
+            <EventSection title="正在进行" events={ongoing} highlight />
+          )}
+          {upcoming.length > 0 && (
+            <EventSection title="即将开始" events={upcoming} />
+          )}
+          {past.length > 0 && <EventSection title="历史活动" events={past} />}
+
+          {all.length === 0 && (
+            <div className="border border-dashed border-[var(--foreground)] p-10 text-center text-neutral-500 font-sans text-sm leading-relaxed">
+              暂无公开活动。
+              <br />
+              <span className="text-xs text-neutral-400">
+                关注 Discord 获取第一手活动通知。
+              </span>
+            </div>
+          )}
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+function EventSection({
+  title,
+  events,
+  highlight,
+}: {
+  title: string;
+  events: EventView[];
+  highlight?: boolean;
+}) {
+  return (
+    <section className="mb-14">
+      <div className="flex items-baseline justify-between gap-3 mb-6 border-b border-[var(--foreground)]/40 pb-3">
+        <h2
+          className={`font-serif text-2xl md:text-3xl font-black uppercase tracking-tight ${
+            highlight ? "text-[#CC0000]" : "text-[var(--foreground)]"
+          }`}
+        >
+          {title}
+        </h2>
+        <div className="font-mono text-[10px] uppercase tracking-widest text-neutral-500">
+          {events.length} 场
+        </div>
+      </div>
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {events.map((e) => (
+          <EventCard key={e.id} event={e} />
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function EventCard({ event }: { event: EventView }) {
+  return (
+    <li className="border border-[var(--foreground)] hover:border-[#CC0000] transition-colors group">
+      <Link href={`/events/${event.id}`} className="block">
+        {event.coverUrl ? (
+          // 用原生 img：/next.config.mjs 里全站 unoptimized:true，没必要走 next/image
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={event.coverUrl}
+            alt={event.title}
+            className="w-full aspect-[16/9] object-cover border-b border-[var(--foreground)]"
+          />
+        ) : (
+          <div className="w-full aspect-[16/9] bg-neutral-100 dark:bg-neutral-900 border-b border-[var(--foreground)] flex items-center justify-center text-xs font-mono uppercase text-neutral-400">
+            no cover
+          </div>
+        )}
+        <div className="p-4 flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            {event.tags.slice(0, 2).map((t) => (
+              <span
+                key={t}
+                className="font-mono text-[9px] uppercase tracking-widest text-neutral-500 border border-neutral-400 px-1.5 py-0.5"
+              >
+                {t}
+              </span>
+            ))}
+          </div>
+          <h3 className="font-serif text-lg font-black leading-snug group-hover:text-[#CC0000] transition-colors">
+            {event.title}
+          </h3>
+          {event.startTime && (
+            <p className="font-mono text-[11px] text-neutral-500">
+              {formatDate(event.startTime)}
+            </p>
+          )}
+          {event.description && (
+            <p className="text-sm text-neutral-600 dark:text-neutral-400 line-clamp-2 leading-relaxed">
+              {event.description}
+            </p>
+          )}
+          <div className="flex items-center gap-3 pt-2 text-[11px] font-mono text-neutral-500">
+            {event.interestCount > 0 && (
+              <span>{event.interestCount} 人感兴趣</span>
+            )}
+            {event.playbackUrl && <span>· 有回放</span>}
+            {event.ongoing && (
+              <span className="text-[#CC0000] font-bold">· LIVE</span>
+            )}
+          </div>
+        </div>
+      </Link>
+    </li>
+  );
+}
+
+function formatDate(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleDateString("zh-CN", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}
diff --git a/app/events/types.ts b/app/events/types.ts
new file mode 100644
index 00000000..d14b02d1
--- /dev/null
+++ b/app/events/types.ts
@@ -0,0 +1,57 @@
+/**
+ * Events 模块前后端共用的 TypeScript 类型。
+ * 字段与后端 com.involutionhell.backend.events.dto.EventView 保持 1:1 对应。
+ *
+ * 后端 EventView 里 speakers / tags 的结构：
+ * - speakers: 对象数组 [{name, avatarUrl?, profileUrl?}]
+ * - tags:     string[]（后端从逗号分隔字符串 split 后给前端）
+ *
+ * 日期字段：后端返回 ISO-8601 字符串（Jackson 默认格式），前端用 new Date() 解析。
+ */
+
+export interface EventSpeaker {
+  name: string;
+  avatarUrl?: string | null;
+  profileUrl?: string | null;
+}
+
+export type EventStatus = "draft" | "published" | "archived" | "cancelled";
+
+export interface EventView {
+  id: number;
+  title: string;
+  description: string;
+  coverUrl: string | null;
+  startTime: string | null; // ISO-8601
+  endTime: string | null; // ISO-8601
+  discordLink: string | null;
+  playbackUrl: string | null;
+  speakers: EventSpeaker[];
+  tags: string[];
+  status: EventStatus;
+  organizerId: number | null;
+  createdAt: string;
+  updatedAt: string;
+  interestCount: number;
+  ongoing: boolean;
+  past: boolean;
+}
+
+export interface EventDetailResponse {
+  event: EventView;
+  interested: boolean; // 当前登录用户是否感兴趣（匿名返回 false）
+}
+
+/** Admin 创建 / 更新 event 的入参。和后端 EventRequest 对齐。 */
+export interface EventRequest {
+  title: string;
+  description?: string;
+  coverUrl?: string | null;
+  startTime?: string | null;
+  endTime?: string | null;
+  discordLink?: string | null;
+  playbackUrl?: string | null;
+  speakers?: EventSpeaker[];
+  tags?: string[];
+  status?: EventStatus;
+}
diff --git a/app/page.tsx b/app/page.tsx
index 0d1289be..5935b29f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,15 +3,26 @@ import { Hero } from "./components/Hero";
 import { DispatchNetwork } from "./components/DispatchNetwork";
 import { Footer } from "./components/Footer";
 import { FloatWindow } from "./components/float-window/FloatWindow";
+import { fetchHomepageEvents } from "@/lib/events-fetch";
+
+/**
+ * 站点首页。现在是 async Server Component：在 SSR 时一并拉好活动数据，再传给
+ * FloatWindow（client component）。Hero 内部的 ActivityTicker 是独立的 async 组件
+ * 自己再 fetch 一次也没关系——Next Data Cache 会命中同一个 revalidate=300 条目，
+ * 不会多打一次后端。
+ */
+export default async function DocsIndex() {
+  const homepageEvents = await fetchHomepageEvents();
+  // FloatWindow 只展示"第一条未过期活动"；fetchHomepageEvents 已把未过期排前面
+  const latestActive = homepageEvents.find((e) => !e.deprecated) ?? null;
 
-export default function DocsIndex() {
   return (
     <>
       <Header />
       <Hero />
       <DispatchNetwork />
       <Footer />
-      <FloatWindow />
+      <FloatWindow event={latestActive} />
     </>
   );
 }
diff --git a/app/u/[username]/AdminLinkIfOwnerAdmin.tsx b/app/u/[username]/AdminLinkIfOwnerAdmin.tsx
new file mode 100644
index 00000000..25eb27ab
--- /dev/null
+++ b/app/u/[username]/AdminLinkIfOwnerAdmin.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import Link from "next/link";
+import { useAuth } from "@/lib/use-auth";
+
+/**
+ * 个人主页的"管理员界面"入口。
+ *
+ * 渲染条件（三者必须同时满足）：
+ *   1. 当前已登录
+ *   2. 当前登录用户就是这个主页的 owner（避免路人看到 "管理员界面" 按钮产生社交困惑）
+ *   3. 当前用户的 roles 包含 admin
+ *
+ * 也就是说：只有管理员访问自己主页时才看得到这个按钮。其他角色（其他登录用户、
+ * 匿名访客）一律 return null，连 DOM 都不存在。
+ *
+ * 用 client component 是因为依赖 useAuth（satoken 存在 localStorage，SSR 拿不到）。
+ */
+
+interface Props {
+  ownerGithubId: number | null;
+  ownerUsername: string;
+}
+
+export function AdminLinkIfOwnerAdmin({ ownerGithubId, ownerUsername }: Props) {
+  const { user, status } = useAuth();
+  if (status !== "authenticated" || !user) return null;
+
+  const isOwner =
+    (ownerGithubId != null && user.githubId === ownerGithubId) ||
+    user.username === ownerUsername;
+  if (!isOwner) return null;
+
+  const isAdmin = user.roles?.includes("admin") ?? false;
+  if (!isAdmin) return null;
+
+  return (
+    <Link
+      href="/admin/events"
+      className="font-mono text-[11px] uppercase tracking-widest px-2 py-1 border border-[#CC0000] text-[#CC0000] hover:bg-[#CC0000] hover:text-white transition-colors font-bold"
+      data-umami-event="profile_admin_click"
+    >
+      管理员界面
+    </Link>
+  );
+}
diff --git a/app/u/[username]/page.tsx b/app/u/[username]/page.tsx
index b7e7365c..96bfe0ff 100644
--- a/app/u/[username]/page.tsx
+++ b/app/u/[username]/page.tsx
@@ -7,6 +7,7 @@ import { Header } from "@/app/components/Header";
 import { Footer } from "@/app/components/Footer";
 import { ProfileCard } from "./ProfileCard";
 import { EditLinkIfOwner } from "./EditLinkIfOwner";
+import { AdminLinkIfOwnerAdmin } from "./AdminLinkIfOwnerAdmin";
 import { ActivityHeatmap } from "./ActivityHeatmap";
 import { FollowButton } from "./FollowButton";
 import { GithubRepos, GithubReposSkeleton } from "./GithubRepos";
@@ -410,6 +411,11 @@ export default async function UserProfilePage({ params }: Param) {
                   ownerUsername={user.username}
                   identifier={username}
                 />
+                {/* 管理员自见入口：只有 roles=admin 的本人访问自己主页时才渲染 */}
+                <AdminLinkIfOwnerAdmin
+                  ownerGithubId={user.githubId ?? null}
+                  ownerUsername={user.username}
+                />
                 <Link
                   href="/rank"
                   className="font-mono text-[11px] uppercase tracking-widest hover:text-[#CC0000] transition-colors flex items-center gap-1"
diff --git a/lib/events-fetch.ts b/lib/events-fetch.ts
new file mode 100644
index 00000000..22dd7d78
--- /dev/null
+++ b/lib/events-fetch.ts
@@ -0,0 +1,119 @@
+/**
+ * 首屏活动数据获取（Server Component 用）。
+ *
+ * 做的事：
+ * 1. 调后端 /api/events 拿 published + archived 列表
+ * 2. 转成首页 ActivityTicker / FloatWindow 原本认识的老 schema（name / discord / playback /
+ *    coverUrl / deprecated），这样这两个组件内部渲染逻辑不需要大改
+ * 3. 后端挂了 / BACKEND_URL 没配 → fallback 到 data/event.json，保证首页不会因为后端抖动白屏
+ *
+ * 为什么保留 event.json：
+ * - 开发环境没启后端时，首页还能跑
+ * - 生产 fallback 场景（后端挂了一会儿），首屏轮播不至于完全消失
+ * - JSON 是静态构建时就在的，没有运行时开销
+ */
+
+import type { EventView } from "@/app/events/types";
+import eventsJson from "@/data/event.json";
+
+/** Hero / FloatWindow 老版本识别的字段结构（沿用 ActivityEvent schema） */
+export interface HomepageEvent {
+  name: string;
+  discord: string;
+  playback?: string;
+  coverUrl: string;
+  deprecated: boolean;
+  /** 新加字段：后端返回的 id，给 "详情" 链接用。JSON fallback 时为 null */
+  id: number | null;
+}
+
+interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+}
+
+/**
+ * 把后端 EventView 映射成 HomepageEvent 老 schema。
+ * - discord: 直接用 discordLink；没有时拿活动详情页 URL 兜底
+ * - playback: 直接用 playbackUrl
+ * - coverUrl: 后端 coverUrl 可能为 null；fallback 到一张默认 placeholder
+ * - deprecated: status=archived 或已过 endTime 时为 true
+ */
+function toHomepageEvent(ev: EventView): HomepageEvent {
+  return {
+    id: ev.id,
+    name: ev.title,
+    discord: ev.discordLink ?? `/events/${ev.id}`,
+    playback: ev.playbackUrl ?? undefined,
+    coverUrl: ev.coverUrl ?? "/event/coffeeChat.webp",
+    deprecated:
+      ev.past || ev.status === "archived" || ev.status === "cancelled",
+  };
+}
+
+/** 从 data/event.json fallback（后端不可用时用）。和老组件期待的结构 1:1。 */
+function fallbackFromJson(): HomepageEvent[] {
+  // event.json 没 id，给 null 占位；order 保持 JSON 里顺序
+  interface JsonItem {
+    name: string;
+    discord: string;
+    playback?: string;
+    coverUrl: string;
+    deprecated: boolean;
+  }
+  const items = (eventsJson as { events: JsonItem[] }).events;
+  return items.map((e) => ({
+    id: null,
+    name: e.name,
+    discord: e.discord,
+    playback: e.playback,
+    coverUrl: e.coverUrl,
+    deprecated: e.deprecated,
+  }));
+}
+
+/**
+ * 拿首页要用的活动列表。
+ * - 成功：按"未过期 → 已过期"排序后返回
+ * - 失败：fallback 到 JSON
+ * 失败原因记日志，不向外抛，避免首页 SSR 500
+ */
+export async function fetchHomepageEvents(): Promise<HomepageEvent[]> {
+  const backendUrl = process.env.BACKEND_URL;
+  if (!backendUrl) {
+    console.warn(
+      "[fetchHomepageEvents] BACKEND_URL 未配置，使用 event.json fallback",
+    );
+    return fallbackFromJson();
+  }
+
+  try {
+    const res = await fetch(`${backendUrl}/api/events`, {
+      next: { revalidate: 300 },
+      headers: {
+        accept: "application/json",
+        "user-agent": "InvolutionHell-SSR/1.0 (+https://involutionhell.com)",
+      },
+    });
+    if (!res.ok) {
+      console.warn(
+        `[fetchHomepageEvents] 后端 ${res.status} ${res.statusText}，走 JSON fallback`,
+      );
+      return fallbackFromJson();
+    }
+    const json = (await res.json()) as ApiResponse<EventView[]>;
+    if (!json.success || !json.data || json.data.length === 0) {
+      // 后端虽然返回成功但是空数据，还是走 fallback 保持首页有内容
+      return fallbackFromJson();
+    }
+    const items = json.data
+      .map(toHomepageEvent)
+      // 未过期的活动排前面
+      .sort((a, b) => Number(a.deprecated) - Number(b.deprecated));
+    return items;
+  } catch (err) {
+    console.warn("[fetchHomepageEvents] 网络异常走 JSON fallback:", err);
+    return fallbackFromJson();
+  }
+}
diff --git a/next.config.mjs b/next.config.mjs
index 8263ac17..42d9ac54 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -57,6 +57,25 @@ const config = {
         source: "/api/docs/history",
         destination: `${backendUrl}/api/docs/history`,
       },
+      {
+        // Events 公开读接口 + 感兴趣接口
+        // 需要两条规则：`/:path*` 不匹配空路径（即 /api/events 本身）
+        source: "/api/events",
+        destination: `${backendUrl}/api/events`,
+      },
+      {
+        source: "/api/events/:path*",
+        destination: `${backendUrl}/api/events/:path*`,
+      },
+      {
+        // Events 管理员 CRUD（后端 @SaCheckRole("admin") 做权限校验）
+        source: "/api/admin/events",
+        destination: `${backendUrl}/api/admin/events`,
+      },
+      {
+        source: "/api/admin/events/:path*",
+        destination: `${backendUrl}/api/admin/events/:path*`,
+      },
     ];
   },
   images: {