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 e70717c2..380bf42d 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 @@ -120,6 +120,43 @@ } } +// 右键菜单样式 +.contextMenu { + background: white; + border: 1px solid #d9d9d9; + border-radius: 6px; + box-shadow: + 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 9px 28px 8px rgba(0, 0, 0, 0.05); + padding: 4px 0; + min-width: 120px; + z-index: 1000; + + .menuItem { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + cursor: pointer; + font-size: 14px; + color: #262626; + transition: background-color 0.2s; + + &:hover { + background-color: #f5f5f5; + } + + &:active { + background-color: #e6f7ff; + } + + .anticon { + font-size: 14px; + } + } +} + // 响应式设计 @media (max-width: 768px) { .messageList { diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/data.ts b/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/data.ts index 620e4073..5aa5c726 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/data.ts +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/data.ts @@ -27,6 +27,7 @@ export interface ContractData { lastMessageTime: number; config: { unreadCount: number; + top?: boolean; }; duplicate: boolean; [key: string]: any; @@ -43,6 +44,7 @@ export interface ChatSession { lastTime: string; config: { unreadCount: number; + top?: boolean; }; online: boolean; members?: string[]; 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 b387d298..8eb34d68 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 @@ -1,10 +1,16 @@ -import React, { useEffect, useState } from "react"; -import { List, Avatar, Badge } from "antd"; -import { UserOutlined, TeamOutlined } from "@ant-design/icons"; +import React, { useEffect, useState, useRef } from "react"; +import { List, Avatar, Badge, Modal, Input, message } from "antd"; +import { + UserOutlined, + TeamOutlined, + PushpinOutlined, + DeleteOutlined, + EditOutlined, +} 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 { updateConfig } from "@/pages/pc/ckbox/api"; import styles from "./MessageList.module.scss"; import { formatWechatTime } from "@/utils/common"; interface MessageListProps {} @@ -22,6 +28,138 @@ const MessageList: React.FC = () => { (ContractData | weChatGroup)[] >([]); const searchKeyword = useCkChatStore(state => state.searchKeyword); + + // 右键菜单相关状态 + const [contextMenu, setContextMenu] = useState<{ + visible: boolean; + x: number; + y: number; + session: ContractData | weChatGroup | null; + }>({ + visible: false, + x: 0, + y: 0, + session: null, + }); + + // 修改备注相关状态 + const [editRemarkModal, setEditRemarkModal] = useState<{ + visible: boolean; + session: ContractData | weChatGroup | null; + remark: string; + }>({ + visible: false, + session: null, + remark: "", + }); + + const contextMenuRef = useRef(null); + + // 右键菜单事件处理 + const handleContextMenu = ( + e: React.MouseEvent, + session: ContractData | weChatGroup, + ) => { + e.preventDefault(); + e.stopPropagation(); + + setContextMenu({ + visible: true, + x: e.clientX, + y: e.clientY, + session, + }); + }; + + // 隐藏右键菜单 + const hideContextMenu = () => { + setContextMenu({ + visible: false, + x: 0, + y: 0, + session: null, + }); + }; + + // 置顶/取消置顶 + const handleTogglePin = (session: ContractData | weChatGroup) => { + const isPinned = (session.config as any)?.top || true; + updateConfig({ + id: session.id, + config: { top: isPinned, chat: true }, + }) + .then(() => { + message.success(`${isPinned ? "取消置顶" : "置顶"}成功`); + //更新当前这个item的config的top值 + //并把当前的Item移动到聊天列表的最上方 + }) + .catch(() => { + message.error(`${isPinned ? "取消置顶" : "置顶"}失败`); + //更新当前这个item的config的top值 + //先计算一下最后一个置顶的坐标,并把当前的Item移动到最后一个置顶的 Item下边 + }); + hideContextMenu(); + }; + + // 删除会话 + const handleDelete = (session: ContractData | weChatGroup) => { + Modal.confirm({ + title: "确认删除", + content: `确定要删除与 ${session.conRemark || session.nickname} 的会话吗?`, + onOk: () => { + // TODO: 调用API删除会话 + console.log("删除会话", session); + message.success("删除成功"); + hideContextMenu(); + }, + }); + }; + + // 修改备注 + const handleEditRemark = (session: ContractData | weChatGroup) => { + setEditRemarkModal({ + visible: true, + session, + remark: session.conRemark || "", + }); + hideContextMenu(); + }; + + // 保存备注 + const handleSaveRemark = () => { + if (!editRemarkModal.session) return; + + // TODO: 调用API更新备注 + console.log("更新备注", editRemarkModal.session, editRemarkModal.remark); + message.success("备注更新成功"); + + setEditRemarkModal({ + visible: false, + session: null, + remark: "", + }); + }; + + // 点击外部隐藏菜单 + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + contextMenuRef.current && + !contextMenuRef.current.contains(event.target as Node) + ) { + hideContextMenu(); + } + }; + + if (contextMenu.visible) { + document.addEventListener("mousedown", handleClickOutside); + } + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [contextMenu.visible]); + useEffect(() => { let filteredSessions = getChatSessions; @@ -55,6 +193,7 @@ const MessageList: React.FC = () => { currentContract?.id === session.id ? styles.active : "" }`} onClick={() => onContactClick(session)} + onContextMenu={e => handleContextMenu(e, session)} >
@@ -73,7 +212,7 @@ const MessageList: React.FC = () => {
- {session.conRemark || session.nickname} + {session.conRemark || session.nickname || session.wechatId}
{formatWechatTime(session?.lastUpdateTime)} @@ -84,6 +223,70 @@ const MessageList: React.FC = () => { )} /> + + {/* 右键菜单 */} + {contextMenu.visible && contextMenu.session && ( +
+
handleTogglePin(contextMenu.session!)} + > + + {(contextMenu.session.config as any)?.top ? "取消置顶" : "置顶"} +
+
handleEditRemark(contextMenu.session!)} + > + + 修改备注 +
+
handleDelete(contextMenu.session!)} + > + + 删除 +
+
+ )} + + {/* 修改备注Modal */} + + setEditRemarkModal({ + visible: false, + session: null, + remark: "", + }) + } + okText="保存" + cancelText="取消" + > + + setEditRemarkModal(prev => ({ + ...prev, + remark: e.target.value, + })) + } + placeholder="请输入备注" + maxLength={20} + /> +
); };