perf: 优化输入框自动高度

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

@@ -36,10 +36,12 @@
             <div
                 ref="editor"
                 class="no-dark-content"
-                :style="editorStyle"
                 @click.stop="onClickEditor"
                 @paste="handlePaste"></div>
 
+            <!-- 工具栏占位 -->
+            <div class="chat-space"></div>
+
             <!-- 工具栏 -->
             <ul class="chat-toolbar" @click.stop>
                 <!-- 桌面端表情（漂浮） -->
@@ -293,10 +295,8 @@ export default {
             emojiQuickKey: '',
             emojiQuickItems: [],
 
-            observer: null,
+            wrapperObserver: null,
-            wrapperWidth: 0,
             wrapperHeight: 0,
-            editorHeight: 0,
 
             recordReady: false,
             recordRec: null,
@@ -330,18 +330,8 @@ export default {
     mounted() {
         this.init();
         //
-        this.observer = new ResizeObserver(entries => {
+        this.wrapperObserver = new ResizeObserver(this.onResizeEvent)
-            entries.some(({target, contentRect}) => {
+        this.wrapperObserver.observe(this.$el);
-                if (target === this.$el) {
-                    this.wrapperWidth = contentRect.width;
-                    this.wrapperHeight = contentRect.height;
-                } else if (target === this.$refs.editor) {
-                    this.editorHeight = contentRect.height;
-                }
-            })
-        });
-        this.observer.observe(this.$el);
-        this.observer.observe(this.$refs.editor);
         //
         this.recordInter = setInterval(_ => {
             if (this.recordState === 'ing') {
@@ -374,9 +364,9 @@ export default {
         if (this.recordRec) {
             this.recordRec = null
         }
-        if (this.observer) {
+        if (this.wrapperObserver) {
-            this.observer.disconnect()
+            this.wrapperObserver.disconnect()
-            this.observer = null
+            this.wrapperObserver = null
         }
         if (this.recordInter) {
             clearInterval(this.recordInter)
@@ -410,17 +400,6 @@ export default {
             return this.dialogData.type === 'user' && !this.dialogData.bot
         },
 
-        editorStyle() {
-            const {wrapperWidth, editorHeight} = this;
-            const style = {};
-            if (wrapperWidth > 0
-                && editorHeight > 0
-                && (wrapperWidth < 280 || editorHeight > 40)) {
-                style.width = '100%';
-            }
-            return style;
-        },
-
         recordTransferStyle() {
             const {windowScrollY} = this;
             return windowScrollY > 0 ? {
@@ -840,6 +819,14 @@ export default {
             }
         },
 
+        onResizeEvent(entries) {
+            entries.some(({target, contentRect}) => {
+                if (target === this.$el) {
+                    this.wrapperHeight = contentRect.height;
+                }
+            })
+        },
+
         quillMention() {
             return {
                 allowedChars: /^\S*$/,
@@ -1286,10 +1273,6 @@ export default {
             })
         },
 
-        onMoreVisibleChange(v) {
-            this.showMore = v;
-        },
-
         setQuote(id, type = 'reply') {
             this.dialogId > 0 && this.$store.dispatch("saveDialog", {
                 id: this.dialogId,

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

@@ -696,6 +696,8 @@ export default {
             approveDetailsShow: false,
             approvaUserStatus: '',
 
+            footerObserver: null,
+
             unreadMsgId: 0,                     // 最早未读消息id
             positionLoad: 0,                    // 定位跳转加载中
             msgPreparedStatus: false,           // 消息准备完成
@@ -718,6 +720,10 @@ export default {
             this.msgSubscribe.unsubscribe();
             this.msgSubscribe = null;
         }
+        if (this.footerObserver) {
+            this.footerObserver.disconnect()
+            this.footerObserver = null
+        }
         document.removeEventListener('selectionchange', this.onSelectionchange);
     },
 
@@ -1096,6 +1102,22 @@ export default {
             immediate: true
         },
 
+        isReady: {
+            handler(ready) {
+                if (!ready) {
+                    return
+                }
+                this.$nextTick(_ => {
+                    if (!this.$refs.footer && this.footerObserver) {
+                        return
+                    }
+                    this.footerObserver = new ResizeObserver(this.onResizeEvent)
+                    this.footerObserver.observe(this.$refs.footer);
+                })
+            },
+            immediate: true
+        },
+
         msgType() {
             this.getMsgs({
                 dialog_id: this.dialogId,
@@ -1773,7 +1795,7 @@ export default {
 
         onTouchEnd() {
             if (typeof this.wrapperStart === 'number' && $A.isIos()) {
-                $A.scrollToView(this.$refs.footer)
+                $A.scrollToView(this.$refs.footer, false)
             }
         },
 
@@ -1934,6 +1956,7 @@ export default {
         },
 
         onHeightChange({newVal, oldVal}) {
+            this.onFooterResize();
             const diff = newVal - oldVal;
             if (diff !== 0) {
                 const {offset, tail} = this.scrollInfo()
@@ -1943,6 +1966,22 @@ export default {
             }
         },
 
+        onResizeEvent(entries) {
+            entries.some(({target}) => {
+                if (target === this.$refs.footer) {
+                    this.onFooterResize()
+                }
+            })
+        },
+
+        onFooterResize() {
+            const footer = this.$refs.footer;
+            const marginSize = parseInt($A.css(footer, 'marginTop')) + parseInt($A.css(footer, 'marginBottom'))
+            if (this.$refs.scroller) {
+                this.$refs.scroller.$el.style.marginBottom = `${footer.getBoundingClientRect().height + marginSize}px`;
+            }
+        },
+
         onActive() {
             this.$emit("on-active");
         },

resources/assets/sass/pages/components/chat-input.scss

@@ -141,6 +141,10 @@
                 margin: 4px 7px;
                 line-height: 22px;
 
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+
                 img {
                     max-width: 150px;
                     max-height: 150px;
@@ -210,8 +214,16 @@
             }
         }
 
-        .chat-toolbar {
+        .chat-space {
             float: right;
+            width: 170px;
+            height: 30px;
+        }
+
+        .chat-toolbar {
+            position: absolute;
+            right: 2px;
+            bottom: 8px;
             display: flex;
             align-items: center;
             justify-content: flex-end;

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

@@ -1438,7 +1438,11 @@
     }
 
     .dialog-footer {
-        position: relative;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
         padding: 0 24px;
         margin-bottom: 16px;
 

resources/assets/sass/pages/components/task-detail.scss

@@ -629,6 +629,8 @@
                         padding: 0 4px 0 6px;
                         background-color: #F4F5F7;
                         .chat-toolbar {
+                            right: 4px;
+                            bottom: 0;
                             > li {
                                 &.chat-record-recwave {
                                     background-color: #F4F5F7;