style

components/message.vue

@@ -91,9 +91,12 @@
                 </div>
             </div>
 
-            <span v-if="showTs" class="ts" :class="{ right: isMyMessage }">{{
-                ts
-            }}</span>
+            <span
+                v-if="showTs"
+                class="ts"
+                :class="{ right: isMyMessage, offset: showWithdraw }"
+                >{{ ts }}</span
+            >
         </div>
 
         <i
@@ -103,17 +106,7 @@
         ></i>
         <i class="el-icon-loading" v-else-if="isSendingMessage"></i>
 
-        <span
-            class="withdraw"
-            v-if="
-                isMyMessage &&
-                canWithdraw &&
-                isWithdraw &&
-                !isWithdrawMessage &&
-                !isQuestionAnswerMessage &&
-                isChatMember
-            "
-            @click="withdraw"
+        <span class="withdraw" v-if="showWithdraw" @click="withdraw"
             >撤回此消息</span
         >
 
@@ -285,7 +278,18 @@
         private showTsTimer = 0;
 
         private get ts() {
-            return this.data && formatTime(this.data.ts);
+            return this.data && formatTime(this.data.ts, { mini: true });
+        }
+
+        private get showWithdraw() {
+            return (
+                this.isMyMessage &&
+                this.canWithdraw &&
+                this.isWithdraw &&
+                !this.isWithdrawMessage &&
+                !this.isQuestionAnswerMessage &&
+                this.isChatMember
+            );
         }
 
         private get isSystemMessage() {
@@ -826,6 +830,10 @@
         &.right {
             right: 40px;
             left: unset;
+
+            &.offset {
+                right: 70px;
+            }
         }
     }
 </style>

utils/time/index.ts

@@ -146,6 +146,7 @@ function formatTime2ShortYearMonthDate(time: Date) {
 interface FormatOption {
     rule?: TimeFormatRule;
     short?: boolean;
+    mini?: boolean;
 }
 
 /**
@@ -198,7 +199,7 @@ export function formatTime(
         return "昨天 " + format2DetailTime(hour, t, option.rule);
     }
 
-    if (isIn6Days(t)) {
+    if (isIn6Days(t) && !option.mini) {
         if (option.short) {
             return `星期${getDayInWeek(t)}`;
         }