diff --git a/backend/src/main/java/io/metersphere/api/dto/definition/request/MsTestElement.java b/backend/src/main/java/io/metersphere/api/dto/definition/request/MsTestElement.java
index 3bfecbfc1b..9081052660 100644
--- a/backend/src/main/java/io/metersphere/api/dto/definition/request/MsTestElement.java
+++ b/backend/src/main/java/io/metersphere/api/dto/definition/request/MsTestElement.java
@@ -12,6 +12,7 @@ import io.metersphere.api.dto.definition.request.auth.MsAuthManager;
 import io.metersphere.api.dto.definition.request.configurations.MsHeaderManager;
 import io.metersphere.api.dto.definition.request.controller.MsIfController;
 import io.metersphere.api.dto.definition.request.extract.MsExtract;
+import io.metersphere.api.dto.definition.request.processors.MsJSR223Processor;
 import io.metersphere.api.dto.definition.request.processors.post.MsJSR223PostProcessor;
 import io.metersphere.api.dto.definition.request.processors.pre.MsJSR223PreProcessor;
 import io.metersphere.api.dto.definition.request.sampler.MsDubboSampler;
@@ -37,6 +38,7 @@ import java.util.List;
 @JsonSubTypes({
         @JsonSubTypes.Type(value = MsHTTPSamplerProxy.class, name = "HTTPSamplerProxy"),
         @JsonSubTypes.Type(value = MsHeaderManager.class, name = "HeaderManager"),
+        @JsonSubTypes.Type(value = MsJSR223Processor.class, name = "JSR223Processor"),
         @JsonSubTypes.Type(value = MsJSR223PostProcessor.class, name = "JSR223PostProcessor"),
         @JsonSubTypes.Type(value = MsJSR223PreProcessor.class, name = "JSR223PreProcessor"),
         @JsonSubTypes.Type(value = MsTestPlan.class, name = "TestPlan"),
@@ -52,7 +54,7 @@ import java.util.List;
         @JsonSubTypes.Type(value = MsScenario.class, name = "scenario"),
 
 })
