增强TwoColumnSelection组件，添加加载更多功能和状态管理，优化好友列表的分页逻辑。重构联系人数据获取逻辑，移除不再使用的状态管理，确保组件性能和用户体验。更新ProfileCard组件以支持新的联系人加载方式。

Touchkebao/src/components/TwoColumnSelection/TwoColumnSelection.tsx

@@ -65,8 +65,6 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
   );
   const [searchQuery, setSearchQuery] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
 
   // 使用 useMemo 缓存过滤结果，避免每次渲染都重新计算
   const filteredFriends = useMemo(() => {
@@ -83,17 +81,8 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
     );
   }, [dataSource, rawFriends, searchQuery]);
 
-  // 分页显示好友列表，避免一次性渲染太多项目
-  const ITEMS_PER_PAGE = 50;
-  const [displayPage, setDisplayPage] = useState(1);
-
-  const friends = useMemo(() => {
-    // 直接使用完整的过滤列表，不再进行本地分页
-    // 因为我们已经在外部进行了分页加载
-    return filteredFriends;
-  }, [filteredFriends]);
-
-  const hasMoreFriends = filteredFriends.length > friends.length;
+  // 好友列表直接使用过滤后的结果
+  const friends = filteredFriends;
 
   // 使用 useMemo 缓存选中状态映射，避免每次渲染都重新计算
   const selectedFriendsMap = useMemo(() => {
@@ -126,7 +115,6 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
 
         if (response.success) {
           setRawFriends(response.data.list || []);
-          setTotalPages(Math.ceil((response.data.total || 0) / 20));
         } else {
           setRawFriends([]);
           message.error(response.message || "获取好友列表失败");
@@ -146,7 +134,6 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
     if (visible && !dataSource) {
       // 只有在没有外部数据源时才调用 API
       fetchFriends(1);
-      setCurrentPage(1);
     }
   }, [visible, dataSource, fetchFriends]);
 
@@ -160,44 +147,18 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
   }, [visible]);
 
   // 防抖搜索处理
-  const handleSearch = useCallback(() => {
-    let timeoutId: NodeJS.Timeout;
-    return (value: string) => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => {
-        setDisplayPage(1); // 重置分页
-        if (!dataSource) {
-          fetchFriends(1, value);
-        }
-      }, 300);
-    };
-  }, [dataSource, fetchFriends])();
-
-  // API搜索处理（当没有外部数据源时）
-  const handleApiSearch = useCallback(
-    async (keyword: string) => {
+  const handleSearch = useCallback(
+    (value: string) => {
       if (!dataSource) {
-        await fetchFriends(1, keyword);
+        const timer = setTimeout(() => {
+          fetchFriends(1, value);
+        }, 300);
+        return () => clearTimeout(timer);
       }
     },
     [dataSource, fetchFriends],
   );
 
-  // 加载更多好友
-  const handleLoadMore = useCallback(() => {
-    setDisplayPage(prev => prev + 1);
-  }, []);
-
-  // 防抖搜索
-  useEffect(() => {
-    if (!dataSource && searchQuery.trim()) {
-      const timer = setTimeout(() => {
-        handleApiSearch(searchQuery);
-      }, 300);
-      return () => clearTimeout(timer);
-    }
-  }, [searchQuery, dataSource, handleApiSearch]);
-
   // 选择好友 - 使用 useCallback 优化性能
   const handleSelectFriend = useCallback((friend: FriendSelectionItem) => {
     setSelectedFriends(prev => {
@@ -223,10 +184,8 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
     setSearchQuery("");
   }, [selectedFriends, onConfirm]);
 
-  // 取消选择 - 使用 useCallback 优化性能
+  // 取消选择
   const handleCancel = useCallback(() => {
-    setSelectedFriends([]);
-    setSearchQuery("");
     onCancel();
   }, [onCancel]);
 
@@ -255,8 +214,8 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
               value={searchQuery}
               onChange={e => {
                 const value = e.target.value;
-                setSearchQuery(value); // 立即更新显示
-                handleSearch(value); // 防抖处理搜索
+                setSearchQuery(value);
+                handleSearch(value);
               }}
               prefix={<SearchOutlined />}
               allowClear
@@ -290,11 +249,7 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
             {/* 使用外部传入的加载更多 */}
             {hasMore && (
               <div className={styles.loadMoreWrapper}>
-                <Button
-                  type="link"
-                  onClick={() => (onLoadMore ? onLoadMore() : handleLoadMore())}
-                  loading={loading}
-                >
+                <Button type="link" onClick={onLoadMore} loading={loading}>
                   加载更多
                 </Button>
               </div>