diff --git a/src/frontend/src/components/ace-editor/index.vue b/src/frontend/src/components/ace-editor/index.vue
index a162280619..64f6ce3b51 100644
--- a/src/frontend/src/components/ace-editor/index.vue
+++ b/src/frontend/src/components/ace-editor/index.vue
@@ -158,7 +158,7 @@
         SQL: 'sql',
     };
     const LOCAL_STORAGE_KEY = 'ace_editor_history';
-    
+
     const escapeHTML = str => str.replace(/&/g, '&').replace(/"/g, '"')
         .replace(/'/g, ''')
         .replace(/</g, '&#60;');
@@ -167,7 +167,7 @@
         temp.value = value;
         return temp.value;
     };
-    
+
     export default {
         name: 'AceEditor',
         components: {
@@ -382,6 +382,7 @@
         },
         beforeDestroy () {
             this.handleExitFullScreen();
+            this.$store.commit('setScriptCheckError', null);
         },
         mounted () {
             this.initEditor();
@@ -420,7 +421,7 @@
                         return result;
                     }, {});
                     this.defaultScriptMap = Object.assign({}, DefaultScript, customScriptMap);
-                        
+
                     // 只读或有传入值默认脚本使用prop.value
                     // 其它情况使用脚本编辑器提供的默认值
                     this.content = this.readonly || this.value
@@ -457,7 +458,7 @@
                 editor.setShowPrintMargin(false);
                 editor.$blockScrolling = Infinity;
                 editor.setReadOnly(this.readonly);
-                
+
                 editor.on('change', () => {
                     this.content = editor.getValue();
                     const content = Base64.encode(this.content);
@@ -479,12 +480,12 @@
                 });
                 // 先保存 editor 在设置 value
                 this.editor = editor;
-                
+
                 this.$once('hook:beforeDestroy', () => {
                     editor.destroy();
                     editor.container.remove();
                 });
-                
+
                 this.watchEditAction();
 
                 const $handler = document.querySelector(`#${this.selfId}`);
@@ -576,7 +577,7 @@
                 if (target.type !== 'textarea') {
                     return;
                 }
-                
+
                 if ([
                     'Escape',
                     'Meta',
diff --git a/src/frontend/src/components/jb-edit/input.vue b/src/frontend/src/components/jb-edit/input.vue
index 327c8e0760..88f0d986e0 100644
--- a/src/frontend/src/components/jb-edit/input.vue
+++ b/src/frontend/src/components/jb-edit/input.vue
@@ -53,7 +53,10 @@
             </div>
         </template>
         <template v-else>
-            <div class="edit-value-box" :class="{ 'edit-error': !!error }" @click.stop="">
+            <div
+                class="edit-value-box"
+                :class="{ 'edit-error': !!error }"
+                @click.stop="">
                 <bk-input
                     ref="input"
                     :value="newVal"
@@ -174,7 +177,7 @@
                         resolve();
                     }
                 });
