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