feat(frontend): 统一全站 Modal 壳并修复角色保存按钮样式

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

frontend/app/admin/users/UsersAdmin.tsx

@@ -38,6 +38,7 @@ import { toast } from "@/lib/toast";
 import { realtime } from "@/lib/realtime";
 import Avatar from "@/components/Avatar";
 import RoleBadge from "@/components/RoleBadge";
+import Modal from "@/components/Modal";
 
 export type UserFilter = "all" | "staff" | "banned";
 
@@ -848,15 +849,6 @@ function RoleAssignDialog({
     }
   }, [target]);
 
-  useEffect(() => {
-    if (!target) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && !acting) onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [target, acting, onClose]);
-
   if (!target) return null;
 
   const toggleBoard = (id: number) => {
@@ -904,217 +896,198 @@ function RoleAssignDialog({
   const saveLabel = willBan ? "保存并封禁" : willUnban ? "保存并解封" : "保存";
 
   return (
-    <div
-      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
-      style={{ background: "color-mix(in srgb, var(--ink) 55%, transparent)" }}
-      onClick={() => !acting && onClose()}
-    >
-      <div
-        className="j13-toast-in panel w-full max-w-[500px] rounded-2xl p-6 max-h-[88vh] overflow-y-auto"
-        style={{ boxShadow: "var(--shadow-lg)" }}
-        onClick={(e) => e.stopPropagation()}
-        role="dialog"
-        aria-modal="true"
-        aria-label="角色与账号"
-      >
-        <div className="flex items-start justify-between gap-3">
-          <div className="min-w-0">
-            <h3 className="text-[16px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
-              角色与账号
-            </h3>
-            <p className="meta mt-1 text-[12.5px] truncate">
-              @{target.username}（{target.nickname}）
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={acting}
-            aria-label="关闭"
-            className="w-8 h-8 shrink-0 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
-            style={{ color: "var(--ink-3)" }}
-          >
-            <X size={16} />
-          </button>
-        </div>
-
-        <p className="mt-3 text-[12px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
-          角色决定后台入口与前台管理能力；封禁立即强制下线。登录历史、站长内容档案仍走列表其他入口。
-        </p>
-
-        <p className="mt-4 mb-2 text-[12.5px] font-bold" 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-bold" 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] font-bold 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] font-semibold 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] font-semibold" style={{ color: "var(--danger)" }}>
-                {err}
-              </p>
-            )}
-          </div>
-        )}
-
-        <div className="mt-5 pt-4" style={{ borderTop: "1px solid var(--line)" }}>
-          <p className="text-[12.5px] font-bold 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-bold"
-                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-bold"
-                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>
-
-        <div className="flex items-center justify-end gap-2 mt-5">
+    <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"}
+            className={willBan ? "btn btn-danger" : "btn btn-primary"}
             onClick={submit}
             disabled={acting}
           >
             {acting && <Loader2 size={15} className="animate-spin" />}
             {saveLabel}
           </button>
-        </div>
+        </>
+      }
+    >
+      <p className="mb-2 text-[12.5px] font-bold" 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-bold" 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>
-    </div>
+
+      {role === ROLES.BOARD_ADMIN && (
+        <div className="mt-4">
+          <p className="text-[12.5px] font-bold 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] font-semibold 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] font-semibold" style={{ color: "var(--danger)" }}>
+              {err}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="mt-5 pt-4" style={{ borderTop: "1px solid var(--line)" }}>
+        <p className="text-[12.5px] font-bold 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-bold"
+              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-bold"
+              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>
   );
 }
 
@@ -1154,133 +1127,107 @@ function LoginLogsDialog({ target, onClose }: { target: AdminUser | null; onClos
     if (target) setPage(1);
   }, [target]);
 