-                
+
                 const allPromise = this.rules.map(rule => checkValidator(rule, this.newVal));
                 this.isValidatoring = true;
                 return Promise.all(allPromise).finally(() => {
@@ -256,16 +259,15 @@
              * @param {Object} event dom 事件
              */
             handleHideEdit (event) {
+                const eventPath = event.composedPath();
                 if (this.isValidatoring || this.error) {
                     return;
                 }
-                if (event.path && event.path.length > 0) {
-                    // eslint-disable-next-line no-plusplus
-                    for (let i = 0; i < event.path.length; i++) {
-                        const target = event.path[i];
-                        if (target.className === 'jb-edit-input') {
-                            return;
-                        }
+                // eslint-disable-next-line no-plusplus
+                for (let i = 0; i < eventPath.length; i++) {
+                    const target = eventPath[i];
+                    if (target.className === 'jb-edit-input') {
+                        return;
                     }
                 }
                 this.isEditing = false;
diff --git a/src/frontend/src/components/jb-edit/select.vue b/src/frontend/src/components/jb-edit/select.vue
index d2ecf461e1..0a321c6b5a 100644
--- a/src/frontend/src/components/jb-edit/select.vue
+++ b/src/frontend/src/components/jb-edit/select.vue
@@ -242,7 +242,7 @@
                         resolve();
                     }
                 });
-                
+
                 const allPromise = this.rules.map(rule => checkValidator(rule, this.localValue));
                 this.isValidatoring = true;
                 return Promise.all(allPromise).finally(() => {
@@ -300,17 +300,16 @@
              * @param {Object} event dom 事件
              */
             handleHideEdit (event) {
+                const eventPath = event.composedPath();
                 if (this.isValidatoring || this.error) {
                     return;
                 }
-                if (event.path && event.path.length > 0) {
-                    // eslint-disable-next-line no-plusplus
-                    for (let i = 0; i < event.path.length; i++) {
-                        const target = event.path[i];
-                        if (target.className === 'jb-edit-select'
-                            || target.className === 'tippy-content') {
-                            return;
-                        }
+                // eslint-disable-next-line no-plusplus
+                for (let i = 0; i < eventPath.length; i++) {
+                    const target = eventPath[i];
+                    if (target.className === 'jb-edit-select'
+                        || target.className === 'tippy-content') {
+                        return;
                     }
                 }
                 this.isEditing = false;
@@ -331,7 +330,7 @@
                     this.triggerChange();
                 }
             },
-            
+
         },
     };
 </script>
diff --git a/src/frontend/src/components/jb-edit/tag.vue b/src/frontend/src/components/jb-edit/tag.vue
index b5e8052296..3c247bff49 100644
--- a/src/frontend/src/components/jb-edit/tag.vue
+++ b/src/frontend/src/components/jb-edit/tag.vue
@@ -155,20 +155,20 @@
                 document.body.removeEventListener('click', this.hideEdit);
             });
         },
