From b4eb2919b18007b2640384ef3b1c1f5db3d9c469 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Thu, 28 Aug 2025 18:17:40 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=81=94=E7=B3=BB=E4=BA=BA=E5=88=97?= =?UTF-8?q?=E8=A1=A8):=20=E5=AE=9E=E7=8E=B0=E5=88=86=E7=BB=84=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E5=8A=9F=E8=83=BD=E5=B9=B6=E9=87=8D=E6=9E=84=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加新的联系人分组功能，支持按分组展示联系人列表 重构联系人列表组件结构，将原有组件拆分为更清晰的模块 新增状态管理逻辑用于存储和获取分组联系人数据 移除不再使用的旧样式文件和组件 --- .../ContactList/ContactList.module.scss | 78 ---------------- .../SidebarMenu/ContactList/index.tsx | 48 ---------- .../SidebarMenu/CustomLayout.module.scss | 0 .../WechatFriends.module.scss | 36 ++++++++ .../SidebarMenu/WechatFriends/index.tsx | 88 +++++++++++++++++++ .../SidebarMenu/WechatFriendsModule.tsx | 50 ----------- .../pc/ckbox/components/SidebarMenu/index.tsx | 4 +- Cunkebao/src/pages/pc/ckbox/main.ts | 3 + Cunkebao/src/store/module/ckchat.data.ts | 1 + Cunkebao/src/store/module/ckchat.ts | 4 + 10 files changed, 134 insertions(+), 178 deletions(-) delete mode 100644 Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/ContactList/ContactList.module.scss delete mode 100644 Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/ContactList/index.tsx delete mode 100644 Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/CustomLayout.module.scss rename Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/{ => WechatFriends}/WechatFriends.module.scss (61%) create mode 100644 Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx delete mode 100644 Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriendsModule.tsx 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 });