diff --git a/Cunkebao/dist/.vite/manifest.json b/Cunkebao/dist/.vite/manifest.json index 8cbef19d..efc8b536 100644 --- a/Cunkebao/dist/.vite/manifest.json +++ b/Cunkebao/dist/.vite/manifest.json @@ -1,9 +1,9 @@ { - "_charts-C4aL5mHM.js": { - "file": "assets/charts-C4aL5mHM.js", + "_charts-DmoeDXY2.js": { + "file": "assets/charts-DmoeDXY2.js", "name": "charts", "imports": [ - "_ui-DJLY-TX6.js", + "_ui-D66ihimQ.js", "_vendor-2vc8h_ct.js" ] }, @@ -11,8 +11,8 @@ "file": "assets/ui-D0C0OGrH.css", "src": "_ui-D0C0OGrH.css" }, - "_ui-DJLY-TX6.js": { - "file": "assets/ui-DJLY-TX6.js", + "_ui-D66ihimQ.js": { + "file": "assets/ui-D66ihimQ.js", "name": "ui", "imports": [ "_vendor-2vc8h_ct.js" @@ -33,18 +33,18 @@ "name": "vendor" }, "index.html": { - "file": "assets/index-BaRKPU0c.js", + "file": "assets/index-bW2KwNBi.js", "name": "index", "src": "index.html", "isEntry": true, "imports": [ "_vendor-2vc8h_ct.js", "_utils-6WF66_dS.js", - "_ui-DJLY-TX6.js", - "_charts-C4aL5mHM.js" + "_ui-D66ihimQ.js", + "_charts-DmoeDXY2.js" ], "css": [ - "assets/index-bDMGkYaC.css" + "assets/index-BeKt58rz.css" ] } } \ No newline at end of file diff --git a/Cunkebao/dist/index.html b/Cunkebao/dist/index.html index bc66eb04..168b3e09 100644 --- a/Cunkebao/dist/index.html +++ b/Cunkebao/dist/index.html @@ -11,13 +11,13 @@ - + - - + + - +
diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss index dfd8c0ce..d60ef945 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss @@ -110,8 +110,10 @@ .chatContent { flex: 1; - overflow: hidden; + overflow: visible; background: #f5f5f5; + display: flex; + flex-direction: column; .messagesContainer { height: 100%; diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/MessageRecord.module.scss b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/MessageRecord.module.scss index 96fe8a3e..f35eb61c 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/MessageRecord.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/MessageRecord.module.scss @@ -34,6 +34,11 @@ margin: 8px 0; position: relative; } +.loadMore { + text-align: center; + color: #1890ff; + cursor: pointer; +} // 消息项 .messageItem { diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/index.tsx index e2ea13bb..426a5023 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/index.tsx @@ -192,6 +192,7 @@ const MessageRecord: React.FC = ({ contract }) => { return (
+
点击加载更早的信息
{groupMessagesByTime(currentMessages).map((group, groupIndex) => ( diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx index e90aab2a..9019a963 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from "react"; +import React, { useState } from "react"; import { Layout, Button, Avatar, Space, Dropdown, Menu, Tooltip } from "antd"; import { PhoneOutlined, @@ -6,6 +6,7 @@ import { MoreOutlined, UserOutlined, TeamOutlined, + InfoCircleOutlined, } from "@ant-design/icons"; import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data"; import styles from "./ChatWindow.module.scss"; @@ -18,15 +19,13 @@ const { Header, Content } = Layout; interface ChatWindowProps { contract: ContractData | weChatGroup; - showProfile?: boolean; - onToggleProfile?: () => void; } -const ChatWindow: React.FC = ({ - contract, - showProfile = true, - onToggleProfile, -}) => { +const ChatWindow: React.FC = ({ contract }) => { + const [showProfile, setShowProfile] = useState(true); + const onToggleProfile = () => { + setShowProfile(!showProfile); + }; const chatMenu = ( }> @@ -76,6 +75,7 @@ const ChatWindow: React.FC = ({ className={styles.headerButton} /> +
+ +
+ + + ⚡ + 9307.423 + + } + src={userInfo?.account?.avatar} + className={styles.avatar} + /> + +
+ + + + {drawerContent || defaultDrawerContent} + + + ); +}; + +export default NavCommon; diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/MessageList/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/MessageList/index.tsx index 14c68a3d..f954caaa 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/MessageList/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/MessageList/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { List, Avatar, Badge } from "antd"; import { UserOutlined, TeamOutlined } from "@ant-design/icons"; import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data"; @@ -11,11 +11,25 @@ interface MessageListProps {} const MessageList: React.FC = () => { const { setCurrentContact, currentContract } = useWeChatStore(); - const chatSessions = useCkChatStore(state => state.getChatSessions()); + const getChatSessions = useCkChatStore(state => state.chatSessions); + const kfSelected = useCkChatStore(state => state.kfSelected); const onContactClick = (session: ContractData | weChatGroup) => { setCurrentContact(session, true); }; + const [chatSessions, setChatSessions] = useState< + (ContractData | weChatGroup)[] + >([]); + useEffect(() => { + if (kfSelected == 0) { + setChatSessions(getChatSessions); + } else { + const newChatSessions = getChatSessions.filter( + v => v.wechatAccountId === kfSelected && kfSelected != 0, + ); + setChatSessions(newChatSessions); + } + }, [getChatSessions, kfSelected]); return (
= () => { )} /> -
最近一天的消息
); }; diff --git a/Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/VerticalUserList.module.scss b/Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/VerticalUserList.module.scss index 060f8bb0..5ec4e8fd 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/VerticalUserList.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/VerticalUserList.module.scss @@ -2,18 +2,15 @@ display: flex; flex-direction: column; height: 100%; - background-color: #2e2e2e; - color: #fff; - width: 60px; + background-color: #ffffff; .userListHeader { padding: 10px 0; text-align: center; - border-bottom: 1px solid #3a3a3a; cursor: pointer; .allFriends { font-size: 12px; - color: #ccc; + color: #333333; } } @@ -40,35 +37,19 @@ padding: 10px 0; position: relative; cursor: pointer; - - &:hover { - background-color: #3a3a3a; - } + background: #ffffff; &.active { - background-color: #3a3a3a; + .userAvatar { + border: 4px solid #1890ff; - &::before { - content: ""; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 3px; - height: 20px; - background-color: #1890ff; + .active & { + border-color: #1890ff; + } } } } - .userAvatar { - border: 2px solid transparent; - - .active & { - border-color: #1890ff; - } - } - .messageBadge { :global(.ant-badge-count) { background-color: #ff4d4f; @@ -90,11 +71,11 @@ height: 8px; border-radius: 50%; border: 1px solid #2e2e2e; - + &.online { background-color: #52c41a; // 绿色表示在线 } - + &.offline { background-color: #8c8c8c; // 灰色表示离线 } diff --git a/Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/index.tsx index 675380e7..38f60f48 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React from "react"; import { Avatar, Badge, Tooltip } from "antd"; import styles from "./VerticalUserList.module.scss"; import { useCkChatStore, asyncKfSelected } from "@/store/module/ckchat/ckchat"; @@ -42,7 +42,7 @@ const VerticalUserList: React.FC = () => { > { // 不要在组件初始化时获取sendCommand，而是在需要时动态获取 const [loading, setLoading] = useState(false); - const [showProfile, setShowProfile] = useState(true); const currentContract = useWeChatStore(state => state.currentContract); useEffect(() => { // 方法一：使用 Promise 链式调用处理异步函数 @@ -54,11 +54,11 @@ const CkboxPage: React.FC = () => { return ( -
触客宝
+ {/* 垂直侧边栏 */} - + @@ -71,7 +71,7 @@ const CkboxPage: React.FC = () => { {currentContract ? (
-
+ {/*
-
- setShowProfile(!showProfile)} - /> +
*/} +
) : (