From 3a07432032c7d8dfa16c7cf6839d49a774e8d5db Mon Sep 17 00:00:00 2001
From: logan <admin@attacker.club>
Date: Wed, 27 May 2026 23:41:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BatchImportModal=20LDAP=E5=BC=B9?=
 =?UTF-8?q?=E6=A1=863=E5=A4=84bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- backdrop onClick冒泡关闭弹框移除(L1036)
- useEffect getConfig/loadLdapOus串行化防时序竞争(L906-919)
- to-ldap/from-ldap条件渲染顺序修正(loading→未配置→正常)
---
 frontend/src/pages/UsersPage.tsx | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/UsersPage.tsx b/frontend/src/pages/UsersPage.tsx
index 4d1b068..e00330e 100644
--- a/frontend/src/pages/UsersPage.tsx
+++ b/frontend/src/pages/UsersPage.tsx
@@ -902,13 +902,21 @@ function BatchImportModal({ onClose, onImported }: { onClose: () => void; onImpo
   const [creatingOu, setCreatingOu] = useState(false);
   const [deleteConfirm, setDeleteConfirm] = useState<{msg: string; onConfirm: () => void} | null>(null);
 
-  // Check LDAP readiness
+  // Check LDAP readiness + load OUs
   useEffect(() => {
     if (tab === 'to-ldap' || tab === 'from-ldap') {
+      setLdapLoading(true);
       ldapApi.getConfig().then((res: any) => {
-        setLdapReady(!!res?.ldap_host);
-      }).catch(() => setLdapReady(false));
-      if (ldapOus.length === 0) loadLdapOus();
+        const ready = !!res?.ldap_host;
+        setLdapReady(ready);
+        if (ready && ldapOus.length === 0) {
+          return loadLdapOus();
+        }
+        setLdapLoading(false);
+      }).catch(() => {
+        setLdapReady(false);
+        setLdapLoading(false);
+      });
     }
   }, [tab]);
 
@@ -1025,7 +1033,7 @@ function BatchImportModal({ onClose, onImported }: { onClose: () => void; onImpo
   ];
 
   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()}>
         {/* Header */}
         <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 ── */}
           {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">
                   LDAP 未配置，请先在「平台配置 → LDAP」中配置 LDAP 连接
                 </div>
               )}
-              {ldapReady && (
+              {!ldapLoading && ldapReady && (
                 <>
                   {/* OU selector */}
                   <div>
@@ -1163,12 +1172,12 @@ function BatchImportModal({ onClose, onImported }: { onClose: () => void; onImpo
           {/* ── From LDAP Import ── */}
           {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">
                   LDAP 未配置，请先在「平台配置 → LDAP」中配置 LDAP 连接
                 </div>
               )}
-              {ldapLoading && <p className="text-sm text-[var(--dg-text-muted)] text-center py-4">加载中...</p>}
               {!ldapLoading && ldapReady && ldapOus.length > 0 && ldapUsers.length === 0 && (
                 <div className="space-y-1">
                   <p className="text-sm text-[var(--dg-text-muted)] mb-2">选择组织单元:</p>