perf: 优化表情输入

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

@@ -7,7 +7,7 @@
                 </Input>
             </div>
             <ul class="scrollbar-overlay" :class="[type, 'no-dark-content']">
-                <li v-for="item in list" @click="onSelect(item)">
+                <li v-for="item in list" @click="onSelect($event, item)">
                     <img v-if="item.type === 'emoticon'" :src="item.src" :title="item.name" :alt="item.name"/>
                     <span v-else v-html="item.html" :title="item.name"></span>
                 </li>
@@ -158,8 +158,15 @@ export default {
             this.emoticonPath = path;
         },
 
-        onSelect(item) {
+        onSelect(event, item) {
-            this.$emit('on-select', item)
+            if (item.type === 'emoji') {
+                this.$emit('on-select', {
+                    type: 'emoji',
+                    text: event.target.innerText
+                })
+            } else {
+                this.$emit('on-select', item)
+            }
         }
     }
 }

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

@@ -452,6 +452,8 @@ export default {
                     const range = this.quill.selection.savedRange;
                     this.rangeIndex = range ? range.index : 0
                 }
+            } else if (this.rangeIndex > 0) {
+                this.quill.setSelection(this.rangeIndex)
             }
             if (!val && this.$refs.emojiTip) {
                 this.$refs.emojiTip.updatePopper()
@@ -948,14 +950,10 @@ export default {
                 return;
             }
             if (item.type === 'emoji') {
-                let element = document.createElement('span');
+                this.quill.insertText(this.rangeIndex, item.text);
-                element.innerHTML = item.html;
+                this.rangeIndex += item.text.length
-                this.quill.insertText(this.rangeIndex, element.innerHTML);
-                this.rangeIndex += element.innerHTML.length
-                element = null;
                 if (this.windowLarge) {
                     this.showEmoji = false;
-                    this.quill.setSelection(this.rangeIndex)
                 }
             } else if (item.type === 'emoticon') {
                 this.$emit('on-send', `<img class="emoticon" data-asset="${item.asset}" data-name="${item.name}" src="${item.src}"/>`)

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

@@ -390,6 +390,10 @@
                     -webkit-touch-callout: none;
                     transition: transform 0.3s;
                 }
+                &:active {
+                    background-color: #eeeeee;
+                    border-radius: 8px;
+                }
                 &:hover {
                     > img {
                         transform: scale(1.4);