diff --git a/frontend/src/business/components/api/automation/scenario/ApiComponent.vue b/frontend/src/business/components/api/automation/scenario/ApiComponent.vue
index 9361031ecd..beeb603553 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiComponent.vue
@@ -1,80 +1,142 @@
 <template>
-  <div v-loading="loading">
-    <el-card>
-      <el-row>
-        <div class="el-step__icon is-text ms-api-col" v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF' || request.referenced==='Copy'">
-          <div class="el-step__icon-inner">{{request.index}}</div>
-        </div>
-        <div class="el-step__icon is-text ms-api-col-ot-import" v-else-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'">
-          <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>
+  <api-base-component
+    v-loading="loading"
+    @copy="copyRow"
+    @remove="remove"
+    :data="request"
+    :color="displayColor.color"
+    :background-color="displayColor.backgroundColor"
+    :title="displayTitle">
 
-        <el-button v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF'  || request.referenced==='Copy'" class="ms-left-button" size="small">
-          {{$t('api_test.automation.api_list_import')}}
-        </el-button>
+    <template v-slot:headerLeft>
+      <slot name="headerLeft">
+        <i class="icon el-icon-arrow-right" :class="{'is-active': request.active}"
+           @click="active(request)"/>
+        <el-input v-if="isShowInput || !request.name" size="small" v-model="request.name" class="name-input"
+                  @blur="isShowInput = false" :placeholder="$t('commons.input_name')"/>
+        <span v-else>
+          {{request.name}}
+          <i :class="{'edit-disable' : isDeletedOrRef}" class="el-icon-edit" style="cursor:pointer" @click="editName" v-tester/>
+        </span>
+      </slot>
 
-        <el-button v-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'" class="ms-api-col-ot-import-button" size="small">
-          {{$t('api_test.automation.external_import')}}
-        </el-button>
+      <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==='Copy'">{{ $t('commons.copy') }}</el-tag>
+      <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
+    </template>
 
-        <el-button v-if="request.referenced==undefined || request.referenced==='Created' " class="ms-create-button" size="small">
-          {{$t('api_test.automation.customize_req')}}
-        </el-button>
+    <template v-slot:button>
+      <el-button @click="run" :tip="$t('api_test.run')" icon="el-icon-video-play" style="background-color: #409EFF;color: white;" size="mini" circle/>
+    </template>
 
-        <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%;" :placeholder="$t('commons.input_name')" v-else/>
+    <div v-if="request.protocol === 'HTTP'">
+      <el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-if="request.url" v-model="request.url" style="width: 85%;margin-top: 10px" size="small">
+        <el-select v-model="request.method" slot="prepend" style="width: 100px" size="small">
+          <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
+        </el-select>
+      </el-input>
+      <el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-else v-model="request.path" style="width: 85%;margin-top: 10px" size="small">
+        <el-select v-model="request.method" slot="prepend" style="width: 100px" size="small">
+          <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
+        </el-select>
+      </el-input>
+    </div>
+    <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
+    <ms-api-request-form :referenced="true" :headers="request.headers " :request="request" v-if="request.protocol==='HTTP' || request.type==='HTTPSamplerProxy'"/>
+    <ms-tcp-basis-parameters :request="request" v-if="request.protocol==='TCP'|| request.type==='TCPSampler'"/>
+    <ms-sql-basis-parameters :request="request" v-if="request.protocol==='SQL'|| request.type==='JDBCSampler'" :showScript="false"/>
+    <ms-dubbo-basis-parameters :request="request" v-if="request.protocol==='DUBBO' || request.protocol==='dubbo://'|| request.type==='DubboSampler'" :showScript="false"/>
 
-        <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==='Copy'">{{ $t('commons.copy') }}</el-tag>
-        <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
-        <div style="margin-right: 20px; float: right">
-          <i class="icon el-icon-arrow-right" :class="{'is-active': request.active}"
-             @click="active(request)"/>
-          <el-switch v-model="request.enable" style="margin-left: 10px"/>
-          <el-button @click="run" :tip="$t('api_test.run')" icon="el-icon-video-play"
-                     style="background-color: #409EFF;color: white;margin-left: 10px" size="mini" circle/>
-          <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
-          <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
-        </div>
-      </el-row>
-      <!-- 请求参数-->
-      <el-collapse-transition>
-        <div v-if="request.active">
-          <div v-if="request.protocol === 'HTTP'">
-            <el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-if="request.url" v-model="request.url" style="width: 85%;margin-top: 10px" size="small">
-              <el-select v-model="request.method" slot="prepend" style="width: 100px" size="small">
-                <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
-              </el-select>
-            </el-input>
-            <el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-else v-model="request.path" style="width: 85%;margin-top: 10px" size="small">
-              <el-select v-model="request.method" slot="prepend" style="width: 100px" size="small">
-                <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
-              </el-select>
-            </el-input>
-          </div>
-          <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
-          <ms-api-request-form :referenced="true" :headers="request.headers " :request="request" v-if="request.protocol==='HTTP' || request.type==='HTTPSamplerProxy'"/>
-          <ms-tcp-basis-parameters :request="request" v-if="request.protocol==='TCP'|| request.type==='TCPSampler'"/>
-          <ms-sql-basis-parameters :request="request" v-if="request.protocol==='SQL'|| request.type==='JDBCSampler'" :showScript="false"/>
-          <ms-dubbo-basis-parameters :request="request" v-if="request.protocol==='DUBBO' || request.protocol==='dubbo://'|| request.type==='DubboSampler'" :showScript="false"/>
+    <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
+    <ms-request-result-tail :currentProtocol="request.protocol" :response="request.requestResult" ref="runResult"/>
 
