feat: 本次提交更新内容如下

新建内容库构建完成

nkebao/src/components/FriendSelection.tsx

@@ -34,29 +34,35 @@ interface FriendsResponse {
 }
 
 // 获取好友列表API函数
-const fetchFriendsList = async (page: number = 1, limit: number = 20, deviceIds: string[]): Promise<FriendsResponse> => {
-  if (deviceIds.length === 0) {
+const fetchFriendsList = async (params: {
+  page: number;
+  limit: number;
+  deviceIds?: string[];
+}): Promise<FriendsResponse> => {
+  if (params.deviceIds && params.deviceIds.length === 0) {
     return {
       code: 200,
       msg: 'success',
       data: {
         list: [],
         total: 0,
-        page,
-        limit
+        page: params.page,
+        limit: params.limit
       }
     };
   }
   
-  const deviceIdsParam = deviceIds.join(',');
-  return get<FriendsResponse>(`/v1/friend?page=${page}&limit=${limit}&deviceIds=${deviceIdsParam}`);
+  const deviceIdsParam = params?.deviceIds?.join(',') || ''
+  return get<FriendsResponse>(`/v1/friend?page=${ params.page}&limit=${params.limit}&deviceIds=${deviceIdsParam}`);
 };
 
 // 组件属性接口
 interface FriendSelectionProps {
   selectedFriends: string[];
   onSelect: (friends: string[]) => void;
-  deviceIds: string[];
+  onSelectDetail?: (friends: WechatFriend[]) => void; // 新增
+  deviceIds?: string[];
+  enableDeviceFilter?: boolean; // 新增开关，默认true
   placeholder?: string;
   className?: string;
 }
@@ -64,7 +70,9 @@ interface FriendSelectionProps {
 export default function FriendSelection({ 
   selectedFriends, 
   onSelect, 
-  deviceIds,
+  onSelectDetail,
+  deviceIds = [],
+  enableDeviceFilter = true,
   placeholder = "选择微信好友",
   className = ""
 }: FriendSelectionProps) {
@@ -76,27 +84,38 @@ export default function FriendSelection({
   const [totalFriends, setTotalFriends] = useState(0);
   const [loading, setLoading] = useState(false);
 
-  // 当弹窗打开时获取好友列表
+  // 打开弹窗并请求第一页好友
+  const openDialog = () => {
+    setCurrentPage(1);
+    setDialogOpen(true);
+    fetchFriends(1);
+  };
+
+  // 当页码变化时，拉取对应页数据（弹窗已打开时）
   useEffect(() => {
-    if (dialogOpen && deviceIds.length > 0) {
+    if (dialogOpen && currentPage !== 1) {
       fetchFriends(currentPage);
     }
-  }, [dialogOpen, currentPage, deviceIds]);
-
-  // 当设备ID变化时，重置页码
-  useEffect(() => {
-    if (deviceIds.length > 0) {
-      setCurrentPage(1);
-    }
-  }, [deviceIds]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPage]);
 
   // 获取好友列表API
   const fetchFriends = async (page: number) => {
-    if (deviceIds.length === 0) return;
-    
     setLoading(true);
     try {
-      const res = await fetchFriendsList(page, 20, deviceIds);
+      let res;
+      if (enableDeviceFilter) {
+        if (deviceIds.length === 0) {
+          setFriends([]);
+          setTotalFriends(0);
+          setTotalPages(1);
+          setLoading(false);
+          return;
+        }
+        res = await fetchFriendsList({ page, limit: 20, deviceIds: deviceIds });
+      } else {
+        res = await fetchFriendsList({ page, limit: 20 });
+      }
       
       if (res && res.code === 200 && res.data) {
         setFriends(res.data.list.map((friend) => ({
@@ -106,7 +125,6 @@ export default function FriendSelection({
           avatar: friend.avatar || '',
           customer: friend.customer || '',
         })));
-        
         setTotalFriends(res.data.total || 0);
         setTotalPages(Math.ceil((res.data.total || 0) / 20));
       }
@@ -125,10 +143,16 @@ export default function FriendSelection({
 
   // 处理好友选择
   const handleFriendToggle = (friendId: string) => {
+    let newIds: string[];
     if (selectedFriends.includes(friendId)) {
-      onSelect(selectedFriends.filter(id => id !== friendId));
+      newIds = selectedFriends.filter(id => id !== friendId);
     } else {
-      onSelect([...selectedFriends, friendId]);
+      newIds = [...selectedFriends, friendId];
+    }
+    onSelect(newIds);
+    if (onSelectDetail) {
+      const selectedObjs = friends.filter(f => newIds.includes(f.id));
+      onSelectDetail(selectedObjs);
     }
   };
 
@@ -155,7 +179,7 @@ export default function FriendSelection({
           placeholder={placeholder}
           className="pl-10 h-12 rounded-xl border-gray-200 text-base"
           readOnly
-          onClick={() => setDialogOpen(true)}
+          onClick={openDialog}
           value={getDisplayText()}
         />
       </div>