diff --git a/frontend/src/pages/AnnouncementPage.tsx b/frontend/src/pages/AnnouncementPage.tsx
index 182eeee..fb1f5b7 100644
--- a/frontend/src/pages/AnnouncementPage.tsx
+++ b/frontend/src/pages/AnnouncementPage.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import request from '@/api/request';
 import { Megaphone, Plus, Edit2, Trash2, Eye, Clock, CheckCircle, X, Save } from 'lucide-react';
 import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { ModalOverlay } from '@/components/ModalOverlay';
 
 /* ── types ── */
 interface Announcement {
@@ -230,11 +231,8 @@ export default function AnnouncementPage() {
 
       {/* ── View Preview Modal ── */}
       {viewAnn && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setViewAnn(null)}>
-          <div
-            className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[85vh] overflow-y-auto"
-            onClick={e => e.stopPropagation()}
-          >
+        <ModalOverlay open={!!viewAnn} onClose={() => setViewAnn(null)} width="max-w-2xl">
+          <div className="p-6">
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-2">
                 <h3 className="text-lg font-semibold text-[var(--dg-text-primary)]">{viewAnn.title}</h3>
@@ -258,16 +256,13 @@ export default function AnnouncementPage() {
               dangerouslySetInnerHTML={{ __html: simpleMarkdown(viewAnn.content) }}
             />
           </div>
-        </div>
+        </ModalOverlay>
       )}
 
       {/* ── Create / Edit Modal ── */}
       {showModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setShowModal(false)}>
-          <div
-            className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto"
-            onClick={e => e.stopPropagation()}
-          >
+        <ModalOverlay open={showModal} onClose={() => setShowModal(false)} width="max-w-3xl">
+          <div className="p-6">
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-[var(--dg-text-primary)]">{editingId ? '编辑公告' : '创建公告'}</h3>
               <button onClick={() => setShowModal(false)} className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)]">
@@ -339,7 +334,7 @@ export default function AnnouncementPage() {
               </button>
             </div>
           </div>
-        </div>
+        </ModalOverlay>
       )}
       <ConfirmDialog
         open={!!deleteConfirm}
diff --git a/frontend/src/pages/InstancePage.tsx b/frontend/src/pages/InstancePage.tsx
index 1f0fed1..a727a9e 100644
--- a/frontend/src/pages/InstancePage.tsx
+++ b/frontend/src/pages/InstancePage.tsx
@@ -13,6 +13,7 @@ import EmptyState from '@/components/EmptyState';
 import { instanceApi } from '@/api/instance';
 import EditInstanceDialog from '@/components/EditInstanceDialog';
 import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { ModalOverlay } from '@/components/ModalOverlay';
 
 /* ------------------------------------------------------------------ */
 /*  Types                                                              */
