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

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

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