From 5a260fa271f09a4d02a506d8256217057275161e Mon Sep 17 00:00:00 2001 From: yiwenZhou <67539158+ywywZhou@users.noreply.github.com> Date: Wed, 29 May 2024 16:33:33 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BB=A3=E7=A0=81=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E6=A1=86=E6=A3=80=E6=B5=8B=E5=8F=98=E9=87=8F=E6=96=B9=E6=B3=95?= =?UTF-8?q?=E4=BC=98=E5=8C=96=20&&=20=20=E6=96=87=E6=9C=AC=E6=A1=86?= =?UTF-8?q?=E8=BE=93=E5=85=A5=E5=A4=A7=E9=87=8F=E5=86=85=E5=AE=B9=E6=97=B6?= =?UTF-8?q?=E5=8D=A1=E6=AD=BB=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D=20(#7473?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 代码编辑框检测变量方法优化 --bug=124737145 * fix: 文本框输入大量内容时卡死问题修复 #7464 # Reviewed, transaction id: 8903 --- .../common/RenderForm/tags/TagCodeEditor.vue | 30 ++++++++++++------- .../common/RenderForm/tags/TagInput.vue | 24 ++++++++++++--- .../common/RenderForm/tags/TagTextarea.vue | 25 +++++++++++++--- 3 files changed, 61 insertions(+), 18 deletions(-) diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagCodeEditor.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagCodeEditor.vue index 2e20923096..b4b4960bdf 100644 --- a/frontend/desktop/src/components/common/RenderForm/tags/TagCodeEditor.vue +++ b/frontend/desktop/src/components/common/RenderForm/tags/TagCodeEditor.vue @@ -160,20 +160,30 @@ setVariableTag (value, valueUpdate) { const { attrs } = this.scheme if (attrs.variable_render !== false) return - const regex = /\${[a-zA-Z_]\w*}/ const rows = value.split('\n') // 获取光标所在行 const { monacoInstance } = this.$refs.tagCodeEditor?.$refs.codeEditor || {} const { lineNumber } = monacoInstance?.getPosition() || {} - if (regex.test(value)) { - const matchMap = rows.reduce((acc, cur, idx) => { - const variables = cur.match(/\${[a-zA-Z_]\w*}/g) || [] - const matchList = variables.filter(item => this.constantArr.includes(item)) - if (matchList.length) { - acc[idx + 1] = matchList - } - return acc - }, {}) + // 判读变量是否存在 + let isExist = false + const matchMap = rows.reduce((acc, cur, idx) => { + const matchList = [] + cur.replace(/\${([^${}]+)}/g, (match, $0) => { + isExist = this.constantArr.some(item => { + const varText = item.slice(2, -1) + if ($0.indexOf(varText) > -1 && new RegExp(`^(.*\\W|\\W)?${varText}(\\W|\\W.*)?$`).test($0)) { + matchList.push(match) + return true + } + return false + }) + }) + if (matchList.length) { + acc[idx + 1] = matchList + } + return acc + }, {}) + if (isExist) { // 脚本内容存在全局变量 this.globalVarLength = Object.values(matchMap).flat().length // 数据更新处理逻辑 diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue index f22a9f7d29..22628b9f7d 100644 --- a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue +++ b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue @@ -28,7 +28,7 @@ ref="input" class="div-input" :class="{ - 'input-before': !input.value + 'input-before': !input.value && !pasteIng }" :contenteditable="!isDisabled" :data-placeholder="placeholder" @@ -114,7 +114,8 @@ varList: [], varListPosition: '', hoverKey: '', - selection: {} + selection: {}, + pasteIng: false // 粘贴中 } }, computed: { @@ -314,6 +315,7 @@ }, // 文本框输入 handleInputChange (e, selection) { + if (this.pasteIng) return if (!selection) { // 实时更新 this.updateInputValue() @@ -512,7 +514,7 @@ this.emit_event(this.tagCode, 'blur', this.value) this.$emit('blur', this.value) }, - handlePaste (e) { + async handlePaste (e) { event.preventDefault() let text = '' const clp = (e.originalEvent || e).clipboardData @@ -531,7 +533,21 @@ } else { text = clp.getData('text/plain') || '' text = text.replace(/(\n|\r|\r\n)/g, ' ') - text && document.execCommand('insertText', false, text) + this.pasteIng = true + await this.insertTextAsync(text) + this.pasteIng = false + this.handleInputChange(e, false) + } + }, + async insertTextAsync (text) { + const chunkSize = 1000 + for (let i = 0; i < text.length; i += chunkSize) { + const part = text.slice(i, i + chunkSize) + // 创建一个Promise用于管理setTimeout的异步行为 + await new Promise((resolve) => setTimeout(() => { + document.execCommand('insertText', false, part) + resolve() + }, 0)) } } } diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue index 23eb153580..b792a2995c 100644 --- a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue +++ b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue @@ -18,7 +18,7 @@ ref="input" class="div-input" :class="{ - 'input-before': !input.value + 'input-before': !input.value && !pasteIng }" :contenteditable="!isDisabled" :data-placeholder="placeholder" @@ -100,7 +100,8 @@ varListPosition: '', hoverKey: '', selection: {}, - lastEditRange: null + lastEditRange: null, + pasteIng: false // 粘贴中 } }, computed: { @@ -267,6 +268,7 @@ }, // 文本框输入 handleInputChange (e, updateForm = true) { + if (this.pasteIng) return if (updateForm) { // 实时更新 this.updateInputValue() @@ -513,7 +515,7 @@ this.emit_event(this.tagCode, 'blur', this.value) this.$emit('blur', this.value) }, - handlePaste (e) { + async handlePaste (e) { event.preventDefault() let text = '' const clp = (e.originalEvent || e).clipboardData @@ -532,7 +534,21 @@ } else { text = clp.getData('text/plain') || '' text = text.replace(/(\r|\r\n)/g, '') - text && document.execCommand('insertText', false, text) + this.pasteIng = true + await this.insertTextAsync(text) + this.pasteIng = false + this.handleInputChange(e, false) + } + }, + async insertTextAsync (text) { + const chunkSize = 1000 + for (let i = 0; i < text.length; i += chunkSize) { + const part = text.slice(i, i + chunkSize) + // 创建一个Promise用于管理setTimeout的异步行为 + await new Promise((resolve) => setTimeout(() => { + document.execCommand('insertText', false, part) + resolve() + }, 0)) } } } @@ -605,6 +621,7 @@ } .div-input { min-height: 36px; + max-height: 300px; line-height: 18px; color: #63656e; outline: 0;