fix: 移除所有弹框遮罩层点击关闭 — 防止输入时误触关闭
涉及文件 (12处): - InstancePage.tsx: 添加数据源弹框 - UsersPage.tsx: 新建/编辑/重置密码/详情弹框 (4处) - RolesPage.tsx: 克隆角色弹框 - InstanceGroupPage.tsx: 新建/编辑/关联实例/关联用户弹框 (4处) - SlowQueryPage.tsx: 查询对比弹框 - RedisDetailPage.tsx: 键详情/新增键弹框 (2处) 改动: 遮罩层div移除onClick,只能通过X按钮或取消按钮关闭
This commit is contained in:
1 parent
47f077c97f
commit
9f56e866f2
6 files changed
+13
-13
No files matched your search
@@ -703,7 +703,7 @@ export default function InstanceGroupPage() {
|
|||||||
|
|
||||||
{/* Create Modal */}
|
{/* Create Modal */}
|
||||||
{showCreateModal && (
|
{showCreateModal && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => { setShowCreateModal(false); resetForm(); }}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="w-full max-w-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
<div className="w-full max-w-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||||
<h3 className="text-lg font-semibold mb-4">新建权限组</h3>
|
<h3 className="text-lg font-semibold mb-4">新建权限组</h3>
|
||||||
{renderGroupForm(handleCreate, '创建')}
|
{renderGroupForm(handleCreate, '创建')}
|
||||||
@@ -713,7 +713,7 @@ export default function InstanceGroupPage() {
|
|||||||
|
|
||||||
{/* Edit Modal */}
|
{/* Edit Modal */}
|
||||||
{showEditModal && (
|
{showEditModal && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => { setShowEditModal(false); resetForm(); }}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="w-full max-w-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
<div className="w-full max-w-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||||
<h3 className="text-lg font-semibold mb-4">编辑权限组</h3>
|
<h3 className="text-lg font-semibold mb-4">编辑权限组</h3>
|
||||||
{renderGroupForm(handleEdit, '保存')}
|
{renderGroupForm(handleEdit, '保存')}
|
||||||
@@ -723,7 +723,7 @@ export default function InstanceGroupPage() {
|
|||||||
|
|
||||||
{/* Instance Modal with search */}
|
{/* Instance Modal with search */}
|
||||||
{showInstanceModal && (
|
{showInstanceModal && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowInstanceModal(false)}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="w-full max-w-md bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
<div className="w-full max-w-md bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||||
<h3 className="text-lg font-semibold mb-4">关联实例</h3>
|
<h3 className="text-lg font-semibold mb-4">关联实例</h3>
|
||||||
<div className="relative mb-3">
|
<div className="relative mb-3">
|
||||||
@@ -758,7 +758,7 @@ export default function InstanceGroupPage() {
|
|||||||
|
|
||||||
{/* User Modal with search */}
|
{/* User Modal with search */}
|
||||||
{showUserModal && (
|
{showUserModal && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowUserModal(false)}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="w-full max-w-md bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
<div className="w-full max-w-md bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||||
<h3 className="text-lg font-semibold mb-4">关联用户</h3>
|
<h3 className="text-lg font-semibold mb-4">关联用户</h3>
|
||||||
<div className="relative mb-3">
|
<div className="relative mb-3">
|
||||||
|
|||||||
@@ -991,7 +991,7 @@ function CreateInstanceForm({ defaultType, onCancel, onCreated }: {
|
|||||||
const labelCls = 'block text-sm font-medium mb-1.5';
|
const labelCls = 'block text-sm font-medium mb-1.5';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={onCancel}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||||
<div
|
<div
|
||||||
className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
|
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()}
|
onClick={e => e.stopPropagation()}
|
||||||
|
|||||||
@@ -246,7 +246,7 @@ export default function RedisDetailPage() {
|
|||||||
|
|
||||||
{/* 键详情弹窗 */}
|
{/* 键详情弹窗 */}
|
||||||
{selectedKey && (
|
{selectedKey && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={function () { setSelectedKey(null); }}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-lg max-h-[70vh] overflow-y-auto p-6" onClick={function (e) { e.stopPropagation(); }}>
|
<div className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-lg max-h-[70vh] overflow-y-auto p-6" onClick={function (e) { e.stopPropagation(); }}>
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<h3 className="font-semibold">键详情</h3>
|
<h3 className="font-semibold">键详情</h3>
|
||||||
@@ -268,7 +268,7 @@ export default function RedisDetailPage() {
|
|||||||
|
|
||||||
{/* 新增键弹窗 */}
|
{/* 新增键弹窗 */}
|
||||||
{showAddKey && (
|
{showAddKey && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={function () { setShowAddKey(false); }}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-md p-6" onClick={function (e) { e.stopPropagation(); }}>
|
<div className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-md p-6" onClick={function (e) { e.stopPropagation(); }}>
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<h3 className="font-semibold">新增键</h3>
|
<h3 className="font-semibold">新增键</h3>
|
||||||
|
|||||||
@@ -553,7 +553,7 @@ function CloneRoleModal({ sourceRole, onClose }: { sourceRole: Role; onClose: ()
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="w-full max-w-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl" onClick={e => e.stopPropagation()}>
|
<div className="w-full max-w-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl" onClick={e => e.stopPropagation()}>
|
||||||
<div className="flex items-center justify-between mb-5">
|
<div className="flex items-center justify-between mb-5">
|
||||||
<h2 className="text-lg font-semibold flex items-center gap-2"><Copy className="w-5 h-5 text-blue-400" /> 克隆角色</h2>
|
<h2 className="text-lg font-semibold flex items-center gap-2"><Copy className="w-5 h-5 text-blue-400" /> 克隆角色</h2>
|
||||||
|
|||||||
@@ -893,7 +893,7 @@ export default function SlowQueryPage() {
|
|||||||
|
|
||||||
{/* Compare Modal */}
|
{/* Compare Modal */}
|
||||||
{showCompare && compareLogs.length === 2 && (
|
{showCompare && compareLogs.length === 2 && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowCompare(false)}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="w-full max-w-4xl bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
<div className="w-full max-w-4xl bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
||||||
<div className="flex items-center justify-between mb-5">
|
<div className="flex items-center justify-between mb-5">
|
||||||
<h2 className="text-lg font-semibold flex items-center gap-2"><GitCompare className="w-5 h-5 text-blue-400" /> 查询对比</h2>
|
<h2 className="text-lg font-semibold flex items-center gap-2"><GitCompare className="w-5 h-5 text-blue-400" /> 查询对比</h2>
|
||||||
|
|||||||
@@ -590,7 +590,7 @@ function CreateUserModal({ onClose, onCreated, setToast }: { onClose: () => void
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="w-full max-w-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl" onClick={e => e.stopPropagation()}>
|
<div className="w-full max-w-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl" onClick={e => e.stopPropagation()}>
|
||||||
<div className="flex items-center justify-between mb-5">
|
<div className="flex items-center justify-between mb-5">
|
||||||
<h2 className="text-lg font-semibold">新建用户</h2>
|
<h2 className="text-lg font-semibold">新建用户</h2>
|
||||||
@@ -677,7 +677,7 @@ function EditUserModal({ user, onClose, onUpdated, setToast }: { user: UserItem;
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="w-full max-w-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl" onClick={e => e.stopPropagation()}>
|
<div className="w-full max-w-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl" onClick={e => e.stopPropagation()}>
|
||||||
<div className="flex items-center justify-between mb-5">
|
<div className="flex items-center justify-between mb-5">
|
||||||
<h2 className="text-lg font-semibold">编辑用户</h2>
|
<h2 className="text-lg font-semibold">编辑用户</h2>
|
||||||
@@ -758,7 +758,7 @@ function ResetPasswordModal({ user, onClose, setToast }: { user: UserItem; onClo
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="w-full max-w-sm bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl" onClick={e => e.stopPropagation()}>
|
<div className="w-full max-w-sm bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl" onClick={e => e.stopPropagation()}>
|
||||||
<div className="flex items-center justify-between mb-5">
|
<div className="flex items-center justify-between mb-5">
|
||||||
<h2 className="text-lg font-semibold flex items-center gap-2"><KeyRound className="w-5 h-5 text-yellow-400" /> 重置密码</h2>
|
<h2 className="text-lg font-semibold flex items-center gap-2"><KeyRound className="w-5 h-5 text-yellow-400" /> 重置密码</h2>
|
||||||
@@ -795,7 +795,7 @@ function UserDetailModal({ user, onClose }: { user: UserItem; onClose: () => voi
|
|||||||
const activities = useMemo(() => generateMockActivities(user.id), [user.id]);
|
const activities = useMemo(() => generateMockActivities(user.id), [user.id]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
<div className="w-full max-w-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
<div className="w-full max-w-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
||||||
<div className="flex items-center justify-between mb-5">
|
<div className="flex items-center justify-between mb-5">
|
||||||
<h2 className="text-lg font-semibold">用户详情</h2>
|
<h2 className="text-lg font-semibold">用户详情</h2>
|
||||||
|
|||||||
Reference in new issue
Block a user