feat(admin): 用户主页增加封禁与改角色快捷菜单

超管/站长可在他人主页就地管理账号；待审评论支持拒绝；角色弹窗前后台共用。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/components/RoleAccountModal.tsx

@@ -0,0 +1,338 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Ban, Loader2, RotateCcw, ShieldCheck, Users as UsersIcon } from "lucide-react";
+import { apiAdminSetUserBan, apiAdminSetUserRole, type Board } from "@/lib/api";
+import { ROLES, ROLE_META } from "@/lib/roles";
+import { toast } from "@/lib/toast";
+import Modal from "@/components/Modal";
+
+/** 角色与账号弹窗所需的最小用户形状（后台列表项 / 公开资料均可） */
+export interface RoleAccountTarget {
+  id: number;
+  username: string;
+  nickname: string;
+  role: string;
+  board_ids?: number[];
+  banned: boolean;
+}
+
+interface RoleOption {
+  value: string;
+  title: string;
+  desc: string;
+  token: string;
+}
+
+/**
+ * 角色授权 + 封禁状态弹窗。
+ * 后台用户管理与前台 StaffUserMenu 共用，避免两套表单。
+ */
+export default function RoleAccountModal({
+  target,
+  boards,
+  canGrantSuper,
+  acting,
+  onClose,
+  onSaved,
+  setActing,
+}: {
+  target: RoleAccountTarget | null;
+  boards: Board[];
+  canGrantSuper: boolean;
+  acting: boolean;
+  onClose: () => void;
+  onSaved: (next: RoleAccountTarget) => void;
+  setActing: (v: boolean) => void;
+}) {
+  const grantKeys = [
+    ROLES.SUPER_ADMIN,
+    ROLES.ADMIN,
+    ROLES.BOARD_ADMIN,
+    ROLES.USER,
+  ] as const;
+
+  const options: RoleOption[] = grantKeys
+    .filter((k) => canGrantSuper || k !== ROLES.SUPER_ADMIN)
+    .map((k) => {
+      const meta = ROLE_META[k];
+      return {
+        value: k,
+        title: meta.label,
+        desc: meta.grantDesc || "",
+        token: meta.colorToken,
+      };
+    });
+
+  const [role, setRole] = useState<string>(ROLES.USER);
+  const [boardIds, setBoardIds] = useState<number[]>([]);
+  const [banned, setBanned] = useState(false);
+  const [err, setErr] = useState("");
+
+  useEffect(() => {
+    if (target) {
+      setRole(target.role === ROLES.OWNER ? ROLES.USER : target.role);
+      setBoardIds(target.board_ids ?? []);
+      setBanned(!!target.banned);
+      setErr("");
+    }
+  }, [target]);
+
+  if (!target) return null;
+
+  const toggleBoard = (id: number) => {
+    setBoardIds((prev) => (prev.includes(id) ? prev.filter((b) => b !== id) : [...prev, id]));
+  };
+
+  const sameBoards =
+    JSON.stringify([...(target.board_ids ?? [])].sort((a, b) => a - b)) ===
+    JSON.stringify([...boardIds].sort((a, b) => a - b));
+  const roleChanged = role !== target.role || (role === ROLES.BOARD_ADMIN && !sameBoards);
+  const banChanged = banned !== !!target.banned;
+  const willBan = banChanged && banned;
+  const willUnban = banChanged && !banned;
+
+  const submit = async () => {
+    if (role === ROLES.BOARD_ADMIN && boardIds.length === 0) {
+      setErr("请至少选择一个授权板块");
+      return;
+    }
+    if (!roleChanged && !banChanged) {
+      onClose();
+      return;
+    }
+    setActing(true);
+    try {
+      let nextRole = target.role;
+      let nextBoards = target.board_ids ?? [];
+      let nextBanned = !!target.banned;
+      if (roleChanged) {
+        const res = await apiAdminSetUserRole(
+          target.id,
+          role,
+          role === ROLES.BOARD_ADMIN ? boardIds : []
+        );
+        nextRole = res.user.role;
+        nextBoards = res.user.board_ids ?? [];
+      }
+      if (banChanged) {
+        const res = await apiAdminSetUserBan(target.id, banned);
+        nextBanned = !!res.user.banned;
+      }
+      const parts: string[] = [];
+      if (roleChanged) parts.push("角色已更新");
+      if (willBan) parts.push("已封禁");
+      if (willUnban) parts.push("已解封");
+      toast(parts.join(" · ") || "已保存", "ok");
+      onSaved({
+        id: target.id,
+        username: target.username,
+        nickname: target.nickname,
+        role: nextRole,
+        board_ids: nextBoards,
+        banned: nextBanned,
+      });
+    } catch (e) {
+      toast(e instanceof Error ? e.message : "操作失败");
+    } finally {
+      setActing(false);
+    }
+  };
+
+  const saveLabel = willBan ? "保存并封禁" : willUnban ? "保存并解封" : "保存";
+
+  return (
+    <Modal
+      open
+      title="角色与账号"
+      description={
+        <>
+          <span className="truncate block">
+            @{target.username}（{target.nickname}）
+          </span>
+          <span className="block mt-1">
+            角色决定后台入口与前台管理能力；封禁立即强制下线。站长内容档案仍走列表入口。
+          </span>
+        </>
+      }
+      onClose={onClose}
+      busy={acting}
+      maxWidthClass="max-w-[500px]"
+      panelClassName="p-6 max-h-[88vh] overflow-y-auto"
+      ariaLabel="角色与账号"
+      footer={
+        <>
+          <button type="button" className="btn btn-line" onClick={onClose} disabled={acting}>
+            取消
+          </button>
+          <button
+            type="button"
+            className={willBan ? "btn btn-danger" : "btn btn-primary"}
+            onClick={submit}
+            disabled={acting}
+          >
+            {acting && <Loader2 size={15} className="animate-spin" />}
+            {saveLabel}
+          </button>
+        </>
+      }
+    >
+      <p className="mb-2 text-[12.5px]" style={{ color: "var(--ink)" }}>
+        管理角色
+      </p>
+      <div className="flex flex-col gap-2" role="radiogroup" aria-label="管理角色">
+        {options.map((o) => {
+          const active = role === o.value;
+          return (
+            <button
+              key={o.value}
+              type="button"
+              role="radio"
+              aria-checked={active}
+              onClick={() => {
+                setRole(o.value);
+                setErr("");
+              }}
+              className="text-left rounded-xl p-3.5 flex items-start gap-3 transition-colors"
+              style={{
+                border: `1.5px solid ${active ? "var(--accent)" : "var(--line)"}`,
+                background: active ? "var(--accent-soft)" : "var(--panel-2)",
+              }}
+            >
+              <span
+                className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 mt-0.5"
+                style={{
+                  background: active ? "var(--accent)" : "var(--panel)",
+                  color: active ? "var(--accent-on)" : `var(${o.token})`,
+                }}
+                aria-hidden="true"
+              >
+                {o.value === ROLES.USER ? <UsersIcon size={18} /> : <ShieldCheck size={18} />}
+              </span>
+              <span className="min-w-0 flex-1">
+                <span className="block text-[13.5px] font-medium" style={{ color: "var(--ink)" }}>
+                  {o.title}
+                </span>
+                <span className="block mt-1 text-[12px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
+                  {o.desc}
+                </span>
+              </span>
+              <span
+                className="mt-1 w-4 h-4 rounded-full shrink-0 flex items-center justify-center"
+                style={{ border: `2px solid ${active ? "var(--accent)" : "var(--line-2)"}` }}
+                aria-hidden="true"
+              >
+                {active && <span className="w-2 h-2 rounded-full" style={{ background: "var(--accent)" }} />}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      {role === ROLES.BOARD_ADMIN && (
+        <div className="mt-4">
+          <p className="text-[12.5px] mb-2" style={{ color: "var(--ink)" }}>
+            授权板块 <span style={{ color: "var(--danger)" }}>*</span>
+          </p>
+          {boards.length === 0 ? (
+            <p className="meta text-[12px]">板块加载中…</p>
+          ) : (
+            <div className="grid grid-cols-2 gap-2">
+              {boards.map((b) => {
+                const checked = boardIds.includes(b.id);
+                return (
+                  <button
+                    key={b.id}
+                    type="button"
+                    role="checkbox"
+                    aria-checked={checked}
+                    onClick={() => toggleBoard(b.id)}
+                    className="flex items-center gap-2 rounded-lg px-3 py-2 text-[12.5px] transition-colors"
+                    style={{
+                      border: `1.5px solid ${checked ? "var(--accent)" : "var(--line)"}`,
+                      background: checked ? "var(--accent-soft)" : "var(--panel-2)",
+                      color: checked ? "var(--accent)" : "var(--ink-2)",
+                    }}
+                  >
+                    <span
+                      className="w-4 h-4 rounded shrink-0 flex items-center justify-center"
+                      style={{ border: `2px solid ${checked ? "var(--accent)" : "var(--line-2)"}` }}
+                      aria-hidden="true"
+                    >
+                      {checked && (
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
+                          <path d="M20 6 9 17l-5-5" />
+                        </svg>
+                      )}
+                    </span>
+                    <span className="truncate">{b.name}</span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+          {err && (
+            <p className="mt-2 text-[12px]" style={{ color: "var(--danger)" }}>
+              {err}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="mt-5 pt-4" style={{ borderTop: "1px solid var(--line)" }}>
+        <p className="text-[12.5px] mb-2" style={{ color: "var(--ink)" }}>
+          账号状态
+        </p>
+        <div className="grid grid-cols-2 gap-2" role="radiogroup" aria-label="账号状态">
+          <button
+            type="button"
+            role="radio"
+            aria-checked={!banned}
+            onClick={() => setBanned(false)}
+            className="rounded-xl px-3 py-2.5 text-left transition-colors"
+            style={{
+              border: `1.5px solid ${!banned ? "var(--ok)" : "var(--line)"}`,
+              background: !banned ? "var(--ok-soft)" : "var(--panel-2)",
+            }}
+          >
+            <span
+              className="flex items-center gap-1.5 text-[13px] font-medium"
+              style={{ color: !banned ? "var(--ok)" : "var(--ink)" }}
+            >
+              <RotateCcw size={14} /> 正常
+            </span>
+            <span className="block mt-1 text-[11.5px] leading-snug" style={{ color: "var(--ink-3)" }}>
+              可登录与互动
+            </span>
+          </button>
+          <button
+            type="button"
+            role="radio"
+            aria-checked={banned}
+            onClick={() => setBanned(true)}
+            className="rounded-xl px-3 py-2.5 text-left transition-colors"
+            style={{
+              border: `1.5px solid ${banned ? "var(--danger)" : "var(--line)"}`,
+              background: banned ? "var(--danger-soft)" : "var(--panel-2)",
+            }}
+          >
+            <span
+              className="flex items-center gap-1.5 text-[13px] font-medium"
+              style={{ color: banned ? "var(--danger)" : "var(--ink)" }}
+            >
+              <Ban size={14} /> 封禁
+            </span>
+            <span className="block mt-1 text-[11.5px] leading-snug" style={{ color: "var(--ink-3)" }}>
+              强制下线，禁止登录
+            </span>
+          </button>
+        </div>
+        {willBan && (
+          <p className="mt-2 text-[12px] leading-relaxed" style={{ color: "var(--danger)" }}>
+            封禁后立即强制下线，无法登录、发帖与回复；已发布内容保留。角色变更与封禁将一并保存。
+          </p>
+        )}
+      </div>
+    </Modal>
+  );
+}