fix: 代码编辑框检测变量方法优化 && 文本框输入大量内容时卡死问题修复 (#7473)

* fix: 代码编辑框检测变量方法优化 --bug=124737145

* fix: 文本框输入大量内容时卡死问题修复 #7464
# Reviewed, transaction id: 8903

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
                     // 数据更新处理逻辑

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))
                 }
             }
         }

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;