fix: BatchImportModal LDAP弹框3处bug修复

- backdrop onClick冒泡关闭弹框移除(L1036)
- useEffect getConfig/loadLdapOus串行化防时序竞争(L906-919)
- to-ldap/from-ldap条件渲染顺序修正(loading→未配置→正常)
This commit is contained in:
logan committed 2026-05-27 23:41:19 +08:00
1 parent 4351421848
commit 3a07432032
1 file changed
+18 -9
+18 -9
View File
@@ -902,13 +902,21 @@ function BatchImportModal({ onClose, onImported }: { onClose: () => void; onImpo
const [creatingOu, setCreatingOu] = useState(false); const [creatingOu, setCreatingOu] = useState(false);
const [deleteConfirm, setDeleteConfirm] = useState<{msg: string; onConfirm: () => void} | null>(null); const [deleteConfirm, setDeleteConfirm] = useState<{msg: string; onConfirm: () => void} | null>(null);
// Check LDAP readiness // Check LDAP readiness + load OUs
useEffect(() => { useEffect(() => {
if (tab === 'to-ldap' || tab === 'from-ldap') { if (tab === 'to-ldap' || tab === 'from-ldap') {
setLdapLoading(true);
ldapApi.getConfig().then((res: any) => { ldapApi.getConfig().then((res: any) => {
setLdapReady(!!res?.ldap_host); const ready = !!res?.ldap_host;
}).catch(() => setLdapReady(false)); setLdapReady(ready);
if (ldapOus.length === 0) loadLdapOus(); if (ready && ldapOus.length === 0) {
return loadLdapOus();
}
setLdapLoading(false);
}).catch(() => {
setLdapReady(false);
setLdapLoading(false);
});
} }
}, [tab]); }, [tab]);
@@ -1025,7 +1033,7 @@ function BatchImportModal({ onClose, onImported }: { onClose: () => void; onImpo
]; ];
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-2xl max-h-[85vh] bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl shadow-xl flex flex-col" onClick={e => e.stopPropagation()}> <div className="w-full max-w-2xl max-h-[85vh] bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl shadow-xl flex flex-col" onClick={e => e.stopPropagation()}>
{/* Header */} {/* Header */}
<div className="flex items-center justify-between px-6 py-4"> <div className="flex items-center justify-between px-6 py-4">
@@ -1093,12 +1101,13 @@ function BatchImportModal({ onClose, onImported }: { onClose: () => void; onImpo
{/* ── Import to LDAP ── */} {/* ── Import to LDAP ── */}
{tab === 'to-ldap' && ( {tab === 'to-ldap' && (
<> <>
{!ldapReady && ( {ldapLoading && <p className="text-sm text-[var(--dg-text-muted)] text-center py-4">加载中...</p>}
{!ldapLoading && !ldapReady && (
<div className="p-3 rounded-lg bg-yellow-500/10 text-yellow-400 text-sm"> <div className="p-3 rounded-lg bg-yellow-500/10 text-yellow-400 text-sm">
LDAP 未配置,请先在「平台配置 → LDAP」中配置 LDAP 连接 LDAP 未配置,请先在「平台配置 → LDAP」中配置 LDAP 连接
</div> </div>
)} )}
{ldapReady && ( {!ldapLoading && ldapReady && (
<> <>
{/* OU selector */} {/* OU selector */}
<div> <div>
@@ -1163,12 +1172,12 @@ function BatchImportModal({ onClose, onImported }: { onClose: () => void; onImpo
{/* ── From LDAP Import ── */} {/* ── From LDAP Import ── */}
{tab === 'from-ldap' && ( {tab === 'from-ldap' && (
<> <>
{!ldapReady && ( {ldapLoading && <p className="text-sm text-[var(--dg-text-muted)] text-center py-4">加载中...</p>}
{!ldapLoading && !ldapReady && (
<div className="p-3 rounded-lg bg-yellow-500/10 text-yellow-400 text-sm"> <div className="p-3 rounded-lg bg-yellow-500/10 text-yellow-400 text-sm">
LDAP 未配置,请先在「平台配置 → LDAP」中配置 LDAP 连接 LDAP 未配置,请先在「平台配置 → LDAP」中配置 LDAP 连接
</div> </div>
)} )}
{ldapLoading && <p className="text-sm text-[var(--dg-text-muted)] text-center py-4">加载中...</p>}
{!ldapLoading && ldapReady && ldapOus.length > 0 && ldapUsers.length === 0 && ( {!ldapLoading && ldapReady && ldapOus.length > 0 && ldapUsers.length === 0 && (
<div className="space-y-1"> <div className="space-y-1">
<p className="text-sm text-[var(--dg-text-muted)] mb-2">选择组织单元:</p> <p className="text-sm text-[var(--dg-text-muted)] mb-2">选择组织单元:</p>