feat: 新增管理员用户管理功能与账号封禁体系

此提交完成了全站管理员后台核心功能开发： 1. 新增AdminUserService与管理接口，支持用户列表查询、角色变更与封禁解封 2. 重构认证链路，统一账号封禁错误码与处理逻辑 3. 新增全局强制下线机制，账号被封禁时自动弹出告知弹窗并清理登录态 4. 重构管理员后台路由与布局，统一权限校验逻辑 5. 优化通知轮询逻辑，页面切回前台时立即刷新未读计数 6. 合并原公告、外观管理页到统一后台面板
2026-09-15 02:52:26 +08:00
parent 24c6dea38c
commit 6da4309453
20 changed files with 2248 additions and 105 deletions
--- a/frontend/components/AccountGuard.tsx
+++ b/frontend/components/AccountGuard.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Ban } from "lucide-react";
+import { onForceLogout } from "@/lib/userEvents";
+
+/**
+ * 账号安全守卫：监听全局强制下线事件，被封禁时弹出不可误关的告知模态。
+ *
+ * 登录态清理（cookie/Header 游客化/router.refresh）由 Header 复用统一
+ * 登出链路完成；本组件只负责"告知"这一职责，故不处理任何凭据逻辑。
+ * 挂载于 root layout，覆盖任意页面（含后台）。
+ */
+export default function AccountGuard() {
+  const router = useRouter();
+  const [banned, setBanned] = useState(false);
+
+  useEffect(
+    () =>
+      onForceLogout((reason) => {
+        if (reason === "banned") setBanned(true);
+      }),
+    []
+  );
+
+  if (!banned) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
+      style={{ background: "color-mix(in srgb, var(--ink) 60%, transparent)" }}
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="banned-dialog-title"
+      aria-describedby="banned-dialog-desc"
+    >
+      <div
+        className="j13-toast-in panel w-full max-w-[400px] rounded-2xl p-6 text-center"
+        style={{ boxShadow: "var(--shadow-lg)" }}
+      >
+        <span
+          className="mx-auto w-14 h-14 rounded-full flex items-center justify-center"
+          style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
+        >
+          <Ban size={26} />
+        </span>
+        <h2
+          id="banned-dialog-title"
+          className="mt-4 text-[18px] font-extrabold tracking-tight"
+          style={{ color: "var(--ink)" }}
+        >
+          账号已被封禁
+        </h2>
+        <p id="banned-dialog-desc" className="meta mt-2 text-[13px] leading-relaxed">
+          你的账号因违反社区规则已被管理员封禁，当前登录状态已失效，无法继续发布内容与互动。
+          如对处理结果有异议，请联系管理员核实。
+        </p>
+        <button
+          type="button"
+          onClick={() => {
+            setBanned(false);
+            // 回到首页展示游客视图（若当前停留在受保护页面）
+            router.push("/");
+          }}
+          className="btn btn-primary w-full mt-5"
+          autoFocus
+        >
+          我知道了
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/frontend/components/Header.tsx
+++ b/frontend/components/Header.tsx
@@ -18,12 +18,11 @@ import {
  Home,
  User as UserIcon,
  ChevronDown,
-  Megaphone,
-  Palette,
+  ShieldCheck,
 } from "lucide-react";
 import { apiLogout, apiMe, type User } from "@/lib/api";
 import { hasAuthCookieHint } from "@/lib/cookies";
-import { onUserUpdate } from "@/lib/userEvents";
+import { onUserUpdate, onForceLogout } from "@/lib/userEvents";
 import NotificationBell from "./NotificationBell";
 import Avatar from "./Avatar";

@@ -60,6 +59,21 @@ export default function Header({
    setUser((prev) => (prev ? { ...prev, ...patch } : prev));
  }), []);

+  // 强制下线（当前唯一来源：账号被管理员封禁）。
+  // 统一复用登出清理：尽力调用 /api/logout 清除 HttpOnly cookie（该端点不要求
+  // 有效登录态），本地立即游客化并 router.refresh 校正 SSR 区域，
+  // 封禁告知弹窗由 AccountGuard 负责，避免状态与 UI 清理分散
+  useEffect(() => onForceLogout(() => {
+    setMenuOpen(false);
+    apiLogout()
+      .catch(() => {})
+      .finally(() => {
+        setUser(null);
+        setUnread(0);
+        router.refresh();
+      });
+  }), [router]);
+
  // 挂载后静默校正一次（仅一次）：覆盖 SSR 期间后端不可用、旧 Path refresh
  // 半登录等边缘情况。正常 F5 下结果与 SSR 一致，不产生可见闪动；
  // 无可读 CSRF cookie 说明必然是游客，跳过请求
@@ -281,14 +295,9 @@ export default function Header({
            )}
            {user && <MobileLink href="/settings">账号设置</MobileLink>}
            {user?.role === "admin" && (
-              <>
-                <MobileLink href="/admin/announcements">
-                  <span className="inline-flex items-center gap-2"><Megaphone size={15} /> 公告管理</span>
-                </MobileLink>
-                <MobileLink href="/admin/appearance">
-                  <span className="inline-flex items-center gap-2"><Palette size={15} /> 外观设置</span>
-                </MobileLink>
-              </>
+              <MobileLink href="/admin">
+                <span className="inline-flex items-center gap-2"><ShieldCheck size={15} /> 管理面板</span>
+              </MobileLink>
            )}
            {!user && <MobileLink href="/login">登录</MobileLink>}
            {!user && <MobileLink href="/register">注册</MobileLink>}
@@ -449,11 +458,8 @@ function UserMenu({ user, onLogout }: { user: User; onLogout: () => void }) {
          </div>
          {user.role === "admin" && (
            <div className="p-1.5" style={{ borderTop: "1px solid var(--line)" }}>
-              <Link href="/admin/announcements" onClick={() => setOpen(false)} className={itemCls} role="menuitem">
-                <Megaphone size={15} style={{ color: "var(--accent)" }} /> 公告管理
-              </Link>
-              <Link href="/admin/appearance" onClick={() => setOpen(false)} className={itemCls} role="menuitem">
-                <Palette size={15} style={{ color: "var(--accent)" }} /> 外观设置
+              <Link href="/admin" onClick={() => setOpen(false)} className={itemCls} role="menuitem">
+                <ShieldCheck size={15} style={{ color: "var(--accent)" }} /> 管理面板
              </Link>
            </div>
          )}
--- a/frontend/components/NotificationBell.tsx
+++ b/frontend/components/NotificationBell.tsx
@@ -21,16 +21,28 @@ export default function NotificationBell({ initialUnread = 0 }: { initialUnread?
  const [loading, setLoading] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

-  // 轮询未读数（30 秒）
+  // 轮询未读数（30 秒）；页面从后台切回时立即探测一次，
+  // 使账号被封禁等服务端状态变化在用户切回标签页的瞬间即可被发现
  useEffect(() => {
+    let cancelled = false;
    const fetchCount = () => {
      apiUnreadCount()
-        .then((res) => setUnread(res.count || 0))
+        .then((res) => {
+          if (!cancelled) setUnread(res.count || 0);
+        })
        .catch(() => {});
    };
    fetchCount();
    const timer = setInterval(fetchCount, 30000);
-    return () => clearInterval(timer);
+    const onVisible = () => {
+      if (document.visibilityState === "visible") fetchCount();
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    return () => {
+      cancelled = true;
+      clearInterval(timer);
+      document.removeEventListener("visibilitychange", onVisible);
+    };
  }, []);

  // 点击外部关闭下拉