perf: 优化消息

resources/assets/js/pages/manage/components/DialogView/index.vue

@@ -26,7 +26,7 @@
             <!--详情-->
             <div ref="content" class="dialog-content" :class="contentClass">
                 <!--文本-->
-                <TextMsg v-if="msgData.type === 'text'" :msgId="msgData.id" :msg="msgData.msg" @viewText="viewText"/>
+                <TextMsg v-if="msgData.type === 'text'" :msgId="msgData.id" :msg="msgData.msg" :createdAt="msgData.created_at" @viewText="viewText"/>
                 <!--长文本-->
                 <LongTextMsg v-else-if="msgData.type === 'longtext'" :msgId="msgData.id" :msg="msgData.msg" @viewText="viewText" @downFile="downFile"/>
                 <!--文件-->

resources/assets/js/pages/manage/components/DialogView/text.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="content-text no-dark-content">
-        <DialogMarkdown v-if="msg.type === 'md'" @click="viewText" :text="msg.text"/>
+        <div v-if="isOverdueMsg" class="content-overdue">{{$L('此消息已经过期')}}</div>
+        <DialogMarkdown v-else-if="msg.type === 'md'" @click="viewText" :text="msg.text"/>
         <pre v-else @click="viewText" v-html="$A.formatTextMsg(msg.text, userId)"></pre>
 
         <template v-if="translation">
@@ -24,6 +25,7 @@ export default {
     props: {
         msgId: Number,
         msg: Object,
+        createdAt: String,
     },
     computed: {
         ...mapState(['cacheTranslations', 'cacheTranslationLanguage']),
@@ -34,6 +36,10 @@ export default {
             });
             return translation ? translation : null;
         },
+
+        isOverdueMsg({msg, createdAt}) {
+            return msg.text === '...' && $A.daytz(createdAt).isBefore($A.daytz().subtract(10, 'minute'));
+        },
     },
     methods: {
         viewText(e) {

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -1437,6 +1437,10 @@
                             }
                         }
 
+                        .content-overdue {
+                            opacity: 0.6;
+                        }
+
                         .content-divider {
                             width: 100%;
                             display: flex;