From 7df9c378500a7cc145d64431bc263880ef062602 Mon Sep 17 00:00:00 2001 From: kuaifan Date: Mon, 28 Oct 2024 19:27:10 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BC=9A=E8=AF=9D?= =?UTF-8?q?=E5=85=A8=E5=B1=8F=E8=BE=93=E5=85=A5=E5=8A=9F=E8=83=BD=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E5=9B=BA=E5=AE=9A=E4=B8=8B=E6=96=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/manage/components/ChatInput/icon.js | 50 ---------- .../manage/components/ChatInput/index.vue | 92 +++++++++++++++++-- .../sass/pages/components/chat-input.scss | 41 +++------ 3 files changed, 97 insertions(+), 86 deletions(-) delete mode 100644 resources/assets/js/pages/manage/components/ChatInput/icon.js diff --git a/resources/assets/js/pages/manage/components/ChatInput/icon.js b/resources/assets/js/pages/manage/components/ChatInput/icon.js deleted file mode 100644 index 281a32108..000000000 --- a/resources/assets/js/pages/manage/components/ChatInput/icon.js +++ /dev/null @@ -1,50 +0,0 @@ - -const fullToolIcons = [ - { - label: 'bold', - type: '', - svg: '' - }, - { - label: 'strike', - type: '', - svg: '' - }, - { - label: 'italic', - type: '', - svg: '' - }, - { - label: 'underline', - type: '', - svg: '' - }, - { - label: 'blockquote', - type: '', - svg: '' - }, - { - label: 'link', - type: '', - svg: '' - }, - { - label: 'list', - type: 'ordered', - svg: '' - }, - { - label: 'list', - type: 'bullet', - svg: '' - }, - { - label: 'list', - type: 'unchecked', - svg: '' - }, -] - -export {fullToolIcons} diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue index da3b2b6e6..5246d9ca2 100755 --- a/resources/assets/js/pages/manage/components/ChatInput/index.vue +++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue @@ -202,7 +202,7 @@ class-name="chat-input-full-input" footer-hide fullscreen> -
+
@@ -210,8 +210,11 @@
  • + @touchstart.prevent="" + @touchend.prevent="onFullMenu(item.label, item.type)" + @click="onFullMenu(item.label, item.type)"> + +
    @@ -230,7 +233,6 @@ import TransferDom from "../../../../directives/transfer-dom"; import clickoutside from "../../../../directives/clickoutside"; import longpress from "../../../../directives/longpress"; import {inputLoadAdd, inputLoadIsLast, inputLoadRemove} from "./one"; -import {fullToolIcons} from "./icon"; import {isMarkdownFormat} from "../../../../store/markdown"; import {Store} from "le5le-store"; @@ -354,7 +356,55 @@ export default { fullInput: false, fullQuill: null, fullSelection: {index: 0, length: 0}, - fullTools: fullToolIcons, + fullTools: [ + { + label: 'bold', + type: '', + icon: '', + }, + { + label: 'strike', + type: '', + icon: '', + }, + { + label: 'italic', + type: '', + icon: '', + }, + { + label: 'underline', + type: '', + icon: '', + }, + { + label: 'blockquote', + type: '', + icon: '', + }, + { + label: 'link', + type: '', + icon: '', + }, + { + label: 'list', + type: 'ordered', + icon: '', + }, + { + label: 'list', + type: 'bullet', + icon: '', + }, + { + label: 'list', + type: 'unchecked', + icon: '', + }, + ], + + viewportHeight: 0, }; }, created() { @@ -363,6 +413,10 @@ export default { mounted() { this.init(); // + if (window.visualViewport) { + window.visualViewport.addEventListener('resize', this.visualViewportResize); + } + // this.recordInter = setInterval(_ => { if (this.recordState === 'ing') { // 录音中，但录音时长不增加则取消录音 @@ -399,6 +453,9 @@ export default { if (this.recordInter) { clearInterval(this.recordInter) } + if (window.visualViewport) { + window.visualViewport.removeEventListener('resize', this.visualViewportResize); + } }, computed: { ...mapState([ @@ -511,6 +568,14 @@ export default { } return null; }, + + chatInputBoxStyle({fullInput, viewportHeight}) { + const style = {} + if (fullInput && viewportHeight > 0) { + style.height = Math.max(100, viewportHeight - 70) + 'px' + } + return style + }, }, watch: { // Watch content change @@ -661,7 +726,13 @@ export default { fullInput(val) { this.quill?.enable(!val) - } + }, + + windowScrollY(val) { + if (this.fullInput && val > 0) { + window.scrollTo(0, 0) + } + }, }, methods: { init() { @@ -1304,6 +1375,9 @@ export default { this.fullQuill.on('selection-change', range => { this.fullSelection = range || {index: 0, length: 0}; }) + this.fullQuill.on('text-change', _ => { + this.fullSelection = this.fullQuill.getSelection() + }) this.fullQuill.enable(true) this.$refs.editorFull.firstChild.innerHTML = this.$refs.editor.firstChild.innerHTML this.$nextTick(_ => { @@ -1782,7 +1856,11 @@ export default { if (mention.isOpen) { mention.setMentionContainerPosition() } - } + }, + + visualViewportResize() { + this.viewportHeight = window.visualViewport?.height || 0; + }, } } diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss index f03da6efe..2a4e10239 100755 --- a/resources/assets/sass/pages/components/chat-input.scss +++ b/resources/assets/sass/pages/components/chat-input.scss @@ -769,10 +769,15 @@ display: flex; align-items: center; justify-content: center; + user-select: none; + margin: 0 -12px; &.activation { > li { opacity: 1; cursor: pointer; + &:active { + background-color: #eee; + } } } > li { @@ -784,39 +789,17 @@ justify-content: center; align-items: center; list-style: none; - opacity: 0.6; + opacity: 0.8; cursor: not-allowed; - > svg { - height: 20px; - .im-fill { - fill: #333; - } - .im-stroke { - fill: none; - stroke: #333; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 2; - } - .im-thin { - stroke-width: 1; - } - .im-even { - fill-rule: evenodd; - } - &:active { - .im-fill { - fill: #000; - } - .im-stroke { - stroke: #000; - } - } + border-radius: 8px; + > i { + color: #555; + font-size: 16px; } @media screen and (max-width: 320px) { height: 52px; - > svg { - height: 18px; + > i { + font-size: 14px; } } }