diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/MessageList.module.scss b/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/MessageList.module.scss index 380bf42d..a3bad297 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/MessageList.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/MessageList.module.scss @@ -18,6 +18,26 @@ border-right: 3px solid #1890ff; } + &.pinned { + background-color: #fff7e6; + border-left: 3px solid #faad14; + position: relative; + + &::before { + content: "📌"; + position: absolute; + top: 8px; + right: 8px; + font-size: 12px; + opacity: 0.7; + } + + .messageName { + color: #d46b08; + font-weight: 600; + } + } + &:last-child { border-bottom: none; } diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/index.tsx b/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/index.tsx index 8eb34d68..e36d7c0e 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/index.tsx @@ -9,7 +9,11 @@ import { } from "@ant-design/icons"; import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data"; import { useWeChatStore } from "@/store/module/weChat/weChat"; -import { useCkChatStore } from "@/store/module/ckchat/ckchat"; +import { + useCkChatStore, + toggleChatSessionPin, + deleteChatSession, +} from "@/store/module/ckchat/ckchat"; import { updateConfig } from "@/pages/pc/ckbox/api"; import styles from "./MessageList.module.scss"; import { formatWechatTime } from "@/utils/common"; @@ -83,20 +87,20 @@ const MessageList: React.FC = () => { // 置顶/取消置顶 const handleTogglePin = (session: ContractData | weChatGroup) => { - const isPinned = (session.config as any)?.top || true; + const currentPinned = (session.config as any)?.top || false; + const newPinned = !currentPinned; // 切换置顶状态 + updateConfig({ id: session.id, - config: { top: isPinned, chat: true }, + config: { top: newPinned, chat: true }, }) .then(() => { - message.success(`${isPinned ? "取消置顶" : "置顶"}成功`); - //更新当前这个item的config的top值 - //并把当前的Item移动到聊天列表的最上方 + // API调用成功，更新本地状态 + toggleChatSessionPin(session.id!, newPinned); + message.success(`${newPinned ? "置顶" : "取消置顶"}成功`); }) .catch(() => { - message.error(`${isPinned ? "取消置顶" : "置顶"}失败`); - //更新当前这个item的config的top值 - //先计算一下最后一个置顶的坐标，并把当前的Item移动到最后一个置顶的 Item下边 + message.error(`${newPinned ? "置顶" : "取消置顶"}失败`); }); hideContextMenu(); }; @@ -107,9 +111,18 @@ const MessageList: React.FC = () => { title: "确认删除", content: `确定要删除与 ${session.conRemark || session.nickname} 的会话吗？`, onOk: () => { - // TODO: 调用API删除会话 - console.log("删除会话", session); - message.success("删除成功"); + updateConfig({ + id: session.id, + config: { chat: false }, + }) + .then(() => { + message.success(`删除成功`); + //根据id删除会话里Item + deleteChatSession(session.id); + }) + .catch(() => { + message.error(`删除失败`); + }); hideContextMenu(); }, }); @@ -191,7 +204,7 @@ const MessageList: React.FC = () => { key={session.id} className={`${styles.messageItem} ${ currentContract?.id === session.id ? styles.active : "" - }`} + } ${(session.config as any)?.top ? styles.pinned : ""}`} onClick={() => onContactClick(session)} onContextMenu={e => handleContextMenu(e, session)} > diff --git a/Touchkebao/src/store/module/ckchat/ckchat.ts b/Touchkebao/src/store/module/ckchat/ckchat.ts index 8f8840b3..2bd1c391 100644 --- a/Touchkebao/src/store/module/ckchat/ckchat.ts +++ b/Touchkebao/src/store/module/ckchat/ckchat.ts @@ -429,6 +429,88 @@ export const useCkChatStore = createPersistStore( }; }); }, + // 切换会话置顶状态 + toggleChatSessionPin: (sessionId: number, isPinned: boolean) => { + set(state => { + const updatedSessions = state.chatSessions.map(item => { + if (item.id === sessionId) { + return { + ...item, + config: { + ...item.config, + top: isPinned, + }, + }; + } + return item; + }); + + // 如果置顶，将会话移到顶部 + if (isPinned) { + const sessionIndex = updatedSessions.findIndex( + item => item.id === sessionId, + ); + if (sessionIndex !== -1) { + const session = updatedSessions[sessionIndex]; + const otherSessions = updatedSessions.filter( + item => item.id !== sessionId, + ); + return { + chatSessions: [session, ...otherSessions], + }; + } + } else { + // 如果取消置顶，重新排序（置顶>未读>名称>时间） + const sortedSessions = updatedSessions.sort((a, b) => { + // 获取置顶状态 + const aTop = (a.config as any)?.top || false; + const bTop = (b.config as any)?.top || false; + + // 首先按置顶状态排序（置顶的排在前面） + if (aTop !== bTop) { + return aTop ? -1 : 1; + } + + // 如果都是置顶或都不是置顶，则按未读消息数量降序排列 + const aUnread = a.config?.unreadCount || 0; + const bUnread = b.config?.unreadCount || 0; + + if (aUnread !== bUnread) { + return bUnread - aUnread; + } + + // 如果未读消息数量相同，则按显示名称排序 + const getDisplayName = (session: any) => { + return session.conRemark || session.nickname || ""; + }; + const aName = getDisplayName(a).toLowerCase(); + const bName = getDisplayName(b).toLowerCase(); + + if (aName !== bName) { + return aName.localeCompare(bName, "zh-CN"); + } + + // 如果名称也相同，则按时间降序排列 + if (!a.lastUpdateTime) return 1; + if (!b.lastUpdateTime) return -1; + + const timeCompare = + new Date(b.lastUpdateTime).getTime() - + new Date(a.lastUpdateTime).getTime(); + + return timeCompare; + }); + + return { + chatSessions: sortedSessions, + }; + } + + return { + chatSessions: updatedSessions, + }; + }); + }, // 设置用户信息 setUserInfo: (userInfo: CkUserInfo) => { set({ userInfo, isLoggedIn: true }); @@ -561,3 +643,5 @@ export const updateIsLoadWeChat = (isLoadWeChat: boolean) => useCkChatStore.getState().updateIsLoadWeChat(isLoadWeChat); export const getIsLoadWeChat = () => useCkChatStore.getState().getIsLoadWeChat(); +export const toggleChatSessionPin = (sessionId: number, isPinned: boolean) => + useCkChatStore.getState().toggleChatSessionPin(sessionId, isPinned);