diff --git a/Cunkebao/dist/.vite/manifest.json b/Cunkebao/dist/.vite/manifest.json index aa2b3d0b..cc80cbd8 100644 --- a/Cunkebao/dist/.vite/manifest.json +++ b/Cunkebao/dist/.vite/manifest.json @@ -1,18 +1,14 @@ { - "_charts-DKSCc2_C.js": { - "file": "assets/charts-DKSCc2_C.js", + "_charts-Cbn6yFil.js": { + "file": "assets/charts-Cbn6yFil.js", "name": "charts", "imports": [ - "_ui-DhAz00L0.js", + "_ui-Cytu8vuP.js", "_vendor-2vc8h_ct.js" ] }, - "_ui-D0C0OGrH.css": { - "file": "assets/ui-D0C0OGrH.css", - "src": "_ui-D0C0OGrH.css" - }, - "_ui-DhAz00L0.js": { - "file": "assets/ui-DhAz00L0.js", + "_ui-Cytu8vuP.js": { + "file": "assets/ui-Cytu8vuP.js", "name": "ui", "imports": [ "_vendor-2vc8h_ct.js" @@ -21,6 +17,10 @@ "assets/ui-D0C0OGrH.css" ] }, + "_ui-D0C0OGrH.css": { + "file": "assets/ui-D0C0OGrH.css", + "src": "_ui-D0C0OGrH.css" + }, "_utils-6WF66_dS.js": { "file": "assets/utils-6WF66_dS.js", "name": "utils", @@ -33,18 +33,18 @@ "name": "vendor" }, "index.html": { - "file": "assets/index-BdCPAYQ7.js", + "file": "assets/index-QManA_e5.js", "name": "index", "src": "index.html", "isEntry": true, "imports": [ "_vendor-2vc8h_ct.js", "_utils-6WF66_dS.js", - "_ui-DhAz00L0.js", - "_charts-DKSCc2_C.js" + "_ui-Cytu8vuP.js", + "_charts-Cbn6yFil.js" ], "css": [ - "assets/index-ChiFk16x.css" + "assets/index-BkBrwKGe.css" ] } } \ No newline at end of file diff --git a/Cunkebao/dist/index.html b/Cunkebao/dist/index.html index 0b6673bb..93421b47 100644 --- a/Cunkebao/dist/index.html +++ b/Cunkebao/dist/index.html @@ -11,13 +11,13 @@ - + - - + + - +
diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/WechatFriends.module.scss b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/WechatFriends.module.scss index 8b371fa2..00633207 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/WechatFriends.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/WechatFriends.module.scss @@ -60,6 +60,13 @@ padding: 10px 0; } +.noResults { + text-align: center; + color: #999; + padding: 20px; + font-size: 14px; +} + .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 index 33573b04..24ae993f 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx @@ -2,7 +2,10 @@ import React, { useState, useCallback, useEffect } from "react"; import { List, Avatar, Collapse, Button } from "antd"; import type { CollapseProps } from "antd"; import styles from "./WechatFriends.module.scss"; -import { useCkChatStore } from "@/store/module/ckchat/ckchat"; +import { + useCkChatStore, + searchContactsAndGroups, +} from "@/store/module/ckchat/ckchat"; import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data"; interface WechatFriendsProps { @@ -17,6 +20,9 @@ const ContactListSimple: React.FC = ({ selectedContactId, }) => { const [newContractList, setNewContractList] = useState([]); + const [searchResults, setSearchResults] = useState< + (ContractData | weChatGroup)[] + >([]); const getNewContractListFn = useCkChatStore( state => state.getNewContractList, ); @@ -26,17 +32,27 @@ const ContactListSimple: React.FC = ({ // 使用useEffect来处理异步的getNewContractList调用 useEffect(() => { - const fetchNewContractList = async () => { + const fetchData = async () => { try { - const result = await getNewContractListFn(); - setNewContractList(result || []); + if (searchKeyword.trim()) { + // 有搜索关键词时,获取搜索结果 + const searchResult = await searchContactsAndGroups(); + setSearchResults(searchResult || []); + setNewContractList([]); + } else { + // 无搜索关键词时,获取分组列表 + const result = await getNewContractListFn(); + setNewContractList(result || []); + setSearchResults([]); + } } catch (error) { - console.error("获取联系人分组列表失败:", error); + console.error("获取联系人数据失败:", error); setNewContractList([]); + setSearchResults([]); } }; - fetchNewContractList(); + fetchData(); }, [getNewContractListFn, kfSelected, countLables, searchKeyword]); const [activeKey, setActiveKey] = useState([]); // 默认展开第一个分组 @@ -50,30 +66,32 @@ const ContactListSimple: React.FC = ({ const [page, setPage] = useState<{ [key: string]: number }>({}); // 渲染联系人项 - 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} + const renderContactItem = (contact: ContractData | weChatGroup) => { + // 判断是否为群组 + const isGroup = "chatroomId" in contact; + const avatar = contact.avatar || contact.chatroomAvatar; + const name = contact.conRemark || contact.nickname; + + return ( + onContactClick(contact)} + className={`${styles.contractItem} ${contact.id === selectedContactId?.id ? styles.selected : ""}`} + > +
+ {contact.nickname.charAt(0)}} + className={styles.avatar} + />
-
- - ); +
+
{name}
+ {isGroup &&
群聊
} +
+ + ); + }; // 初始化分页数据 useEffect(() => { @@ -188,7 +206,21 @@ const ContactListSimple: React.FC = ({ return (
- {newContractList && newContractList.length > 0 ? ( + {searchKeyword.trim() ? ( + // 搜索模式:直接显示搜索结果列表 + <> +
搜索结果
+ + {searchResults.length === 0 && ( +
未找到匹配的联系人
+ )} + + ) : newContractList && newContractList.length > 0 ? ( + // 正常模式:显示分组 = ({ items={getCollapseItems()} /> ) : ( + // 备用模式:显示传入的联系人列表 <> -
全部好友
+
全部联系人
diff --git a/Cunkebao/src/store/module/ckchat/ckchat.ts b/Cunkebao/src/store/module/ckchat/ckchat.ts index db1bf9e6..bc490b04 100644 --- a/Cunkebao/src/store/module/ckchat/ckchat.ts +++ b/Cunkebao/src/store/module/ckchat/ckchat.ts @@ -131,6 +131,71 @@ export const useCkChatStore = createPersistStore( return cachedResult; }; })(), + // 搜索好友和群组的新方法 - 从本地数据库查询并返回扁平化的搜索结果 + searchContactsAndGroups: (() => { + let cachedResult: (ContractData | weChatGroup)[] = []; + let lastKfSelected: number | null = null; + let lastSearchKeyword: string = ""; + + return async () => { + const state = useCkChatStore.getState(); + + // 检查是否需要重新计算缓存 + const shouldRecalculate = + lastKfSelected !== state.kfSelected || + lastSearchKeyword !== state.searchKeyword; + + if (shouldRecalculate) { + if (state.searchKeyword.trim()) { + const keyword = state.searchKeyword.toLowerCase(); + + // 从本地数据库查询联系人数据 + let allContacts: ContractData[] = await contractService.findAll(); + + // 根据选中的客服筛选联系人 + if (state.kfSelected !== 0) { + allContacts = allContacts.filter( + item => item.wechatAccountId === state.kfSelected, + ); + } + + // 从本地数据库查询群组数据 + let allGroups: weChatGroup[] = await weChatGroupService.findAll(); + + // 根据选中的客服筛选群组 + if (state.kfSelected !== 0) { + allGroups = allGroups.filter( + item => item.wechatAccountId === state.kfSelected, + ); + } + + // 搜索匹配的联系人 + const matchedContacts = allContacts.filter(item => { + const nickname = (item.nickname || "").toLowerCase(); + const conRemark = (item.conRemark || "").toLowerCase(); + return nickname.includes(keyword) || conRemark.includes(keyword); + }); + + // 搜索匹配的群组 + const matchedGroups = allGroups.filter(item => { + const nickname = (item.nickname || "").toLowerCase(); + const conRemark = (item.conRemark || "").toLowerCase(); + return nickname.includes(keyword) || conRemark.includes(keyword); + }); + + // 合并搜索结果 + cachedResult = [...matchedContacts, ...matchedGroups]; + } else { + cachedResult = []; + } + + lastKfSelected = state.kfSelected; + lastSearchKeyword = state.searchKeyword; + } + + return cachedResult; + }; + })(), // 异步设置联系人分组列表 asyncNewContractList: async (data: any[]) => { set({ newContractList: data }); @@ -472,4 +537,6 @@ export const setSearchKeyword = (keyword: string) => useCkChatStore.getState().setSearchKeyword(keyword); export const clearSearchKeyword = () => useCkChatStore.getState().clearSearchKeyword(); +export const searchContactsAndGroups = () => + useCkChatStore.getState().searchContactsAndGroups(); useCkChatStore.getState().getKfSelectedUser();