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

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

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