feat: 修复疯狂请求的bug

2025-07-05 16:16:11 +08:00
parent b114a6a602
commit 04742c596e
2 changed files with 98 additions and 10 deletions
--- a/nkebao/src/api/wechat-accounts.ts
+++ b/nkebao/src/api/wechat-accounts.ts
@@ -154,9 +154,26 @@ export const transformWechatAccount = (serverAccount: any): any => {
 * @param searchQuery 搜索关键词
 * @returns 好友列表数据
 */
-export const fetchWechatFriends = async (wechatId: string, page: number = 1, pageSize: number = 20, searchQuery: string = '') => {
+export const fetchWechatFriends = async (wechatId: string, page: number = 1, pageSize: number = 20, searchQuery: string = ''): Promise<ApiResponse<{
+  list: any[];
+  total: number;
+  page: number;
+  limit: number;
+}>> => {
  try {
-    return get(`/v1/wechats/${wechatId}/friends?page=${page}&limit=${pageSize}${searchQuery ? `&search=${searchQuery}` : ''}`);
+    const queryParams = new URLSearchParams();
+    queryParams.append('page', page.toString());
+    queryParams.append('limit', pageSize.toString());
+    if (searchQuery) {
+      queryParams.append('search', searchQuery);
+    }
+    
+    return get<ApiResponse<{
+      list: any[];
+      total: number;
+      page: number;
+      limit: number;
+    }>>(`/v1/wechats/${wechatId}/friends?${queryParams.toString()}`);
  } catch (error) {
    console.error("获取好友列表失败:", error);
    throw error;
--- a/nkebao/src/pages/wechat-accounts/WechatAccountDetail.tsx
+++ b/nkebao/src/pages/wechat-accounts/WechatAccountDetail.tsx
@@ -101,6 +101,8 @@ export default function WechatAccountDetail() {
  const [friendsTotal, setFriendsTotal] = useState(0);
  const [hasMoreFriends, setHasMoreFriends] = useState(true);
  const [isFetchingFriends, setIsFetchingFriends] = useState(false);
+  const [hasFriendLoadError, setHasFriendLoadError] = useState(false);
+  const [isFriendsEmpty, setIsFriendsEmpty] = useState(false);
  const friendsObserver = useRef<IntersectionObserver | null>(null);
  const friendsLoadingRef = useRef<HTMLDivElement | null>(null);
  const friendsContainerRef = useRef<HTMLDivElement | null>(null);
@@ -149,12 +151,20 @@ export default function WechatAccountDetail() {

  // 获取好友列表
  const fetchFriends = useCallback(async (page: number = 1, isNewSearch: boolean = false) => {
-    if (!id || isFetchingFriends) return;
+    console.log('fetchFriends called:', { page, isNewSearch, isFetchingFriends, id, searchQuery });
+    if (!id || isFetchingFriends) {
+      console.log('fetchFriends early return:', { id, isFetchingFriends });
+      return;
+    }
    
    try {
      setIsFetchingFriends(true);
+      setHasFriendLoadError(false);
+      console.log('Making API request for friends:', { id, page, searchQuery });
      const response = await fetchWechatFriends(id, page, 20, searchQuery);
      
+      console.log('API response:', response);
+      
      if (response && response.code === 200 && response.data) {
        const newFriends = response.data.list.map((friend: any) => ({
          id: friend.id.toString(),
@@ -174,16 +184,35 @@ export default function WechatAccountDetail() {
          notes: friend.notes || ""
        }));

+        console.log('Processed friends:', { newFriendsCount: newFriends.length, isNewSearch });
+
        if (isNewSearch) {
          setFriends(newFriends);
+          // 如果是新搜索且数据为空，设置空状态
+          if (newFriends.length === 0) {
+            console.log('Setting empty state for new search');
+            setIsFriendsEmpty(true);
+            setHasMoreFriends(false);
+          } else {
+            console.log('Setting normal state for new search');
+            setIsFriendsEmpty(false);
+            setHasMoreFriends(newFriends.length === 20);
+          }
        } else {
          setFriends(prev => [...prev, ...newFriends]);
+          setHasMoreFriends(newFriends.length === 20);
        }
        
        setFriendsTotal(response.data.total);
-        setHasMoreFriends(newFriends.length === 20);
        setFriendsPage(page);
      } else {
+        console.log('API response error:', response);
+        setHasFriendLoadError(true);
+        if (isNewSearch) {
+          setFriends([]);
+          setIsFriendsEmpty(true);
+          setHasMoreFriends(false);
+        }
        toast({
          title: "获取好友列表失败",
          description: response?.message || "请稍后重试",
@@ -192,15 +221,22 @@ export default function WechatAccountDetail() {
      }
    } catch (error) {
      console.error("获取好友列表失败:", error);
+      setHasFriendLoadError(true);
+      if (isNewSearch) {
+        setFriends([]);
+        setIsFriendsEmpty(true);
+        setHasMoreFriends(false);
+      }
      toast({
        title: "获取好友列表失败",
        description: "请检查网络连接后重试",
        variant: "destructive"
      });
    } finally {
+      console.log('Setting isFetchingFriends to false');
      setIsFetchingFriends(false);
    }
-  }, [id, searchQuery, isFetchingFriends, toast]);
+  }, [id, searchQuery, toast]);

  // 初始化数据
  useEffect(() => {
@@ -215,17 +251,20 @@ export default function WechatAccountDetail() {
  // 监听标签切换
  useEffect(() => {
    if (activeTab === "friends" && id) {
+      // 重置空状态，允许重新加载
+      setIsFriendsEmpty(false);
+      setHasFriendLoadError(false);
      fetchFriends(1, true);
    }
  }, [activeTab, id, fetchFriends]);

  // 无限滚动加载好友
  useEffect(() => {
-    if (!friendsLoadingRef.current || !hasMoreFriends || isFetchingFriends) return;
+    if (!friendsLoadingRef.current || !hasMoreFriends || isFetchingFriends || isFriendsEmpty) return;

    friendsObserver.current = new IntersectionObserver(
      (entries) => {
-        if (entries[0].isIntersecting && hasMoreFriends && !isFetchingFriends) {
+        if (entries[0].isIntersecting && hasMoreFriends && !isFetchingFriends && !isFriendsEmpty) {
          fetchFriends(friendsPage + 1, false);
        }
      },
@@ -239,7 +278,7 @@ export default function WechatAccountDetail() {
        friendsObserver.current.disconnect();
      }
    };
-  }, [hasMoreFriends, isFetchingFriends, friendsPage, fetchFriends]);
+  }, [hasMoreFriends, isFetchingFriends, friendsPage, fetchFriends, isFriendsEmpty]);

  // 工具函数
  const getRandomTagColor = (): string => {
@@ -347,6 +386,9 @@ export default function WechatAccountDetail() {
  };

  const handleSearch = () => {
+    // 搜索时重置空状态
+    setIsFriendsEmpty(false);
+    setHasFriendLoadError(false);
    fetchFriends(1, true);
  };

@@ -645,8 +687,37 @@ export default function WechatAccountDetail() {
                    <div className="flex items-center justify-center h-full">
                      <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
                    </div>
+                  ) : hasFriendLoadError ? (
+                    <div className="text-center py-8 text-red-500">
+                      <p>加载失败，请稍后重试</p>
+                      <button 
+                        className="mt-4 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-sm"
+                        onClick={() => {
+                          setHasFriendLoadError(false);
+                          fetchFriends(1, true);
+                        }}
+                      >
+                        重新加载
+                      </button>
+                    </div>
+                  ) : isFriendsEmpty ? (
+                    <div className="text-center py-8 text-gray-500">
+                      <p>未找到匹配的好友</p>
+                      {searchQuery && (
+                        <button 
+                          className="mt-4 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-sm"
+                          onClick={() => {
+                            setSearchQuery("");
+                            setIsFriendsEmpty(false);
+                            fetchFriends(1, true);
+                          }}
+                        >
+                          清除搜索条件
+                        </button>
+                      )}
+                    </div>
                  ) : friends.length === 0 ? (
-                    <div className="text-center py-8 text-gray-500">未找到匹配的好友</div>
+                    <div className="text-center py-8 text-gray-500">暂无好友数据</div>
                  ) : (
                    <>
                      {friends.map((friend) => (
@@ -682,7 +753,7 @@ export default function WechatAccountDetail() {
                          </div>
                        </div>
                      ))}
-                      {hasMoreFriends && (
+                      {hasMoreFriends && !isFriendsEmpty && (
                        <div ref={friendsLoadingRef} className="flex justify-center py-4">
                          <Loader2 className="h-6 w-6 animate-spin text-blue-500" />
                        </div>