diff --git a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/MessageList/MessageList.module.scss b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/MessageList/MessageList.module.scss index 7d962b13..7f78afc9 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/MessageList/MessageList.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/MessageList/MessageList.module.scss @@ -1,6 +1,7 @@ .messageList { height: 100%; overflow-y: auto; + position: relative; .messageItem { padding: 12px 16px; @@ -66,6 +67,33 @@ text-overflow: ellipsis; white-space: nowrap; flex: 1; + position: relative; + padding-right: 5px; + height: 18px; // 添加固定高度 + line-height: 18px; // 设置行高与高度一致 + + &::before { + content: attr(data-count); + position: absolute; + right: -5px; + top: 0; + background-color: #ff4d4f; + color: white; + border-radius: 10px; + padding: 0 6px; + font-size: 10px; + line-height: 16px; + min-width: 16px; + height: 16px; + text-align: center; + display: none; + } + + &[data-count]:not([data-count=""]):not([data-count="0"]) { + &::before { + display: inline-block; + } + } } .onlineIndicator { @@ -78,6 +106,19 @@ } } } + + .lastDayMessage { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background-color: #f9f9f9; + padding: 8px 16px; + font-size: 12px; + color: #8c8c8c; + text-align: center; + border-top: 1px solid #f0f0f0; + } } // 响应式设计 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 3a4058ae..581a45e9 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/MessageList/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/MessageList/index.tsx @@ -49,7 +49,12 @@ const MessageList: React.FC = ({
-
+
0 ? session.unreadCount : "" + } + > {session?.lastMessage}
@@ -58,6 +63,7 @@ const MessageList: React.FC = ({ )} /> +
最近一天的消息
); }; 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 0f9dc529..6b19a4ac 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/SidebarMenu/WechatFriends/index.tsx @@ -18,7 +18,7 @@ const ContactListSimple: React.FC = ({ selectedContactId, }) => { const newContractList = useCkChatStore(state => state.newContractList); - const [activeKey, setActiveKey] = useState(["0"]); // 默认展开第一个分组 + const [activeKey, setActiveKey] = useState([]); // 默认展开第一个分组 // 分页加载相关状态 const [visibleContacts, setVisibleContacts] = useState<{