-@JSONType(seeAlso = {MsHTTPSamplerProxy.class, MsHeaderManager.class, MsJSR223PostProcessor.class,
+@JSONType(seeAlso = {MsHTTPSamplerProxy.class, MsHeaderManager.class, MsJSR223Processor.class, MsJSR223PostProcessor.class,
         MsJSR223PreProcessor.class, MsTestPlan.class, MsThreadGroup.class, AuthManager.class, MsAssertions.class,
         MsExtract.class, MsTCPSampler.class, MsDubboSampler.class, MsJDBCSampler.class, MsConstantTimer.class, MsIfController.class, MsScenario.class}, typeKey = "type")
 @Data
@@ -118,7 +120,8 @@ public abstract class MsTestElement {
             ObjectMapper mapper = new ObjectMapper();
             mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
             ApiDefinitionWithBLOBs apiDefinition = apiDefinitionService.getBLOBs(this.getId());
-            element = mapper.readValue(apiDefinition.getRequest(), new TypeReference<MsTestElement>() {});
+            element = mapper.readValue(apiDefinition.getRequest(), new TypeReference<MsTestElement>() {
+            });
             hashTree.add(element);
         } catch (Exception ex) {
             ex.printStackTrace();
diff --git a/backend/src/main/java/io/metersphere/xmind/XmindCaseParser.java b/backend/src/main/java/io/metersphere/xmind/XmindCaseParser.java
index d08eea9ab3..939b8f3730 100644
--- a/backend/src/main/java/io/metersphere/xmind/XmindCaseParser.java
+++ b/backend/src/main/java/io/metersphere/xmind/XmindCaseParser.java
@@ -14,6 +14,7 @@ import io.metersphere.xmind.parser.XmindParser;
 import io.metersphere.xmind.parser.pojo.Attached;
 import io.metersphere.xmind.parser.pojo.JsonRootBean;
 import io.metersphere.xmind.utils.DetailUtil;
+import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.web.multipart.MultipartFile;
 
@@ -185,7 +186,7 @@ public class XmindCaseParser {
                 String nodePath = parent.getPath() + "/" + item.getTitle();
                 item.setPath(nodePath);
                 item.setParent(parent);
-                if (item.getChildren() != null && !item.getChildren().getAttached().isEmpty()) {
+                if (item.getChildren() != null && CollectionUtils.isNotEmpty(item.getChildren().getAttached())) {
                     recursion(item, level + 1, item.getChildren().getAttached());
                 } else {
                     if (!nodePath.startsWith("/")) {
diff --git a/frontend/src/business/components/api/automation/scenario/ApiComponent.vue b/frontend/src/business/components/api/automation/scenario/ApiComponent.vue
index b9e53b1527..291411c4e9 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiComponent.vue
@@ -2,20 +2,30 @@
   <div v-loading="loading">
     <el-card>
       <el-row>
-        <div class="el-step__icon is-text ms-api-col" v-if="request.referenced">
+        <div class="el-step__icon is-text ms-api-col" v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF'">
           <div class="el-step__icon-inner">{{request.index}}</div>
         </div>
         <div class="el-step__icon is-text ms-api-col-create" v-else>
           <div class="el-step__icon-inner">{{request.index}}</div>
         </div>
 
+        <el-button v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF'" class="ms-left-buttion" size="small">
+          {{$t('api_test.automation.api_list_import')}}
+        </el-button>
+
+        <el-button v-if="request.referenced==undefined || request.referenced==='Created' || request.referenced==='Copy'" class="ms-create-buttion" size="small">
+          {{$t('api_test.automation.customize_req')}}
+        </el-button>
+
         <i class="icon el-icon-arrow-right" :class="{'is-active': request.active}"
            @click="active(request)" v-if="request.referenced!=undefined && request.referenced!='Deleted' && request.referenced!='REF'"/>
-        <span>{{request.type!= 'create' ? request.name:''}} </span>
+        <span v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF'">{{request.name}} </span>
+        <el-input size="small" v-model="request.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')" v-else/>
+
         <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
         <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
 
-        <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
+        <el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
 
       </el-row>
       <!-- 请求参数-->
@@ -112,6 +122,12 @@
     color: #F56C6C;
   }
 
+  .ms-left-buttion {
+    color: #F56C6C;
+    background-color: #FCF1F1;
+    margin-right: 20px;
+  }
+
   .ms-api-col-create {
     background-color: #EBF2F2;
     border-color: #008080;
@@ -127,6 +143,12 @@
     transform: rotate(90deg);
   }
 
+  .ms-create-buttion {
+    color: #008080;
+    background-color: #EBF2F2;
+    margin-right: 20px;
+  }
+
   .tip {
     padding: 3px 5px;
     font-size: 16px;
diff --git a/frontend/src/business/components/api/automation/scenario/ApiCustomize.vue b/frontend/src/business/components/api/automation/scenario/ApiCustomize.vue
index 14504123f0..d3cadaa685 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiCustomize.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiCustomize.vue
@@ -61,7 +61,9 @@
           this.request.method = row.method;
         }
         this.request.resourceId = getUUID();
-        this.$emit('addCustomizeApi', this.request);
+        let obj = {};
+        Object.assign(obj, this.request);
+        this.$emit('addCustomizeApi', obj);
       },
       reload() {
         this.loading = true
diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioComponent.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioComponent.vue
index e9d95708d2..d7ec1e73fc 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioComponent.vue
@@ -2,13 +2,14 @@
   <div v-loading="loading">
     <el-card>
       <el-row>
-        <div class="el-step__icon is-text ms-api-col" style="float: left">
+        <div class="el-step__icon is-text ms-api-col">
           <div class="el-step__icon-inner">{{scenario.index}}</div>
         </div>
-        <div style="margin-left: 20px;float: left"> {{scenario.name}}</div>
+        <el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.wait_controller')}}</el-button>
+        {{scenario.name}}
         <el-tag size="mini" style="margin-left: 20px" v-if="scenario.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
         <el-tag size="mini" style="margin-left: 20px" v-if="scenario.referenced==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
-        <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
+        <el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
       </el-row>
     </el-card>
   </div>
@@ -73,6 +74,12 @@
     padding: 15px;
   }
 
+  .ms-title-buttion {
+    background-color: #F4F4F5;
+    margin-right: 20px;
+    color: #606266;
+  }
+
   .icon.is-active {
     transform: rotate(90deg);
   }
diff --git a/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue b/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue
index 3b37f29e17..9afc363ad4 100644
--- a/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue
+++ b/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue
@@ -2,24 +2,14 @@
   <div>
     <el-card>
       <el-row>
-        <div class="el-step__icon is-text ms-api-col" style="float: left">
+        <div class="el-step__icon is-text ms-api-col">
           <div class="el-step__icon-inner">{{timer.index}}</div>
         </div>
-        <div>
-          <el-row :gutter="10" type="flex" align="middle">
-            <el-col :span="2">{{ $t('api_test.request.wait') }}</el-col>
-            <el-col :span="10">
-              <el-input-number class="width-100" size="small" v-model="timer.delay" :min="0" :step="1000"/>
-            </el-col>
-            <el-col :span="2">ms</el-col>
-            <el-col :span="8">
-              <el-switch v-model="timer.enable" :inactive-text="$t('api_test.scenario.enable_disable')"/>
-            </el-col>
-            <el-col :span="2">
-              <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="remove"/>
-            </el-col>
-          </el-row>
-        </div>
+        <el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.wait_controller')}}</el-button>
+        <el-input-number class="width-100" size="small" v-model="timer.delay" :min="0" :step="1000"/>
+        ms
+        <!--<el-switch v-model="timer.enable" :inactive-text="$t('api_test.scenario.enable_disable')" style="margin-left: 20px"/>-->
+        <el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
       </el-row>
     </el-card>
   </div>
@@ -37,7 +27,7 @@
     },
     methods: {
       remove() {
-        this.$emit('remove', this.timer,this.node);
+        this.$emit('remove', this.timer, this.node);
       }
     }
   }
@@ -45,7 +35,7 @@
 
 <style scoped>
   .width-100 {
-    width: 100%
+    width: 40%
   }
 
   .ms-api-col {
@@ -55,6 +45,12 @@
     color: #67C23A;
   }
 
+  .ms-title-buttion {
+    background-color: #F2F9EE;
+    color: #67C23A;
+    margin-right: 20px;
+  }
+
   /deep/ .el-card__body {
     padding: 15px;
   }
diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index 6826a1b471..b7e34c26fd 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -1,10 +1,10 @@
 <template>
   <el-card class="card-content">
-    <div style="background-color: white;">
+    <div class="ms-main-div">
       <el-row>
         <el-col>
           <!--操作按钮-->
-          <div style="float: right;margin-right: 20px">
+          <div class="ms-opt-btn">
             <el-button type="primary" size="small" @click="editScenario">{{$t('commons.save')}}</el-button>
           </div>
         </el-col>
@@ -119,7 +119,7 @@
         <el-row>
           <el-col :span="21">
             <!-- 调试部分 -->
-            <div style="margin-left: 20px;border:1px #DCDFE6 solid;border-radius: 4px;margin-right: 10px">
+            <div class="ms-debug-div">
               <el-row style="margin: 5px">
                 <el-col :span="6" class="ms-col-one">
                   {{currentScenario.name ===undefined || ''? $t('api_test.scenario.name') : currentScenario.name}}
@@ -199,37 +199,37 @@
               <el-button type="primary" icon="el-icon-refresh" size="small" @click="showAll">{{$t('commons.show_all')}}</el-button>
               <br/>
               <div v-if="operatingElements.indexOf('HTTPSamplerProxy')>0 || operatingElements.indexOf('DubboSampler')>0 || operatingElements.indexOf('JDBCSampler')>0 || operatingElements.indexOf('TCPSampler')>0 ">
-                <el-button class="ms-right-buttion" size="small" style="color: #F56C6C;background-color: #FCF1F1" @click="apiListImport">+{{$t('api_test.automation.api_list_import')}}</el-button>
+                <el-button class="ms-right-buttion ms-btn-1" size="small" @click="apiListImport">+{{$t('api_test.automation.api_list_import')}}</el-button>
               </div>
               <!--<div v-if="operatingElements.indexOf('OT_IMPORT')>0">
                 <el-button class="ms-right-buttion" size="small" style="color: #409EFF;background-color: #EEF5FE" @click="addComponent('OT_IMPORT')">+{{$t('api_test.automation.external_import')}}</el-button>
               </div>-->
               <div v-if="operatingElements.indexOf('ConstantTimer')>0">
-                <el-button class="ms-right-buttion" size="small" style="color: #67C23A;background-color: #F2F9EE" @click="addComponent('ConstantTimer')">+{{$t('api_test.automation.wait_controller')}}</el-button>
+                <el-button class="ms-right-buttion ms-btn-3" size="small" @click="addComponent('ConstantTimer')">+{{$t('api_test.automation.wait_controller')}}</el-button>
               </div>
               <div v-if="operatingElements.indexOf('IfController')>0">
-                <el-button class="ms-right-buttion" size="small" style="color: #E6A23C;background-color: #FCF6EE" @click="addComponent('IfController')">+{{$t('api_test.automation.if_controller')}}</el-button>
+                <el-button class="ms-right-buttion ms-btn-4" size="small" @click="addComponent('IfController')">+{{$t('api_test.automation.if_controller')}}</el-button>
               </div>
               <div v-if="operatingElements.indexOf('scenario')===0">
-                <el-button class="ms-right-buttion" size="small" style="color: #606266;background-color: #F4F4F5" @click="addComponent('scenario')">+{{$t('api_test.automation.scenario_import')}}</el-button>
+                <el-button class="ms-right-buttion ms-btn-5" size="small" @click="addComponent('scenario')">+{{$t('api_test.automation.scenario_import')}}</el-button>
               </div>
               <div v-if="operatingElements.indexOf('JSR223Processor')>0">
-                <el-button class="ms-right-buttion" size="small" style="color: #7B4D12;background-color: #F1EEE9" @click="addComponent('JSR223Processor')">+{{$t('api_test.automation.customize_script')}}</el-button>
+                <el-button class="ms-right-buttion ms-btn-6" size="small" @click="addComponent('JSR223Processor')">+{{$t('api_test.automation.customize_script')}}</el-button>
               </div>
               <div v-if="operatingElements.indexOf('CustomizeReq')>0">
-                <el-button class="ms-right-buttion" size="small" style="color: #008080;background-color: #EBF2F2" @click="addComponent('CustomizeReq')">+{{$t('api_test.automation.customize_req')}}</el-button>
+                <el-button class="ms-right-buttion ms-btn-7" size="small" @click="addComponent('CustomizeReq')">+{{$t('api_test.automation.customize_req')}}</el-button>
               </div>
               <div v-if="operatingElements.indexOf('JSR223PreProcessor')>0">
-                <el-button class="ms-right-buttion" size="small" style="color: #B8741A;background-color: #F9F1EA" @click="addComponent('JSR223PreProcessor')">+{{$t('api_test.definition.request.pre_script')}}</el-button>
+                <el-button class="ms-right-buttion ms-btn-8" size="small" @click="addComponent('JSR223PreProcessor')">+{{$t('api_test.definition.request.pre_script')}}</el-button>
               </div>
               <div v-if="operatingElements.indexOf('JSR223PostProcessor')>0">
-                <el-button class="ms-right-buttion" size="small" style="color: #783887;background-color: #F2ECF3" @click="addComponent('JSR223PostProcessor')">+{{$t('api_test.definition.request.post_script')}}</el-button>
+                <el-button class="ms-right-buttion ms-btn-9" size="small" @click="addComponent('JSR223PostProcessor')">+{{$t('api_test.definition.request.post_script')}}</el-button>
               </div>
               <div v-if="operatingElements.indexOf('Assertions')>0">
-                <el-button class="ms-right-buttion" size="small" style="color: #A30014;background-color: #F7E6E9" @click="addComponent('Assertions')">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
+                <el-button class="ms-right-buttion ms-btn-10" size="small" @click="addComponent('Assertions')">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
               </div>
               <div v-if="operatingElements.indexOf('Extract')>0">
-                <el-button class="ms-right-buttion" size="small" style="color: #015478;background-color: #E6EEF2" @click="addComponent('Extract')">+{{$t('api_test.definition.request.extract_param')}}</el-button>
+                <el-button class="ms-right-buttion ms-btn-11" size="small" @click="addComponent('Extract')">+{{$t('api_test.definition.request.extract_param')}}</el-button>
               </div>
             </el-col>
           </div>
@@ -245,7 +245,7 @@
 
       <!--自定义接口-->
       <el-drawer :visible.sync="customizeVisible" :destroy-on-close="true" direction="ltr" :withHeader="false" :title="$t('api_test.automation.customize_req')" style="overflow: auto" :modal="false" size="90%">
-        <ms-api-customize :request="customizeRequest" @addCustomizeApi="addCustomizeApi" />
+        <ms-api-customize :request="customizeRequest" @addCustomizeApi="addCustomizeApi"/>
         <!--<el-button style="float: right;margin: 20px" @click="addCustomizeApi">{{$t('commons.save')}}</el-button>-->
       </el-drawer>
       <!--场景导入 -->
@@ -361,38 +361,6 @@
     },
     watch: {},
     methods: {
-      nodeClick(e) {
-        if (e.referenced != 'REF' && e.referenced != 'Deleted') {
-          this.operatingElements = ELEMENTS.get(e.type);
-        } else {
-          this.operatingElements = [];
-        }
-        this.selectedTreeNode = e;
-      },
-      showAll() {
-        this.operatingElements = ELEMENTS.get("ALL");
-        this.selectedTreeNode = undefined;
-        this.reload();
-      },
-      apiListImport() {
-        this.apiListVisible = true;
-      },
-      recursiveSorting(arr) {
-        for (let i in arr) {
-          arr[i].index = Number(i) + 1;
-          if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
-            this.recursiveSorting(arr[i].hashTree);
-          }
-        }
-      },
-      sort() {
-        for (let i in this.scenarioDefinition) {
-          this.scenarioDefinition[i].index = Number(i) + 1;
-          if (this.scenarioDefinition[i].hashTree != undefined && this.scenarioDefinition[i].hashTree.length > 0) {
-            this.recursiveSorting(this.scenarioDefinition[i].hashTree);
-          }
-        }
-      },
       addComponent(type) {
         switch (type) {
           case ELEMENT_TYPE.IfController:
@@ -436,6 +404,38 @@
         this.sort();
         this.reload();
       },
+      nodeClick(e) {
+        if (e.referenced != 'REF' && e.referenced != 'Deleted') {
+          this.operatingElements = ELEMENTS.get(e.type);
+        } else {
+          this.operatingElements = [];
+        }
+        this.selectedTreeNode = e;
+      },
+      showAll() {
+        this.operatingElements = ELEMENTS.get("ALL");
+        this.selectedTreeNode = undefined;
+        this.reload();
+      },
+      apiListImport() {
+        this.apiListVisible = true;
+      },
+      recursiveSorting(arr) {
+        for (let i in arr) {
+          arr[i].index = Number(i) + 1;
+          if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
+            this.recursiveSorting(arr[i].hashTree);
+          }
+        }
+      },
+      sort() {
+        for (let i in this.scenarioDefinition) {
+          this.scenarioDefinition[i].index = Number(i) + 1;
+          if (this.scenarioDefinition[i].hashTree != undefined && this.scenarioDefinition[i].hashTree.length > 0) {
+            this.recursiveSorting(this.scenarioDefinition[i].hashTree);
+          }
+        }
+      },
       addCustomizeApi(request) {
         this.customizeVisible = false;
         if (this.selectedTreeNode != undefined) {
@@ -734,6 +734,22 @@
     width: 100%;
   }
 
+  .ms-main-div {
+    background-color: white;
+  }
+
+  .ms-opt-btn {
+    float: right;
+    margin-right: 20px;
+  }
+
+  .ms-debug-div {
+    margin-left: 20px;
+    border: 1px #DCDFE6 solid;
+    border-radius: 4px;
+    margin-right: 10px;
+  }
+
   .ms-scenario-button {
     margin-left: 30%;
     padding: 7px;
@@ -761,6 +777,61 @@
     margin-top: 10px;
   }
 
+  .ms-btn-1 {
+    color: #F56C6C;
+    background-color: #FCF1F1
+  }
+
+  .ms-btn-2 {
+    color: #F56C6C;
+    background-color: #FCF1F1
+  }
+
+  .ms-btn-3 {
+    color: #67C23A;
+    background-color: #F2F9EE
+  }
+
+  .ms-btn-4 {
+    color: #E6A23C;
+    background-color: #FCF6EE
+  }
+
+  .ms-btn-5 {
+    color: #606266;
+    background-color: #F4F4F5
+  }
+
+  .ms-btn-6 {
+    color: #7B4D12;
+    background-color: #F1EEE9
+  }
+
+  .ms-btn-7 {
+    color: #008080;
+    background-color: #EBF2F2
+  }
+
+  .ms-btn-8 {
+    color: #B8741A;
+    background-color: #F9F1EA
+  }
+
+  .ms-btn-9 {
+    color: #783887;
+    background-color: #F2ECF3
+  }
+
+  .ms-btn-10 {
+    color: #A30014;
+    background-color: #F7E6E9
+  }
+
+  .ms-btn-11 {
+    color: #015478;
+    background-color: #E6EEF2
+  }
+
   /deep/ .el-tree-node__content {
     height: 100%;
     margin-top: 8px;
@@ -775,4 +846,7 @@
     overflow: auto;
   }
 
+  /deep/ .el-step__icon.is-text {
+    border: 1px solid;
+  }
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/IfController.vue b/frontend/src/business/components/api/automation/scenario/IfController.vue
index 3faf9cd714..c83f68f986 100644
--- a/frontend/src/business/components/api/automation/scenario/IfController.vue
+++ b/frontend/src/business/components/api/automation/scenario/IfController.vue
@@ -1,32 +1,23 @@
 <template>
   <el-card>
     <el-row>
-      <div class="el-step__icon is-text ms-api-col" style="float: left">
+      <div class="el-step__icon is-text ms-api-col">
         <div class="el-step__icon-inner">{{controller.index}}</div>
       </div>
-      <div>
-        <el-row :gutter="10" type="flex" align="middle">
-          <el-col :span="1">If</el-col>
-          <el-col :span="6">
-            <el-input size="small" v-model="controller.variable" :placeholder="$t('api_test.request.condition_variable')"/>
-          </el-col>
-          <el-col :span="5">
-            <el-select v-model="controller.operator" :placeholder="$t('commons.please_select')" size="small"
-                       @change="change">
-              <el-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value"/>
-            </el-select>
-          </el-col>
-          <el-col :span="6">
-            <el-input size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator"/>
-          </el-col>
-          <el-col :span="4">
-            <el-switch v-model="controller.enable" :inactive-text="$t('api_test.scenario.enable_disable')"/>
-          </el-col>
-          <el-col :span="2">
-            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="remove"/>
-          </el-col>
-        </el-row>
-      </div>
+      <el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.if_controller')}}</el-button>
+
+      <el-input size="small" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
+
+      <el-select v-model="controller.operator" :placeholder="$t('commons.please_select')" size="small"
+                 @change="change" style="width: 10%;margin-left: 10px">
+        <el-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value"/>
+      </el-select>
+
+      <el-input size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
+
+      <!--<el-switch v-model="controller.enable" :inactive-text="$t('api_test.scenario.enable_disable')" style="margin-left: 10px"/>-->
+
+      <el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
     </el-row>
   </el-card>
 </template>
@@ -102,4 +93,10 @@
     margin-right: 10px;
     color: #E6A23C;
   }
+
+  .ms-title-buttion {
+    background-color: #FCF6EE;
+    margin-right: 20px;
+    color: #E6A23C;
+  }
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue b/frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue
index 84cf0b87c2..6c7b184f97 100644
--- a/frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue
+++ b/frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue
@@ -7,8 +7,9 @@
         </div>
         <el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button>
         <i class="icon el-icon-arrow-right" :class="{'is-active': this.jsr223ProcessorData.active}" @click="changeActive" style="margin-left: 20px"/>
-        <el-input size="small" v-model="jsr223ProcessorData.name" class="ms-api-header-select" style="width: 380px"/>
-        <el-button size="small" style="float: right" @click="remove">{{$t('commons.remove')}}</el-button>
+        <el-input size="small" v-model="jsr223ProcessorData.name" :placeholder="$t('commons.input_name')" class="ms-api-header-select" style="width: 40%"/>
+        <el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
+
       </div>
     </el-row>
     <el-collapse-transition>
diff --git a/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue b/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
index a1acb6ab91..7854042b7c 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
@@ -6,40 +6,49 @@
           <div class="el-step__icon-inner">{{assertions.index}}</div>
         </div>
         <el-button class="ms-left-buttion" size="small" style="color: #A30014;background-color: #F7E6E9">{{$t('api_test.definition.request.assertions_rule')}}</el-button>
-        <el-button size="small" style="float: right;margin-top: 0px" @click="remove">{{$t('commons.remove')}}</el-button>
-      </div>
-      <div class="assertion-add">
-        <el-row :gutter="10">
-          <el-col :span="4">
-            <el-select :disabled="isReadOnly" class="assertion-item" v-model="type"
-                       :placeholder="$t('api_test.request.assertions.select_type')"
-                       size="small">
-              <el-option :label="$t('api_test.request.assertions.regex')" :value="options.REGEX"/>
-              <el-option :label="'JSONPath'" :value="options.JSON_PATH"/>
-              <el-option :label="'XPath'" :value="options.XPATH2"/>
-              <el-option :label="$t('api_test.request.assertions.response_time')" :value="options.DURATION"/>
-              <el-option :label="$t('api_test.request.assertions.jsr223')" :value="options.JSR223"/>
-            </el-select>
-          </el-col>
-          <el-col :span="20">
-            <ms-api-assertion-regex :is-read-only="isReadOnly" :list="assertions.regex" v-if="type === options.REGEX"
-                                    :callback="after"/>
-            <ms-api-assertion-json-path :is-read-only="isReadOnly" :list="assertions.jsonPath"
-                                        v-if="type === options.JSON_PATH" :callback="after"/>
-            <ms-api-assertion-x-path2 :is-read-only="isReadOnly" :list="assertions.xpath2" v-if="type === options.XPATH2"
-                                      :callback="after"/>
-            <ms-api-assertion-duration :is-read-only="isReadOnly" v-model="time" :duration="assertions.duration"
-                                       v-if="type === options.DURATION" :callback="after"/>
-            <ms-api-assertion-jsr223 :is-read-only="isReadOnly" :list="assertions.jsr223" v-if="type === options.JSR223"
-                                     :callback="after"/>
-            <el-button v-if="!type" :disabled="true" type="primary" size="small">
-              {{ $t('api_test.request.assertions.add') }}
-            </el-button>
-          </el-col>
-        </el-row>
-      </div>
 
-      <ms-api-assertions-edit :is-read-only="isReadOnly" :assertions="assertions" :reloadData="reloadData" style="margin-bottom: 20px"/>
+        <i class="icon el-icon-arrow-right" :class="{'is-active': assertions.active}" @click="active(assertions)" style="margin-left: 20px"/>
+        <el-input size="small" v-model="assertions.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/>
+
+        <el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
+      </div>
+      <!-- 请求参数-->
+      <el-collapse-transition>
+        <div v-if="assertions.active">
+          <div class="assertion-add">
+            <el-row :gutter="10">
+              <el-col :span="4">
+                <el-select :disabled="isReadOnly" class="assertion-item" v-model="type"
+                           :placeholder="$t('api_test.request.assertions.select_type')"
+                           size="small">
+                  <el-option :label="$t('api_test.request.assertions.regex')" :value="options.REGEX"/>
+                  <el-option :label="'JSONPath'" :value="options.JSON_PATH"/>
+                  <el-option :label="'XPath'" :value="options.XPATH2"/>
+                  <el-option :label="$t('api_test.request.assertions.response_time')" :value="options.DURATION"/>
+                  <el-option :label="$t('api_test.request.assertions.jsr223')" :value="options.JSR223"/>
+                </el-select>
+              </el-col>
+              <el-col :span="20">
+                <ms-api-assertion-regex :is-read-only="isReadOnly" :list="assertions.regex" v-if="type === options.REGEX"
+                                        :callback="after"/>
+                <ms-api-assertion-json-path :is-read-only="isReadOnly" :list="assertions.jsonPath"
+                                            v-if="type === options.JSON_PATH" :callback="after"/>
+                <ms-api-assertion-x-path2 :is-read-only="isReadOnly" :list="assertions.xpath2" v-if="type === options.XPATH2"
+                                          :callback="after"/>
+                <ms-api-assertion-duration :is-read-only="isReadOnly" v-model="time" :duration="assertions.duration"
+                                           v-if="type === options.DURATION" :callback="after"/>
+                <ms-api-assertion-jsr223 :is-read-only="isReadOnly" :list="assertions.jsr223" v-if="type === options.JSR223"
+                                         :callback="after"/>
+                <el-button v-if="!type" :disabled="true" type="primary" size="small">
+                  {{ $t('api_test.request.assertions.add') }}
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+          <ms-api-assertions-edit :is-read-only="isReadOnly" :assertions="assertions" :reloadData="reloadData" style="margin-bottom: 20px"/>
+
+        </div>
+      </el-collapse-transition>
     </el-card>
   </div>
 </template>
@@ -72,7 +81,7 @@
       node: {},
       request: {},
       customizeStyle: {
-        type:String,
+        type: String,
         default: "margin-top: 10px"
       },
       scenario: Scenario,
@@ -111,8 +120,12 @@
           this.loading = false
         })
       },
