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,45 +896,42 @@ 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">
+    <Modal
+      open
+      title="角色与账号"
+      description={
+        <>
+          <span className="truncate block">
             @{target.username}（{target.nickname}）
-            </p>
-          </div>
+          </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"
-            onClick={onClose}
+            className={willBan ? "btn btn-danger" : "btn btn-primary"}
+            onClick={submit}
             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} />
+            {acting && <Loader2 size={15} className="animate-spin" />}
+            {saveLabel}
           </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 className="mb-2 text-[12.5px] font-bold" style={{ color: "var(--ink)" }}>
         管理角色
       </p>
       <div className="flex flex-col gap-2" role="radiogroup" aria-label="管理角色">
@@ -1098,23 +1087,7 @@ function RoleAssignDialog({
           </p>
         )}
       </div>
-
-        <div className="flex items-center justify-end gap-2 mt-5">
-          <button type="button" className="btn btn-line" onClick={onClose} disabled={acting}>
-            取消
-          </button>
-          <button
-            type="button"
-            className={willBan ? "btn btn-danger" : "btn"}
-            onClick={submit}
-            disabled={acting}
-          >
-            {acting && <Loader2 size={15} className="animate-spin" />}
-            {saveLabel}
-          </button>
-        </div>
-      </div>
-    </div>
+    </Modal>
   );
 }
 
@@ -1154,55 +1127,52 @@ 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)" }}>
+    <Modal
+      open
+      title={
+        <span className="inline-flex items-center gap-2">
           <History size={17} style={{ color: "var(--accent)" }} />
           登录历史
-            </h3>
-            <p className="meta mt-1 text-[12.5px] truncate">
-              @{target.username} · 共 {total} 条记录（含失败尝试）
-            </p>
-          </div>
+        </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>
             <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)" }}
+              className="btn btn-line btn-sm"
+              disabled={page <= 1 || loading}
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
             >
-            <X size={16} />
+              <ChevronLeft size={14} /> 上一页
             </button>
-        </div>
-
-        <div className="mt-4 -mx-1.5 px-1.5 overflow-y-auto flex-1">
+            <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" /> 加载中…
@@ -1247,40 +1217,17 @@ function LoginLogsDialog({ target, onClose }: { target: AdminUser | null; onClos
                   </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" })}
+                  {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)" }}>
-              第 {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>
-          </div>
-        )}
-      </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,30 +601,23 @@ 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>
-        </div>
+          <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)" }}>
@@ -699,16 +693,7 @@ function CreateGroupModal({
             />
           </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,21 +25,31 @@ 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)" }}
+      ariaLabel="账号已被封禁"
+      maxWidthClass="max-w-[400px]"
+      footer={
+        <button
+          type="button"
+          onClick={() => {
+            setBanned(false);
+            router.push("/");
+          }}
+          className="btn btn-primary w-full"
+          autoFocus
         >
+          我知道了
+        </button>
+      }
+      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)" }}
@@ -52,23 +63,16 @@ export default function AccountGuard() {
           >
             账号已被封禁
           </h2>
-        <p id="banned-dialog-desc" className="meta mt-2 text-[13px] leading-relaxed">
+        </div>
+      }
+    >
+      <p
+        id="banned-dialog-desc"
+        className="meta text-[13px] leading-relaxed text-center"
+      >
         你的账号因违反社区规则已被管理员封禁，当前登录状态已失效，无法继续发布内容与互动。
         如对处理结果有异议，请联系管理员核实。
       </p>
-        <button
-          type="button"
-          onClick={() => {
-            setBanned(false);
-            // 回到首页展示游客视图（若当前停留在受保护页面）
-            router.push("/");
-          }}
-          className="btn btn-primary w-full mt-5"
-          autoFocus
-        >
-          我知道了
-        </button>
-      </div>
-    </div>
+    </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>
   );
 }