From 7f2fe8acd1ad02dabf8f7326148b3ecf11a800bf Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Mon, 23 Nov 2020 15:17:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E5=AE=9A=E4=B9=89):=20?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=8F=90=E5=8F=96=E5=8F=82=E6=95=B0=E5=92=8C?=
 =?UTF-8?q?=E6=96=AD=E8=A8=80=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/service/ApiDefinitionService.java     |   1 +
 backend/src/main/java/io/metersphere/xpack    |   2 +-
 .../resources/i18n/messages_en_US.properties  |   1 -
 .../resources/i18n/messages_zh_CN.properties  |   1 -
 .../resources/i18n/messages_zh_TW.properties  |   2 -
 .../assertion/ApiAssertionDuration.vue        |   5 +-
 .../assertion/ApiAssertionJsonPath.vue        |   1 -
 .../assertion/ApiAssertionJsr223.vue          |   1 -
 .../assertion/ApiAssertionRegex.vue           |   1 -
 .../assertion/ApiAssertionXPath2.vue          |   1 -
 .../components/assertion/ApiAssertions.vue    |  29 ++++-
 .../assertion/ApiAssertionsEdit.vue           |   3 +-
 .../assertion/ApiJsonpathSuggestList.vue      | 107 +++++++++---------
 .../components/extract/ApiExtract.vue         |  10 +-
 .../components/extract/ApiExtractCommon.vue   |   1 -
 .../components/extract/ApiExtractEdit.vue     |   2 +-
 .../components/request/ApiHttpRequestForm.vue |  49 ++++----
 .../components/response/ResponseResult.vue    |   9 ++
 .../api/definition/model/ApiTestModel.js      |   1 +
 frontend/src/business/components/xpack        |   2 +-
 frontend/src/i18n/en-US.js                    |   7 ++
 frontend/src/i18n/zh-CN.js                    |   7 +-
 frontend/src/i18n/zh-TW.js                    |   6 +
 23 files changed, 141 insertions(+), 108 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
