添加每条消息时间显示

components/message.vue

@@ -9,7 +9,12 @@
         }"
         @mouseenter="hoverWithdraw"
     >
-        <div class="msg-content" :class="{ 'algin-left': !isMyMessage }">
+        <div
+            class="msg-content"
+            :class="{ 'algin-left': !isMyMessage }"
+            @mouseenter="onHover"
+            @mouseleave="onLeave"
+        >
             <div
                 class="msg-name no-selection"
                 :class="{ 'algin-left': !isMyMessage }"
@@ -85,6 +90,10 @@
                     />
                 </div>
             </div>
+
+            <span v-if="showTs" class="ts" :class="{ right: isMyMessage }">{{
+                ts
+            }}</span>
         </div>
 
         <i
@@ -173,6 +182,7 @@
     import Xim from "@/customer-service/xim";
     import { CustomerServiceEvent, MessageEvent } from "../event";
     import { PayMessageBody } from "../xim/models/chat";
+    import { formatTime } from "../utils/time";
 
     const oneDay = 24 * 60 * 60 * 1000;
 
@@ -271,6 +281,12 @@
         private defaultMessageHandledStatus = dto.MessageHandled.Default;
 
         private isWithdraw = true;
+        private showTs = false;
+        private showTsTimer = 0;
+
+        private get ts() {
+            return this.data && formatTime(this.data.ts);
+        }
 
         private get isSystemMessage() {
             return (
@@ -622,6 +638,15 @@
                 });
             }
         }
+
+        private onHover() {
+            this.showTsTimer = setTimeout(() => (this.showTs = true), 600);
+        }
+
+        private onLeave() {
+            this.showTs = false;
+            clearTimeout(this.showTsTimer);
+        }
     }
 </script>
 
@@ -790,6 +815,19 @@
             }
         }
     }
+
+    .ts {
+        position: absolute;
+        left: 40px;
+        bottom: 0;
+        font-size: 12px;
+        color: #999;
+
+        &.right {
+            right: 40px;
+            left: unset;
+        }
+    }
 </style>
 
 <style lang="less">

utils/time/index.ts

@@ -143,6 +143,11 @@ function formatTime2ShortYearMonthDate(time: Date) {
     )}/${formatWithTwoNumber(time.getDate())}`;
 }
 
+interface FormatOption {
+    rule?: TimeFormatRule;
+    short?: boolean;
+}
+
 /**
  * 格式化时间。                                                                                      short模式下格式
  * * 刚刚（1分钟内）                                                                              [在short模式下不生效]
@@ -157,7 +162,7 @@ function formatTime2ShortYearMonthDate(time: Date) {
  */
 export function formatTime(
     time: number | string,
-    option = { rule: TimeFormatRule.Hour12, short: false }
+    option: FormatOption = { rule: TimeFormatRule.Hour12, short: false }
 ) {
     if (String(time).indexOf("-")) {
         time = String(time).replace(/-/g, "/");
@@ -216,6 +221,7 @@ export function formatTime(
     if (option.short) {
         return formatTime2ShortYearMonthDate(t);
     }
+
     return (
         formatTime2YearMonthDate(t) +
         " " +