/** * 通用用户选择器组件 * 用于审批流程中选择审批人、抄送人，以及转交审批等场景 * * 功能： * - 无限滚动加载 * - 后端全量搜索 * - 单选/多选模式 */ 'use client'; import React, { useState, useEffect, useRef, useCallback } from 'react'; import { X, Search, Users, User as UserIcon, Check, Building, Mail, Loader2, } from 'lucide-react'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from '@/components/ui/dialog'; import { toast } from '@/lib/toast'; import { getUsers, type User } from '@/services/api/users'; import { ApiClientError } from '@/lib/api-client'; // 用户信息类型 export interface UserInfo { id: string; displayName: string; username?: string; email?: string; avatar?: string; department?: string; } // 将 User 转换为 UserInfo function userToUserInfo(user: User): UserInfo { return { id: user.id, displayName: user.displayName, username: user.username, email: user.email, avatar: undefined, // 暂无头像字段 department: user.department?.name, }; } interface UserSelectorProps { open: boolean; onClose: () => void; onConfirm: (selectedUsers: UserInfo[]) => void; selectedUserIds?: string[]; multiple?: boolean; title?: string; description?: string; } export function UserSelector({ open, onClose, onConfirm, selectedUserIds = [], multiple = true, title = '选择用户', description, }: UserSelectorProps) { const [allUsers, setAllUsers] = useState([]); // 所有已加载的用户 const [searchTerm, setSearchTerm] = useState(''); const [selectedIds, setSelectedIds] = useState>(new Set(selectedUserIds)); const [loading, setLoading] = useState(false); // 分页状态 const [page, setPage] = useState(1); const [total, setTotal] = useState(0); const [hasMore, setHasMore] = useState(true); const pageSize = 20; // 无限滚动相关 const scrollContainerRef = useRef(null); const observerRef = useRef(null); const loadMoreTriggerRef = useRef(null); // 搜索防抖 const searchTimeoutRef = useRef(null); // 用于区分是初始化还是搜索变化（避免重复加载） const isInitializingRef = useRef(false); // 用 ref 保存最新状态，供 IntersectionObserver 使用（避免闭包问题） const stateRef = useRef({ page, hasMore, loading, searchTerm }); // ⚠️ 不用 useEffect，每次渲染时立即更新（避免延迟） stateRef.current = { page, hasMore, loading, searchTerm }; // 初始化 - 只在对话框打开时执行一次 useEffect(() => { if (open) { isInitializingRef.current = true; setPage(1); setAllUsers([]); setSearchTerm(''); setSelectedIds(new Set(selectedUserIds)); setHasMore(true); loadUsers(1, ''); // 延迟重置标志，确保搜索防抖 useEffect 能检测到 setTimeout(() => { isInitializingRef.current = false; }, 50); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]); // 搜索处理（防抖 + 后端搜索） useEffect(() => { if (!open) return; // ⚠️ 如果是初始化阶段，跳过（避免重复加载） if (isInitializingRef.current) { return; } // 清除之前的定时器 if (searchTimeoutRef.current) { clearTimeout(searchTimeoutRef.current); } // 设置新的定时器（300ms 防抖） searchTimeoutRef.current = setTimeout(() => { console.log('[UserSelector] Search triggered, term:', searchTerm); // ⚠️ 搜索时不清空列表（避免抖动），而是用 loading 状态覆盖 setPage(1); setHasMore(true); loadUsers(1, searchTerm); }, 300); return () => { if (searchTimeoutRef.current) { clearTimeout(searchTimeoutRef.current); } }; }, [searchTerm, open]); // 无限滚动监听（最简方案：打开时创建，关闭时销毁） useEffect(() => { if (!open) { // 关闭时清理 if (observerRef.current) { observerRef.current.disconnect(); observerRef.current = null; console.log('[UserSelector] Observer disconnected (dialog closed)'); } return; } // 打开时，延迟创建（等待数据和 DOM） let rafId: number; let checkInterval: NodeJS.Timeout; const trySetupObserver = () => { // 如果已经有 Observer，跳过 if (observerRef.current) { console.log('[UserSelector] Observer already exists'); return true; } // 如果触发元素还不存在，返回 false if (!loadMoreTriggerRef.current) { return false; } // 创建 Observer observerRef.current = new IntersectionObserver( (entries) => { const [entry] = entries; const { page, hasMore, loading, searchTerm } = stateRef.current; console.log('[UserSelector] Observer triggered:', { isIntersecting: entry.isIntersecting, hasMore, loading, page, searchTerm, timestamp: Date.now() }); if (entry.isIntersecting && hasMore && !loading) { console.log('[UserSelector] ✅ Conditions met, loading page', page + 1); loadUsers(page + 1, searchTerm); } else { console.log('[UserSelector] ❌ Conditions not met:', { isIntersecting: entry.isIntersecting, hasMore, loading, willLoad: entry.isIntersecting && hasMore && !loading }); } }, { root: scrollContainerRef.current, rootMargin: '100px', threshold: 0.1, } ); observerRef.current.observe(loadMoreTriggerRef.current); console.log('[UserSelector] Observer created and connected'); return true; }; // 尝试立即创建 rafId = requestAnimationFrame(() => { if (!trySetupObserver()) { console.log('[UserSelector] Waiting for trigger element...'); // 如果失败，每100ms重试一次 checkInterval = setInterval(() => { if (trySetupObserver()) { clearInterval(checkInterval); } }, 100); } }); // Cleanup：只清理定时器和 RAF，不清理 Observer return () => { cancelAnimationFrame(rafId); if (checkInterval) { clearInterval(checkInterval); } }; }, [open]); // ⚠️ 只依赖 open，打开后不再重建 const loadUsers = async (pageNum: number, search: string) => { console.log('[UserSelector] loadUsers called:', { pageNum, search, currentLoading: loading, currentPage: page }); // ⚠️ 立即更新 loading 和 page，防止重复触发 setLoading(true); setPage(pageNum); try { // 调用真实的用户列表 API（支持搜索） const response = await getUsers({ page: pageNum, pageSize, status: 'ACTIVE', // 只获取激活的用户 search: search || undefined, // 后端搜索 }); // 转换为 UserInfo 格式 const userInfos = response.items.map(userToUserInfo); // 追加到已有用户列表（支持加载更多） setAllUsers(prev => pageNum === 1 ? userInfos : [...prev, ...userInfos]); // 更新分页信息 setTotal(response.total); setHasMore(response.hasNext); console.log('[UserSelector] loadUsers completed:', { pageNum, itemsCount: userInfos.length, hasNext: response.hasNext }); // ⚠️ 搜索完成后（第1页），手动触发 Observer 检查一次（确保 trigger 元素在视口内时能立即加载下一页） if (pageNum === 1 && response.hasNext && observerRef.current && loadMoreTriggerRef.current) { console.log('[UserSelector] Manually re-observing trigger after search'); // 先断开再重新观察，触发一次检查 observerRef.current.unobserve(loadMoreTriggerRef.current); observerRef.current.observe(loadMoreTriggerRef.current); } } catch (error) { console.error('加载用户列表失败:', error); if (error instanceof ApiClientError) { toast.error(`加载用户列表失败: ${error.message}`); } else { toast.error('加载用户列表失败'); } // ⚠️ 出错时恢复 page setPage(pageNum - 1); } finally { setLoading(false); } }; const toggleUser = (userId: string) => { const newSelected = new Set(selectedIds); if (newSelected.has(userId)) { newSelected.delete(userId); } else { if (!multiple) { newSelected.clear(); } newSelected.add(userId); } setSelectedIds(newSelected); }; const handleConfirm = () => { const selected = allUsers.filter((user) => selectedIds.has(user.id)); onConfirm(selected); onClose(); }; const handleClose = () => { setSearchTerm(''); onClose(); }; return ( ); }