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

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

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