-          <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
-          <ms-request-result-tail :currentProtocol="request.protocol" :response="request.requestResult" ref="runResult"/>
+    <!-- 保存操作 -->
+    <el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)" v-if="!request.referenced">
+      {{$t('commons.save')}}
+    </el-button>
 
-          <!-- 保存操作 -->
-          <el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)" v-if="!request.referenced">
-            {{$t('commons.save')}}
-          </el-button>
-        </div>
-      </el-collapse-transition>
-    </el-card>
-    <!-- 执行组件 -->
     <ms-run :debug="false" :reportId="reportId" :run-data="runData"
             @runRefresh="runRefresh" ref="runTest"/>
-  </div>
+
+  </api-base-component>
+
+  <!--<div v-loading="loading"  @click="active(request)">-->
+    <!--<el-card>-->
+        <!--<el-row>-->
+        <!--&lt;!&ndash;<div class="el-step__icon is-text ms-api-col" v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF' || request.referenced==='Copy'">&ndash;&gt;-->
+          <!--&lt;!&ndash;<div class="el-step__icon-inner">{{request.index}}</div>&ndash;&gt;-->
+        <!--&lt;!&ndash;</div>&ndash;&gt;-->
+        <!--&lt;!&ndash;<div class="el-step__icon is-text ms-api-col-ot-import" v-else-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'">&ndash;&gt;-->
+          <!--&lt;!&ndash;<div class="el-step__icon-inner">{{request.index}}</div>&ndash;&gt;-->
+        <!--&lt;!&ndash;</div>&ndash;&gt;-->
+        <!--&lt;!&ndash;<div class="el-step__icon is-text ms-api-col-create" v-else>&ndash;&gt;-->
+          <!--&lt;!&ndash;<div class="el-step__icon-inner">{{request.index}}</div>&ndash;&gt;-->
+        <!--&lt;!&ndash;</div>&ndash;&gt;-->
+
+        <!--&lt;!&ndash;<el-button v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF'  || request.referenced==='Copy'" class="ms-left-button" size="small">&ndash;&gt;-->
+          <!--&lt;!&ndash;{{$t('api_test.automation.api_list_import')}}&ndash;&gt;-->
+        <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
+
+        <!--&lt;!&ndash;<el-button v-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'" class="ms-api-col-ot-import-button" size="small">&ndash;&gt;-->
+          <!--&lt;!&ndash;{{$t('api_test.automation.external_import')}}&ndash;&gt;-->
+        <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
+
+        <!--&lt;!&ndash;<el-button v-if="request.referenced==undefined || request.referenced==='Created' " class="ms-create-button" size="small">&ndash;&gt;-->
+          <!--&lt;!&ndash;{{$t('api_test.automation.customize_req')}}&ndash;&gt;-->
+        <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
+
+        <!--<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%;" :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==='Copy'">{{ $t('commons.copy') }}</el-tag>-->
+        <!--<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>-->
+
+        <!--<div style="margin-right: 20px; float: right">-->
+          <!--<i class="icon el-icon-arrow-right" :class="{'is-active': request.active}"-->
+             <!--@click="active(request)"/>-->
+          <!--<el-switch v-model="request.enable" style="margin-left: 10px"/>-->
+          <!--<el-button @click="run" :tip="$t('api_test.run')" icon="el-icon-video-play"-->
+                     <!--style="background-color: #409EFF;color: white;margin-left: 10px" size="mini" circle/>-->
+          <!--<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>-->
+          <!--<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>-->
+        <!--</div>-->
+      <!--</el-row>-->
+      <!--&lt;!&ndash;&lt;!&ndash; 请求参数&ndash;&gt;&ndash;&gt;-->
+      <!--&lt;!&ndash;<el-collapse-transition>&ndash;&gt;-->
+        <!--&lt;!&ndash;<div v-if="request.active">&ndash;&gt;-->
+          <!--&lt;!&ndash;<div v-if="request.protocol === 'HTTP'">&ndash;&gt;-->
+            <!--&lt;!&ndash;<el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-if="request.url" v-model="request.url" style="width: 85%;margin-top: 10px" size="small">&ndash;&gt;-->
+              <!--&lt;!&ndash;<el-select v-model="request.method" slot="prepend" style="width: 100px" size="small">&ndash;&gt;-->
+                <!--&lt;!&ndash;<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>&ndash;&gt;-->
+              <!--&lt;!&ndash;</el-select>&ndash;&gt;-->
+            <!--&lt;!&ndash;</el-input>&ndash;&gt;-->
+            <!--&lt;!&ndash;<el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-else v-model="request.path" style="width: 85%;margin-top: 10px" size="small">&ndash;&gt;-->
+              <!--&lt;!&ndash;<el-select v-model="request.method" slot="prepend" style="width: 100px" size="small">&ndash;&gt;-->
+                <!--&lt;!&ndash;<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>&ndash;&gt;-->
+              <!--&lt;!&ndash;</el-select>&ndash;&gt;-->
+            <!--&lt;!&ndash;</el-input>&ndash;&gt;-->
+          <!--&lt;!&ndash;</div>&ndash;&gt;-->
+          <!--&lt;!&ndash;<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>&ndash;&gt;-->
+          <!--&lt;!&ndash;<ms-api-request-form :referenced="true" :headers="request.headers " :request="request" v-if="request.protocol==='HTTP' || request.type==='HTTPSamplerProxy'"/>&ndash;&gt;-->
+          <!--&lt;!&ndash;<ms-tcp-basis-parameters :request="request" v-if="request.protocol==='TCP'|| request.type==='TCPSampler'"/>&ndash;&gt;-->
+          <!--&lt;!&ndash;<ms-sql-basis-parameters :request="request" v-if="request.protocol==='SQL'|| request.type==='JDBCSampler'" :showScript="false"/>&ndash;&gt;-->
+          <!--&lt;!&ndash;<ms-dubbo-basis-parameters :request="request" v-if="request.protocol==='DUBBO' || request.protocol==='dubbo://'|| request.type==='DubboSampler'" :showScript="false"/>&ndash;&gt;-->
+
+          <!--&lt;!&ndash;<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>&ndash;&gt;-->
+          <!--&lt;!&ndash;<ms-request-result-tail :currentProtocol="request.protocol" :response="request.requestResult" ref="runResult"/>&ndash;&gt;-->
+
+          <!--&lt;!&ndash;&lt;!&ndash; 保存操作 &ndash;&gt;&ndash;&gt;-->
+          <!--&lt;!&ndash;<el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)" v-if="!request.referenced">&ndash;&gt;-->
+            <!--&lt;!&ndash;{{$t('commons.save')}}&ndash;&gt;-->
+          <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
+        <!--&lt;!&ndash;</div>&ndash;&gt;-->
+      <!--&lt;!&ndash;</el-collapse-transition>&ndash;&gt;-->
+    <!--</el-card>-->
+    <!--&lt;!&ndash; 执行组件 &ndash;&gt;-->
+    <!--&lt;!&ndash;<ms-run :debug="false" :reportId="reportId" :run-data="runData"&ndash;&gt;-->
+            <!--&lt;!&ndash;@runRefresh="runRefresh" ref="runTest"/>&ndash;&gt;-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -86,6 +148,7 @@
   import MsRequestResultTail from "../../definition/components/response/RequestResultTail";
   import MsRun from "../../definition/components/Run";
   import {getUUID} from "@/common/js/utils";
