perf: 优化代码

resources/assets/js/functions/web.js

@@ -683,11 +683,13 @@ import {MarkdownPreview} from "../store/markdown";
             } else {
                 text = text.replace(/<img\s+class="browse"[^>]*?>/g, `[${$A.L('图片')}]`)
             }
-            text = text.replace(/<[^>]+>/g,"")
+            text = text
-            text = text.replace(/&nbsp;/g," ")
+                .replace(/<[^>]+>/g, "")
-            text = text.replace(/&amp;/g,"&")
+                .replace(/&nbsp;/g, " ")
-            text = text.replace(/&lt;/g,"<")
+                .replace(/&quot;/g, "\"")
-            text = text.replace(/&gt;/g,">")
+                .replace(/&amp;/g, "&")
+                .replace(/&lt;/g, "<")
+                .replace(/&gt;/g, ">")
             if (imgClassName) {
                 text = text.replace(/\[image:(.*?)\]/g, `<img class="${imgClassName}" src="$1">`)
                 text = text.replace(/\{\{RemoteURL\}\}/g, this.apiUrl('../'))

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

@@ -28,7 +28,7 @@
             <div v-if="quoteData" class="chat-quote">
                 <div v-if="quoteUpdate" class="quote-label">{{$L('编辑消息')}}</div>
                 <UserAvatar v-else :userid="quoteData.userid" :show-icon="false" :show-name="true"/>
-                <div class="quote-desc">{{$A.getMsgSimpleDesc(quoteData)}}</div>
+                <div class="quote-desc no-dark-content">{{$A.getMsgSimpleDesc(quoteData)}}</div>
                 <i class="taskfont" @click.stop="cancelQuote">&#xe6e5;</i>
             </div>
 

resources/assets/js/pages/manage/components/DialogItem.vue

@@ -100,10 +100,6 @@ export default {
             type: Number,
             default: 0
         },
-        scrollIng: {
-            type: Number,
-            default: 0
-        },
         readEnabled: {
             type: Boolean,
             default: false
@@ -154,9 +150,6 @@ export default {
         windowActive() {
             this.msgRead();
         },
-        scrollIng() {
-            this.msgRead();
-        },
     },
 
     methods: {

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -156,9 +156,9 @@
             :data-component="msgItem"
 
             :item-class-add="itemClassAdd"
-            :extra-props="{dialogData, operateVisible, operateItem, isMyDialog, msgId, unreadMsgId, scrollIng, readEnabled}"
+            :extra-props="{dialogData, operateVisible, operateItem, isMyDialog, msgId, unreadMsgId, readEnabled}"
             :estimate-size="dialogData.type=='group' ? 105 : 77"
-            :keeps="25"
+            :keeps="keeps"
             :disabled="scrollDisabled"
             @activity="onActivity"
             @scroll="onScroll"
@@ -631,6 +631,7 @@ export default {
 
     data() {
         return {
+            keeps: 25,
             msgItem: DialogItem,
             msgText: '',
             msgNew: 0,
@@ -721,19 +722,17 @@ export default {
             scrollDirection: null,
             scrollAction: 0,
             scrollTmp: 0,
-            scrollIng: 0,
 
             approveDetails: {id: 0},
             approveDetailsShow: false,
             approvaUserStatus: '',
 
-            footerObserver: null,
+            observers: [],
 
             unreadMsgId: 0,                     // 最早未读消息id
             positionLoad: 0,                    // 定位跳转加载中
             positionShow: false,                // 定位跳转显示
             firstMsgLength: 0,                  // 首次加载消息数量
-            isFirstShowTag: false,              // 是否首次显示标签
             msgPreparedStatus: false,           // 消息准备完成
             listPreparedStatus: false,          // 消息准备完成
             selectedTextStatus: false,          // 是否选择文本
@@ -754,10 +753,9 @@ export default {
             this.msgSubscribe.unsubscribe();
             this.msgSubscribe = null;
         }
-        if (this.footerObserver) {
+        this.observers.forEach(({observer}) => observer.disconnect())
-            this.footerObserver.disconnect()
+        this.observers = []
-            this.footerObserver = null
+        //
-        }
         document.removeEventListener('selectionchange', this.onSelectionchange);
     },
 
@@ -779,6 +777,7 @@ export default {
             'cacheEmojis',
 
             'readReqNum',
+            'readReqLoad',
             'keyboardType',
             'keyboardHeight',
             'safeAreaBottom'
@@ -1089,27 +1088,24 @@ export default {
                 if (dialog_id) {
                     this.msgNew = 0
                     this.msgType = ''
-                    this.searchShow = false
                     this.unreadMsgId = 0
+                    this.searchShow = false
                     this.positionShow = false
-                    this.firstMsgLength = this.allMsgList.length || 1
                     this.listPreparedStatus = false
                     this.scrollToBottomAndRefresh = false
+                    this.firstMsgLength = Math.min(this.keeps, this.allMsgList.length || 1)
+                    this.allMsgs = this.allMsgList
                     //
-                    if (this.firstMsgLength > 0) {
-                        this.allMsgs = this.allMsgList
-                        requestAnimationFrame(this.onToBottom)
-                    }
                     this.getMsgs({
                         dialog_id,
                         msg_id: this.msgId,
                         msg_type: this.msgType,
                     }).then(_ => {
-                        this.openId = dialog_id;
+                        this.openId = dialog_id
-                        setTimeout(this.onSearchMsgId, 100)
+                        this.positionShow = this.readReqLoad === 0
-                    }).catch(_ => {}).finally(_ => {
                         this.listPreparedStatus = true
-                    });
+                        setTimeout(this.onSearchMsgId, 100)
+                    }).catch(_ => {});
                     //
                     this.$store.dispatch('saveInDialog', {
                         uid: this._uid,
@@ -1145,11 +1141,20 @@ export default {
                     return
                 }
                 this.$nextTick(_ => {
-                    if (!this.$refs.footer && this.footerObserver) {
+                    if (this.$refs.footer) {
-                        return
+                        if (!this.observers.find(({key}) => key === 'footer')) {
+                            const footerObserver = new ResizeObserver(this.onResizeEvent)
+                            footerObserver.observe(this.$refs.footer);
+                            this.observers.push({key: 'footer', observer: footerObserver})
+                        }
+                    }
+                    if (this.$refs.scroller) {
+                        if (!this.observers.find(({key}) => key === 'scroller')) {
+                            const scrollerObserver = new ResizeObserver(this.onResizeEvent)
+                            scrollerObserver.observe(this.$refs.scroller.$el);
+                            this.observers.push({key: 'scroller', observer: scrollerObserver})
+                        }
                     }
-                    this.footerObserver = new ResizeObserver(this.onResizeEvent)
-                    this.footerObserver.observe(this.$refs.footer);
                 })
             },
             immediate: true
@@ -1313,15 +1318,6 @@ export default {
             }
         },
 
-        footerPaddingBottom(val) {
-            if (val) {
-                const {tail} = this.scrollInfo();
-                if (tail <= 55) {
-                    requestAnimationFrame(this.onToBottom)
-                }
-            }
-        },
-
         positionMsg() {
             const {unread, position_msgs} = this.dialogData
             if (!$A.isArray(position_msgs) || unread < 2) {
@@ -1333,16 +1329,6 @@ export default {
             }
         },
 
-        tagShow(val) {
-            if (!this.isFirstShowTag && val) {
-                this.isFirstShowTag = true
-                const {tail} = this.scrollInfo();
-                if (tail <= 55) {
-                    requestAnimationFrame(this.onToBottom)
-                }
-            }
-        },
-
         readReqNum() {
             this.positionShow = true
         },
@@ -2036,6 +2022,8 @@ export default {
             entries.some(({target}) => {
                 if (target === this.$refs.footer) {
                     this.onFooterResize()
+                } else if (target === this.$refs.scroller?.$el) {
+                    this.onScrollerResize()
                 }
             })
         },
@@ -2051,6 +2039,16 @@ export default {
             }
         },
 
+        onScrollerResize() {
+            if (!this.$refs.scroller) {
+                return
+            }
+            const {tail} = this.scrollInfo();
+            if (tail <= 55) {
+                requestAnimationFrame(this.onToBottom)
+            }
+        },
+
         onActive() {
             this.$emit("on-active");
         },
@@ -2467,9 +2465,6 @@ export default {
             this.scrollAction = event.target.scrollTop;
             this.scrollDirection = this.scrollTmp <= this.scrollAction ? 'down' : 'up';
             setTimeout(_ => this.scrollTmp = this.scrollAction, 0);
-            //
-            this.scrollIng++;
-            setTimeout(_=> this.scrollIng--, 100);
         },
 
         onRange(range) {
@@ -2689,12 +2684,8 @@ export default {
         },
 
         onReply(type) {
-            const {tail} = this.scrollInfo()
             this.setQuote(this.operateItem.id, type)
             this.inputFocus()
-            if (tail <= 55) {
-                requestAnimationFrame(this.onToBottom)
-            }
         },
 
         onUpdate() {

resources/assets/js/store/actions.js

@@ -3005,6 +3005,7 @@ export default {
                 return
             }
             //
+            state.readReqLoad++
             dispatch("call", {
                 url: 'dialog/msg/read',
                 data: {
@@ -3017,6 +3018,7 @@ export default {
                     state.readWaitData[id] = id;
                 })
             }).finally(_ => {
+                state.readReqLoad--
                 state.readReqNum++
             });
         }, 50);

resources/assets/js/store/state.js

@@ -124,6 +124,7 @@ export default {
     messengerSearchKey: {dialog: '', contacts: ''},
 
     // 阅读消息
+    readReqLoad: 0,
     readReqNum: 0,
     readTimeout: null,
     readWaitData: {},

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

@@ -1449,7 +1449,7 @@
         opacity: 0;
         transform: translateX(100%);
         animation: position-in-animation 200ms ease-out forwards;
-        animation-delay: 100ms;
+        animation-delay: 300ms;
 
         .position-label {
             display: flex;