diff --git a/Cunkebao/src/pages/pc/ckbox/components/MessageList/data.ts b/Cunkebao/src/pages/pc/ckbox/components/MessageList/data.ts new file mode 100644 index 00000000..c1f83783 --- /dev/null +++ b/Cunkebao/src/pages/pc/ckbox/components/MessageList/data.ts @@ -0,0 +1,48 @@ +// 联系人数据接口 +export interface ContactData { + id?: number; + wechatAccountId: number; + wechatId: string; + alias: string; + conRemark: string; + nickname: string; + quanPin: string; + avatar?: string; + gender: number; + region: string; + addFrom: number; + phone: string; + labels: string[]; + signature: string; + accountId: number; + extendFields: null; + city?: string; + lastUpdateTime: string; + isPassed: boolean; + tenantId: number; + groupId: number; + thirdParty: null; + additionalPicture: string; + desc: string; + config: null; + lastMessageTime: number; + unreadCount: number; + duplicate: boolean; + [key: string]: any; +} +//聊天会话类型 +export type ChatType = "private" | "group"; +// 聊天会话接口 +export interface ChatSession { + id: number; + type: ChatType; + name: string; + avatar?: string; + lastMessage: string; + lastTime: string; + unreadCount: number; + online: boolean; + members?: string[]; + pinned?: boolean; + muted?: boolean; +} diff --git a/Cunkebao/src/pages/pc/ckbox/components/MessageList/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/MessageList/index.tsx index fd0e0422..151c64d3 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/MessageList/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/MessageList/index.tsx @@ -2,17 +2,17 @@ import React from "react"; import { List, Avatar, Badge } from "antd"; import { UserOutlined, TeamOutlined } from "@ant-design/icons"; import dayjs from "dayjs"; -import { ChatSession } from "@/pages/pc/ckbox/data"; +import { ContactData } from "./data"; import styles from "./MessageList.module.scss"; interface MessageListProps { - sessions: ChatSession[]; - currentChat: ChatSession | null; - onChatSelect: (chat: ChatSession) => void; + chatSessions: ContactData[]; + currentChat: ContactData; + onChatSelect: (chat: ContactData) => void; } const MessageList: React.FC = ({ - sessions, + chatSessions, currentChat, onChatSelect, }) => { @@ -35,7 +35,7 @@ const MessageList: React.FC = ({ return (
( = ({ size={48} src={session.avatar} icon={ - session.type === "group" ? ( + session?.type === "group" ? ( ) : ( @@ -59,18 +59,15 @@ const MessageList: React.FC = ({
-
{session.name}
+
{session.nickname}
- {formatTime(session.lastTime)} + {formatTime(session?.lastTime || "")}
- {session.lastMessage} + {session?.lastMessage}
- {session.online && ( -
在线
- )}
diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriendsModule.tsx b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriendsModule.tsx index c3fd5e2c..0ff78aec 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriendsModule.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriendsModule.tsx @@ -6,7 +6,7 @@ import styles from "./ContactListSimple.module.scss"; interface ContactListSimpleProps { contacts: ContactData[]; onContactClick: (contact: ContactData) => void; - selectedContactId?: number; + selectedContactId?: ContactData; } const ContactListSimple: React.FC = ({ @@ -24,18 +24,16 @@ const ContactListSimple: React.FC = ({ onContactClick(contact)} - className={`${styles.contactItem} ${contact.id === selectedContactId ? styles.selected : ""}`} + className={`${styles.contactItem} ${contact.id === selectedContactId?.id ? styles.selected : ""}`} >
- - {contact.nickname.charAt(0)} - } - className={styles.avatar} - /> - + {contact.nickname.charAt(0)} + } + className={styles.avatar} + />
{contact.nickname}
diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/data.ts b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/data.ts index afe7cb81..d2ee86d4 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/data.ts +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/data.ts @@ -28,6 +28,7 @@ export interface ContactData { lastMessageTime: number; unreadCount: number; duplicate: boolean; + [key: string]: any; } //聊天会话类型 export type ChatType = "private" | "group"; diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx index edfc2c74..c93fd09a 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/index.tsx @@ -6,7 +6,7 @@ import { TeamOutlined, MessageOutlined, } from "@ant-design/icons"; -import { ContactData, ChatSession } from "./data"; +import { ContactData } from "./data"; import WechatFriendsModule from "./WechatFriendsModule"; import MessageList from "../MessageList/index"; import styles from "./SidebarMenu.module.scss"; @@ -16,10 +16,10 @@ const { TabPane } = Tabs; interface SidebarMenuProps { contacts: ContactData[]; - chatSessions: ChatSession[]; - currentChat: ChatSession | null; + chatSessions: ContactData[]; + currentChat: ContactData; onContactClick: (contact: ContactData) => void; - onChatSelect: (chat: ChatSession) => void; + onChatSelect: (chat: ContactData) => void; loading?: boolean; } @@ -50,7 +50,7 @@ const SidebarMenu: React.FC = ({ const getFilteredSessions = () => { if (!searchText) return chatSessions; return chatSessions.filter(session => - session.name.toLowerCase().includes(searchText.toLowerCase()), + session.nickname.toLowerCase().includes(searchText.toLowerCase()), ); }; @@ -83,9 +83,9 @@ const SidebarMenu: React.FC = ({ key="chats" > = ({ { const [messageApi, contextHolder] = message.useMessage(); const [contacts, setContacts] = useState([]); - const [chatSessions, setChatSessions] = useState([]); - const [currentChat, setCurrentChat] = useState(null); + const [chatSessions, setChatSessions] = useState([]); + const [currentChat, setCurrentChat] = useState(null); const [loading, setLoading] = useState(false); const [showProfile, setShowProfile] = useState(true); const { login2 } = useUserStore(); @@ -55,18 +54,8 @@ const CkboxPage: React.FC = () => { const handleContactClick = (contact: ContactData) => { // 查找或创建聊天会话 - let session = chatSessions.find(s => s.id === contact.id); + const session = chatSessions.find(s => s.id === contact.id); if (!session) { - session = { - id: contact.id, - type: "private", - name: contact.nickname, - avatar: contact.avatar, - lastMessage: "", - lastTime: dayjs().toISOString(), - unreadCount: 0, - online: contact.online, - }; setChatSessions(prev => [session!, ...prev]); } setCurrentChat(session);