feat： 添加成员功能完成

Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.tsx

@@ -17,6 +17,7 @@ const FriendListItem = memo<{
       onClick={() => onSelect(friend)}
     >
       <Checkbox checked={isSelected} />
+      &nbsp;&nbsp;&nbsp;
       <Avatar src={friend.avatar} size={40}>
         {friend.nickname?.charAt(0)}
       </Avatar>
@@ -41,6 +42,9 @@ interface TwoColumnSelectionProps {
   deviceIds?: number[];
   enableDeviceFilter?: boolean;
   dataSource?: FriendSelectionItem[];
+  onLoadMore?: () => void; // 加载更多回调
+  hasMore?: boolean; // 是否有更多数据
+  loading?: boolean; // 是否正在加载
 }
 
 const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
@@ -51,13 +55,16 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
   deviceIds = [],
   enableDeviceFilter = true,
   dataSource,
+  onLoadMore,
+  hasMore = false,
+  loading = false,
 }) => {
   const [rawFriends, setRawFriends] = useState<FriendSelectionItem[]>([]);
   const [selectedFriends, setSelectedFriends] = useState<FriendSelectionItem[]>(
     [],
   );
   const [searchQuery, setSearchQuery] = useState("");
-  const [loading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
 
@@ -81,10 +88,10 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
   const [displayPage, setDisplayPage] = useState(1);
 
   const friends = useMemo(() => {
-    const startIndex = 0;
-    const endIndex = displayPage * ITEMS_PER_PAGE;
-    return filteredFriends.slice(startIndex, endIndex);
-  }, [filteredFriends, displayPage]);
+    // 直接使用完整的过滤列表，不再进行本地分页
+    // 因为我们已经在外部进行了分页加载
+    return filteredFriends;
+  }, [filteredFriends]);
 
   const hasMoreFriends = filteredFriends.length > friends.length;
 
@@ -100,7 +107,7 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
   // 获取好友列表
   const fetchFriends = useCallback(
     async (page: number, keyword: string = "") => {
-      setLoading(true);
+      setIsLoading(true);
       try {
         const params: any = {
           page,
@@ -128,7 +135,7 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
         console.error("获取好友列表失败:", error);
         message.error("获取好友列表失败");
       } finally {
-        setLoading(false);
+        setIsLoading(false);
       }
     },
     [deviceIds, enableDeviceFilter],
@@ -148,7 +155,7 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
     if (visible) {
       setSearchQuery("");
       setSelectedFriends([]);
-      setLoading(false);
+      setIsLoading(false);
     }
   }, [visible]);
 
@@ -257,7 +264,7 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
           </div>
 
           <div className={styles.friendList}>
-            {loading ? (
+            {isLoading && !loading ? (
               <div className={styles.loading}>加载中...</div>
             ) : friends.length > 0 ? (
               // 使用 React.memo 优化列表项渲染
@@ -280,9 +287,14 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
               </div>
             )}
 
-            {hasMoreFriends && (
+            {/* 使用外部传入的加载更多 */}
+            {hasMore && (
               <div className={styles.loadMoreWrapper}>
-                <Button type="link" onClick={handleLoadMore} loading={loading}>
+                <Button
+                  type="link"
+                  onClick={() => (onLoadMore ? onLoadMore() : handleLoadMore())}
+                  loading={loading}
+                >
                   加载更多
                 </Button>
               </div>