@@ -1083,10 +1084,10 @@ function CreateInstanceForm({ defaultType, onCancel, onCreated }: {
   const labelCls = 'block text-sm font-medium mb-1.5';
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+    <>
+    <ModalOverlay open={true} onClose={onCancel} width="max-w-2xl">
       <div
-        className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
-        onClick={e => e.stopPropagation()}
+        className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-h-[90vh] overflow-y-auto"
       >
         {/* Header */}
         <div className="sticky top-0 z-10 flex items-center justify-between px-6 py-4 bg-[var(--dg-bg-secondary)] border-b border-[var(--dg-border)]">
@@ -1448,6 +1449,7 @@ function CreateInstanceForm({ defaultType, onCancel, onCreated }: {
           </div>
         </div>
       </div>
+    </ModalOverlay>
     <ConfirmDialog
             open={!!deleteConfirm}
             title={deleteConfirm?.msg || '确认操作'}
@@ -1456,6 +1458,6 @@ function CreateInstanceForm({ defaultType, onCancel, onCreated }: {
             onConfirm={() => { deleteConfirm?.onConfirm(); setDeleteConfirm(null); }}
             onCancel={() => setDeleteConfirm(null)}
           />
-    </div>
+    </>
   );
 }
diff --git a/frontend/src/pages/LdapConfigPage.tsx b/frontend/src/pages/LdapConfigPage.tsx
index 1c697fa..95a2bf5 100644
--- a/frontend/src/pages/LdapConfigPage.tsx
+++ b/frontend/src/pages/LdapConfigPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import api from '@/api/request';
+import { ModalOverlay } from '@/components/ModalOverlay';
 import { toast } from '@/hooks/useToast';
 import {
   Save, ChevronRight, ChevronDown, RefreshCw,
@@ -613,8 +614,8 @@ export default function LdapConfigPage() {
 
       {/* ── 创建 OU 弹框 ── */}
       {showCreateOu && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="bg-[var(--dg-bg-secondary)] rounded-xl w-[460px] shadow-2xl">
+        <ModalOverlay open={true} onClose={() => setShowCreateOu(false)} width="w-[460px]">
+          <div className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl">
             <div className="flex items-center justify-between px-5 py-4">
               <h3 className="text-sm font-semibold">新建组织单元 (OU)</h3>
               <button onClick={() => setShowCreateOu(false)} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">✕</button>
@@ -661,13 +662,13 @@ export default function LdapConfigPage() {
               </button>
             </div>
           </div>
-        </div>
+        </ModalOverlay>
       )}
 
       {/* ── 添加用户弹框 ── */}
       {showAddUser && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="bg-[var(--dg-bg-secondary)] rounded-xl w-[500px] shadow-2xl">
+        <ModalOverlay open={true} onClose={() => setShowAddUser(false)} width="w-[500px]">
+          <div className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl">
             <div className="flex items-center justify-between px-5 py-4">
               <h3 className="text-sm font-semibold">添加用户到 LDAP</h3>
               <button onClick={() => setShowAddUser(false)} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">✕</button>
@@ -737,13 +738,13 @@ export default function LdapConfigPage() {
               </button>
             </div>
           </div>
-        </div>
+        </ModalOverlay>
       )}
 
             {/* ── 账号测试弹框 ── */}
       {showAccountTest && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowAccountTest(false)}>
-          <div className="bg-[var(--dg-bg-secondary)] rounded-xl w-[420px] shadow-2xl" onClick={e => e.stopPropagation()}>
+        <ModalOverlay open={true} onClose={() => setShowAccountTest(false)} width="w-[420px]">
+          <div className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl">
             <div className="flex items-center justify-between px-5 py-4">
               <h3 className="text-sm font-semibold">LDAP 账号验证测试</h3>
               <button onClick={() => setShowAccountTest(false)} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
@@ -803,7 +804,7 @@ export default function LdapConfigPage() {
               </button>
             </div>
           </div>
-        </div>
+        </ModalOverlay>
       )}
     </div>
   );
diff --git a/frontend/src/pages/NotificationPage.tsx b/frontend/src/pages/NotificationPage.tsx
index a2988a7..e836d12 100644
--- a/frontend/src/pages/NotificationPage.tsx
+++ b/frontend/src/pages/NotificationPage.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import request from '@/api/request';
 import { Plus, Trash2, Send, Bell, Mail, Settings, X } from 'lucide-react';
 import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { ModalOverlay } from '@/components/ModalOverlay';
 
 /* ── types ── */
 type ChannelType = 'dingtalk' | 'webhook_feishu' | 'email';
@@ -362,11 +363,8 @@ export default function NotificationPage() {
 
       {/* ── Create / Edit Modal ── */}
       {showModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setShowModal(false)}>
-          <div
-            className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto"
-            onClick={e => e.stopPropagation()}
-          >
+        <ModalOverlay open={showModal} onClose={() => setShowModal(false)} width="max-w-2xl">
+          <div className="p-6">
             <div className="flex items-center justify-between mb-6">
               <h3 className="text-xl font-semibold text-[var(--dg-text-primary)]">{editingId ? '编辑渠道' : '添加渠道'}</h3>
               <button onClick={() => setShowModal(false)} className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)]">
@@ -446,7 +444,7 @@ export default function NotificationPage() {
               </button>
             </div>
           </div>
-        </div>
+        </ModalOverlay>
       )}
       <ConfirmDialog
         open={!!deleteConfirm}