+  import ApiBaseComponent from "./common/ApiBaseComponent";
 
   export default {
     name: "MsApiComponent",
@@ -95,9 +158,17 @@
       node: {},
       currentEnvironmentId: String,
     },
-    components: {MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun},
+    components: {
+      ApiBaseComponent,
+      MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun},
     data() {
-      return {loading: false, reqOptions: REQ_METHOD, reportId: "", runData: []}
+      return {
+        loading: false,
+        reqOptions: REQ_METHOD,
+        reportId: "",
+        runData: [],
+        isShowInput: false
+      }
     },
     created() {
       if (!this.request.requestResult) {
@@ -117,6 +188,61 @@
         }
       }
     },
+    computed: {
+      displayColor() {
+        if (this.isApiImport) {
+          return {
+            color: "#F56C6C",
+            backgroundColor: "#FCF1F1"
+          }
+        } else if (this.isExternalImport) {
+          return {
+            color: "#409EFF",
+            backgroundColor: "#EEF5FE"
+          }
+        } else if (this.isCustomizeReq) {
+          return {
+            color: "#008080",
+            backgroundColor: "#EBF2F2"
+          }
+        }
+        return {};
+      },
+      displayTitle() {
+        if (this.isApiImport) {
+          return this.$t('api_test.automation.api_list_import');
+        } else if (this.isExternalImport) {
+          return this.$t('api_test.automation.external_import');
+        } else if(this.isCustomizeReq) {
+          return this.$t('api_test.automation.customize_req');
+        }
+        return "";
+      },
+      isApiImport() {
+        if (this.request.referenced!=undefined && this.request.referenced==='Deleted' || this.request.referenced=='REF' || this.request.referenced==='Copy') {
+          return true
+        }
+        return false;
+      },
+      isExternalImport() {
+        if (this.request.referenced!=undefined && this.request.referenced==='OT_IMPORT') {
+          return true
+        }
+        return false;
+      },
+      isCustomizeReq() {
+        if (this.request.referenced==undefined || this.request.referenced==='Created') {
+          return true
+        }
+        return false;
+      },
+      isDeletedOrRef() {
+        if (this.request.referenced!= undefined && this.request.referenced === 'Deleted' || this.request.referenced === 'REF') {
+          return true
+        }
+        return false;
+      }
+    },
     methods: {
       remove() {
         this.$emit('remove', this.request, this.node);
@@ -124,6 +250,12 @@
       copyRow() {
         this.$emit('copyRow', this.request, this.node);
       },
+      editName() {
+        if (this.isDeletedOrRef) {
+          return;
+        }
+        this.isShowInput = true;
+      },
       getApiInfo() {
         if (this.request.id && this.request.referenced === 'REF') {
           let requestResult = this.request.requestResult;
@@ -168,7 +300,7 @@
         }
       },
       active(item) {
-        item.active = !item.active;
+        this.request.active = !this.request.active;
         this.reload();
       },
       run() {
@@ -205,32 +337,6 @@
 </script>
 
 <style scoped>
-  .ms-api-col {
-    background-color: #FCF1F1;
-    border-color: #F56C6C;
-    margin-right: 10px;
-    color: #F56C6C;
-  }
-
-  .ms-left-button {
-    color: #F56C6C;
-    background-color: #FCF1F1;
-    margin-right: 20px;
-  }
-
-  .ms-api-col-create {
-    background-color: #EBF2F2;
-    border-color: #008080;
-    margin-right: 10px;
-    color: #008080;
-  }
-
-  .ms-api-col-ot-import {
-    background-color: #EEF5FE;
-    border-color: #409EFF;
-    margin-right: 10px;
-    color: #409EFF;
-  }
 
   .ms-api-col-ot-import-button {
     background-color: #EEF5FE;
@@ -242,16 +348,6 @@
     padding: 15px;
   }
 
-  .icon.is-active {
-    transform: rotate(90deg);
-  }
-
-  .ms-create-button {
-    color: #008080;
-    background-color: #EBF2F2;
-    margin-right: 20px;
-  }
-
   .tip {
     padding: 3px 5px;
     font-size: 16px;
@@ -260,4 +356,20 @@
     margin: 20px 0;
   }
 
+  .name-input {
+    width: 30%;
+  }
+
+  .el-icon-arrow-right {
+    margin-right: 5px;
+  }
+
+  .icon.is-active {
+    transform: rotate(90deg);
+  }
+
+  .edit-disable {
+    color: #808080;
+  }
+
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue b/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue
index d872f6d562..9e4f542f24 100644
--- a/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue
+++ b/frontend/src/business/components/api/automation/scenario/ConstantTimer.vue
@@ -1,26 +1,25 @@
 <template>
-  <div>
-    <el-card>
-      <el-row>
-        <div class="el-step__icon is-text ms-api-col">
-          <div class="el-step__icon-inner">{{timer.index}}</div>
-        </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
-        <div style="margin-right: 20px; float: right">
-          <el-switch v-model="timer.enable" style="margin-left: 10px"/>
-          <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
-          <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
-        </div>
-      </el-row>
-    </el-card>
-  </div>
+  <api-base-component
+    @copy="copyRow"
+    @remove="remove"
+    :data="timer"
+    :show-collapse="false"
+    color="#67C23A"
+    background-color="#F2F9EE"
+    :title="$t('api_test.automation.wait_controller')">
+
+    <template v-slot:headerLeft>
+      <el-input-number class="time-input" size="small" v-model="timer.delay" :min="0" :step="1000"/>
+    </template>
+
+  </api-base-component>
 </template>
 
 <script>
+  import ApiBaseComponent from "./common/ApiBaseComponent";
   export default {
     name: "MsConstantTimer",
+    components: {ApiBaseComponent},
     props: {
       timer: {},
       node: {},
@@ -60,4 +59,9 @@
   /deep/ .el-card__body {
     padding: 15px;
   }
+
+  .time-input {
+    width: 30%;
+    /*margin-left: 20px;*/
+  }
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index f76c65e929..5874074bcc 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -663,6 +663,9 @@
         // 深度复制
         let obj = JSON.parse(JSON.stringify(row));
         obj.resourceId = getUUID();
+        if (obj.name) {
+          obj.name = obj.name  + '_copy';
+        }
         hashTree.push(obj);
         this.sort();
         this.reload();
diff --git a/frontend/src/business/components/api/automation/scenario/IfController.vue b/frontend/src/business/components/api/automation/scenario/IfController.vue
index 2f54518256..d7337e9bb3 100644
--- a/frontend/src/business/components/api/automation/scenario/IfController.vue
+++ b/frontend/src/business/components/api/automation/scenario/IfController.vue
@@ -1,10 +1,14 @@
 <template>
-  <el-card>
-    <el-row>
-      <div class="el-step__icon is-text ms-api-col">
-        <div class="el-step__icon-inner">{{controller.index}}</div>
-      </div>
-      <el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.if_controller')}}</el-button>
+  <api-base-component
+    @copy="copyRow"
+    @remove="remove"
+    :data="controller"
+    :show-collapse="false"
+    color="#E6A23C"
+    background-color="#FCF6EE"
+    :title="$t('api_test.automation.if_controller')">
+
+    <template v-slot:headerLeft>
 
       <el-input size="small" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
 
@@ -14,18 +18,16 @@
       </el-select>
 
       <el-input size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
-      <div style="margin-right: 20px; float: right">
-        <el-switch v-model="controller.enable" style="margin-left: 10px"/>
-        <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
-        <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
-      </div>
-    </el-row>
-  </el-card>
+    </template>
+
+  </api-base-component>
 </template>
 
 <script>
+  import ApiBaseComponent from "./common/ApiBaseComponent";
   export default {
     name: "MsIfController",
+    components: {ApiBaseComponent},
     props: {
       controller: {},
       node: {},
@@ -91,16 +93,4 @@
 </script>
 
 <style scoped>
-  .ms-api-col {
-    background-color: #FCF6EE;
-    border-color: #E6A23C;
-    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 4f29002650..1927fadb88 100644
--- a/frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue
+++ b/frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue
@@ -1,61 +1,48 @@
 <template>
-  <el-card>
-    <el-row>
-      <div>
-        <div class="el-step__icon is-text" :style="styleType" style="margin-right: 10px">
-          <div class="el-step__icon-inner">{{jsr223ProcessorData.index}}</div>
+  <api-base-component
+    @copy="copyRow"
+    @remove="remove"
+    :data="jsr223ProcessorData"
+    color="#B8741A"
+    background-color="#F9F1EA"
+    :title="title">
+    <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>
         </div>
-        <el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button>
-        <el-input size="small" v-model="jsr223ProcessorData.name" :placeholder="$t('commons.input_name')" class="ms-api-header-select" style="width: 40%"/>
-        <div style="margin-right: 20px; float: right">
-          <i class="icon el-icon-arrow-right" :class="{'is-active': this.jsr223ProcessorData.active}" @click="changeActive" style="margin-left: 20px"/>
-          <el-switch v-model="jsr223ProcessorData.enable" style="margin-left: 10px"/>
-          <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
-          <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
-        </div>
-      </div>
+      </el-col>
     </el-row>
-    <el-collapse-transition>
-      <div v-if="jsr223ProcessorData.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="[]"
-                          ref="codeEdit"/>
-          </el-col>
-          <el-col :span="4" class="script-index">
-            <ms-dropdown :default-command="jsr223ProcessorData.scriptLanguage" :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>
+    <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="[]"
+                      ref="codeEdit"/>
+      </el-col>
+      <el-col :span="4" class="script-index">
+        <ms-dropdown :default-command="jsr223ProcessorData.scriptLanguage" :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>
+  </api-base-component>
 </template>
 
 <script>
   import MsCodeEdit from "../../../common/components/MsCodeEdit";
   import MsInstructionsIcon from "../../../common/components/MsInstructionsIcon";
   import MsDropdown from "../../../common/components/MsDropdown";
+  import ApiBaseComponent from "./common/ApiBaseComponent";
 
 
   export default {
     name: "MsJsr233Processor",
-    components: {MsDropdown, MsInstructionsIcon, MsCodeEdit},
+    components: {ApiBaseComponent, MsDropdown, MsInstructionsIcon, MsCodeEdit},
     data() {
       return {
         jsr223ProcessorData: {},
@@ -192,12 +179,8 @@
     margin-bottom: 20px;
   }
 
-  .ms-api-header-select {
-    margin-left: 20px;
-    min-width: 300px;
+  /deep/ .el-divider {
+    margin-bottom: 10px;
   }
 
-  .icon.is-active {
-    transform: rotate(90deg);
-  }
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/LoopController.vue b/frontend/src/business/components/api/automation/scenario/LoopController.vue
index 7ea8bb0a85..b01724f5dd 100644
--- a/frontend/src/business/components/api/automation/scenario/LoopController.vue
+++ b/frontend/src/business/components/api/automation/scenario/LoopController.vue
@@ -1,84 +1,78 @@
 <template>
-  <el-card v-loading="loading">
-    <el-row>
-      <div class="el-step__icon is-text ms-api-col">
-        <div class="el-step__icon-inner">{{controller.index}}</div>
-      </div>
-      <el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.loop_controller')}}</el-button>
 
+  <api-base-component
+    @copy="copyRow"
+    @remove="remove"
+    :data="controller"
+    color="#015478"
+    background-color="#E6EEF2"
+    :title="$t('api_test.automation.loop_controller')">
+
+    <template v-slot:headerLeft>
       <el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="LOOP_COUNT">{{$t('loop.loops_title')}}</el-radio>
       <el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="FOREACH">{{$t('loop.foreach')}}</el-radio>
       <el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="WHILE">{{$t('loop.while')}}</el-radio>
+    </template>
 
-      <div style="margin-right: 20px; float: right">
-        <i class="icon el-icon-arrow-right" :class="{'is-active': controller.active}"
-           @click="active(controller)"/>
-        <el-switch v-model="controller.enable" style="margin-left: 10px"/>
-        <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
-        <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
-      </div>
-    </el-row>
 
-    <el-collapse-transition>
-      <div v-if="controller.active" style="margin-top: 20px;">
-        <div v-if="controller.loopType==='LOOP_COUNT'">
-          <el-row>
-            <el-col :span="8">
-              <span class="ms-span ms-radio">{{$t('loop.loops')}}</span>
-              <el-input-number size="small" v-model="controller.countController.loops" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
-              <span class="ms-span ms-radio">次</span>
-            </el-col>
-            <el-col :span="8">
-              <span class="ms-span ms-radio">{{$t('loop.interval')}}</span>
-              <el-input-number size="small" v-model="controller.countController.interval" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
-              <span class="ms-span ms-radio">秒</span>
-            </el-col>
-            <el-col :span="8">
-              <span class="ms-span ms-radio">{{$t('loop.proceed')}}</span>
-              <el-switch v-model="controller.countController.proceed"/>
-            </el-col>
-          </el-row>
-        </div>
-
-        <div v-else-if="controller.loopType==='FOREACH'">
-          <el-row>
-            <el-col :span="8">
-              <el-input :placeholder="$t('api_test.request.condition_variable')" v-model="controller.forEachController.inputVal" size="small"/>
-            </el-col>
-            <el-col :span="1" style="margin-top: 6px">
-              <span style="margin:10px 10px 10px">in</span>
-            </el-col>
-            <el-col :span="8">
-              <el-input :placeholder="$t('api_test.request.condition_variable')" v-model="controller.forEachController.returnVal" size="small"/>
-            </el-col>
-            <el-col :span="7">
-              <span class="ms-span ms-radio">{{$t('loop.interval')}}</span>
-              <el-input-number size="small" v-model="controller.forEachController.interval" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
-              <span class="ms-span ms-radio">秒</span>
-            </el-col>
-          </el-row>
-        </div>
-        <div v-else>
-          <el-input size="small" v-model="controller.whileController.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
-
-          <el-select v-model="controller.whileController.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.whileController.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
-          <span class="ms-span ms-radio">{{$t('loop.timeout')}}</span>
-          <el-input-number size="small" v-model="controller.whileController.timeout" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
+    <div v-if="controller.loopType==='LOOP_COUNT'">
+      <el-row>
+        <el-col :span="8">
+          <span class="ms-span ms-radio">{{$t('loop.loops')}}</span>
+          <el-input-number size="small" v-model="controller.countController.loops" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
+          <span class="ms-span ms-radio">次</span>
+        </el-col>
+        <el-col :span="8">
+          <span class="ms-span ms-radio">{{$t('loop.interval')}}</span>
+          <el-input-number size="small" v-model="controller.countController.interval" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
           <span class="ms-span ms-radio">秒</span>
-        </div>
-      </div>
+        </el-col>
+        <el-col :span="8">
+          <span class="ms-span ms-radio">{{$t('loop.proceed')}}</span>
+          <el-switch v-model="controller.countController.proceed"/>
+        </el-col>
+      </el-row>
+    </div>
 
-    </el-collapse-transition>
-  </el-card>
+    <div v-else-if="controller.loopType==='FOREACH'">
+      <el-row>
+        <el-col :span="8">
+          <el-input :placeholder="$t('api_test.request.condition_variable')" v-model="controller.forEachController.inputVal" size="small"/>
+        </el-col>
+        <el-col :span="1" style="margin-top: 6px">
+          <span style="margin:10px 10px 10px">in</span>
+        </el-col>
+        <el-col :span="8">
+          <el-input :placeholder="$t('api_test.request.condition_variable')" v-model="controller.forEachController.returnVal" size="small"/>
+        </el-col>
+        <el-col :span="7">
+          <span class="ms-span ms-radio">{{$t('loop.interval')}}</span>
+          <el-input-number size="small" v-model="controller.forEachController.interval" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
+          <span class="ms-span ms-radio">秒</span>
+        </el-col>
+      </el-row>
+    </div>
+    <div v-else>
+      <el-input size="small" v-model="controller.whileController.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
+
+      <el-select v-model="controller.whileController.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.whileController.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
+      <span class="ms-span ms-radio">{{$t('loop.timeout')}}</span>
+      <el-input-number size="small" v-model="controller.whileController.timeout" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
+      <span class="ms-span ms-radio">秒</span>
+    </div>
+
+  </api-base-component>
 </template>
 
 <script>
+  import ApiBaseComponent from "./common/ApiBaseComponent";
   export default {
     name: "MsLoopController",
+    components: {ApiBaseComponent},
     props: {
       controller: {},
       node: {},
@@ -159,22 +153,6 @@
 </script>
 
 <style scoped>
-  .ms-api-col {
-    background-color: #F4F4F5;
-    border-color: #02A7F0;
-    margin-right: 10px;
-    color: #02A7F0;
-  }
-
-  .ms-title-buttion {
-    background-color: #F4F4F5;
-    margin-right: 20px;
-    color: #02A7F0;
-  }
-
-  .icon.is-active {
-    transform: rotate(90deg);
-  }
 
   .ms-span {
     margin: 10px;
diff --git a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
new file mode 100644
index 0000000000..1ed60081b6
--- /dev/null
+++ b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
@@ -0,0 +1,117 @@
+<template>
+  <el-card>
+    <div class="header" @click="active(data)">
+
+      <div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
+        <div class="el-step__icon-inner">{{data.index}}</div>
+      </div>
+      <el-button class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
+
+      <span @click.stop>
+        <slot name="headerLeft">
+          <i class="icon el-icon-arrow-right" :class="{'is-active': data.active}"
+             @click="active(data)"/>
+          <el-input v-if="!data.name || isShowInput" size="small" v-model="data.name" class="name-input"
+                    @blur="isShowInput = false" :placeholder="$t('commons.input_name')"/>
+          <span v-else>
+            {{data.name}}
+            <i class="el-icon-edit" style="cursor:pointer" @click="isShowInput = true" v-tester/>
+          </span>
+        </slot>
+      </span>
+
+      <div class="header-right" @click.stop>
+        <el-switch v-model="data.enable" class="enable-switch"/>
+        <slot name="button"></slot>
+        <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow"/>
+        <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove"/>
+      </div>
+    </div>
+
+    <el-collapse-transition>
+      <div v-if="data.active && showCollapse">
+        <el-divider></el-divider>
+       <slot></slot>
+      </div>
+    </el-collapse-transition>
+  </el-card>
+</template>
+
+<script>
+    export default {
+      name: "ApiBaseComponent",
+      data() {
+        return {
+          isShowInput: false
+        }
+      },
+      props: {
+        data: {
+          type: Object,
+          default() {
+            return {}
+          },
+        },
+        color: {
+          type: String,
+          default() {
+            return "#B8741A"
+          }
+        },
+        backgroundColor: {
+          type: String,
+          default() {
+            return "#F9F1EA"
+          }
+        },
+        showCollapse: {
+          type: Boolean,
+          default() {
+            return true
+          }
+        },
+        title: String
+      },
+      methods: {
+        active() {
+          this.data.active = !this.data.active;
+          this.$emit('active');
+        },
+        copyRow() {
+          this.$emit('copy');
+        },
+        remove() {
+          this.$emit('remove');
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .icon.is-active {
+    transform: rotate(90deg);
+  }
+
+  .name-input {
+    width: 30%;
+  }
+
+  .el-icon-arrow-right {
+    margin-right: 5px;
+  }
+
+  .ms-left-buttion {
+    margin-right: 15px;
+  }
+
+  .header-right {
+    margin-right: 20px;
+    float: right;
+  }
+
+  .enable-switch {
+    margin-right: 10px;
+  }
+
+</style>
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 da1b8a8856..107a7cdb67 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
@@ -1,64 +1,53 @@
 <template>
-  <div :style="customizeStyle" v-loading="loading">
-    <el-card>
-      <div>
-        <div class="el-step__icon is-text" style="color: #A30014;background-color: #F7E6E9;margin-right: 10px" v-if="assertions.index">
-          <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>
+  <api-base-component
+    v-loading="loading"
+    @copy="copyRow"
+    @remove="remove"
+    @active="active"
+    :data="assertions"
+    color="#A30014"
+    background-color="#F7E6E9"
+    :title="$t('api_test.definition.request.assertions_rule')">
 
-        <el-input size="small" v-model="assertions.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/>
-        <div style="margin-right: 20px; float: right">
-          <i class="icon el-icon-arrow-right" :class="{'is-active': assertions.active}" @click="active(assertions)" style="margin-left: 20px"/>
-          <el-switch v-model="assertions.enable" style="margin-left: 10px"/>
-          <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
-          <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
-        </div>
-      </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>
+    <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>
 
-          <api-json-path-suggest-button :open-tip="$t('api_test.request.assertions.json_path_suggest')"
-                                        :clear-tip="$t('api_test.request.assertions.json_path_clear')" @open="suggestJsonOpen" @clear="clearJson"/>
-          <ms-api-assertions-edit :is-read-only="isReadOnly" :assertions="assertions" :reloadData="reloadData" style="margin-bottom: 20px"/>
+    <api-json-path-suggest-button :open-tip="$t('api_test.request.assertions.json_path_suggest')"
+                                  :clear-tip="$t('api_test.request.assertions.json_path_clear')" @open="suggestJsonOpen" @clear="clearJson"/>
 
-        </div>
-      </el-collapse-transition>
-    </el-card>
+    <ms-api-assertions-edit :is-read-only="isReadOnly" :assertions="assertions" :reloadData="reloadData" style="margin-bottom: 20px"/>
 
     <ms-api-jsonpath-suggest :tip="$t('api_test.request.extract.suggest_tip')" @addSuggest="addJsonPathSuggest" ref="jsonpathSuggest"/>
-  </div>
+
+  </api-base-component>
 </template>
 
 <script>
@@ -74,11 +63,13 @@
   import {getUUID} from "@/common/js/utils";
   import ApiJsonPathSuggestButton from "./ApiJsonPathSuggestButton";
   import MsApiJsonpathSuggest from "./ApiJsonpathSuggest";
+  import ApiBaseComponent from "../../../automation/scenario/common/ApiBaseComponent";
 
   export default {
     name: "MsApiAssertions",
 
     components: {
+      ApiBaseComponent,
       MsApiJsonpathSuggest,
       ApiJsonPathSuggestButton,
       MsApiAssertionXPath2,
@@ -139,8 +130,8 @@
           this.loading = false
         })
       },
-      active(item) {
-        item.active = !item.active;
+      active() {
+        // item.active = !item.active;
         this.reload();
       },
       remove() {
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 0191720131..c14bbe1bcc 100644
--- a/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
+++ b/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
@@ -1,55 +1,40 @@
 <template>
-  <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>
+  <api-base-component
+    @copy="copyRow"
+    @remove="remove"
+    :data="extract"
+    color="#015478"
+    background-color="#E6EEF2"
+    :title="$t('api_test.definition.request.extract_param')">
+    <div style="margin: 20px">
+      <div class="extract-description">
+        {{$t('api_test.request.extract.description')}}
       </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-input size="small" v-model="extract.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/>
-      <div style="margin-right: 20px; float: right">
-        <i class="icon el-icon-arrow-right" :class="{'is-active': extract.active}" @click="active(extract)" style="margin-left: 20px"/>
-        <el-switch v-model="extract.enable" style="margin-left: 10px"/>
-        <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
-        <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
+      <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>
       </div>
 
-      <!-- 请求参数-->
-      <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>
+      <api-json-path-suggest-button :open-tip="$t('api_test.request.extract.json_path_suggest')"
+                                    :clear-tip="$t('api_test.request.extract.json_path_clear')" @open="suggestJsonOpen" @clear="clearJson"/>
 
-                <el-button v-if="!type" :disabled="true" type="primary" size="small">Add</el-button>
-              </el-row>
-            </div>
-
-            <api-json-path-suggest-button :open-tip="$t('api_test.request.extract.json_path_suggest')"
-                                          :clear-tip="$t('api_test.request.extract.json_path_clear')" @open="suggestJsonOpen" @clear="clearJson"/>
-
-            <ms-api-extract-edit :is-read-only="isReadOnly" :reloadData="reloadData" :extract="extract"/>
-          </div>
-        </div>
-      </el-collapse-transition>
-
-      <ms-api-jsonpath-suggest :tip="$t('api_test.request.extract.suggest_tip')" @addSuggest="addJsonPathSuggest" ref="jsonpathSuggest"/>
-
-    </el-card>
-  </div>
+      <ms-api-extract-edit :is-read-only="isReadOnly" :reloadData="reloadData" :extract="extract"/>
+    </div>
+    <ms-api-jsonpath-suggest :tip="$t('api_test.request.extract.suggest_tip')" @addSuggest="addJsonPathSuggest" ref="jsonpathSuggest"/>
+  </api-base-component>
 </template>
 
 <script>
@@ -60,11 +45,13 @@
   import ApiJsonPathSuggestButton from "../assertion/ApiJsonPathSuggestButton";
   import MsApiJsonpathSuggest from "../assertion/ApiJsonpathSuggest";
   import {ExtractJSONPath} from "../../../test/model/ScenarioModel";
+  import ApiBaseComponent from "../../../automation/scenario/common/ApiBaseComponent";
 
   export default {
     name: "MsApiExtract",
 
     components: {
+      ApiBaseComponent,
       MsApiJsonpathSuggest,
       ApiJsonPathSuggestButton,
       MsApiExtractCommon,
@@ -169,10 +156,6 @@
     border-radius: 5px;
   }
 
-  .icon.is-active {
-    transform: rotate(90deg);
-  }
-
   /deep/ .el-card__body {
     padding: 15px;
   }