index 683c78b0d9..ad1bf9d528 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
@@ -220,6 +220,7 @@ public class ApiDefinitionService {
         createBodyFiles(bodyUploadIds, bodyFiles);
 
         HashTree hashTree = request.getTestElement().generateHashTree();
+        request.getTestElement().getJmx(hashTree);
         // 调用执行方法
         jMeterService.runDefinition(request.getId(), hashTree, request.getReportId(), ApiRunMode.DELIMIT.name());
         return request.getId();
diff --git a/backend/src/main/java/io/metersphere/xpack b/backend/src/main/java/io/metersphere/xpack
index 24047fea95..419c75bca6 160000
--- a/backend/src/main/java/io/metersphere/xpack
+++ b/backend/src/main/java/io/metersphere/xpack
@@ -1 +1 @@
-Subproject commit 24047fea950a74f7848a9fdaa857a22b884c4ce2
+Subproject commit 419c75bca64b7c5bfbd1194d7f0fd9919f0caa04
diff --git a/backend/src/main/resources/i18n/messages_en_US.properties b/backend/src/main/resources/i18n/messages_en_US.properties
index 5dc4f84212..9aec80622b 100644
--- a/backend/src/main/resources/i18n/messages_en_US.properties
+++ b/backend/src/main/resources/i18n/messages_en_US.properties
@@ -167,7 +167,6 @@ check_owner_comment=The current user does not have permission to manipulate this
 upload_content_is_null=Imported content is empty
 test_plan_notification=Test plan notification
 task_defect_notification=Task defect notification
-task_notification=Jenkins Task notification
 task_notification_=Timing task result notification
 api_definition_url_not_repeating=The interface request address already exists
 task_notification_jenkins=Jenkins Task notification
diff --git a/backend/src/main/resources/i18n/messages_zh_CN.properties b/backend/src/main/resources/i18n/messages_zh_CN.properties
index bc3e719677..8226488ddb 100644
--- a/backend/src/main/resources/i18n/messages_zh_CN.properties
+++ b/backend/src/main/resources/i18n/messages_zh_CN.properties
@@ -168,7 +168,6 @@ check_owner_comment=当前用户没有操作此评论的权限
 upload_content_is_null=导入内容为空
 test_plan_notification=测试计划通知
 task_defect_notification=缺陷任务通知
-task_notification=jenkins任务通知
 task_notification_=定时任务结果通知
 api_definition_url_not_repeating=接口请求地址已经存在
 task_notification_jenkins=jenkins任务通知
diff --git a/backend/src/main/resources/i18n/messages_zh_TW.properties b/backend/src/main/resources/i18n/messages_zh_TW.properties
index b0be5d2483..4d60417416 100644
--- a/backend/src/main/resources/i18n/messages_zh_TW.properties
+++ b/backend/src/main/resources/i18n/messages_zh_TW.properties
@@ -171,7 +171,5 @@ test_plan_notification=測試計畫通知
 task_defect_notification=缺陷任務通知
 task_notification_jenkins=jenkins任務通知
 task_notification=任務通知
-
-task_notification=jenkins任務通知
 task_notification_=定時任務通知
 api_definition_url_not_repeating=接口請求地址已經存在
diff --git a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionDuration.vue b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionDuration.vue
index 9412f0c145..a24aabc915 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionDuration.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionDuration.vue
@@ -17,14 +17,12 @@
 
 <script>
 
-  import {Duration} from "../../model/ApiTestModel";
-
   export default {
     name: "MsApiAssertionDuration",
 
     props: {
-      duration: Duration,
       value: [Number, String],
+      duration:{},
       edit: Boolean,
       callback: Function,
       isReadOnly: {
@@ -42,6 +40,7 @@
       },
       remove() {
         this.duration.value = undefined;
+
       },
       change(value) {
         if (this.validate()) {
diff --git a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsonPath.vue b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsonPath.vue
index 7e6c76efb3..62a37b75cf 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsonPath.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsonPath.vue
@@ -27,7 +27,6 @@
 
     props: {
       jsonPath: {
-        type: JSONPath,
         default: () => {
           return new JSONPath();
         }
diff --git a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsr223.vue b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsr223.vue
index 5261c01154..af8da65f10 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsr223.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsr223.vue
@@ -64,7 +64,6 @@ export default {
   components: {MsDialogFooter, MsJsr233Processor},
   props: {
     assertion: {
-      type: AssertionJSR223,
       default: () => {
         return new AssertionJSR223();
       }
diff --git a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionRegex.vue b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionRegex.vue
index 0e56d6a4f3..1feb9822d9 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionRegex.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionRegex.vue
@@ -37,7 +37,6 @@ export default {
 
   props: {
     regex: {
-      type: Regex,
       default: () => {
         return new Regex();
       }
diff --git a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionXPath2.vue b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionXPath2.vue
index ab2302436a..c134f9faea 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionXPath2.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionXPath2.vue
@@ -23,7 +23,6 @@
 
     props: {
       xPath2: {
-        type: XPath2,
         default: () => {
           return new XPath2();
         }
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 2d1825f601..d363d7d659 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
@@ -1,12 +1,18 @@
 <template>
-  <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;margin-top: 20px">
+  <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;margin-top: 20px" v-loading="loading">
+    <div>
+      <el-button class="ms-left-buttion" size="small" type="danger" plain>{{$t('api_test.definition.request.assertions_rule')}}</el-button>
+      <el-button size="small" style="float: right;margin-top: 0px" @click="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.text')" :value="options.TEXT"/>
+            <!--
+                        <el-option :label="$t('api_test.request.assertions.text')" :value="options.TEXT"/>
+            -->
             <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"/>
@@ -15,8 +21,10 @@
           </el-select>
         </el-col>
         <el-col :span="20">
-          <ms-api-assertion-text :is-read-only="isReadOnly" :list="assertions.regex" v-if="type === options.TEXT"
-                                 :callback="after"/>
+          <!--
+                    <ms-api-assertion-text :is-read-only="isReadOnly" :list="assertions.regex" v-if="type === options.TEXT"
+                                           :callback="after"/>
+          -->
           <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"
@@ -77,7 +85,7 @@
     },
 
     props: {
-      assertions: Assertions,
+      assertions: {},
       request: {},
       scenario: Scenario,
       isReadOnly: {
@@ -91,12 +99,14 @@
         options: ASSERTION_TYPE,
         time: "",
         type: "",
+        loading: false,
       }
     },
 
     methods: {
       after() {
         this.type = "";
+        this.reload();
       },
       suggestJsonOpen() {
         if (!this.request.debugRequestResult) {
@@ -105,6 +115,15 @@
         }
         this.$refs.jsonpathSuggestList.open();
       },
+      reload() {
+        this.loading = true
+        this.$nextTick(() => {
+          this.loading = false
+        })
+      },
+      remove(){
+        this.$emit('remove', this.assertions);
+      },
       addJsonpathSuggest(jsonPathList) {
         jsonPathList.forEach(jsonPath => {
           let jsonItem = new JSONPath();
diff --git a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionsEdit.vue b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionsEdit.vue
index 1f670ee7a5..b382e58a15 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionsEdit.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionsEdit.vue
@@ -54,7 +54,6 @@
 <script>
 import MsApiAssertionRegex from "./ApiAssertionRegex";
 import MsApiAssertionDuration from "./ApiAssertionDuration";
-import {Assertions} from "../../model/ApiTestModel";
 import MsApiAssertionJsonPath from "./ApiAssertionJsonPath";
 import MsApiAssertionJsr223 from "@/business/components/api/test/components/assertion/ApiAssertionJsr223";
 import MsApiAssertionXPath2 from "./ApiAssertionXPath2";
@@ -67,7 +66,7 @@ export default {
     MsApiAssertionJsr223, MsApiAssertionJsonPath, MsApiAssertionDuration, MsApiAssertionRegex},
 
   props: {
-    assertions: Assertions,
+    assertions: {},
     isReadOnly: {
       type: Boolean,
       default: false
diff --git a/frontend/src/business/components/api/definition/components/assertion/ApiJsonpathSuggestList.vue b/frontend/src/business/components/api/definition/components/assertion/ApiJsonpathSuggestList.vue
index 24b0b1a975..23b57dd83a 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiJsonpathSuggestList.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiJsonpathSuggestList.vue
@@ -50,64 +50,65 @@
 </template>
 
 <script>
-    import MsDialogFooter from "../../../../common/components/MsDialogFooter";
-    import {HttpRequest} from "../../model/ApiTestModel";
-    export default {
-      name: "MsApiJsonpathSuggestList",
-      components: {MsDialogFooter},
-      data() {
-        return {
-          result: {},
-          dialogFormVisible: false,
-          isCheckAll: false,
-          selectItems: new Set(),
-          jsonPathList: [],
-        };
+  import MsDialogFooter from "../../../../common/components/MsDialogFooter";
+  import {HttpRequest} from "../../model/ApiTestModel";
+
+  export default {
+    name: "MsApiJsonpathSuggestList",
+    components: {MsDialogFooter},
+    data() {
+      return {
+        result: {},
+        dialogFormVisible: false,
+        isCheckAll: false,
+        selectItems: new Set(),
+        jsonPathList: [],
+      };
+    },
+    props: {
+      request: HttpRequest,
+    },
+    methods: {
+      close() {
+        this.selectItems.clear();
       },
-      props: {
-        request: HttpRequest,
+      open() {
+        this.getJsonPaths();
       },
-      methods: {
-        close() {
-          this.selectItems.clear();
-        },
-        open() {
-          this.getJsonPaths();
-        },
-        getJsonPaths() {
-          if (this.request.debugRequestResult) {
-            let param = {
-              jsonPath: this.request.debugRequestResult.responseResult.body
-            };
-            this.result = this.$post("/api/getJsonPaths", param).then(response => {
-              this.jsonPathList = response.data.data;
-              this.dialogFormVisible = true;
-            }).catch(() => {
-              this.$warning(this.$t('api_test.request.assertions.json_path_err'));
-              this.dialogFormVisible = false;
-            });
-          }
-        },
-        handleSelectAll(selection) {
-          if (selection.length > 0) {
-            this.selectItems = new Set(this.jsonPathList);
-          } else {
-            this.selectItems = new Set();
-          }
-        },
-        handleSelectionChange(selection, row) {
-          if (this.selectItems.has(row)) {
-            this.selectItems.delete(row);
-          } else {
-            this.selectItems.add(row);
-          }
-        },
-        commit() {
-          this.$emit("addJsonpathSuggest", this.selectItems);
-          this.dialogFormVisible = false;
+      getJsonPaths() {
+        if (this.request.debugRequestResult) {
+          let param = {
+            jsonPath: this.request.debugRequestResult.responseResult.body
+          };
+          this.result = this.$post("/api/getJsonPaths", param).then(response => {
+            this.jsonPathList = response.data.data;
+            this.dialogFormVisible = true;
+          }).catch(() => {
+            this.$warning(this.$t('api_test.request.assertions.json_path_err'));
+            this.dialogFormVisible = false;
+          });
         }
+      },
+      handleSelectAll(selection) {
+        if (selection.length > 0) {
+          this.selectItems = new Set(this.jsonPathList);
+        } else {
+          this.selectItems = new Set();
+        }
+      },
+      handleSelectionChange(selection, row) {
+        if (this.selectItems.has(row)) {
+          this.selectItems.delete(row);
+        } else {
+          this.selectItems.add(row);
+        }
+      },
+      commit() {
+        this.$emit("addJsonpathSuggest", this.selectItems);
+        this.dialogFormVisible = false;
       }
     }
+  }
 </script>
 
 <style scoped>
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 b0b6f0b534..0b53b150b5 100644
--- a/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
+++ b/frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
@@ -1,6 +1,8 @@
 <template>
   <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;margin-top: 20px">
-    <el-button class="ms-left-buttion" size="small" type="info" plain>提取参数</el-button>
+    <el-button class="ms-left-buttion" size="small" type="info" plain>{{$t('api_test.definition.request.extract_param')}}</el-button>
+    <el-button size="small" style="float: right;margin-top: 0px" @click="remove">移除</el-button>
+
     <div style="margin: 20px">
       <div class="extract-description">
         {{$t('api_test.request.extract.description')}}
@@ -59,7 +61,11 @@
     methods: {
       after() {
         this.type = "";
-      }
+      },
+      remove() {
+        this.$emit('remove', this.extract);
+      },
+
     },
 
     computed: {
diff --git a/frontend/src/business/components/api/definition/components/extract/ApiExtractCommon.vue b/frontend/src/business/components/api/definition/components/extract/ApiExtractCommon.vue
index 71ba1e2a92..6e45e64819 100644
--- a/frontend/src/business/components/api/definition/components/extract/ApiExtractCommon.vue
+++ b/frontend/src/business/components/api/definition/components/extract/ApiExtractCommon.vue
@@ -43,7 +43,6 @@
         }
       },
       common: {
-        type: ExtractCommon,
         default: () => {
           return new ExtractCommon();
         }
diff --git a/frontend/src/business/components/api/definition/components/extract/ApiExtractEdit.vue b/frontend/src/business/components/api/definition/components/extract/ApiExtractEdit.vue
index 041abb66bc..7987d9584a 100644
--- a/frontend/src/business/components/api/definition/components/extract/ApiExtractEdit.vue
+++ b/frontend/src/business/components/api/definition/components/extract/ApiExtractEdit.vue
@@ -43,7 +43,7 @@
     components: {MsApiExtractCommon},
 
     props: {
-      extract: Extract,
+      extract: {},
       isReadOnly: {
         type: Boolean,
         default: false
diff --git a/frontend/src/business/components/api/definition/components/request/ApiHttpRequestForm.vue b/frontend/src/business/components/api/definition/components/request/ApiHttpRequestForm.vue
index 75ff78998b..71edff0b06 100644
--- a/frontend/src/business/components/api/definition/components/request/ApiHttpRequestForm.vue
+++ b/frontend/src/business/components/api/definition/components/request/ApiHttpRequestForm.vue
@@ -19,7 +19,7 @@
 
           <!--query 参数-->
           <el-tab-pane :label="$t('api_test.definition.request.query_param')" name="parameters" :disabled="request.rest.length>1">
-            <el-tooltip class="item-tabs" effect="dark" content="地址栏中跟在？后面的参数,如updateapi?id=112" placement="top-start" slot="label">
+            <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.query_info')" placement="top-start" slot="label">
               <span>{{$t('api_test.definition.request.query_param')}}
                 <div class="el-step__icon is-text ms-api-col ms-query" v-if="request.arguments.length>1">
                   <div class="el-step__icon-inner">{{request.arguments.length-1}}</div>
@@ -31,7 +31,7 @@
 
           <!--REST 参数-->
           <el-tab-pane :label="$t('api_test.definition.request.rest_param')" name="rest" :disabled="request.arguments.length>1">
-            <el-tooltip class="item-tabs" effect="dark" content="地址栏中被斜杠/分隔的参数，如updateapi/{id}" placement="top-start" slot="label">
+            <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.rest_info')" placement="top-start" slot="label">
               <span>
                 {{$t('api_test.definition.request.rest_param')}}
                 <div class="el-step__icon is-text ms-api-col ms-query" v-if="request.rest.length>1">
@@ -49,7 +49,7 @@
 
           <!-- 认证配置 -->
           <el-tab-pane :label="$t('api_test.definition.request.auth_config')" name="authConfig">
-            <el-tooltip class="item-tabs" effect="dark" content="请求需要进行权限校验" placement="top-start" slot="label">
+            <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.auth_config_info')" placement="top-start" slot="label">
               <span>{{$t('api_test.definition.request.auth_config')}}</span>
             </el-tooltip>
 
@@ -58,31 +58,30 @@
 
         </el-tabs>
       </div>
-      <!--定制脚本-->
+
       <div v-for="row in request.hashTree" :key="row.id" v-loading="isReloadData">
-        <ms-jsr233-processor v-if="row.label ==='JSR223 PreProcessor'" @remove="remove" :is-read-only="false" title="前置脚本" style-type="warning"
+        <!-- 前置脚本 -->
+        <ms-jsr233-processor v-if="row.label ==='JSR223 PreProcessor'" @remove="remove" :is-read-only="false" :title="$t('api_test.definition.request.pre_script')" style-type="warning"
                              :jsr223-processor="row"/>
-
-        <ms-jsr233-processor v-if="row.label ==='JSR223 PostProcessor'" @remove="remove" :is-read-only="false" title="后置脚本" style-type="success"
+        <!--后置脚本-->
+        <ms-jsr233-processor v-if="row.label ==='JSR223 PostProcessor'" @remove="remove" :is-read-only="false" :title="$t('api_test.definition.request.post_script')" style-type="success"
                              :jsr223-processor="row"/>
+        <!--断言规则-->
+        <ms-api-assertions v-if="row.type==='Assertions'" @remove="remove" :is-read-only="isReadOnly" :assertions="row"/>
+        <!--提取规则-->
+        <ms-api-extract :is-read-only="isReadOnly" @remove="remove" v-if="row.type==='Extract'" :extract="row"/>
 
-        <ms-api-assertions v-if="row.type==='Assertions'" :is-read-only="isReadOnly" :assertions="row"/>
       </div>
-
-
-      <!--
-            <ms-api-extract :is-read-only="isReadOnly" v-if="row.label==='JSONPostProcessor'" :extract="row"/>
-      -->
     </el-col>
-
+    <!--操作按钮-->
     <el-col :span="3" class="ms-left-cell">
-      <el-button class="ms-left-buttion" size="small" type="warning" @click="addPre" plain>+前置脚本</el-button>
+      <el-button class="ms-left-buttion" size="small" type="warning" @click="addPre" plain>+{{$t('api_test.definition.request.pre_script')}}</el-button>
       <br/>
-      <el-button class="ms-left-buttion" size="small" type="success" @click="addPost" plain>+后置脚本</el-button>
+      <el-button class="ms-left-buttion" size="small" type="success" @click="addPost" plain>+{{$t('api_test.definition.request.post_script')}}</el-button>
       <br/>
-      <el-button class="ms-left-buttion" size="small" type="danger" @click="addAssertions" plain>+断言规则</el-button>
+      <el-button class="ms-left-buttion" size="small" type="danger" @click="addAssertions" plain>+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
       <br/>
-      <el-button class="ms-left-buttion" size="small" type="info" @click="addExtract" plain>+提取参数</el-button>
+      <el-button class="ms-left-buttion" size="small" type="info" @click="addExtract" plain>+{{$t('api_test.definition.request.extract_param')}}</el-button>
     </el-col>
   </el-row>
 </template>
@@ -99,7 +98,7 @@
   import {createComponent} from "../jmeter/components";
   import MsApiAssertions from "../assertion/ApiAssertions";
   import MsApiExtract from "../extract/ApiExtract";
-  import {Assertions} from "../../model/ApiTestModel";
+  import {Assertions, Extract} from "../../model/ApiTestModel";
 
   export default {
     name: "MsApiHttpRequestForm",
@@ -143,17 +142,8 @@
         },
         headerSuggestions: REQUEST_HEADERS,
         isReloadData: false,
-        assertions: [],
       }
     },
-    created() {
-      this.request.hashTree.forEach(row => {
-        if (row.type === "Assertions") {
-          row = new Assertions({text: row.text, regex: row.regex, jsonPath: row.jsonPath, jsr223: row.jsr223, xpath2: row.xpath2, duration: row.duration});
-        }
-      })
-      console.log(this.assertions)
-    },
     methods: {
       addPre() {
         let jsr223PreProcessor = createComponent("JSR223PreProcessor");
@@ -166,13 +156,12 @@
         this.reload();
       },
       addAssertions() {
-        //let jsonPathAssertion = createComponent("JSONPathAssertion");
         let assertions = new Assertions();
         this.request.hashTree.push(assertions);
         this.reload();
       },
       addExtract() {
-        let jsonPostProcessor = createComponent("JSONPostProcessor");
+        let jsonPostProcessor = new Extract();
         this.request.hashTree.push(jsonPostProcessor);
         this.reload();
       },
diff --git a/frontend/src/business/components/api/definition/components/response/ResponseResult.vue b/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
index 60cdeb26a7..ef13553503 100644
--- a/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
+++ b/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
@@ -16,6 +16,15 @@
         <pre>{{response.responseResult.console}}</pre>
       </el-tab-pane>
 
+      <el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
+        <ms-assertion-results :assertions="response.responseResult.assertions"/>
+      </el-tab-pane>
+
+      <el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
+        <pre>{{response.responseResult.vars}}</pre>
+      </el-tab-pane>
+
+
       <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
         <template v-slot:label>
           <ms-dropdown :commands="modes" :default-command="mode" @command="modeChange"/>
diff --git a/frontend/src/business/components/api/definition/model/ApiTestModel.js b/frontend/src/business/components/api/definition/model/ApiTestModel.js
index 1b4a9856d7..3e88ae1064 100644
--- a/frontend/src/business/components/api/definition/model/ApiTestModel.js
+++ b/frontend/src/business/components/api/definition/model/ApiTestModel.js
@@ -901,6 +901,7 @@ export class Duration extends AssertionType {
 export class Extract extends BaseConfig {
   constructor(options) {
     super();
+    this.type = "Extract";
     this.regex = [];
     this.json = [];
     this.xpath = [];
diff --git a/frontend/src/business/components/xpack b/frontend/src/business/components/xpack
index eb237fb6bf..33bbdb3f52 160000
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@@ -1 +1 @@
-Subproject commit eb237fb6bfeba8d99e4db52450ae92f3cdd4ea33
+Subproject commit 33bbdb3f528c914bf333b2c1839dd6d3bbd9b569
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 8888d36896..64e39547c4 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -518,6 +518,13 @@ export default {
         response_body: "Response body",
         console: "Console",
         status_code: "Status code",
+        query_info: "Follow the address bar? The following parameters, such as updateapi?id=112",
+        rest_info: "Slash/separated parameters in the address bar, such as updateapi/{id}",
+        auth_config_info: "Request requires permission verification",
+        pre_script: "Prescript",
+        post_script: "Postscript",
+        extract_param: "Extract parameters",
+
       }
     },
     environment: {
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 5a7e632e76..0d6c6e3ba1 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -519,7 +519,12 @@ export default {
         response_body: "响应体",
         console: "控制台",
         status_code: "状态码",
-
+        query_info: "地址栏中跟在？后面的参数,如updateapi?id=112",
+        rest_info: "地址栏中被斜杠/分隔的参数，如updateapi/{id}",
+        auth_config_info: "请求需要进行权限校验",
+        pre_script: "前置脚本",
+        post_script: "后置脚本",
+        extract_param:"提取参数",
       }
     },
     environment: {
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 2a41ccd7ca..62cd1463df 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -519,6 +519,12 @@ export default {
         response_body: "響應體",
         console: "控制臺",
         status_code: "狀態碼",
+        query_info: "地址欄中跟在？後面的參數,如updateapi?id=112",
+        rest_info: "地址欄中被斜杠/分隔的參數，如updateapi/{id}",
+        auth_config_info: "請求需要進行權限校驗",
+        pre_script: "前置腳本",
+        post_script: "後置腳本",
+        extract_param: "提取參數",
 
       }
     },