From 08dc74cb67ad6937056327ca23d1a37c358d4063 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?=
 <fsmecx@gmail.com>
Date: Tue, 26 Aug 2025 16:34:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=81=8A=E5=A4=A9=E7=AA=97=E5=8F=A3):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF=E6=97=B6=E9=97=B4=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=A0=BC=E5=BC=8F=E5=8C=96?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在消息时间前后添加分割线并调整间距
- 根据消息时间范围显示不同格式的时间（当天、昨天、一周内、超过一周）
- 使用微信时间或创建时间作为消息时间基准
- 当相邻消息时间差超过5分钟时创建新时间组
---
 .../ChatWindow/ChatWindow.module.scss         | 23 ++++++++-
 .../pc/ckbox/components/ChatWindow/index.tsx  | 49 ++++++++++++++++---
 2 files changed, 63 insertions(+), 9 deletions(-)

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<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);
         }