-  useEffect(() => {
-    if (!target) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [target, onClose]);
-
   if (!target) return null;
   const pageSize = 15;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
 
   return (
-    <div
-      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
-      style={{ background: "color-mix(in srgb, var(--ink) 55%, transparent)" }}
-      onClick={onClose}
-    >
-      <div
-        className="j13-toast-in panel w-full max-w-[520px] rounded-2xl p-6 max-h-[88vh] flex flex-col"
-        style={{ boxShadow: "var(--shadow-lg)" }}
-        onClick={(e) => e.stopPropagation()}
-        role="dialog"
-        aria-modal="true"
-        aria-label="登录历史"
-      >
-        <div className="flex items-start justify-between gap-3">
-          <div className="min-w-0">
-            <h3 className="text-[16px] font-extrabold tracking-tight flex items-center gap-2" style={{ color: "var(--ink)" }}>
-              <History size={17} style={{ color: "var(--accent)" }} />
-              登录历史
-            </h3>
-            <p className="meta mt-1 text-[12.5px] truncate">
-              @{target.username} · 共 {total} 条记录（含失败尝试）
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="关闭"
-            className="w-8 h-8 shrink-0 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
-            style={{ color: "var(--ink-3)" }}
-          >
-            <X size={16} />
-          </button>
-        </div>
-
-        <div className="mt-4 -mx-1.5 px-1.5 overflow-y-auto flex-1">
-          {loading ? (
-            <div className="flex items-center justify-center gap-2 py-12 meta text-[13px]">
-              <Loader2 size={16} className="animate-spin" /> 加载中…
-            </div>
-          ) : err ? (
-            <p className="alert-error my-4">{err}</p>
-          ) : logs.length === 0 ? (
-            <div className="text-center py-12">
-              <Monitor size={22} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
-              <p className="meta text-[12.5px]">暂无登录记录</p>
-            </div>
-          ) : (
-            <ul className="flex flex-col">
-              {logs.map((log) => (
-                <li
-                  key={log.id}
-                  className="flex items-start gap-3 py-2.5"
-                  style={{ borderTop: "1px solid var(--line)" }}
-                >
-                  <span
-                    className="mt-1 w-2 h-2 rounded-full shrink-0"
-                    style={{ background: log.success ? "var(--ok)" : "var(--danger)" }}
-                    title={log.success ? "成功" : "失败"}
-                    aria-hidden
-                  />
-                  <div className="min-w-0 flex-1">
-                    <p className="text-[12.5px] font-semibold tabular-nums truncate" style={{ color: "var(--ink)" }}>
-                      {log.ip || "未知 IP"}
-                      <span
-                        className="ml-2 inline-flex items-center rounded-full px-1.5 py-px text-[10.5px] font-bold"
-                        style={
-                          log.success
-                            ? { background: "var(--ok-soft)", color: "var(--ok)" }
-                            : { background: "var(--danger-soft)", color: "var(--danger)" }
-                        }
-                      >
-                        {log.success ? "成功" : "失败"}
-                      </span>
-                    </p>
-                    <p className="text-[11px] mt-0.5 truncate" style={{ color: "var(--ink-3)" }} title={log.user_agent}>
-                      {log.user_agent || "未知设备"}
-                    </p>
-                  </div>
-                  <span className="text-[11px] tabular-nums shrink-0 pt-0.5" style={{ color: "var(--ink-3)" }}>
-                    {formatDate(log.created_at)} {new Date(log.created_at).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" })}
-                  </span>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-
-        {total > pageSize && (
-          <div className="flex items-center justify-between pt-3 mt-2" style={{ borderTop: "1px solid var(--line)" }}>
-            <span className="meta text-[11.5px] tabular-nums" style={{ color: "var(--ink-3)" }}>
+    <Modal
+      open
+      title={
+        <span className="inline-flex items-center gap-2">
+          <History size={17} style={{ color: "var(--accent)" }} />
+          登录历史
+        </span>
+      }
+      description={`@${target.username} · 共 ${total} 条记录（含失败尝试）`}
+      onClose={onClose}
+      dismissOnOverlay
+      maxWidthClass="max-w-[520px]"
+      panelClassName="p-6 max-h-[88vh] flex flex-col"
+      ariaLabel="登录历史"
+      footer={
+        total > pageSize ? (
+          <>
+            <span className="meta text-[11.5px] tabular-nums mr-auto" style={{ color: "var(--ink-3)" }}>
               第 {page} / {totalPages} 页
             </span>
-            <div className="flex items-center gap-2">
-              <button
-                type="button"
-                className="btn btn-line btn-sm"
-                disabled={page <= 1 || loading}
-                onClick={() => setPage((p) => Math.max(1, p - 1))}
-              >
-                <ChevronLeft size={14} /> 上一页
-              </button>
-              <button
-                type="button"
-                className="btn btn-line btn-sm"
-                disabled={page >= totalPages || loading}
-                onClick={() => setPage((p) => p + 1)}
-              >
-                下一页 <ChevronRight size={14} />
-              </button>
-            </div>
+            <button
+              type="button"
+              className="btn btn-line btn-sm"
+              disabled={page <= 1 || loading}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+            >
+              <ChevronLeft size={14} /> 上一页
+            </button>
+            <button
+              type="button"
+              className="btn btn-line btn-sm"
+              disabled={page >= totalPages || loading}
+              onClick={() => setPage((p) => p + 1)}
+            >
+              下一页 <ChevronRight size={14} />
+            </button>
+          </>
+        ) : undefined
+      }
+    >
+      <div className="-mx-1.5 px-1.5 overflow-y-auto flex-1 min-h-0" style={{ maxHeight: "min(52vh, 420px)" }}>
+        {loading ? (
+          <div className="flex items-center justify-center gap-2 py-12 meta text-[13px]">
+            <Loader2 size={16} className="animate-spin" /> 加载中…
           </div>
+        ) : err ? (
+          <p className="alert-error my-4">{err}</p>
+        ) : logs.length === 0 ? (
+          <div className="text-center py-12">
+            <Monitor size={22} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
+            <p className="meta text-[12.5px]">暂无登录记录</p>
+          </div>
+        ) : (
+          <ul className="flex flex-col">
+            {logs.map((log) => (
+              <li
+                key={log.id}
+                className="flex items-start gap-3 py-2.5"
+                style={{ borderTop: "1px solid var(--line)" }}
+              >
+                <span
+                  className="mt-1 w-2 h-2 rounded-full shrink-0"
+                  style={{ background: log.success ? "var(--ok)" : "var(--danger)" }}
+                  title={log.success ? "成功" : "失败"}
+                  aria-hidden
+                />
+                <div className="min-w-0 flex-1">
+                  <p className="text-[12.5px] font-semibold tabular-nums truncate" style={{ color: "var(--ink)" }}>
+                    {log.ip || "未知 IP"}
+                    <span
+                      className="ml-2 inline-flex items-center rounded-full px-1.5 py-px text-[10.5px] font-bold"
+                      style={
+                        log.success
+                          ? { background: "var(--ok-soft)", color: "var(--ok)" }
+                          : { background: "var(--danger-soft)", color: "var(--danger)" }
+                      }
+                    >
+                      {log.success ? "成功" : "失败"}
+                    </span>
+                  </p>
+                  <p className="text-[11px] mt-0.5 truncate" style={{ color: "var(--ink-3)" }} title={log.user_agent}>
+                    {log.user_agent || "未知设备"}
+                  </p>
+                </div>
+                <span className="text-[11px] tabular-nums shrink-0 pt-0.5" style={{ color: "var(--ink-3)" }}>
+                  {formatDate(log.created_at)}{" "}
+                  {new Date(log.created_at).toLocaleTimeString("zh-CN", {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}
+                </span>
+              </li>
+            ))}
+          </ul>
         )}
       </div>
-    </div>
+    </Modal>
   );
 }

frontend/app/chat/ChatShell.tsx

@@ -26,6 +26,7 @@ import { onDocumentVisible } from "@/lib/visibilityReconcile";
 import { toast } from "@/lib/toast";
 import Avatar from "@/components/Avatar";
 import ContextMenu, { type CtxMenuItem } from "@/components/ContextMenu";
+import Modal from "@/components/Modal";
 
 function roomTitle(room: ChatRoomView) {
   if (room.room_type === "direct") {
@@ -600,115 +601,99 @@ function CreateGroupModal({
   };
 
   return (
-    <div
-      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
-      style={{ background: "rgba(0,0,0,0.55)" }}
-      // 刻意不绑定外侧点击关闭，避免误关丢失已填内容
-    >
-      <div
-        className="w-full max-w-md rounded-2xl p-6 j13-toast-in"
-        style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between mb-5">
-          <h2 className="text-[18px] font-extrabold" style={{ color: "var(--ink)" }}>
-            新建群聊
-          </h2>
-          <button
-            onClick={onClose}
-            disabled={submitting}
-            aria-label="关闭"
-            className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors"
-            style={{ color: "var(--ink-3)" }}
-          >
-            <X size={15} />
+    <Modal
+      open
+      title="新建群聊"
+      onClose={onClose}
+      busy={submitting}
+      maxWidthClass="max-w-md"
+      footer={
+        <>
+          <button type="button" onClick={onClose} disabled={submitting} className="btn btn-line btn-sm">
+            取消
           </button>
+          <button type="button" onClick={submit} disabled={submitting} className="btn btn-primary btn-sm">
+            {submitting ? "创建中..." : "创建"}
+          </button>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        <div>
+          <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
+            群名称 <span style={{ color: "var(--danger)" }}>*</span>
+          </label>
+          <input
+            autoFocus
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            maxLength={32}
+            placeholder="2-32 个字符"
+            className="w-full px-3.5 h-10 rounded-lg outline-none"
+            style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
+          />
         </div>
-        <div className="space-y-4">
+        <div>
+          <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
+            群简介（选填）
+          </label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            maxLength={200}
+            rows={3}
+            className="w-full px-3.5 py-2.5 rounded-lg outline-none resize-none"
+            style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
+          />
+        </div>
+        <div>
+          <label className="block text-[12px] font-bold mb-2" style={{ color: "var(--ink-2)" }}>
+            可见性
+          </label>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => setIsPrivate(false)}
+              className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
+              style={{
+                background: !isPrivate ? "var(--accent-soft)" : "var(--bg)",
+                color: !isPrivate ? "var(--accent)" : "var(--ink-2)",
+                border: `1px solid ${!isPrivate ? "var(--accent)" : "var(--line)"}`,
+              }}
+            >
+              公开
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsPrivate(true)}
+              className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
+              style={{
+                background: isPrivate ? "var(--accent-soft)" : "var(--bg)",
+                color: isPrivate ? "var(--accent)" : "var(--ink-2)",
+                border: `1px solid ${isPrivate ? "var(--accent)" : "var(--line)"}`,
+              }}
+            >
+              私密
+            </button>
+          </div>
+        </div>
+        {isPrivate && (
           <div>
             <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
-              群名称 <span style={{ color: "var(--danger)" }}>*</span>
+              初始成员（选填）
             </label>
             <input
-              autoFocus
               type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              maxLength={32}
-              placeholder="2-32 个字符"
+              value={memberInput}
+              onChange={(e) => setMemberInput(e.target.value)}
+              placeholder="用户名，多个用空格或逗号分隔"
               className="w-full px-3.5 h-10 rounded-lg outline-none"
               style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
             />
           </div>
-          <div>
-            <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
-              群简介（选填）
-            </label>
-            <textarea
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              maxLength={200}
-              rows={3}
-              className="w-full px-3.5 py-2.5 rounded-lg outline-none resize-none"
-              style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
-            />
-          </div>
-          <div>
-            <label className="block text-[12px] font-bold mb-2" style={{ color: "var(--ink-2)" }}>
-              可见性
-            </label>
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={() => setIsPrivate(false)}
-                className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
-                style={{
-                  background: !isPrivate ? "var(--accent-soft)" : "var(--bg)",
-                  color: !isPrivate ? "var(--accent)" : "var(--ink-2)",
-                  border: `1px solid ${!isPrivate ? "var(--accent)" : "var(--line)"}`,
-                }}
-              >
-                公开
-              </button>
-              <button
-                type="button"
-                onClick={() => setIsPrivate(true)}
-                className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
-                style={{
-                  background: isPrivate ? "var(--accent-soft)" : "var(--bg)",
-                  color: isPrivate ? "var(--accent)" : "var(--ink-2)",
-                  border: `1px solid ${isPrivate ? "var(--accent)" : "var(--line)"}`,
-                }}
-              >
-                私密
-              </button>
-            </div>
-          </div>
-          {isPrivate && (
-            <div>
-              <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
-                初始成员（选填）
-              </label>
-              <input
-                type="text"
-                value={memberInput}
-                onChange={(e) => setMemberInput(e.target.value)}
-                placeholder="用户名，多个用空格或逗号分隔"
-                className="w-full px-3.5 h-10 rounded-lg outline-none"
-                style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
-              />
-            </div>
-          )}
-          <div className="flex justify-end gap-2 pt-1">
-            <button onClick={onClose} disabled={submitting} className="btn btn-line btn-sm">
-              取消
-            </button>
-            <button onClick={submit} disabled={submitting} className="btn btn-accent btn-sm">
-              {submitting ? "创建中..." : "创建"}
-            </button>
-          </div>
-        </div>
+        )}
       </div>
-    </div>
+    </Modal>
   );
 }

frontend/components/AccountGuard.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Ban } from "lucide-react";
 import { onForceLogout } from "@/lib/userEvents";
+import Modal from "@/components/Modal";
 
 /**
  * 账号安全守卫：监听全局强制下线事件，被封禁时弹出不可误关的告知模态。
@@ -24,51 +25,54 @@ export default function AccountGuard() {
     []
   );
 
-  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)" }}
+    <Modal
+      open={banned}
+      title="账号已被封禁"
+      onClose={() => {}}
+      hideClose
+      closeOnEscape={false}
       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>
+      ariaLabel="账号已被封禁"
+      maxWidthClass="max-w-[400px]"
+      footer={
         <button
           type="button"
           onClick={() => {
             setBanned(false);
-            // 回到首页展示游客视图（若当前停留在受保护页面）
             router.push("/");
           }}
-          className="btn btn-primary w-full mt-5"
+          className="btn btn-primary w-full"
           autoFocus
         >
           我知道了
         </button>
-      </div>
-    </div>
+      }
+      header={
+        <div className="w-full text-center">
+          <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>
+        </div>
+      }
+    >
+      <p
+        id="banned-dialog-desc"
+        className="meta text-[13px] leading-relaxed text-center"
+      >
+        你的账号因违反社区规则已被管理员封禁，当前登录状态已失效，无法继续发布内容与互动。
+        如对处理结果有异议，请联系管理员核实。
+      </p>
+    </Modal>
   );
 }

frontend/components/AvatarCropModal.tsx

@@ -4,13 +4,14 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import Cropper, { type Area } from "react-easy-crop";
 import "react-easy-crop/react-easy-crop.css";
 import {
-  X, UploadCloud, ZoomIn, Check, Loader2, Images, RotateCcw, Trash2, AlertTriangle, Crop,
+  UploadCloud, ZoomIn, Check, Loader2, Images, RotateCcw, Trash2, AlertTriangle, Crop,
 } from "lucide-react";
 import {
   apiMyMedia, apiUploadAvatar, apiUseAvatar, apiDeleteAttachment,
   type MediaAttachment,
 } from "@/lib/api";
 import { getCroppedAvatarWebp } from "@/lib/cropImage";
+import Modal from "@/components/Modal";
 
 interface AvatarCropModalProps {
   open: boolean;
@@ -77,16 +78,6 @@ export default function AvatarCropModal({
     if (confirmTimer.current) clearTimeout(confirmTimer.current);
   }, []);
 
-  // ESC 关闭
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && !busy) onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, busy, onClose]);
-
   const onCropComplete = useCallback((_: Area, areaPixels: Area) => {
     setPixelCrop(areaPixels);
   }, []);
@@ -242,38 +233,17 @@ export default function AvatarCropModal({
     }
   };
 
-  if (!open) return null;
-
   return (
-    <div
-      className="fixed inset-0 z-[90] flex items-center justify-center p-4"
-      style={{ background: "color-mix(in srgb, var(--ink) 55%, transparent)" }}
-      onClick={() => !busy && onClose()}
+    <Modal
+      open={open}
+      title={imageSrc ? "裁剪头像" : "更换头像"}
+      onClose={onClose}
+      busy={busy}
+      dismissOnOverlay={!busy}
+      maxWidthClass="max-w-[440px]"
+      panelClassName="p-5"
+      ariaLabel="更换头像"
     >
-      <div
-        className="panel w-full max-w-[440px] rounded-2xl p-5"
-        onClick={(e) => e.stopPropagation()}
-        role="dialog"
-        aria-modal="true"
-        aria-label="更换头像"
-      >
-        {/* 标题栏 */}
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-[15.5px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
-            {imageSrc ? "裁剪头像" : "更换头像"}
-          </h3>
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={busy}
-            aria-label="关闭"
-            className="inline-flex w-8 h-8 items-center justify-center rounded-full transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)] disabled:opacity-50"
-            style={{ color: "var(--ink-3)" }}
-          >
-            <X size={17} />
-          </button>
-        </div>
-
         {error && <div className="alert-error mb-4">{error}</div>}
 
         {!imageSrc ? (
@@ -469,7 +439,6 @@ export default function AvatarCropModal({
             </div>
           </>
         )}
-      </div>
-    </div>
+    </Modal>
   );
 }

frontend/components/ConfirmDialog.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { X } from "lucide-react";
+import Modal from "@/components/Modal";
 
 /**
- * 站点风格确认框：仅取消/关闭可关，避免点遮罩误关。
- * danger 主按钮使用 btn-danger，其余用 btn-accent。
+ * 站点风格确认框：基于 Modal，仅取消/关闭可关，避免点遮罩误关。
+ * danger 主按钮使用 btn-danger，其余用 btn-primary。
  */
 export default function ConfirmDialog({
   open,
@@ -27,40 +27,17 @@ export default function ConfirmDialog({
   onConfirm: () => void;
   onCancel: () => void;
 }) {
-  if (!open) return null;
-
   return (
-    <div
-      className="fixed inset-0 z-[1100] flex items-center justify-center p-4"
-      style={{ background: "rgba(0,0,0,0.55)" }}
-    >
-      <div
-        className="w-full max-w-sm rounded-2xl p-5 j13-toast-in"
-        style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-start justify-between gap-3 mb-3">
-          <h2
-            className="text-[16px] font-extrabold leading-snug"
-            style={{ color: "var(--ink)" }}
-          >
-            {title}
-          </h2>
-          <button
-            type="button"
-            onClick={onCancel}
-            disabled={busy}
-            aria-label="关闭"
-            className="w-7 h-7 shrink-0 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors"
-            style={{ color: "var(--ink-3)" }}
-          >
-            <X size={15} />
-          </button>
-        </div>
-        <p className="text-[13.5px] leading-relaxed mb-5" style={{ color: "var(--ink-2)" }}>
-          {message}
-        </p>
-        <div className="flex justify-end gap-2">
+    <Modal
+      open={open}
+      title={title}
+      onClose={onCancel}
+      busy={busy}
+      zIndexClass="z-[1100]"
+      maxWidthClass="max-w-sm"
+      panelClassName="p-5"
+      footer={
+        <>
           <button
             type="button"
             onClick={onCancel}
@@ -73,12 +50,16 @@ export default function ConfirmDialog({
             type="button"
             onClick={onConfirm}
             disabled={busy}
-            className={`btn btn-sm ${danger ? "btn-danger" : "btn-accent"}`}
+            className={`btn btn-sm ${danger ? "btn-danger" : "btn-primary"}`}
           >
             {busy ? "处理中…" : confirmLabel}
           </button>
-        </div>
-      </div>
-    </div>
+        </>
+      }
+    >
+      <p className="text-[13.5px] leading-relaxed" style={{ color: "var(--ink-2)" }}>
+        {message}
+      </p>
+    </Modal>
   );
 }

frontend/components/Modal.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, type ReactNode } from "react";
+import { X } from "lucide-react";
+
+export type ModalProps = {
+  open: boolean;
+  title: ReactNode;
+  onClose: () => void;
+  children: ReactNode;
+  /** 底部操作区（取消/主按钮等） */
+  footer?: ReactNode;
+  /** 标题旁辅助说明 */
+  description?: ReactNode;
+  /** 面板最大宽度 class，默认 max-w-md */
+  maxWidthClass?: string;
+  /** 面板额外 class（如 max-h / flex） */
+  panelClassName?: string;
+  /** 点遮罩关闭；表单/确认默认 false 防误关 */
+  dismissOnOverlay?: boolean;
+  /** busy 时禁用关闭与 ESC */
+  busy?: boolean;
+  /** 叠层高度，确认框用 1100，普通 1000 */
+  zIndexClass?: string;
+  /** 无障碍：dialog | alertdialog */
+  role?: "dialog" | "alertdialog";
+  ariaLabel?: string;
+  /** 自定义标题区（如带图标）；提供时覆盖默认 title 行，仍渲染关闭钮除非 hideClose */
+  header?: ReactNode;
+  hideClose?: boolean;
+  /** 是否响应 ESC；封禁告知等不可关场景设 false */
+  closeOnEscape?: boolean;
+  /** 内容区额外 class */
+  bodyClassName?: string;
+};
+
+/**
+ * 全站弹层壳：统一遮罩、面板、标题关闭钮与 ESC。
+ * 主 CTA 请用 btn-primary；危险操作用 btn-danger；取消用 btn-line。
+ */
+export default function Modal({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  description,
+  maxWidthClass = "max-w-md",
+  panelClassName = "",
+  dismissOnOverlay = false,
+  busy = false,
+  zIndexClass = "z-[1000]",
+  role = "dialog",
+  ariaLabel,
+  header,
+  hideClose = false,
+  closeOnEscape = true,
+  bodyClassName = "",
+}: ModalProps) {
+  useEffect(() => {
+    if (!open || !closeOnEscape) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !busy) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, busy, onClose, closeOnEscape]);
+
+  if (!open) return null;
+
+  const label =
+    ariaLabel || (typeof title === "string" ? title : undefined);
+
+  return (
+    <div
+      className={`fixed inset-0 ${zIndexClass} flex items-center justify-center p-4`}
+      style={{ background: "rgba(0,0,0,0.55)" }}
+      onClick={() => {
+        if (dismissOnOverlay && !busy) onClose();
+      }}
+      role={role}
+      aria-modal="true"
+      aria-label={label}
+    >
+      <div
+        className={`w-full ${maxWidthClass} rounded-2xl j13-toast-in ${panelClassName || "p-6"}`}
+        style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {header ? (
+          <div className="flex items-start justify-between gap-3 mb-4">
+            <div className="min-w-0 flex-1">{header}</div>
+            {!hideClose && (
+              <CloseButton onClick={onClose} disabled={busy} />
+            )}
+          </div>
+        ) : (
+          <div className="flex items-start justify-between gap-3 mb-4">
+            <div className="min-w-0 flex-1">
+              <h2
+                className="text-[16px] sm:text-[18px] font-extrabold tracking-tight leading-snug"
+                style={{ color: "var(--ink)" }}
+              >
+                {title}
+              </h2>
+              {description ? (
+                <div className="mt-1 text-[12.5px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
+                  {description}
+                </div>
+              ) : null}
+            </div>
+            {!hideClose && <CloseButton onClick={onClose} disabled={busy} />}
+          </div>
+        )}
+
+        <div className={bodyClassName}>{children}</div>
+
+        {footer ? (
+          <div className="flex items-center justify-end gap-2 mt-5">{footer}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function CloseButton({
+  onClick,
+  disabled,
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label="关闭"
+      className="w-7 h-7 shrink-0 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors disabled:opacity-50"
+      style={{ color: "var(--ink-3)" }}
+    >
+      <X size={15} />
+    </button>
+  );
+}

frontend/components/PostActions.tsx

@@ -3,10 +3,11 @@
 import { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { Pencil, Trash2, Pin, Star, SlidersHorizontal, ChevronDown, Check, Loader2, X } from "lucide-react";
+import { Pencil, Trash2, Pin, Star, SlidersHorizontal, ChevronDown, Check } from "lucide-react";
 import { apiMe, apiDeletePost, apiTogglePin, apiToggleRecommend, type User } from "@/lib/api";
 import { canModerateBoard, isAdminOrAbove } from "@/lib/roles";
 import { toast } from "@/lib/toast";
+import ConfirmDialog from "@/components/ConfirmDialog";
 
 interface PostActionsProps {
   postId: string;
@@ -189,58 +190,16 @@ export default function PostActions({ postId, authorId, boardId, pinned, recomme
         </div>
       )}
 
-      {confirmDelete && (
-        <div
-          className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
-          style={{ background: "color-mix(in srgb, var(--ink) 55%, transparent)" }}
-          onClick={() => !deleting && setConfirmDelete(false)}
-        >
-          <div
-            className="j13-toast-in panel w-full max-w-[400px] rounded-2xl p-6"
-            style={{ boxShadow: "var(--shadow-lg)" }}
-            onClick={(e) => e.stopPropagation()}
-            role="dialog"
-            aria-modal="true"
-          >
-            <div className="flex items-start gap-4">
-              <span
-                className="w-12 h-12 rounded-full flex items-center justify-center shrink-0"
-                style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
-                aria-hidden="true"
-              >
-                <Trash2 size={22} />
-              </span>
-              <div className="min-w-0 flex-1">
-                <h3 className="text-[16px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
-                  删除帖子
-                </h3>
-                <p className="meta mt-1.5 text-[13px] leading-relaxed">
-                  确定要删除这篇帖子吗？此操作不可恢复。
-                </p>
-              </div>
-            </div>
-            <div className="flex items-center justify-end gap-2 mt-5">
-              <button
-                type="button"
-                className="btn btn-line"
-                onClick={() => setConfirmDelete(false)}
-                disabled={deleting}
-              >
-                <X size={14} /> 取消
-              </button>
-              <button
-                type="button"
-                className="btn btn-danger"
-                onClick={handleDelete}
-                disabled={deleting}
-              >
-                {deleting && <Loader2 size={15} className="animate-spin" />}
-                确认删除
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <ConfirmDialog
+        open={confirmDelete}
+        title="删除帖子"
+        message="确定要删除这篇帖子吗？此操作不可恢复。"
+        confirmLabel="确认删除"
+        danger
+        busy={deleting}
+        onConfirm={handleDelete}
+        onCancel={() => setConfirmDelete(false)}
+      />
     </div>
   );
 }