-        
+
         methods: {
             /**
              * @desc 触发标签修改操作
              */
             triggerRemote () {
                 this.isEditing = false;
-                
+
                 if (isEqual(this.memoValue, this.localValue)) {
                     return;
                 }
-                
+
                 this.isLoading = true;
-                
+
                 this.remoteHander({
                     [this.field]: this.localValue.map(({ id }) => ({ id })),
                 }).then(() => {
@@ -187,17 +187,16 @@
              */
             hideEdit (event) {
                 if (!this.isEditing) return;
-                if (event.path && event.path.length > 0) {
-                    // eslint-disable-next-line no-plusplus
-                    for (let i = 0; i < event.path.length; i++) {
-                        const target = event.path[i];
-                        if (/tippy-popper/.test(target.className)
-                            || /job-tag-create-dialog/.test(target.className)) {
-                            return;
-                        }
+                const eventPath = event.composedPath();
+                // eslint-disable-next-line no-plusplus
+                for (let i = 0; i < eventPath.length; i++) {
+                    const target = eventPath[i];
+                    if (/tippy-popper/.test(target.className)
+                        || /job-tag-create-dialog/.test(target.className)) {
+                        return;
                     }
                 }
-                
+
                 this.triggerRemote();
             },
             /**
diff --git a/src/frontend/src/components/jb-edit/textarea.vue b/src/frontend/src/components/jb-edit/textarea.vue
index a28e75e8a5..1cf76d955f 100644
--- a/src/frontend/src/components/jb-edit/textarea.vue
+++ b/src/frontend/src/components/jb-edit/textarea.vue
@@ -206,7 +206,7 @@
                         $el.style.wordBreak = 'keep-all';
                         $el.style.whiteSpace = 'pre';
                     }
-                    
+
                     this.$refs.valueTextBox.appendChild($el);
 
                     const lineHeight = 24;
@@ -214,7 +214,7 @@
                     const maxHeight = lineHeight * maxLine;
                     let realHeight = 0;
                     let realLength = 1;
-                
+
                     const calcLength = () => {
                         const text = this.newVal.slice(0, realLength);
                         $el.innerText = `${text} 展开展开`;
@@ -287,13 +287,12 @@
              * @desc 退出编辑状态
              */
             handleHideInput (event) {
-                if (event.path && event.path.length > 0) {
-                    // eslint-disable-next-line no-plusplus
-                    for (let i = 0; i < event.path.length; i++) {
-                        const target = event.path[i];
-                        if (target.className === 'jb-edit-textarea') {
-                            return;
-                        }
+                const eventPath = event.composedPath();
+                // eslint-disable-next-line no-plusplus
+                for (let i = 0; i < eventPath.length; i++) {
+                    const target = eventPath[i];
+                    if (target.className === 'jb-edit-textarea') {
+                        return;
                     }
                 }
                 this.isEditing = false;
@@ -366,7 +365,7 @@
 
             &:hover {
                 .edit-action {
-                    opacity: 1;
+                    opacity: 100%;
                     transform: scale(1);
                 }
             }
@@ -398,7 +397,7 @@
                 padding: 4px 15px 4px 2px;
                 color: #979ba5;
                 cursor: pointer;
-                opacity: 0;
+                opacity: 0%;
                 transform: scale(0);
                 transition: 0.15s;
                 transform-origin: left center;
diff --git a/src/frontend/src/layout-new.vue b/src/frontend/src/layout-new.vue
index 0609c7eb24..2c131a3f49 100644
--- a/src/frontend/src/layout-new.vue
+++ b/src/frontend/src/layout-new.vue
@@ -235,10 +235,6 @@
     </site-frame>
 </template>
 <script>
-    import {
-        reactive,
-        toRefs,
-    } from '@vue/composition-api';
     import QueryGlobalSettingService from '@service/query-global-setting';
     import SiteFrame from '@components/site-frame';
     import JbMenu from '@components/jb-menu';
@@ -257,10 +253,9 @@
             JbItemGroup,
             AppSelect,
         },
-        setup () {
+        data () {
             const navigationDefatulOpen = localStorage.getItem(TOGGLE_CACHE) !== null;
-
-            const state = reactive({
+            return {
                 routerGroup: 'business',
                 isFrameSideFixed: navigationDefatulOpen,
                 isSideExpand: false,
@@ -268,66 +263,6 @@
                 showSubMenu: false,
                 routerTitle: '',
                 ENABLE_FEATURE_FILE_MANAGE: false,
-            });
-            
-            const methods = {
-                /**
-                 * @desc 返回首页
-                 */
-                handleBackHome () {
-                    this.$router.push({
-                        name: 'home',
-                    });
-                },
-                /**
-                 * @desc 侧导航展开收起
-                 */
-                handleSideFixedChnage () {
-                    state.isFrameSideFixed = !state.isFrameSideFixed;
-                    if (state.isFrameSideFixed) {
-                        localStorage.setItem(TOGGLE_CACHE, state.isFrameSideFixed);
-                    } else {
-                        localStorage.removeItem(TOGGLE_CACHE);
-                    }
-                },
-                handleSideExpandChange (sideExpand) {
-                    state.isSideExpand = sideExpand;
-                },
-                handleGroupChange (group) {
-                    state.routerGroup = group;
-                },
-                /**
-                 * @desc 跳转路由
-                 * @param {String} routerName 跳转的路由名
-                 */
-                handleRouterChange (routerName) {
-                    if (this.routerName === routerName) {
-                        return;
-                    }
-                    this.routerName = routerName;
-                    this.$router.push({
-                        name: routerName,
-                    });
-                },
-            };
-            /**
-             * @desc 获取是否是admin用户
-             */
-            QueryGlobalSettingService.fetchAdminIdentity()
-                .then((isAdmin) => {
-                    state.isAdmin = isAdmin;
-                });
-            /**
-             * @desc 获取系统基本配置
-             */
-            QueryGlobalSettingService.fetchJobConfig()
-                .then((data) => {
-                    state.ENABLE_FEATURE_FILE_MANAGE = data.ENABLE_FEATURE_FILE_MANAGE;
-                });
-            
-            return {
-                ...toRefs(state),
-                ...methods,
             };
         },
         watch: {
@@ -354,6 +289,62 @@
                 immediate: true,
             },
         },
+        created () {
+            /**
+             * @desc 获取是否是admin用户
+             */
+            QueryGlobalSettingService.fetchAdminIdentity()
+                .then((isAdmin) => {
+                    this.isAdmin = isAdmin;
+                });
+            /**
+             * @desc 获取系统基本配置
+             */
+            QueryGlobalSettingService.fetchJobConfig()
+                .then((data) => {
+                    this.ENABLE_FEATURE_FILE_MANAGE = data.ENABLE_FEATURE_FILE_MANAGE;
+                });
+        },
+        methods: {
+            /**
+                 * @desc 返回首页
+                 */
+            handleBackHome () {
+                this.$router.push({
+                    name: 'home',
+                });
+            },
+            /**
+             * @desc 侧导航展开收起
+             */
+            handleSideFixedChnage () {
+                this.isFrameSideFixed = !this.isFrameSideFixed;
+                if (this.isFrameSideFixed) {
+                    localStorage.setItem(TOGGLE_CACHE, this.isFrameSideFixed);
+                } else {
+                    localStorage.removeItem(TOGGLE_CACHE);
+                }
+            },
+            handleSideExpandChange (sideExpand) {
+                this.isSideExpand = sideExpand;
+            },
+            handleGroupChange (group) {
+                this.routerGroup = group;
+            },
+            /**
+             * @desc 跳转路由
+             * @param {String} routerName 跳转的路由名
+             */
+            handleRouterChange (routerName) {
+                if (this.routerName === routerName) {
+                    return;
+                }
+                this.routerName = routerName;
+                this.$router.push({
+                    name: routerName,
+                });
+            },
+        },
     };
 </script>
 <style lang="postcss">
diff --git a/src/frontend/src/utils/assist/dom.js b/src/frontend/src/utils/assist/dom.js
index 67850bbd31..e923bac8c2 100644
--- a/src/frontend/src/utils/assist/dom.js
+++ b/src/frontend/src/utils/assist/dom.js
@@ -56,7 +56,7 @@ export const getScrollParent = (node) => {
     if (node === null) {
         return null;
     }
-   
+
     if (node.scrollHeight > node.clientHeight) {
         return node;
     }
@@ -87,3 +87,14 @@ export const scrollTopSmooth = function (target, destScrollTop) {
     };
     step();
 };
+
+export const getParentByClass = (node, className) => {
+    let parentNode = node;
+    while (parentNode) {
+        if (parentNode.classList && parentNode.classList.contains(className)) {
+            return parentNode;
+        }
+        ({ parentNode } = parentNode);
+    }
+    return parentNode;
+};
diff --git a/src/frontend/src/views/script-manage/common/copy-create.vue b/src/frontend/src/views/script-manage/common/copy-create.vue
index 382ab320a1..7352699c80 100644
--- a/src/frontend/src/views/script-manage/common/copy-create.vue
+++ b/src/frontend/src/views/script-manage/common/copy-create.vue
@@ -295,21 +295,8 @@
                     return;
                 }
                 this.isSubmiting = true;
-                Promise.all([
-                    // 验证表单
-                    this.$refs.form.validate(),
-                    // 脚本高危语句检测
-                    ScriptManageService.getScriptValidation({
-                        content: this.formData.content,
-                        scriptType: this.formData.type,
-                    }).then((data) => {
-                        // 高危语句报错状态需要全局保存
-                        const dangerousContent = _.find(data, _ => _.isDangerous);
-                        this.$store.commit('setScriptCheckError', dangerousContent);
-                        return true;
-                    }),
-                ])
-                    .then(scriptErrorConfirm)
+                this.$refs.form.validate()
+                    .then(() => scriptErrorConfirm())
                     .then(() => {
                         this.scriptManageServiceHandler.scriptUpdate({
                             ...this.formData,
diff --git a/src/frontend/src/views/script-manage/common/edit.vue b/src/frontend/src/views/script-manage/common/edit.vue
index 3f5bf55f0e..f2fc908553 100644
--- a/src/frontend/src/views/script-manage/common/edit.vue
+++ b/src/frontend/src/views/script-manage/common/edit.vue
@@ -244,20 +244,8 @@
                     return;
                 }
                 this.isSubmiting = true;
-                Promise.all([
-                    // 验证表单
-                    this.$refs.form.validate(),
-                    // 脚本高危语句检测
-                    ScriptManageService.getScriptValidation({
-                        content: this.formData.content,
-                        scriptType: this.formData.type,
-                    }).then((data) => {
-                        // 高危语句报错状态需要全局保存
-                        const dangerousContent = _.find(data, _ => _.isDangerous);
-                        this.$store.commit('setScriptCheckError', dangerousContent);
-                        return true;
-                    }),
-                ]).then(scriptErrorConfirm)
+                this.$refs.form.validate()
+                    .then(() => scriptErrorConfirm())
                     .then(() => {
                         this.serviceHandler.scriptUpdate({
                             ...this.formData,