From c0fadde52729b5572ef8b0ab12fd0aa4dbb1baed Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 29 Apr 2022 16:06:55 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E8=AE=A1=E7=AE=97=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manage/components/ChatInput/index.vue     | 53 +++++++++++++------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index c93e9e602..ef8437d2c 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue
@@ -106,26 +106,59 @@ export default {
             _options: {},
 
             modeClass: '',
-            editorStyle: {},
 
             userList: null,
             taskList: null,
 
             showMore: false,
             showEmoji: false,
+
+            observer: null,
+            wrapperWidth: 0,
+            editorHeight: 0,
         };
     },
     mounted() {
         this.init();
+        //
+        this.observer = new ResizeObserver(entries => {
+            entries.some(({target, contentRect}) => {
+                if (target === this.$el) {
+                    this.wrapperWidth = contentRect.width;
+                } else if (target === this.$refs.editor) {
+                    this.editorHeight = contentRect.height;
+                }
+            })
+        });
+        this.observer.observe(this.$el);
+        this.observer.observe(this.$refs.editor);
     },
     beforeDestroy() {
-        this.quill = null
-        delete this.quill
+        if (this.quill) {
+            this.quill = null
+        }
+        if (this.observer) {
+            this.observer.disconnect()
+            this.observer = null
+        }
     },
     computed: {
         ...mapState(['cacheProjects', 'cacheTasks', 'cacheUserBasic', 'userId']),
 
         ...mapGetters(['dashboardTask', 'transforTasks']),
+
+        editorStyle() {
+            const {wrapperWidth, editorHeight} = this;
+            if (wrapperWidth > 0
+                && editorHeight > 0
+                && (wrapperWidth < 300 || editorHeight > 40)) {
+                return {
+                    width: '100%'
+                };
+            } else {
+                return {};
+            }
+        }
     },
     watch: {
         // Watch content change
@@ -167,7 +200,7 @@ export default {
             if (!val && this.$refs.moreTip) {
                 this.$refs.moreTip.updatePopper()
             }
-        }
+        },
     },
     methods: {
         init() {
@@ -281,12 +314,10 @@ export default {
                 this._content = html
                 this.$emit('input', this._content)
                 this.$emit('on-change', { html, text, quill })
-                this.calcEditStyle();
             })
 
             // Emit ready event
             this.$emit('on-ready', this.quill)
-            this.calcEditStyle();
         },
 
         focus() {
@@ -305,16 +336,6 @@ export default {
             this.$emit('on-send')
         },
 
-        calcEditStyle() {
-            if (this.$refs.editor.clientWidth < 120 || this.$refs.editor.clientHeight > 40) {
-                this.editorStyle = {
-                    width: '100%'
-                };
-            } else {
-                this.editorStyle = {};
-            }
-        },
-
         onSelectEmoji(item) {
             if (!this.quill) {
                 return;