feat(聊天窗口): 优化消息时间显示样式和格式化逻辑
- 在消息时间前后添加分割线并调整间距 - 根据消息时间范围显示不同格式的时间(当天、昨天、一周内、超过一周) - 使用微信时间或创建时间作为消息时间基准 - 当相邻消息时间差超过5分钟时创建新时间组
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user