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

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

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>
   );
 }