From 4957f32d0691c06401a9a4a8f6410d39f7ac28ed Mon Sep 17 00:00:00 2001 From: kuaifan Date: Fri, 9 Jun 2023 16:05:00 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E6=B6=88=E6=81=AF=E8=BE=93=E5=85=A5?= =?UTF-8?q?=E6=A1=86=E6=94=AF=E6=8C=81=E5=85=A8=E5=B1=8F=E8=BE=93=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../manage/components/ChatInput/index.vue | 175 ++++++++++++------ .../sass/pages/components/chat-input.scss | 46 +++++ 2 files changed, 165 insertions(+), 56 deletions(-) diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue index 74305fada..6a4888f24 100755 --- a/resources/assets/js/pages/manage/components/ChatInput/index.vue +++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue @@ -93,6 +93,10 @@ {{$L('上传文件')}} +
+ + {{$L('全屏输入')}} +
{{$L('匿名消息')}} @@ -165,6 +169,22 @@
{{$L(touchLimitY ? '松开取消' : '向上滑动取消')}}
+ + +
+
+
+
+
+ + @@ -278,6 +298,9 @@ export default { isSpecVersion: this.checkIOSVersion(), timer: null, + + fullInput: false, + fullQuill: null, }; }, mounted() { @@ -641,61 +664,7 @@ export default { } } }, - mention: { - allowedChars: /^\S*$/, - mentionDenotationChars: ["@", "#", "~"], - defaultMenuOrientation: this.defaultMenuOrientation, - isolateCharacter: true, - positioningStrategy: 'fixed', - renderItem: (data) => { - if (data.disabled === true) { - return `
${data.value}
`; - } - if (data.id === 0) { - return `
@
${data.value}
${data.tip}
`; - } - if (data.avatar) { - const botHtml = data.bot ? `
` : '' - return `
${botHtml}
${data.value}
`; - } - if (data.tip) { - return `
${data.value}
${data.tip}
`; - } - return `
${data.value}
`; - }, - renderLoading: () => { - return "Loading..."; - }, - source: (searchTerm, renderList, mentionChar) => { - const mentionName = mentionChar == "@" ? 'user-mention' : (mentionChar == "#" ? 'task-mention' : 'file-mention'); - const containers = document.getElementsByClassName("ql-mention-list-container"); - for (let i = 0; i < containers.length; i++) { - containers[i].classList.remove("user-mention"); - containers[i].classList.remove("task-mention"); - containers[i].classList.remove("file-mention"); - containers[i].classList.add(mentionName); - $A.scrollPreventThrough(containers[i]); - } - let mentionSourceCache = null; - this.getMentionSource(mentionChar, searchTerm, array => { - const values = []; - array.some(item => { - let list = item.list; - if (searchTerm) { - list = list.filter(({value}) => $A.strExists(value, searchTerm)); - } - if (list.length > 0) { - item.label && values.push(...item.label) - values.push(...list) - } - }) - if ($A.jsonStringify(values.map(({id}) => id)) !== mentionSourceCache) { - mentionSourceCache = $A.jsonStringify(values.map(({id}) => id)) - renderList(values, searchTerm); - } - }) - } - } + mention: this.quillMention() } }, this.options) @@ -730,7 +699,7 @@ export default { if (this.maxlength > 0 && this.quill.getLength() > this.maxlength) { this.quill.deleteText(this.maxlength, this.quill.getLength()); } - let html = this.$refs.editor.children[0].innerHTML + let html = this.$refs.editor.firstChild.innerHTML html = html.replace(/^(

\s*<\/p>)+|(

\s*<\/p>)+$/gi, '') html = html.replace(/^(

<\/p>)+|(

<\/p>)+$/gi, '') this.updateEmojiQuick(html) @@ -808,6 +777,64 @@ export default { } }, + quillMention() { + return { + allowedChars: /^\S*$/, + mentionDenotationChars: ["@", "#", "~"], + defaultMenuOrientation: this.defaultMenuOrientation, + isolateCharacter: true, + positioningStrategy: 'fixed', + renderItem: (data) => { + if (data.disabled === true) { + return `

${data.value}
`; + } + if (data.id === 0) { + return `
@
${data.value}
${data.tip}
`; + } + if (data.avatar) { + const botHtml = data.bot ? `
` : '' + return `
${botHtml}
${data.value}
`; + } + if (data.tip) { + return `
${data.value}
${data.tip}
`; + } + return `
${data.value}
`; + }, + renderLoading: () => { + return "Loading..."; + }, + source: (searchTerm, renderList, mentionChar) => { + const mentionName = mentionChar == "@" ? 'user-mention' : (mentionChar == "#" ? 'task-mention' : 'file-mention'); + const containers = document.getElementsByClassName("ql-mention-list-container"); + for (let i = 0; i < containers.length; i++) { + containers[i].classList.remove("user-mention"); + containers[i].classList.remove("task-mention"); + containers[i].classList.remove("file-mention"); + containers[i].classList.add(mentionName); + $A.scrollPreventThrough(containers[i]); + } + let mentionSourceCache = null; + this.getMentionSource(mentionChar, searchTerm, array => { + const values = []; + array.some(item => { + let list = item.list; + if (searchTerm) { + list = list.filter(({value}) => $A.strExists(value, searchTerm)); + } + if (list.length > 0) { + item.label && values.push(...item.label) + values.push(...list) + } + }) + if ($A.jsonStringify(values.map(({id}) => id)) !== mentionSourceCache) { + mentionSourceCache = $A.jsonStringify(values.map(({id}) => id)) + renderList(values, searchTerm); + } + }) + } + } + }, + updateEmojiQuick(text) { if (!this.isFocus || !text) { this.emojiQuickShow = false @@ -1099,6 +1126,10 @@ export default { }); break; + case 'full': + this.onFullInput() + break; + case 'image': case 'file': case 'call': @@ -1108,6 +1139,38 @@ export default { } }, + onFullInput() { + if (this.disabled) { + return + } + this.fullInput = !this.fullInput; + // + if (this.fullInput) { + this.$nextTick(_ => { + this.fullQuill = new Quill(this.$refs.editorFull, Object.assign({ + theme: 'bubble', + readOnly: false, + placeholder: this.placeholder, + modules: { + toolbar: [ + ['bold', 'strike', 'italic', 'underline', {'list': 'ordered'}, {'list': 'bullet'}, 'blockquote', 'code-block'] + ], + mention: this.quillMention() + } + }, this.options)) + this.fullQuill.enable(true) + this.$refs.editorFull.firstChild.innerHTML = this.$refs.editor.firstChild.innerHTML + }) + } + }, + + onFullBeforeClose() { + return new Promise(resolve => { + this.$refs.editor.firstChild.innerHTML = this.$refs.editorFull.firstChild.innerHTML + resolve() + }) + }, + onMoreVisibleChange(v) { this.showMore = v; }, diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss index b9dd4bf60..ee19c0ff1 100755 --- a/resources/assets/sass/pages/components/chat-input.scss +++ b/resources/assets/sass/pages/components/chat-input.scss @@ -605,6 +605,52 @@ } } +.chat-input-full-input { + .ivu-modal { + .ivu-modal-content { + margin-top: 46px; + border-top-left-radius: 18px !important; + border-top-right-radius: 18px !important; + .ivu-modal-body { + overflow: visible; + padding: 24px !important; + } + .ivu-modal-close { + > i { + top: 3px; + right: 2px; + font-size: 24px; + width: 34px; + height: 34px; + display: flex; + align-items: center; + justify-content: center; + background-color: #ffffff; + border-radius: 50%; + color: #999; + } + } + } + } + + .chat-input-box { + height: 100%; + + .chat-input-wrapper { + height: 100%; + + .ql-container { + height: 100%; + width: 100%; + + .ql-editor { + max-height: none; + } + } + } + } +} + .ql-mention-list-container { width: auto; min-width: 220px;