diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx index 6b19a4ac..76d94888 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx @@ -1,5 +1,6 @@ import React, { useState, useCallback, useEffect } from "react"; import { List, Avatar, Collapse, Button } from "antd"; +import type { CollapseProps } from "antd"; import { ContractData } from "@/pages/pc/ckbox/data"; import styles from "./WechatFriends.module.scss"; import { useCkChatStore } from "@/store/module/ckchat"; @@ -10,8 +11,6 @@ interface WechatFriendsProps { selectedContactId?: ContractData; } -const { Panel } = Collapse; - const ContactListSimple: React.FC = ({ contracts, onContactClick, @@ -130,6 +129,39 @@ const ContactListSimple: React.FC = ({ ); }; + // 构建Collapse的items属性 + const getCollapseItems = (): CollapseProps['items'] => { + if (!newContractList || newContractList.length === 0) return []; + + return newContractList.map((group, index) => { + const groupKey = index.toString(); + const isActive = activeKey.includes(groupKey); + + return { + key: groupKey, + label: ( +
+ {group.groupName} + + {group.contacts.length} + +
+ ), + className: styles.groupPanel, + children: isActive ? ( + <> + + {renderLoadMoreButton(groupKey)} + + ) : null + }; + }); + }; + return (
{newContractList && newContractList.length > 0 ? ( @@ -137,38 +169,8 @@ const ContactListSimple: React.FC = ({ className={styles.groupCollapse} activeKey={activeKey} onChange={keys => setActiveKey(keys as string[])} - > - {newContractList.map((group, index) => { - const groupKey = index.toString(); - const isActive = activeKey.includes(groupKey); - - return ( - - {group.groupName} - - {group.contacts.length} - -
- } - key={groupKey} - className={styles.groupPanel} - > - {isActive && ( - <> - - {renderLoadMoreButton(groupKey)} - - )} - - ); - })} - + items={getCollapseItems()} + /> ) : ( <>
全部好友
diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx index 7b5e890c..7114f7b1 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx @@ -3,7 +3,7 @@ import { Input, Skeleton } from "antd"; import { SearchOutlined, UserOutlined, - TeamOutlined, + ChromeOutlined, MessageOutlined, } from "@ant-design/icons"; import { ContractData } from "@/pages/pc/ckbox/data"; @@ -131,8 +131,8 @@ const SidebarMenu: React.FC = ({ className={`${styles.tabItem} ${activeTab === "groups" ? styles.active : ""}`} onClick={() => setActiveTab("groups")} > - - 群组 + + 朋友圈 @@ -160,7 +160,7 @@ const SidebarMenu: React.FC = ({ case "groups": return (
- +

暂无群组

); diff --git a/Cunkebao/src/pages/pc/ckbox/index.tsx b/Cunkebao/src/pages/pc/ckbox/index.tsx index 8b4ba820..7869f537 100644 --- a/Cunkebao/src/pages/pc/ckbox/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/index.tsx @@ -34,7 +34,6 @@ const CkboxPage: React.FC = () => { newContractList: { groupName: string; contacts: any[] }[]; }; const { contractList, groupList, kfUserList, newContractList } = data; - response; console.log(contractList, groupList, kfUserList, newContractList);