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 1f4487de..f9ff1339 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss @@ -385,10 +385,29 @@ .messageTime { text-align: center; - padding: 8px 0; + padding: 4px 0; font-size: 12px; color: #999; - margin: 16px 0; + margin: 10px 0; + position: relative; + + &::before, + &::after { + content: ''; + position: absolute; + top: 50%; + width: calc(50% - 60px); + height: 1px; + background-color: rgba(0, 0, 0, 0.05); + } + + &::before { + left: 0; + } + + &::after { + right: 0; + } } .messageItem { diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx index 39434565..d3bc97c4 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx @@ -745,23 +745,58 @@ const ChatWindow: React.FC = ({ let currentDate = ""; messages.forEach(msg => { - const messageDate = dayjs(msg.timestamp).format("YYYY-MM-DD"); - const messageTime = dayjs(msg.timestamp).format("HH:mm"); + // 使用消息的创建时间或微信时间 + const msgTime = msg.wechatTime + ? msg.wechatTime * 1000 + : new Date(msg.createTime).getTime(); + const messageDate = dayjs(msgTime).format("YYYY-MM-DD"); + + // 根据不同时间范围格式化时间戳 + let formattedTime = ""; + const now = dayjs(); + const msgDayjs = dayjs(msgTime); + + // 当天消息:显示为 "时:分",例如 "14:30" + if (msgDayjs.format("YYYY-MM-DD") === now.format("YYYY-MM-DD")) { + formattedTime = msgDayjs.format("HH:mm"); + } + // 昨天消息:显示为 "昨天 时:分",如 "昨天 19:25" + else if ( + msgDayjs.format("YYYY-MM-DD") === + now.subtract(1, "day").format("YYYY-MM-DD") + ) { + formattedTime = `昨天 ${msgDayjs.format("HH:mm")}`; + } + // 前天至一周内消息:显示为 "星期 X 时:分",例如 "周三 16:10" + else if (msgDayjs.isAfter(now.subtract(7, "day"))) { + const weekDayMap = ["日", "一", "二", "三", "四", "五", "六"]; + const weekDay = weekDayMap[msgDayjs.day()]; + formattedTime = `周${weekDay} ${msgDayjs.format("HH:mm")}`; + } + // 超过一周的消息:显示为 "YYYY 年 X 月 X 日 时:分",如 "2025 年 8 月 15 日 10:35" + else { + formattedTime = msgDayjs.format("YYYY 年 M 月 D 日 HH:mm"); + } if (messageDate !== currentDate) { currentDate = messageDate; - groups.push({ time: messageTime, messages: [msg] }); + groups.push({ time: formattedTime, messages: [msg] }); } else { const lastGroup = groups[groups.length - 1]; // 如果时间相差超过5分钟,创建新的时间组 - const lastMessageTime = - lastGroup.messages[lastGroup.messages.length - 1].timestamp; + const lastMessageTime = lastGroup.messages[ + lastGroup.messages.length - 1 + ].wechatTime + ? lastGroup.messages[lastGroup.messages.length - 1].wechatTime * 1000 + : new Date( + lastGroup.messages[lastGroup.messages.length - 1].createTime, + ).getTime(); const timeDiff = Math.abs( - dayjs(msg.timestamp).diff(dayjs(lastMessageTime), "minute"), + dayjs(msgTime).diff(dayjs(lastMessageTime), "minute"), ); if (timeDiff >= 5) { - groups.push({ time: messageTime, messages: [msg] }); + groups.push({ time: formattedTime, messages: [msg] }); } else { lastGroup.messages.push(msg); }