feat(聊天窗口): 优化消息时间显示格式并调整样式

重构消息时间格式化逻辑，提取为公共工具函数 formatWechatTime 移除聊天窗口中的分隔线样式，调整消息间距更新构建产物文件引用路径
2025-08-27 10:22:51 +08:00
parent 08dc74cb67
commit 1334942fc0
5 changed files with 66 additions and 91 deletions
--- a/Cunkebao/dist/.vite/manifest.json
+++ b/Cunkebao/dist/.vite/manifest.json
@@ -1,9 +1,9 @@
 {
-  "_charts-DRkEUjsu.js": {
-    "file": "assets/charts-DRkEUjsu.js",
+  "_charts-DDGb1us0.js": {
+    "file": "assets/charts-DDGb1us0.js",
    "name": "charts",
    "imports": [
-      "_ui-ltFujOOi.js",
+      "_ui-rFvxQTWo.js",
      "_vendor-2vc8h_ct.js"
    ]
  },
@@ -11,8 +11,8 @@
    "file": "assets/ui-D0C0OGrH.css",
    "src": "_ui-D0C0OGrH.css"
  },
-  "_ui-ltFujOOi.js": {
-    "file": "assets/ui-ltFujOOi.js",
+  "_ui-rFvxQTWo.js": {
+    "file": "assets/ui-rFvxQTWo.js",
    "name": "ui",
    "imports": [
      "_vendor-2vc8h_ct.js"
@@ -33,18 +33,18 @@
    "name": "vendor"
  },
  "index.html": {
-    "file": "assets/index-DV2QF8R9.js",
+    "file": "assets/index-C3xy08Hg.js",
    "name": "index",
    "src": "index.html",
    "isEntry": true,
    "imports": [
      "_vendor-2vc8h_ct.js",
-      "_ui-ltFujOOi.js",
+      "_ui-rFvxQTWo.js",
      "_utils-6WF66_dS.js",
-      "_charts-DRkEUjsu.js"
+      "_charts-DDGb1us0.js"
    ],
    "css": [
-      "assets/index-DqyE1UEk.css"
+      "assets/index-D4Jt-UDy.css"
    ]
  }
 }
--- a/Cunkebao/dist/index.html
+++ b/Cunkebao/dist/index.html
@@ -11,13 +11,13 @@
    </style>
    <!-- 引入 uni-app web-view SDK（必须） -->
    <script type="text/javascript" src="/websdk.js"></script>
-    <script type="module" crossorigin src="/assets/index-DV2QF8R9.js"></script>
+    <script type="module" crossorigin src="/assets/index-C3xy08Hg.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-2vc8h_ct.js">
-    <link rel="modulepreload" crossorigin href="/assets/ui-ltFujOOi.js">
+    <link rel="modulepreload" crossorigin href="/assets/ui-rFvxQTWo.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-6WF66_dS.js">
-    <link rel="modulepreload" crossorigin href="/assets/charts-DRkEUjsu.js">
+    <link rel="modulepreload" crossorigin href="/assets/charts-DDGb1us0.js">
    <link rel="stylesheet" crossorigin href="/assets/ui-D0C0OGrH.css">
-    <link rel="stylesheet" crossorigin href="/assets/index-DqyE1UEk.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-D4Jt-UDy.css">
  </head>
  <body>
    <div id="root"></div>
--- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss
+++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss
@@ -388,26 +388,7 @@
  padding: 4px 0;
  font-size: 12px;
  color: #999;
-  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;
-  }
+  margin: 20px 0;
 }

 .messageItem {
--- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx
+++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx
@@ -48,6 +48,7 @@ import { ChatRecord, ContractData } from "@/pages/pc/ckbox/data";
 import { clearUnreadCount, getMessages } from "@/pages/pc/ckbox/api";
 import styles from "./ChatWindow.module.scss";
 import { useWebSocketStore, WebSocketMessage } from "@/store/module/websocket";
+import { formatWechatTime } from "@/utils/common";
 const { Header, Content, Footer, Sider } = Layout;
 const { TextArea } = Input;

@@ -742,65 +743,10 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
  // 用于分组消息并添加时间戳的辅助函数
  const groupMessagesByTime = (messages: ChatRecord[]) => {
    const groups: { time: string; messages: ChatRecord[] }[] = [];
-    let currentDate = "";
-
    messages.forEach(msg => {
-      // 使用消息的创建时间或微信时间
-      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: formattedTime, messages: [msg] });
-      } else {
-        const lastGroup = groups[groups.length - 1];
-        // 如果时间相差超过5分钟，创建新的时间组
-        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(msgTime).diff(dayjs(lastMessageTime), "minute"),
-        );
-
-        if (timeDiff >= 5) {
-          groups.push({ time: formattedTime, messages: [msg] });
-        } else {
-          lastGroup.messages.push(msg);
-        }
-      }
+      // 使用 formatWechatTime 函数格式化时间戳
+      const formattedTime = formatWechatTime(msg.wechatTime);
+      groups.push({ time: formattedTime, messages: [msg] });
    });

    return groups;
--- a/Cunkebao/src/utils/common.ts
+++ b/Cunkebao/src/utils/common.ts
@@ -1,5 +1,53 @@
 import { Modal } from "antd-mobile";
 import { getSetting } from "@/store/module/settings";
+export function formatWechatTime(timestamp) {
+  // 处理时间戳（兼容秒级/毫秒级）
+  const date = new Date(
+    timestamp.toString().length === 10 ? timestamp * 1000 : timestamp,
+  );
+  const now = new Date();
+
+  // 获取消息时间的年月日时分
+  const messageYear = date.getFullYear();
+  const messageMonth = date.getMonth();
+  const messageDate = date.getDate();
+  const messageHour = date.getHours().toString().padStart(2, "0");
+  const messageMinute = date.getMinutes().toString().padStart(2, "0");
+
+  // 获取当前时间的年月日
+  const nowYear = now.getFullYear();
+  const nowMonth = now.getMonth();
+  const nowDate = now.getDate();
+
+  // 创建当天0点的时间对象，用于比较是否同一天
+  const today = new Date(nowYear, nowMonth, nowDate, 0, 0, 0);
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const weekAgo = new Date(today);
+  weekAgo.setDate(weekAgo.getDate() - 6); // 7天前（包括今天）
+
+  // 消息日期（不含时间）
+  const messageDay = new Date(messageYear, messageMonth, messageDate, 0, 0, 0);
+
+  // 当天消息：只显示时分
+  if (messageDay.getTime() === today.getTime()) {
+    return `${messageHour}:${messageMinute}`;
+  }
+
+  // 昨天消息：显示"昨天 时分"
+  if (messageDay.getTime() === yesterday.getTime()) {
+    return `昨天 ${messageHour}:${messageMinute}`;
+  }
+
+  // 一周内消息：显示"星期X 时分"
+  if (messageDay.getTime() >= weekAgo.getTime()) {
+    const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+    return `${weekdays[date.getDay()]} ${messageHour}:${messageMinute}`;
+  }
+
+  // 超过一周：显示"年月日 时分"
+  return `${messageYear}年${messageMonth + 1}月${messageDate}日 ${messageHour}:${messageMinute}`;
+}
 /**
 * 通用js调用弹窗，Promise风格
 * @param content 弹窗内容