feat(聊天窗口): 优化消息时间显示样式和格式化逻辑

- 在消息时间前后添加分割线并调整间距
- 根据消息时间范围显示不同格式的时间(当天、昨天、一周内、超过一周)
- 使用微信时间或创建时间作为消息时间基准
- 当相邻消息时间差超过5分钟时创建新时间组
This commit is contained in:
超级老白兔
2025-08-26 16:34:17 +08:00
parent 3645075473
commit 08dc74cb67
2 changed files with 63 additions and 9 deletions

View File

@@ -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 {

View File

@@ -745,23 +745,58 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
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);
}