feat: 用户管理列表增加来源字段(auth_source)，支持本地/LDAP筛选

2026-05-29 17:05:56 +00:00
1 parent ac07e6ef38
commit 8384006ae9
@@ -78,6 +78,7 @@ export default function LdapConfigPage() {
  const [addingUser, setAddingUser] = useState(false);

  const [deleting, setDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);

  /* ── 加载配置 ── */
  const fetchConfig = useCallback(async () => {
@@ -275,28 +276,25 @@ export default function LdapConfigPage() {
  /* ── 删除选中用户 ── */
  const handleDeleteSelected = async () => {
    if (selectedDns.size === 0) return;
-    if (!confirm(`确认删除 ${selectedDns.size} 个用户？此操作不可逆！`)) return;
+    setShowDeleteConfirm(true);
+  };
+
+  const confirmDelete = async () => {
+    setShowDeleteConfirm(false);
    setDeleting(true);
-    try {
-      // 后端需要一个 delete endpoint — 暂时逐个调用
-      // 先用 delete-user 端点
-      let ok = 0, fail = 0;
-      for (const dn of selectedDns) {
-        try {
-          await api.post('/ldap-config/delete-user', { dn });
-          ok++;
-        } catch {
-          fail++;
-        }
+    let ok = 0, fail = 0;
+    for (const dn of selectedDns) {
+      try {
+        await api.post('/ldap-config/delete-user', { dn });
+        ok++;
+      } catch {
+        fail++;
      }
-      toast(ok > 0 ? 'success' : 'error', `删除完成: 成功 ${ok}, 失败 ${fail}`);
-      setSelectedDns(new Set());
-      if (selectedOu) fetchUsers(selectedOu);
-    } catch (e: any) {
-      toast('error', e?.response?.data?.detail || '删除失败');
-    } finally {
-      setDeleting(false);
    }
+    toast(ok > 0 ? 'success' : 'error', `删除完成: 成功 ${ok}, 失败 ${fail}`);
+    setSelectedDns(new Set());
+    if (selectedOu) fetchUsers(selectedOu);
+    setDeleting(false);
  };

  const toggleManage = () => {
@@ -744,107 +742,126 @@ export default function LdapConfigPage() {

            {/* ── 账号测试弹框 ── */}
      {showAccountTest && (
-        <ModalOverlay open={true} onClose={() => { setShowAccountTest(false); setAccountResult(null); }} width="w-[440px]">
-          {/* 标题 */}
-          <div className="flex items-center justify-between px-5 py-3.5">
-            <div className="flex items-center gap-2">
-              <KeyRound className="w-4 h-4 text-blue-400" />
-              <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">账号验证测试</h3>
+        <ModalOverlay open={true} onClose={() => { setShowAccountTest(false); setAccountResult(null); }} width="max-w-md">
+          <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-5 shadow-xl">
+            {/* 标题 */}
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2">
+                <KeyRound className="w-4 h-4 text-blue-400" />
+                <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">账号验证测试</h3>
+              </div>
+              <button onClick={() => { setShowAccountTest(false); setAccountResult(null); }} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">
+                ✕
+              </button>
            </div>
-            <button onClick={() => { setShowAccountTest(false); setAccountResult(null); }} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">
-              ✕
-            </button>
-          </div>

-          {/* 表单区 */}
-          <div className="px-5 pb-4 space-y-3">
-            <div>
-              <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">用户名</label>
-              <input
-                value={testUser}
-                onChange={e => { setTestUser(e.target.value); setAccountResult(null); }}
-                className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-                placeholder="LDAP 用户名"
-              />
+            {/* 表单区 */}
+            <div className="space-y-3 mb-4">
+              <div>
+                <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">用户名</label>
+                <input
+                  value={testUser}
+                  onChange={e => { setTestUser(e.target.value); setAccountResult(null); }}
+                  className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
+                  placeholder="LDAP 用户名"
+                />
+              </div>
+              <div>
+                <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">密码</label>
+                <input
+                  type="password"
+                  value={testPass}
+                  onChange={e => { setTestPass(e.target.value); setAccountResult(null); }}
+                  className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
+                  placeholder="密码"
+                  onKeyDown={e => { if (e.key === 'Enter' && testUser && testPass) handleTestAccount(); }}
+                />
+              </div>
            </div>
-            <div>
-              <label className="text-xs text-[var(--dg-text-muted)] mb-1 block">密码</label>
-              <input
-                type="password"
-                value={testPass}
-                onChange={e => { setTestPass(e.target.value); setAccountResult(null); }}
-                className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-400 transition-colors"
-                placeholder="密码"
-                onKeyDown={e => { if (e.key === 'Enter' && testUser && testPass) handleTestAccount(); }}
-              />
+
+            {/* 结果区 */}
+            {accountResult && (
+              <div className="mb-4">
+                {accountResult.ok ? (
+                  <div className="rounded-lg bg-emerald-500/12 p-3">
+                    <div className="flex items-center gap-2 mb-2">
+                      <CheckCircle className="w-4 h-4 text-emerald-400 shrink-0" />
+                      <span className="text-sm font-medium text-emerald-400">验证通过</span>
+                    </div>
+                    {accountResult.info && (
+                      <div className="space-y-1 pl-6 max-h-24 overflow-y-auto">
+                        {Object.entries(accountResult.info)
+                          .filter(([, v]) => v && String(v).length > 0)
+                          .map(([k, v]) => (
+                          <div key={k} className="flex text-xs gap-2">
+                            <span className="text-emerald-400/60 shrink-0">{
+                              k === 'Display Name' ? '姓名' :
+                              k === 'Email' ? '邮箱' :
+                              k === 'User DN' ? 'DN' :
+                              k === 'User ID' ? '用户名' : k
+                            }</span>
+                            <span className="text-emerald-300">{
+                              Array.isArray(v) ? v.join(', ') : String(v)
+                            }</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="rounded-lg bg-red-500/12 p-3">
+                    <div className="flex items-center gap-2">
+                      <XCircle className="w-4 h-4 text-red-400 shrink-0" />
+                      <span className="text-sm font-medium text-red-400">验证失败</span>
+                    </div>
+                    <p className="text-xs text-red-300/80 mt-1 pl-6">{accountResult.msg}</p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 操作栏 */}
+            <div className="flex justify-end gap-2">
+              <button onClick={() => { setShowAccountTest(false); setAccountResult(null); }} className="px-4 py-2 text-sm text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">关闭</button>
+              <button
+                onClick={handleTestAccount}
+                disabled={testingAccount || !testUser || !testPass}
+                className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 transition-colors"
+              >
+                {testingAccount ? (
+                  <><RefreshCw className="w-3.5 h-3.5 animate-spin" />验证中…</>
+                ) : (
+                  <><Shield className="w-3.5 h-3.5" />测试验证</>
+                )}
+              </button>
            </div>
          </div>
+        </ModalOverlay>
+      )}

-          {/* 结果区 — 独立视觉层级 */}
-          {accountResult && (
-            <div className="mx-5 mb-4">
-              {accountResult.ok ? (
-                /* 成功 */
-                <div className="rounded-lg bg-emerald-500/12 p-4">
-                  <div className="flex items-center gap-2 mb-3">
-                    <div className="w-6 h-6 rounded-full bg-emerald-500/25 flex items-center justify-center">
-                      <CheckCircle className="w-4 h-4 text-emerald-400" />
-                    </div>
-                    <span className="text-sm font-medium text-emerald-400">验证通过</span>
-                  </div>
-                  {accountResult.info && (
-                    <div className="space-y-1.5 pl-8">
-                      {Object.entries(accountResult.info)
-                        .filter(([, v]) => v && String(v).length > 0)
-                        .map(([k, v]) => (
-                        <div key={k} className="flex text-xs gap-2">
-                          <span className="text-emerald-400/60 min-w-[48px] shrink-0">{
-                            k === 'Display Name' ? '姓名' :
-                            k === 'Email' ? '邮箱' :
-                            k === 'User DN' ? 'DN' :
-                            k === 'User ID' ? '用户名' : k
-                          }</span>
-                          {Array.isArray(v) ? (
-                            v.length > 0 ? (
-                              <span className="text-emerald-300">
-                                {v.join(', ')}
-                              </span>
-                            ) : null
-                          ) : <span className="text-emerald-300">{String(v)}</span>}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              ) : (
-                /* 失败 */
-                <div className="rounded-lg bg-red-500/12 p-4">
-                  <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 rounded-full bg-red-500/25 flex items-center justify-center">
-                      <XCircle className="w-4 h-4 text-red-400" />
-                    </div>
-                    <span className="text-sm font-medium text-red-400">验证失败</span>
-                  </div>
-                  <p className="text-xs text-red-300/80 mt-2 pl-8">{accountResult.msg}</p>
-                </div>
-              )}
+      {/* ── 删除确认弹框 ── */}
+      {showDeleteConfirm && (
+        <ModalOverlay open={true} onClose={() => setShowDeleteConfirm(false)} width="max-w-sm">
+          <div className="w-full bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-5 shadow-xl">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2">
+                <AlertTriangle className="w-4 h-4 text-red-400" />
+                <h3 className="text-sm font-semibold text-[var(--dg-text-primary)]">确认删除</h3>
+              </div>
+              <button onClick={() => setShowDeleteConfirm(false)} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">✕</button>
+            </div>
+            <p className="text-sm text-[var(--dg-text-secondary)] mb-5">
+              确认删除 <span className="text-red-400 font-medium">{selectedDns.size}</span> 个 LDAP 用户？此操作不可逆。
+            </p>
+            <div className="flex justify-end gap-2">
+              <button onClick={() => setShowDeleteConfirm(false)} className="px-4 py-2 text-sm text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">取消</button>
+              <button
+                onClick={confirmDelete}
+                className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors"
+              >
+                <Trash2 className="w-3.5 h-3.5" />确认删除
+              </button>
            </div>
-          )}
-
-          {/* 操作栏 */}
-          <div className="flex justify-end gap-3 px-5 py-3.5">
-            <button onClick={() => { setShowAccountTest(false); setAccountResult(null); }} className="px-4 py-2 text-sm text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">关闭</button>
-            <button
-              onClick={handleTestAccount}
-              disabled={testingAccount || !testUser || !testPass}
-              className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 transition-colors"
-            >
-              {testingAccount ? (
-                <><RefreshCw className="w-3.5 h-3.5 animate-spin" />验证中…</>
-              ) : (
-                <><Shield className="w-3.5 h-3.5" />测试验证</>
-              )}
-            </button>
          </div>
        </ModalOverlay>
      )}
@@ -24,6 +24,7 @@ interface UserItem {
  is_active: boolean;
  created_at: string;
  last_login?: string | null;
+  auth_source?: string; // 'local' | 'ldap'
 }

 interface UserActivity {
@@ -70,6 +71,12 @@ const statusOptions = [
  { value: 'disabled', label: '禁用' },
 ];

+const sourceOptions = [
+  { value: '', label: '全部来源' },
+  { value: 'local', label: '本地' },
+  { value: 'ldap', label: 'LDAP' },
+];
+
 const BATCH_OPTIONS = [
  { key: 'enable', label: '批量启用', icon: UserCheck },
  { key: 'disable', label: '批量禁用', icon: UserX },
@@ -124,6 +131,7 @@ export default function UsersPage() {
  const [search, setSearch] = useState('');
  const [roleFilter, setRoleFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
+  const [sourceFilter, setSourceFilter] = useState('');
  const [users, setUsers] = useState<UserItem[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
@@ -159,7 +167,10 @@ export default function UsersPage() {

  useEffect(() => { fetchUsers(); }, [fetchUsers]);

-  const filtered = users;
+  const filtered = users.filter(u => {
+    if (sourceFilter && u.auth_source !== sourceFilter) return false;
+    return true;
+  });

  const allSelected = filtered.length > 0 && filtered.every(u => selectedIds.has(u.id));

@@ -298,9 +309,16 @@ export default function UsersPage() {
        >
          {statusOptions.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
        </select>
-        {(search || roleFilter || statusFilter) && (
+        <select
+          className="px-3 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
+          value={sourceFilter}
+          onChange={e => setSourceFilter(e.target.value)}
+        >
+          {sourceOptions.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
+        </select>
+        {(search || roleFilter || statusFilter || sourceFilter) && (
          <button
-            onClick={() => { setSearch(''); setRoleFilter(''); setStatusFilter(''); setPage(1); }}
+            onClick={() => { setSearch(''); setRoleFilter(''); setStatusFilter(''); setSourceFilter(''); setPage(1); }}
            className="flex items-center gap-1 text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors"
          >
            <RotateCcw className="w-3 h-3" /> 重置
@@ -382,6 +400,7 @@ export default function UsersPage() {
                      <th className="text-left px-4 py-3 font-semibold">邮箱</th>
                      <th className="text-left px-4 py-3 font-semibold">最后登录</th>
                      <th className="text-left px-4 py-3 font-semibold">状态</th>
+                      <th className="text-left px-4 py-3 font-semibold">来源</th>
                      <th className="text-left px-4 py-3 font-semibold">操作</th>
                    </tr>
                  </thead>
@@ -432,6 +451,15 @@ export default function UsersPage() {
                              />
                            </button>
                          </td>
+                          <td className="px-4 py-3.5">
+                            <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
+                              user.auth_source === 'ldap'
+                                ? 'bg-blue-500/15 text-blue-400'
+                                : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'
+                            }`}>
+                              {user.auth_source === 'ldap' ? 'LDAP' : '本地'}
+                            </span>
+                          </td>
                          <td className="px-4 py-3.5">
                            <div className="flex gap-1.5">
                              <button