diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/ContactList/ContactList.module.scss b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/ContactList/ContactList.module.scss deleted file mode 100644 index 28ed1451..00000000 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/ContactList/ContactList.module.scss +++ /dev/null @@ -1,78 +0,0 @@ -.contractList { - height: 100%; - overflow-y: auto; - - .contractItem { - padding: 12px 16px; - cursor: pointer; - border-bottom: 1px solid #f0f0f0; - transition: background-color 0.3s; - - &:hover { - background-color: #f5f5f5; - } - - &:last-child { - border-bottom: none; - } - - .contractInfo { - display: flex; - align-items: center; - gap: 12px; - width: 100%; - - .contractDetails { - flex: 1; - min-width: 0; - - .contractName { - font-size: 14px; - font-weight: 500; - color: #262626; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .contractPhone { - font-size: 12px; - color: #8c8c8c; - margin-bottom: 2px; - } - - .contractStatus { - font-size: 11px; - color: #bfbfbf; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - } -} - -// 响应式设计 -@media (max-width: 768px) { - .contractList { - .contractItem { - padding: 10px 12px; - - .contractInfo { - gap: 10px; - - .contractDetails { - .contractName { - font-size: 13px; - } - - .contractPhone { - font-size: 11px; - } - } - } - } - } -} diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/ContactList/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/ContactList/index.tsx deleted file mode 100644 index 38caf58a..00000000 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/ContactList/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from "react"; -import { List, Avatar, Badge } from "antd"; -import { UserOutlined } from "@ant-design/icons"; -import { ContractData } from "../../data"; -import styles from "./ContactList.module.scss"; - -interface ContactListProps { - contracts: ContractData[]; - onContactClick: (contract: ContractData) => void; -} - -const ContactList: React.FC = ({ - contracts, - onContactClick, -}) => { - return ( -
- ( - onContactClick(contract)} - > -
- - } - /> - -
-
{contract.name}
-
{contract.phone}
- {contract.status && ( -
{contract.status}
- )} -
-
-
- )} - /> -
- ); -}; - -export default ContactList; diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/CustomLayout.module.scss b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/CustomLayout.module.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends.module.scss b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/WechatFriends.module.scss similarity index 61% rename from Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends.module.scss rename to Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/WechatFriends.module.scss index bb90641b..a89c0069 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/WechatFriends.module.scss @@ -11,6 +11,42 @@ border-bottom: 1px solid #f0f0f0; } + .groupCollapse { + width: 100%; + background-color: transparent; + border: none; + + :global(.ant-collapse-item) { + border-bottom: 1px solid #f0f0f0; + } + + :global(.ant-collapse-header) { + padding: 10px 15px !important; + font-weight: bold; + } + + :global(.ant-collapse-content-box) { + padding: 0 !important; + } + } + + .groupHeader { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } + + .contactCount { + font-size: 12px; + color: #999; + font-weight: normal; + } + + .groupPanel { + background-color: transparent; + } + .list { flex: 1; overflow-y: auto; diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx new file mode 100644 index 00000000..f177d965 --- /dev/null +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx @@ -0,0 +1,88 @@ +import React, { useState } from "react"; +import { List, Avatar, Collapse } from "antd"; +import { ContractData } from "@/pages/pc/ckbox/data"; +import styles from "./WechatFriends.module.scss"; +import { useCkChatStore } from "@/store/module/ckchat"; + +interface WechatFriendsProps { + contracts: ContractData[]; + onContactClick: (contract: ContractData) => void; + selectedContactId?: ContractData; +} + +const { Panel } = Collapse; + +const ContactListSimple: React.FC = ({ + contracts, + onContactClick, + selectedContactId, +}) => { + const newContractList = useCkChatStore(state => state.newContractList); + const [activeKey, setActiveKey] = useState(["0"]); // 默认展开第一个分组 + + // 渲染联系人项 + const renderContactItem = (contact: ContractData) => ( + onContactClick(contact)} + className={`${styles.contractItem} ${contact.id === selectedContactId?.id ? styles.selected : ""}`} + > +
+ {contact.nickname.charAt(0)}} + className={styles.avatar} + /> +
+
+
+ {contact.conRemark || contact.nickname} +
+
+
+ ); + + return ( +
+ {newContractList && newContractList.length > 0 ? ( + setActiveKey(keys as string[])} + > + {newContractList.map((group, index) => ( + + {group.groupName} + + {group.contacts.length} + +
+ } + key={index.toString()} + className={styles.groupPanel} + > + + + ))} + + ) : ( + <> +
全部好友
+ + + )} + + ); +}; + +export default ContactListSimple; diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriendsModule.tsx b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriendsModule.tsx deleted file mode 100644 index 303d9bb6..00000000 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriendsModule.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from "react"; -import { List, Avatar } from "antd"; -import { ContractData } from "@/pages/pc/ckbox/data"; -import styles from "./WechatFriends.module.scss"; - -interface WechatFriendsProps { - contracts: ContractData[]; - onContactClick: (contract: ContractData) => void; - selectedContactId?: ContractData; -} - -const ContactListSimple: React.FC = ({ - contracts, - onContactClick, - selectedContactId, -}) => { - return ( -
-
全部好友
- ( - onContactClick(contract)} - className={`${styles.contractItem} ${contract.id === selectedContactId?.id ? styles.selected : ""}`} - > -
- {contract.nickname.charAt(0)} - } - className={styles.avatar} - /> -
-
-
- {contract.conRemark || contract.nickname} -
-
-
- )} - /> -
- ); -}; - -export default ContactListSimple; diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx index 64723fcc..7b5e890c 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx @@ -7,7 +7,7 @@ import { MessageOutlined, } from "@ant-design/icons"; import { ContractData } from "@/pages/pc/ckbox/data"; -import WechatFriendsModule from "./WechatFriendsModule"; +import WechatFriends from "./WechatFriends"; import MessageList from "./MessageList/index"; import styles from "./SidebarMenu.module.scss"; import { getChatSessions } from "@/store/module/ckchat"; @@ -151,7 +151,7 @@ const SidebarMenu: React.FC = ({ ); case "contracts": return ( - { //构建联系人列表标签 const newContractList = await createContractList(contractList); + // 会话列表分组 + asyncNewContractList(newContractList); //获取联系人列表 asyncContractList(contractList); diff --git a/Cunkebao/src/store/module/ckchat.data.ts b/Cunkebao/src/store/module/ckchat.data.ts index 28c1c708..b5984d83 100644 --- a/Cunkebao/src/store/module/ckchat.data.ts +++ b/Cunkebao/src/store/module/ckchat.data.ts @@ -71,6 +71,7 @@ export interface CkChatState { contractList: ContractData[]; chatSessions: any[]; kfUserList: KfUserListData[]; + newContractList: { groupName: string; contacts: any[] }[]; getkfUserList: () => KfUserListData[]; asyncKfUserList: (data: KfUserListData[]) => void; asyncContractList: (data: ContractData[]) => void; diff --git a/Cunkebao/src/store/module/ckchat.ts b/Cunkebao/src/store/module/ckchat.ts index 22d66f04..379771a7 100644 --- a/Cunkebao/src/store/module/ckchat.ts +++ b/Cunkebao/src/store/module/ckchat.ts @@ -20,6 +20,10 @@ export const useCkChatStore = createPersistStore( asyncNewContractList: data => { set({ newContractList: data }); }, + getNewContractList: () => { + const state = useCkChatStore.getState(); + return state.newContractList; + }, // 异步设置会话列表 asyncChatSessions: data => { set({ chatSessions: data });