From 7c33e8fa62fcb1a634fe46a3daa895447e65df12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?= =?UTF-8?q?=E5=B9=B3?= Date: Wed, 23 Jul 2025 14:12:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=B4=E6=96=B0=EF=BC=8C=E5=85=88=E8=BF=99?= =?UTF-8?q?=E6=A0=B7=E5=90=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/FriendSelection/index.tsx | 180 +++++------------ .../src/components/GroupSelection/index.tsx | 190 ++++++------------ 2 files changed, 114 insertions(+), 256 deletions(-) diff --git a/nkebao/src/components/FriendSelection/index.tsx b/nkebao/src/components/FriendSelection/index.tsx index 51598c53..bb5c69a9 100644 --- a/nkebao/src/components/FriendSelection/index.tsx +++ b/nkebao/src/components/FriendSelection/index.tsx @@ -1,9 +1,12 @@ import React, { useState, useEffect } from "react"; import { SearchOutlined, DeleteOutlined } from "@ant-design/icons"; -import { Popup, Toast } from "antd-mobile"; +import { Popup } from "antd-mobile"; import { Button, Input } from "antd"; import { getFriendList } from "./api"; import style from "./index.module.scss"; +import Layout from "@/components/Layout/Layout"; +import PopupHeader from "@/components/PopuLayout/header"; +import PopupFooter from "@/components/PopuLayout/footer"; // 微信好友接口类型 interface WechatFriend { @@ -104,35 +107,18 @@ export default function FriendSelection({ params.keyword = keyword.trim(); } - if (enableDeviceFilter) { - if (deviceIds.length === 0) { - setFriends([]); - setTotalFriends(0); - setTotalPages(1); - setLoading(false); - return; - } - params.deviceIds = deviceIds.join(","); + if (enableDeviceFilter && deviceIds.length > 0) { + params.deviceIds = deviceIds; } - const res = await getFriendList(params); - - if (res && Array.isArray(res.list)) { - setFriends( - res.list.map((friend: any) => ({ - id: friend.id?.toString() || "", - nickname: friend.nickname || "", - wechatId: friend.wechatId || "", - avatar: friend.avatar || "", - customer: friend.customer || "", - })) - ); - setTotalFriends(res.total || 0); - setTotalPages(Math.ceil((res.total || 0) / 20)); + const response = await getFriendList(params); + if (response && response.list) { + setFriends(response.list); + setTotalFriends(response.total || 0); + setTotalPages(Math.ceil((response.total || 0) / 20)); } } catch (error) { console.error("获取好友列表失败:", error); - Toast.show({ content: "获取好友列表失败", position: "top" }); } finally { setLoading(false); } @@ -140,16 +126,20 @@ export default function FriendSelection({ // 处理好友选择 const handleFriendToggle = (friendId: string) => { - let newIds: string[]; - if (selectedFriends.includes(friendId)) { - newIds = selectedFriends.filter((id) => id !== friendId); - } else { - newIds = [...selectedFriends, friendId]; - } - onSelect(newIds); + if (readonly) return; + + const newSelectedFriends = selectedFriends.includes(friendId) + ? selectedFriends.filter((id) => id !== friendId) + : [...selectedFriends, friendId]; + + onSelect(newSelectedFriends); + + // 如果有 onSelectDetail 回调，传递完整的好友对象 if (onSelectDetail) { - const selectedObjs = friends.filter((f) => newIds.includes(f.id)); - onSelectDetail(selectedObjs); + const selectedFriendObjs = friends.filter((friend) => + newSelectedFriends.includes(friend.id) + ); + onSelectDetail(selectedFriendObjs); } }; @@ -160,29 +150,22 @@ export default function FriendSelection({ }; // 获取已选好友详细信息 - const selectedFriendObjs = selectedFriends - .map((id) => friends.find((f) => f.id === id)) - .filter(Boolean) as WechatFriend[]; + const selectedFriendObjs = friends.filter((friend) => + selectedFriends.includes(friend.id) + ); // 删除已选好友 const handleRemoveFriend = (id: string) => { if (readonly) return; - onSelect(selectedFriends.filter((f) => f !== id)); + onSelect(selectedFriends.filter((d) => d !== id)); }; - // 确认按钮逻辑 + // 确认选择 const handleConfirm = () => { - setRealVisible(false); if (onConfirm) { onConfirm(selectedFriends, selectedFriendObjs); } - }; - - // 清空搜索 - const handleClearSearch = () => { - setSearchQuery(""); - setCurrentPage(1); - fetchFriends(1, ""); + setRealVisible(false); }; return ( @@ -271,40 +254,30 @@ export default function FriendSelection({ position="bottom" bodyStyle={{ height: "100vh" }} > -
-
-
选择微信好友
-
- setSearchQuery(e.target.value)} - disabled={readonly} - prefix={} - allowClear - size="large" - /> - {searchQuery && !readonly && ( -
-
+ fetchFriends(currentPage, searchQuery)} + /> + } + footer={ + setRealVisible(false)} + onConfirm={handleConfirm} + /> + } + >
{loading ? (
@@ -372,50 +345,7 @@ export default function FriendSelection({
)}
- {/* 分页栏 */} -
-
总计 {totalFriends} 个好友
-
- - - {currentPage} / {totalPages} - - -
-
- {/* 底部按钮栏 */} -
-
- 已选择 {selectedFriends.length} 个好友 -
-
- - -
-
-
+ ); diff --git a/nkebao/src/components/GroupSelection/index.tsx b/nkebao/src/components/GroupSelection/index.tsx index ed2fb5fc..2fb925b5 100644 --- a/nkebao/src/components/GroupSelection/index.tsx +++ b/nkebao/src/components/GroupSelection/index.tsx @@ -1,15 +1,12 @@ import React, { useState, useEffect } from "react"; -import { - SearchOutlined, - CloseOutlined, - ArrowLeftOutlined, - ArrowRightOutlined, - DeleteOutlined, -} from "@ant-design/icons"; +import { SearchOutlined, DeleteOutlined } from "@ant-design/icons"; import { Button, Input } from "antd"; -import { Popup, Toast } from "antd-mobile"; +import { Popup } from "antd-mobile"; import { getGroupList } from "./api"; import style from "./index.module.scss"; +import Layout from "@/components/Layout/Layout"; +import PopupHeader from "@/components/PopuLayout/header"; +import PopupFooter from "@/components/PopuLayout/footer"; // 群组接口类型 interface WechatGroup { @@ -61,9 +58,9 @@ export default function GroupSelection({ const [loading, setLoading] = useState(false); // 获取已选群聊详细信息 - const selectedGroupObjs = selectedGroups - .map((id) => groups.find((g) => g.id === id)) - .filter(Boolean) as WechatGroup[]; + const selectedGroupObjs = groups.filter((group) => + selectedGroups.includes(group.id) + ); // 删除已选群聊 const handleRemoveGroup = (id: string) => { @@ -101,58 +98,52 @@ export default function GroupSelection({ setCurrentPage(1); fetchGroups(1, searchQuery); }, 500); + return () => clearTimeout(timer); }, [searchQuery, realVisible]); - // 获取群组列表API - 支持keyword + // 获取群聊列表API const fetchGroups = async (page: number, keyword: string = "") => { setLoading(true); try { - const params: any = { + let params: any = { page, limit: 20, }; + if (keyword.trim()) { params.keyword = keyword.trim(); } - const res = await getGroupList(params); - - if (res && Array.isArray(res.list)) { - setGroups( - res.list.map((group: any) => ({ - id: group.id?.toString() || "", - chatroomId: group.chatroomId || "", - name: group.name || "", - avatar: group.avatar || "", - ownerWechatId: group.ownerWechatId || "", - ownerNickname: group.ownerNickname || "", - ownerAvatar: group.ownerAvatar || "", - })) - ); - setTotalGroups(res.total || 0); - setTotalPages(Math.ceil((res.total || 0) / 20)); + const response = await getGroupList(params); + if (response && response.list) { + setGroups(response.list); + setTotalGroups(response.total || 0); + setTotalPages(Math.ceil((response.total || 0) / 20)); } } catch (error) { - console.error("获取群组列表失败:", error); - Toast.show({ content: "获取群组列表失败", position: "top" }); + console.error("获取群聊列表失败:", error); } finally { setLoading(false); } }; - // 处理群组选择 + // 处理群聊选择 const handleGroupToggle = (groupId: string) => { - let newIds: string[]; - if (selectedGroups.includes(groupId)) { - newIds = selectedGroups.filter((id) => id !== groupId); - } else { - newIds = [...selectedGroups, groupId]; - } - onSelect(newIds); + if (readonly) return; + + const newSelectedGroups = selectedGroups.includes(groupId) + ? selectedGroups.filter((id) => id !== groupId) + : [...selectedGroups, groupId]; + + onSelect(newSelectedGroups); + + // 如果有 onSelectDetail 回调，传递完整的群聊对象 if (onSelectDetail) { - const selectedObjs = groups.filter((g) => newIds.includes(g.id)); - onSelectDetail(selectedObjs); + const selectedGroupObjs = groups.filter((group) => + newSelectedGroups.includes(group.id) + ); + onSelectDetail(selectedGroupObjs); } }; @@ -162,19 +153,12 @@ export default function GroupSelection({ return `已选择 ${selectedGroups.length} 个群聊`; }; - // 确认按钮逻辑 + // 确认选择 const handleConfirm = () => { - setRealVisible(false); if (onConfirm) { onConfirm(selectedGroups, selectedGroupObjs); } - }; - - // 清空搜索 - const handleClearSearch = () => { - setSearchQuery(""); - setCurrentPage(1); - fetchGroups(1, ""); + setRealVisible(false); }; return ( @@ -263,41 +247,30 @@ export default function GroupSelection({ position="bottom" bodyStyle={{ height: "100vh" }} > -
-
-
选择群聊
-
- setSearchQuery(e.target.value)} - disabled={readonly} - prefix={} - allowClear - size="large" - /> - - {searchQuery && !readonly && ( -
-
+ fetchGroups(currentPage, searchQuery)} + /> + } + footer={ + setRealVisible(false)} + onConfirm={handleConfirm} + /> + } + >
{loading ? (
@@ -361,52 +334,7 @@ export default function GroupSelection({
)}
- {/* 分页栏 */} -
-
总计 {totalGroups} 个群聊
-
- - - {currentPage} / {totalPages} - - -
-
- {/* 底部按钮栏 */} -
-
- 已选择 {selectedGroups.length} 个群聊 -
-
- - -
-
-
+ );