+      active(item) {
+        item.active = !item.active;
+        this.reload();
+      },
       remove() {
-        this.$emit('remove', this.assertions,this.node);
+        this.$emit('remove', this.assertions, this.node);
       },
       addJsonpathSuggest(jsonPathList) {
         jsonPathList.forEach(jsonPath => {
@@ -142,31 +155,10 @@
     border-radius: 5px;
   }
 
-  .bg-purple-dark {
-    background: #99a9bf;
+  .icon.is-active {
+    transform: rotate(90deg);
   }
-
-  .bg-purple {
-    background: #d3dce6;
+  /deep/ .el-card__body {
+    padding: 15px;
   }
-
-  .bg-purple-light {
-    background: #e5e9f2;
-  }
-
-  .grid-content {
-    border-radius: 4px;
-    min-height: 36px;
-  }
-
-  .row-bg {
-    padding: 10px 0;
-    background-color: #f9fafc;
-  }
-
-  .json-path-suggest-button {
-    margin-top: 20px;
-    margin-left: 20px;
-  }
-
 </style>
diff --git a/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue b/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
index 292529fa9e..6f5511e981 100644
--- a/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
+++ b/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
@@ -1,35 +1,42 @@
 <template>
-  <div :style="customizeStyle">
+  <div :style="customizeStyle" v-loading="loading">
     <el-card>
       <div class="el-step__icon is-text" style="color: #015478;background-color: #E6EEF2;margin-right: 10px" v-if="extract.index">
         <div class="el-step__icon-inner">{{extract.index}}</div>
       </div>
       <el-button class="ms-left-buttion" size="small" style="color: #015478;background-color: #E6EEF2">{{$t('api_test.definition.request.extract_param')}}</el-button>
-      <el-button size="small" style="float: right;margin-top: 0px" @click="remove">移除</el-button>
+      <i class="icon el-icon-arrow-right" :class="{'is-active': extract.active}" @click="active(extract)" style="margin-left: 20px"/>
+      <el-input size="small" v-model="extract.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/>
 
-      <div style="margin: 20px">
-        <div class="extract-description">
-          {{$t('api_test.request.extract.description')}}
-        </div>
-        <div class="extract-add">
-          <el-row :gutter="10">
-            <el-col :span="2">
-              <el-select :disabled="isReadOnly" class="extract-item" v-model="type" :placeholder="$t('api_test.request.extract.select_type')"
-                         size="small">
-                <el-option :label="$t('api_test.request.extract.regex')" :value="options.REGEX"/>
-                <el-option label="JSONPath" :value="options.JSON_PATH"/>
-                <el-option label="XPath" :value="options.XPATH"/>
-              </el-select>
-            </el-col>
-            <el-col :span="22">
-              <ms-api-extract-common :is-read-only="isReadOnly" :extract-type="type" :list="list" v-if="type" :callback="after"/>
-            </el-col>
+      <el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
+      <!-- 请求参数-->
+      <el-collapse-transition>
+        <div v-if="extract.active">
+          <div style="margin: 20px">
+            <div class="extract-description">
+              {{$t('api_test.request.extract.description')}}
+            </div>
+            <div class="extract-add">
+              <el-row :gutter="10">
+                <el-col :span="2">
+                  <el-select :disabled="isReadOnly" class="extract-item" v-model="type" :placeholder="$t('api_test.request.extract.select_type')"
+                             size="small">
+                    <el-option :label="$t('api_test.request.extract.regex')" :value="options.REGEX"/>
+                    <el-option label="JSONPath" :value="options.JSON_PATH"/>
+                    <el-option label="XPath" :value="options.XPATH"/>
+                  </el-select>
+                </el-col>
+                <el-col :span="22">
+                  <ms-api-extract-common :is-read-only="isReadOnly" :extract-type="type" :list="list" v-if="type" :callback="after"/>
+                </el-col>
 
-            <el-button v-if="!type" :disabled="true" type="primary" size="small">Add</el-button>
-          </el-row>
+                <el-button v-if="!type" :disabled="true" type="primary" size="small">Add</el-button>
+              </el-row>
+            </div>
+            <ms-api-extract-edit :is-read-only="isReadOnly" :reloadData="reloadData" :extract="extract"/>
+          </div>
         </div>
-        <ms-api-extract-edit :is-read-only="isReadOnly" :reloadData="reloadData" :extract="extract"/>
-      </div>
+      </el-collapse-transition>
     </el-card>
   </div>
 </template>
@@ -66,6 +73,7 @@
         options: EXTRACT_TYPE,
         type: "",
         reloadData: "",
+        loading: false,
       }
     },
 
@@ -77,9 +85,17 @@
       remove() {
         this.$emit('remove', this.extract, this.node);
       },
-
+      reload() {
+        this.loading = true
+        this.$nextTick(() => {
+          this.loading = false
+        })
+      },
+      active(item) {
+        item.active = !item.active;
+        this.reload();
+      },
     },
-
     computed: {
       list() {
         switch (this.type) {
@@ -113,4 +129,12 @@
     margin: 5px 0;
     border-radius: 5px;
   }
+
+  .icon.is-active {
+    transform: rotate(90deg);
+  }
+
+  /deep/ .el-card__body {
+    padding: 15px;
+  }
 </style>
diff --git a/frontend/src/business/components/api/definition/components/processor/Jsr233Processor.vue b/frontend/src/business/components/api/definition/components/processor/Jsr233Processor.vue
index e8816aba45..9b5fea875c 100644
--- a/frontend/src/business/components/api/definition/components/processor/Jsr233Processor.vue
+++ b/frontend/src/business/components/api/definition/components/processor/Jsr233Processor.vue
@@ -1,42 +1,44 @@
 <template>
-  <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;margin-top: 20px">
-    <el-row>
-      <div>
-        <el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button>
-        <i class="icon el-icon-arrow-right" :class="{'is-active': active}" @click="changeActive" style="margin-left: 20px"/>
-        <el-input size="small" v-model="jsr223ProcessorData.name" class="ms-api-header-select" style="width: 380px"/>
-        <el-button size="small" style="float: right" @click="remove">移除</el-button>
-      </div>
-    </el-row>
-    <el-collapse-transition>
-      <div v-if="active">
-        <el-row style="margin:0px 10px 10px">
-          <el-col>
-            <div class="document-url">
-              <el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor"
-                       type="primary">{{$t('commons.reference_documentation')}}
-              </el-link>
-              <ms-instructions-icon :content="$t('api_test.request.processor.bean_shell_processor_tip')"/>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="20" class="script-content">
-            <ms-code-edit v-if="isCodeEditAlive" :mode="jsr223ProcessorData.scriptLanguage"
-                          :read-only="isReadOnly"
-                          :data.sync="jsr223ProcessorData.script" theme="eclipse" :modes="['java','python']"
-                          ref="codeEdit"/>
-          </el-col>
-          <el-col :span="4" class="script-index">
-            <ms-dropdown :default-command="jsr223ProcessorData.language" :commands="languages" @command="languageChange"/>
-            <div class="template-title">{{$t('api_test.request.processor.code_template')}}</div>
-            <div v-for="(template, index) in codeTemplates" :key="index" class="code-template">
-              <el-link :disabled="template.disabled" @click="addTemplate(template)">{{template.title}}</el-link>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-    </el-collapse-transition>
+  <div style="margin-top: 10px">
+    <el-card>
+      <el-row>
+        <div>
+          <el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button>
+          <i class="icon el-icon-arrow-right" :class="{'is-active': active}" @click="changeActive" style="margin-left: 20px"/>
+          <el-input size="small" v-model="jsr223ProcessorData.name" class="ms-api-header-select" style="width: 380px"/>
+          <el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
+        </div>
+      </el-row>
+      <el-collapse-transition>
+        <div v-if="active">
+          <el-row style="margin:0px 10px 10px">
+            <el-col>
+              <div class="document-url">
+                <el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor"
+                         type="primary">{{$t('commons.reference_documentation')}}
+                </el-link>
+                <ms-instructions-icon :content="$t('api_test.request.processor.bean_shell_processor_tip')"/>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="20" class="script-content">
+              <ms-code-edit v-if="isCodeEditAlive" :mode="jsr223ProcessorData.scriptLanguage"
+                            :read-only="isReadOnly"
+                            :data.sync="jsr223ProcessorData.script" theme="eclipse" :modes="['java','python']"
+                            ref="codeEdit"/>
+            </el-col>
+            <el-col :span="4" class="script-index">
+              <ms-dropdown :default-command="jsr223ProcessorData.language" :commands="languages" @command="languageChange"/>
+              <div class="template-title">{{$t('api_test.request.processor.code_template')}}</div>
+              <div v-for="(template, index) in codeTemplates" :key="index" class="code-template">
+                <el-link :disabled="template.disabled" @click="addTemplate(template)">{{template.title}}</el-link>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-collapse-transition>
+    </el-card>
   </div>
 </template>
 
@@ -138,7 +140,7 @@
         }
         this.reload();
       },
-      remove(){
+      remove() {
         this.$emit('remove', this.jsr223ProcessorData);
       },
       reload() {
@@ -195,4 +197,7 @@
   .icon.is-active {
     transform: rotate(90deg);
   }
+  /deep/ .el-card__body {
+    padding: 15px;
+  }
 </style>