From 6eabba96790b0a5a9b9cfa415b5f1386cd498d4e Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Wed, 20 Dec 2023 15:36:02 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E8=87=AA=E5=8A=A8=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manage/components/ChatInput/index.vue     | 51 +++++++------------
 .../pages/manage/components/DialogWrapper.vue | 41 ++++++++++++++-
 .../sass/pages/components/chat-input.scss     | 14 ++++-
 .../sass/pages/components/dialog-wrapper.scss |  6 ++-
 .../sass/pages/components/task-detail.scss    |  2 +
 5 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index 10756fb10..02860aa4c 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/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,
-            wrapperWidth: 0,
+            wrapperObserver: null,
             wrapperHeight: 0,
-            editorHeight: 0,
 
             recordReady: false,
             recordRec: null,
@@ -330,18 +330,8 @@ export default {
     mounted() {
         this.init();
         //
-        this.observer = new ResizeObserver(entries => {
-            entries.some(({target, contentRect}) => {
-                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.wrapperObserver = new ResizeObserver(this.onResizeEvent)
+        this.wrapperObserver.observe(this.$el);
         //
         this.recordInter = setInterval(_ => {
             if (this.recordState === 'ing') {
@@ -374,9 +364,9 @@ export default {
         if (this.recordRec) {
             this.recordRec = null
         }
-        if (this.observer) {
-            this.observer.disconnect()
-            this.observer = null
+        if (this.wrapperObserver) {
+            this.wrapperObserver.disconnect()
+            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,
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index 22e38b29e..97057e3ab 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/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");
         },
diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss
index fca649f73..6ec7915f9 100755
--- a/resources/assets/sass/pages/components/chat-input.scss
+++ b/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;
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index b0a0f8641..2bb1757b9 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/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;
 
diff --git a/resources/assets/sass/pages/components/task-detail.scss b/resources/assets/sass/pages/components/task-detail.scss
index 438c0c35b..816e031ba 100644
--- a/resources/assets/sass/pages/components/task-detail.scss
+++ b/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;