diff --git a/backend/src/main/java/io/metersphere/api/dto/definition/request/sampler/MsHTTPSamplerProxy.java b/backend/src/main/java/io/metersphere/api/dto/definition/request/sampler/MsHTTPSamplerProxy.java
index 59d3770e67..40a28ec10e 100644
--- a/backend/src/main/java/io/metersphere/api/dto/definition/request/sampler/MsHTTPSamplerProxy.java
+++ b/backend/src/main/java/io/metersphere/api/dto/definition/request/sampler/MsHTTPSamplerProxy.java
@@ -397,7 +397,7 @@ public class MsHTTPSamplerProxy extends MsTestElement {
                         url = url.replace(this.getPort(), "10990");
                     }
                     try {
-                        if (StringUtils.startsWithAny(url, "http://", "https://")) {
+                        if (!StringUtils.startsWithAny(url, "http://", "https://")) {
                             url = "http://" + url;
                         }
                         URL urlObject = new URL(url);
diff --git a/frontend/src/business/components/api/definition/components/ApiVariableAdvance.vue b/frontend/src/business/components/api/definition/components/ApiVariableAdvance.vue
index 8ba1296ce5..a57a0502e2 100644
--- a/frontend/src/business/components/api/definition/components/ApiVariableAdvance.vue
+++ b/frontend/src/business/components/api/definition/components/ApiVariableAdvance.vue
@@ -227,566 +227,566 @@
 </template>
 
 <script>
-  import {calculate, Scenario} from "../model/ApiTestModel";
-  import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
-  import {STEP} from "../../automation/scenario/Setting";
-  import MsMainContainer from "../../../common/components/MsMainContainer";
-  import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
-  import MsContainer from "../../../common/components/MsContainer";
-  import OutsideClick from "@/common/js/outside-click";
+import {calculate, Scenario} from "../model/ApiTestModel";
+import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
+import {STEP} from "../../automation/scenario/Setting";
+import MsMainContainer from "../../../common/components/MsMainContainer";
+import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
+import MsContainer from "../../../common/components/MsContainer";
+import OutsideClick from "@/common/js/outside-click";
 
-  export default {
-    name: "MsApiVariableAdvance",
-    props: {
-      parameters: Array,
-      environment: Object,
-      scenario: Scenario,
-      currentItem: Object,
-      appendToBody: {
-        type: Boolean,
-        default() {
-          return false;
-        }
-      },
-      showMockVars: {
-        type: Boolean,
-        default() {
-          return false;
-        }
-      },
-      variables: Array,
-      scenarioDefinition: Array,
+export default {
+  name: "MsApiVariableAdvance",
+  props: {
+    parameters: Array,
+    environment: Object,
+    scenario: Scenario,
+    currentItem: Object,
+    appendToBody: {
+      type: Boolean,
+      default() {
+        return false;
+      }
     },
-    components: {
-      MsMainContainer,
-      MsAsideContainer,
-      MsContainer,
-      MsComponentConfig: () => import("../../automation/scenario/component/ComponentConfig"),
+    showMockVars: {
+      type: Boolean,
+      default() {
+        return false;
+      }
     },
-    data() {
-      return {
-        itemValueVisible: false,
-        filterText: '',
-        environmentParams: [],
-        scenarioParams: [],
-        preRequests: [],
-        preRequestParams: [],
-        scenarioPreRequestParams: [],
-        treeProps: {children: 'children', label: 'name'},
-        currentTab: 0,
-        itemValue: null,
-        itemValuePreview: null,
-        funcs: [
-          {name: "md5"},
-          {name: "base64"},
-          {name: "unbase64"},
-          {
-            name: "substr",
-            params: [{name: "start"}, {name: "length"}]
-          },
-          {
-            name: "concat",
-            params: [{name: "suffix"}]
-          },
-          {name: "lconcat", params: [{name: "prefix"}]},
-          {name: "sha1"},
-          {name: "sha224"},
-          {name: "sha256"},
-          {name: "sha384"},
-          {name: "sha512"},
-          {name: "lower"},
-          {name: "upper"},
-          {name: "length"},
-          {name: "number"}
-        ],
-        mockFuncs: MOCKJS_FUNC.map(f => {
-          return {
-            name: f.name + " " + f.des + " " + this.$t('api_test.request.parameters_filter_example') + "：" + f.ex,
-            value: f.name
-          }
-        }),
-        jmeterFuncs: JMETER_FUNC,
-        mockVariableFuncs: [],
-        jmeterVariableFuncs: [],
-        dialogVisible: true,
-        requestValues: [
-          {
-            type: this.$t('api_test.request.address'),
-            name: "${address}"
-          },
-          {
-            type: "Header " + this.$t('api_test.definition.document.request_param'),
-            name: "${header.param}"
-          },
-          {
-            type: this.$t('api_test.request.body') + this.$t('api_test.variable'),
-            name: "${body.param}"
-          },
-          {
-            type: this.$t('api_test.request.body') + this.$t('api_test.variable') + " (Raw)",
-            name: "${bodyRaw}"
-          },
-          {
-            type: "Query " + this.$t('api_test.definition.document.request_param'),
-            name: "${query.param}"
-          },
-          {
-            type: "Rest " + this.$t('api_test.definition.document.request_param'),
-            name: "${rest.param}"
-          },
-        ],
-
-        // 自定义变量相关
-        defineVariable: "",
-        searchType: "",
-        selection: [],
-        loading: false,
-        types: new Map([
-          ['CONSTANT', this.$t('api_test.automation.constant')],
-          ['LIST', this.$t('test_track.case.list')],
-          ['CSV', 'CSV'],
-          ['COUNTER', this.$t('api_test.automation.counter')],
-          ['RANDOM', this.$t('api_test.automation.random')]
-        ]),
-
-        // 前置返回相关
-        props: {
-          label: "label",
-          children: "hashTree"
+    variables: Array,
+    scenarioDefinition: Array,
+  },
+  components: {
+    MsMainContainer,
+    MsAsideContainer,
+    MsContainer,
+    MsComponentConfig: () => import("../../automation/scenario/component/ComponentConfig"),
+  },
+  data() {
+    return {
+      itemValueVisible: false,
+      filterText: '',
+      environmentParams: [],
+      scenarioParams: [],
+      preRequests: [],
+      preRequestParams: [],
+      scenarioPreRequestParams: [],
+      treeProps: {children: 'children', label: 'name'},
+      currentTab: 0,
+      itemValue: null,
+      itemValuePreview: null,
+      funcs: [
+        {name: "md5"},
+        {name: "base64"},
+        {name: "unbase64"},
+        {
+          name: "substr",
+          params: [{name: "start"}, {name: "length"}]
         },
-        expandedNode: [],
-        stepFilter: new STEP,
-        operatingElements: [],
-        selectedTreeNode: undefined,
-        selectedNode: undefined,
-        projectList: [],
-        projectEnvMap: new Map,
-        ifFromVariableAdvance: false,
-        asideHidden: false,
-        scenarioRootTree: undefined,
-        insideClick: false,
-        response: {},
+        {
+          name: "concat",
+          params: [{name: "suffix"}]
+        },
+        {name: "lconcat", params: [{name: "prefix"}]},
+        {name: "sha1"},
+        {name: "sha224"},
+        {name: "sha256"},
+        {name: "sha384"},
+        {name: "sha512"},
+        {name: "lower"},
+        {name: "upper"},
+        {name: "length"},
+        {name: "number"}
+      ],
+      mockFuncs: MOCKJS_FUNC.map(f => {
+        return {
+          name: f.name + " " + f.des + " " + this.$t('api_test.request.parameters_filter_example') + "：" + f.ex,
+          value: f.name
+        }
+      }),
+      jmeterFuncs: JMETER_FUNC,
+      mockVariableFuncs: [],
+      jmeterVariableFuncs: [],
+      dialogVisible: true,
+      requestValues: [
+        {
+          type: this.$t('api_test.request.address'),
+          name: "${address}"
+        },
+        {
+          type: "Header " + this.$t('api_test.definition.document.request_param'),
+          name: "${header.param}"
+        },
+        {
+          type: this.$t('api_test.request.body') + this.$t('api_test.variable'),
+          name: "${body.param}"
+        },
+        {
+          type: this.$t('api_test.request.body') + this.$t('api_test.variable') + " (Raw)",
+          name: "${bodyRaw}"
+        },
+        {
+          type: "Query " + this.$t('api_test.definition.document.request_param'),
+          name: "${query.param}"
+        },
+        {
+          type: "Rest " + this.$t('api_test.definition.document.request_param'),
+          name: "${rest.param}"
+        },
+      ],
+
+      // 自定义变量相关
+      defineVariable: "",
+      searchType: "",
+      selection: [],
+      loading: false,
+      types: new Map([
+        ['CONSTANT', this.$t('api_test.automation.constant')],
+        ['LIST', this.$t('test_track.case.list')],
+        ['CSV', 'CSV'],
+        ['COUNTER', this.$t('api_test.automation.counter')],
+        ['RANDOM', this.$t('api_test.automation.random')]
+      ]),
+
+      // 前置返回相关
+      props: {
+        label: "label",
+        children: "hashTree"
+      },
+      expandedNode: [],
+      stepFilter: new STEP,
+      operatingElements: [],
+      selectedTreeNode: undefined,
+      selectedNode: undefined,
+      projectList: [],
+      projectEnvMap: new Map,
+      ifFromVariableAdvance: false,
+      asideHidden: false,
+      scenarioRootTree: undefined,
+      insideClick: false,
+      response: {},
+    }
+  },
+  computed: {
+    valueText() {
+      return this.valuePlaceholder || this.$t("api_test.value");
+    },
+  },
+  directives: {OutsideClick},
+  mounted() {
+    this.prepareData();
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  methods: {
+    created() {
+      this.operatingElements = this.stepFilter.get("ALL");
+    },
+    open() {
+      if (this.scenarioDefinition != undefined) {
+        // 标识为场景编辑入口进入
+        this.ifFromVariableAdvance = true;
+      }
+      this.itemValueVisible = true;
+      // 关闭页面重新进入需要再做过滤
+      if (this.ifFromVariableAdvance && this.$refs.preTree != undefined && this.currentTab == 3) {
+        this.componentActive(this.$refs.preTree.root);
       }
     },
-    computed: {
-      valueText() {
-        return this.valuePlaceholder || this.$t("api_test.value");
-      },
-    },
-    directives: {OutsideClick},
-    mounted() {
-      this.prepareData();
-    },
-    watch: {
-      filterText(val) {
-        this.$refs.tree.filter(val);
+    prepareData(data) {
+      if (data != undefined || data != null) {
+        this.scenario = data;
       }
-    },
-    methods: {
-      created() {
-        this.operatingElements = this.stepFilter.get("ALL");
-      },
-      open() {
-        if (this.scenarioDefinition != undefined) {
-          // 标识为场景编辑入口进入
-          this.ifFromVariableAdvance = true;
-        }
-        this.itemValueVisible = true;
-        // 关闭页面重新进入需要再做过滤
-        if (this.ifFromVariableAdvance && this.$refs.preTree != undefined && this.currentTab == 3) {
-          this.componentActive(this.$refs.preTree.root);
-        }
-      },
-      prepareData(data) {
-        if (data != undefined || data != null) {
-          this.scenario = data;
-        }
-        if (this.scenario) {
-          let variables = this.scenario.variables;
-          this.scenarioParams = [
+      if (this.scenario) {
+        let variables = this.scenario.variables;
+        this.scenarioParams = [
+          {
+            name: this.scenario.name,
+            children: variables.filter(v => v.name).map(v => {
+              return {name: v.name, value: '${' + v.name + '}'}
+            }),
+          }
+        ];
+        if (this.environment) {
+          let variables = this.environment.config.commonConfig.variables;
+          this.environmentParams = [
             {
-              name: this.scenario.name,
+              name: this.environment.name,
               children: variables.filter(v => v.name).map(v => {
                 return {name: v.name, value: '${' + v.name + '}'}
               }),
             }
           ];
-          if (this.environment) {
-            let variables = this.environment.config.commonConfig.variables;
-            this.environmentParams = [
-              {
-                name: this.environment.name,
-                children: variables.filter(v => v.name).map(v => {
-                  return {name: v.name, value: '${' + v.name + '}'}
-                }),
-              }
-            ];
-          }
-          let i = this.scenario.requests.indexOf(this.request);
-          this.preRequests = this.scenario.requests.slice(0, i);
-          this.preRequests.forEach(r => {
-            let js = r.extract.json.map(v => {
-              return {name: v.variable, value: v.value}
-            });
-            let xs = r.extract.xpath.map(v => {
-              return {name: v.variable, value: v.value}
-            });
-            let rx = r.extract.regex.map(v => {
-              return {name: v.variable, value: v.value}
-            });
-            let vs = [...js, ...xs, ...rx];
-            if (vs.length > 0) {
-              this.preRequestParams.push({name: r.name, children: vs});
-            }
+        }
+        let i = this.scenario.requests.indexOf(this.request);
+        this.preRequests = this.scenario.requests.slice(0, i);
+        this.preRequests.forEach(r => {
+          let js = r.extract.json.map(v => {
+            return {name: v.variable, value: v.value}
           });
-        }
-      },
-
-      // 获取该节点及所有子节点下的前置提取参数 key/value
-      getExtractDataByNode(data, node) {
-        if (!node.isLeaf) {
-          if (node.childNodes.length > 0) {
-            for (let i = 0; i < node.childNodes.length; i++) {
-              if (node.childNodes[i].isLeaf) { //是叶子节点
-                if (node.childNodes[i].data.type === 'Extract') { //叶子节点的数据的类型是 提取
-                  let extractJsonParams = (node.childNodes[i].data.json).map(v => {
-                    return {name: v.variable, value: v.value, exp: v.expression}
-                  });
-                  let extractRegexParams = (node.childNodes[i].data.regex).map(v => {
-                    return {name: v.variable, value: v.value, exp: v.expression}
-                  });
-                  let extractXpathParams = (node.childNodes[i].data.xpath).map(v => {
-                    return {name: v.variable, value: v.value, exp: v.expression}
-                  });
-                  let vs = [...extractJsonParams, ...extractRegexParams, ...extractXpathParams];
-                  if (vs.length > 0) {
-                    //数组合并
-                    this.scenarioPreRequestParams = this.scenarioPreRequestParams.concat(extractJsonParams, extractRegexParams, extractXpathParams);
-                  }
-                }
-                continue;
-              } else {
-                this.getExtractDataByNode(node.childNodes[i].data, node.childNodes[i]);
-              }
-            }
-          }
-        }
-      },
-      componentActive(node) {
-        if (this.ifFromVariableAdvance) {
-          this.setLeafNodeUnVisible(node);
-        }
-      },
-      // 递归设置不需要显示的叶子节点
-      setLeafNodeUnVisible(node) {
-        if (!node.isLeaf) {
-          if (node.childNodes.length > 0) {
-            for (let i = 0; i < node.childNodes.length; i++) {
-              // 提取参数不需要隐藏
-              if (node.childNodes[i].isLeaf && node.childNodes[i].level > 1) {
-                node.childNodes[i].visible = false;
-                if (node.childNodes[i].data.type === 'Extract' && node.data.type !== 'HTTPSamplerProxy') {
-                  node.childNodes[i].visible = true;
-                }
-              } else {
-                // 等待控制器不显示
-                if (node.childNodes[i].level == 1 && node.childNodes[i].data.type === 'ConstantTimer') {
-                  node.childNodes[i].visible = false;
-                }
-                this.setLeafNodeUnVisible(node.childNodes[i]);
-              }
-            }
-          }
-        }
-      },
-
-      getAllExtractDataByNode() {
-        if (this.ifFromVariableAdvance) {
-          this.selectedNode = undefined;
-          this.selectedTreeNode = undefined;
-          this.scenarioPreRequestParams = [];
-          if (this.$refs.preTree != undefined) {
-            this.getExtractDataByNode(null, this.$refs.preTree.root);
-          }
-        }
-      },
-      filterNode(value, data) {
-        if (!value) return true;
-        return data.name.indexOf(value) !== -1;
-      },
-      selectVariable(node) {
-        this.itemValue = node.value;
-      },
-      selectTab(tab) {
-        this.currentTab = +tab.index;
-        this.itemValue = null;
-        this.itemValuePreview = null;
-
-        if (this.ifFromVariableAdvance && this.currentTab === 3) {
-          // 前置提取屏蔽部分叶子节点
-          this.componentActive(this.$refs.preTree.root);
-        }
-      },
-      showPreview() {
-        // 找到变量本身
-        if (!this.itemValue) {
-          return;
-        }
-        let index = this.itemValue.indexOf("|");
-        if (index > -1) {
-          this.itemValue = this.itemValue.substring(0, index).trim();
-        }
-        this.mockVariableFuncs.forEach(f => {
-          if (!f.name) {
-            return;
-          }
-          this.itemValue += "|" + f.name;
-          if (f.params) {
-            this.itemValue += ":" + f.params.map(p => p.value).join(",");
+          let xs = r.extract.xpath.map(v => {
+            return {name: v.variable, value: v.value}
+          });
+          let rx = r.extract.regex.map(v => {
+            return {name: v.variable, value: v.value}
+          });
+          let vs = [...js, ...xs, ...rx];
+          if (vs.length > 0) {
+            this.preRequestParams.push({name: r.name, children: vs});
           }
         });
-        this.itemValuePreview = calculate(this.itemValue);
-      },
-      methodChange(itemFunc, func) {
+      }
+    },
+
+    // 获取该节点及所有子节点下的前置提取参数 key/value
+    getExtractDataByNode(data, node) {
+      if (!node.isLeaf) {
+        if (node.childNodes.length > 0) {
+          for (let i = 0; i < node.childNodes.length; i++) {
+            if (node.childNodes[i].isLeaf) { //是叶子节点
+              if (node.childNodes[i].data.type === 'Extract') { //叶子节点的数据的类型是 提取
+                let extractJsonParams = (node.childNodes[i].data.json).map(v => {
+                  return {name: v.variable, value: v.value, exp: v.expression}
+                });
+                let extractRegexParams = (node.childNodes[i].data.regex).map(v => {
+                  return {name: v.variable, value: v.value, exp: v.expression}
+                });
+                let extractXpathParams = (node.childNodes[i].data.xpath).map(v => {
+                  return {name: v.variable, value: v.value, exp: v.expression}
+                });
+                let vs = [...extractJsonParams, ...extractRegexParams, ...extractXpathParams];
+                if (vs.length > 0) {
+                  //数组合并
+                  this.scenarioPreRequestParams = this.scenarioPreRequestParams.concat(extractJsonParams, extractRegexParams, extractXpathParams);
+                }
+              }
+              continue;
+            } else {
+              this.getExtractDataByNode(node.childNodes[i].data, node.childNodes[i]);
+            }
+          }
+        }
+      }
+    },
+    componentActive(node) {
+      if (this.ifFromVariableAdvance) {
+        this.setLeafNodeUnVisible(node);
+      }
+    },
+    // 递归设置不需要显示的叶子节点
+    setLeafNodeUnVisible(node) {
+      if (!node.isLeaf) {
+        if (node.childNodes.length > 0) {
+          for (let i = 0; i < node.childNodes.length; i++) {
+            // 提取参数不需要隐藏
+            if (node.childNodes[i].isLeaf && node.childNodes[i].level > 1) {
+              node.childNodes[i].visible = false;
+              if (node.childNodes[i].data.type === 'Extract' && node.data.type !== 'HTTPSamplerProxy') {
+                node.childNodes[i].visible = true;
+              }
+            } else {
+              // 等待控制器不显示
+              if (node.childNodes[i].level == 1 && node.childNodes[i].data.type === 'ConstantTimer') {
+                node.childNodes[i].visible = false;
+              }
+              this.setLeafNodeUnVisible(node.childNodes[i]);
+            }
+          }
+        }
+      }
+    },
+
+    getAllExtractDataByNode() {
+      if (this.ifFromVariableAdvance) {
+        this.selectedNode = undefined;
+        this.selectedTreeNode = undefined;
+        this.scenarioPreRequestParams = [];
+        if (this.$refs.preTree != undefined) {
+          this.getExtractDataByNode(null, this.$refs.preTree.root);
+        }
+      }
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    selectVariable(node) {
+      this.itemValue = node.value;
+    },
+    selectTab(tab) {
+      this.currentTab = +tab.index;
+      this.itemValue = null;
+      this.itemValuePreview = null;
+
+      if (this.ifFromVariableAdvance && this.currentTab === 3) {
+        // 前置提取屏蔽部分叶子节点
+        this.componentActive(this.$refs.preTree.root);
+      }
+    },
+    showPreview() {
+      // 找到变量本身
+      if (!this.itemValue) {
+        return;
+      }
+      let index = this.itemValue.indexOf("|");
+      if (index > -1) {
+        this.itemValue = this.itemValue.substring(0, index).trim();
+      }
+      this.mockVariableFuncs.forEach(f => {
+        if (!f.name) {
+          return;
+        }
+        this.itemValue += "|" + f.name;
+        if (f.params) {
+          this.itemValue += ":" + f.params.map(p => p.value).join(",");
+        }
+      });
+      this.itemValuePreview = calculate(this.itemValue);
+    },
+    methodChange(itemFunc, func) {
+      let index = this.mockVariableFuncs.indexOf(itemFunc);
+      this.mockVariableFuncs = this.mockVariableFuncs.slice(0, index);
+      // 这里要用 deep copy
+      this.mockVariableFuncs.push(JSON.parse(JSON.stringify(func)));
+      this.showPreview();
+    },
+    radioClick(itemFunc, func) {
+      if (itemFunc.name === func.name) {
         let index = this.mockVariableFuncs.indexOf(itemFunc);
         this.mockVariableFuncs = this.mockVariableFuncs.slice(0, index);
-        // 这里要用 deep copy
-        this.mockVariableFuncs.push(JSON.parse(JSON.stringify(func)));
-        this.showPreview();
-      },
-      radioClick(itemFunc, func) {
-        if (itemFunc.name === func.name) {
-          let index = this.mockVariableFuncs.indexOf(itemFunc);
-          this.mockVariableFuncs = this.mockVariableFuncs.slice(0, index);
-          this.mockVariableFuncs.push({name: '', params: []});
-          let valindex = this.itemValue.indexOf('|' + func.name);
-          this.itemValue = this.itemValue.slice(0, valindex);
-        } else {
-          this.methodChange(itemFunc, func);
-        }
-      },
-      addFunc() {
-        if (this.itemValue == undefined || this.itemValue == null) {
-          this.$warning(this.$t('api_test.request.parameters_advance_add_mock_error'));
-          return;
-        }
-        if (this.itemValue.indexOf('@') == -1) {
-          this.itemValue = '@' + this.itemValue;
-        } else {
-          this.itemValue = this.itemValue;
-        }
-        if (this.mockVariableFuncs.length > 4) {
-          this.$info(this.$t('api_test.request.parameters_advance_add_func_limit'));
-          return;
-        }
-        if (this.mockVariableFuncs.length > 0) {
-          let func = this.mockVariableFuncs[this.mockVariableFuncs.length - 1];
-          if (!func.name) {
-            this.$warning(this.$t('api_test.request.parameters_advance_add_func_error'));
-            return;
-          }
-          if (func.params) {
-            for (let j = 0; j < func.params.length; j++) {
-              if (!func.params[j].value) {
-                this.$warning(this.$t('api_test.request.parameters_advance_add_param_error'));
-                return;
-              }
-            }
-          }
-        }
         this.mockVariableFuncs.push({name: '', params: []});
-      },
-      saveAdvanced() {
-        if (this.itemValue != null && this.itemValue != undefined
-          && this.itemValue.indexOf('@') == -1
-          && this.itemValue.indexOf('$') == -1) {
-          this.$set(this.currentItem, 'value', '@' + this.itemValue);
-        } else {
-          this.$set(this.currentItem, 'value', this.itemValue);
-          if (this.currentItem.mock != undefined) {
-            this.$set(this.currentItem, 'mock', this.itemValue);
+        let valindex = this.itemValue.indexOf('|' + func.name);
+        this.itemValue = this.itemValue.slice(0, valindex);
+      } else {
+        this.methodChange(itemFunc, func);
+      }
+    },
+    addFunc() {
+      if (this.itemValue == undefined || this.itemValue == null) {
+        this.$warning(this.$t('api_test.request.parameters_advance_add_mock_error'));
+        return;
+      }
+      if (this.currentTab === 0 && this.itemValue.indexOf('@') == -1) {
+        this.itemValue = '@' + this.itemValue;
+      } else {
+        this.itemValue = this.itemValue;
+      }
+      if (this.mockVariableFuncs.length > 4) {
+        this.$info(this.$t('api_test.request.parameters_advance_add_func_limit'));
+        return;
+      }
+      if (this.mockVariableFuncs.length > 0) {
+        let func = this.mockVariableFuncs[this.mockVariableFuncs.length - 1];
+        if (!func.name) {
+          this.$warning(this.$t('api_test.request.parameters_advance_add_func_error'));
+          return;
+        }
+        if (func.params) {
+          for (let j = 0; j < func.params.length; j++) {
+            if (!func.params[j].value) {
+              this.$warning(this.$t('api_test.request.parameters_advance_add_param_error'));
+              return;
+            }
           }
         }
-        this.itemValueVisible = false;
-        this.mockVariableFuncs = [];
-        this.$emit('advancedRefresh', this.itemValue);
-      },
-      // 自定义变量
-      filter() {
-        let datas = [];
-        this.variables.forEach(item => {
-          if (this.searchType && this.searchType != "" && this.defineVariable && this.defineVariable != "") {
-            if ((item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1) || (item.name && item.name.toLowerCase().indexOf(this.defineVariable.toLowerCase()) == -1)) {
-              item.hidden = true;
-            } else {
-              item.hidden = undefined;
-            }
-          } else if (this.defineVariable && this.defineVariable != "") {
-            if (item.name && item.name.toLowerCase().indexOf(this.defineVariable.toLowerCase()) == -1) {
-              item.hidden = true;
-            } else {
-              item.hidden = undefined;
-            }
-          } else if (this.searchType && this.searchType != "") {
-            if (item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1) {
-              item.hidden = true;
-            } else {
-              item.hidden = undefined;
-            }
+      }
+      this.mockVariableFuncs.push({name: '', params: []});
+    },
+    saveAdvanced() {
+      if (this.itemValue != null && this.itemValue != undefined
+        && this.itemValue.indexOf('@') == -1
+        && this.itemValue.indexOf('$') == -1 && this.currentTab === 0) {
+        this.$set(this.currentItem, 'value', '@' + this.itemValue);
+      } else {
+        this.$set(this.currentItem, 'value', this.itemValue);
+        if (this.currentItem.mock != undefined) {
+          this.$set(this.currentItem, 'mock', this.itemValue);
+        }
+      }
+      this.itemValueVisible = false;
+      this.mockVariableFuncs = [];
+      this.$emit('advancedRefresh', this.itemValue);
+    },
+    // 自定义变量
+    filter() {
+      let datas = [];
+      this.variables.forEach(item => {
+        if (this.searchType && this.searchType != "" && this.defineVariable && this.defineVariable != "") {
+          if ((item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1) || (item.name && item.name.toLowerCase().indexOf(this.defineVariable.toLowerCase()) == -1)) {
+            item.hidden = true;
           } else {
             item.hidden = undefined;
           }
-          datas.push(item);
-        });
-        this.variables = datas;
-      },
-      tableRowClassName(row) {
-        if (row.row.hidden) {
-          return 'ms-variable-hidden-row';
-        }
-        return '';
-      },
-      select(selection) {
-        this.selection = selection.map(s => s.id);
-      },
-      edit(row) {
-        this.selection = [row.id];
-        this.itemValue = '${' + row.name + '}';
-      },
-      savePreParams(data) {
-        this.itemValue = '${' + data + '}';
-      },
-      handleRowClick(row) {
-        if (row && row.name) {
-          this.itemValue = row.name;
-        }
-      },
-
-      // 前置返回
-      nodeExpand(data) {
-        if (data.resourceId) {
-          this.expandedNode.push(data.resourceId);
-        }
-      },
-      nodeCollapse(data) {
-        if (data.resourceId) {
-          this.expandedNode.splice(this.expandedNode.indexOf(data.resourceId), 1);
-        }
-      },
-      nodeClick(data, node) {
-        if (data.referenced != 'REF' && data.referenced != 'Deleted' && !data.disabled) {
-          this.operatingElements = this.stepFilter.get(data.type);
-        } else {
-          this.operatingElements = [];
-        }
-        if (!this.operatingElements) {
-          this.operatingElements = this.stepFilter.get("ALL");
-        }
-        this.selectedTreeNode = data;
-        this.selectedNode = node;
-        this.$store.state.selectStep = data;
-        this.reload();
-
-        // 计算前置提取变量
-        this.scenarioPreRequestParams = [];
-        this.getExtractDataByNode(data, node);
-      },
-      reload() {
-        this.loading = true
-        this.$nextTick(() => {
-          this.loading = false
-        })
-      },
-      setAsideHidden(data) {
-        this.asideHidden = data;
-      },
-
-      showNode(node) {
-        for (let i = 0; i < node.hashTree.length; i++) {
-          // 右边展示如果包含了前置提取表单,且是 HTTPSamplerProxy 类型，则不需要显示提取参数列表
-          if (node.hashTree[i].type == 'Extract' && node.type == 'HTTPSamplerProxy'
-            && this.scenarioPreRequestParams.length > 0) {
-            this.scenarioPreRequestParams = [];
-            break;
+        } else if (this.defineVariable && this.defineVariable != "") {
+          if (item.name && item.name.toLowerCase().indexOf(this.defineVariable.toLowerCase()) == -1) {
+            item.hidden = true;
+          } else {
+            item.hidden = undefined;
           }
+        } else if (this.searchType && this.searchType != "") {
+          if (item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1) {
+            item.hidden = true;
+          } else {
+            item.hidden = undefined;
+          }
+        } else {
+          item.hidden = undefined;
         }
-        node.active = true;
-        if (node && this.stepFilter.get("AllSamplerProxy").indexOf(node.type) != -1) {
-          return true;
-        }
-        return false;
-      },
-      filterSonNode(item) {
-        if (item.type == 'Assertions' || item.type == 'ConstantTimer'
-          || item.type == 'JDBCPreProcessor' || item.type == 'JDBCPostProcessor') {
-          return false;
+        datas.push(item);
+      });
+      this.variables = datas;
+    },
+    tableRowClassName(row) {
+      if (row.row.hidden) {
+        return 'ms-variable-hidden-row';
+      }
+      return '';
+    },
+    select(selection) {
+      this.selection = selection.map(s => s.id);
+    },
+    edit(row) {
+      this.selection = [row.id];
+      this.itemValue = '${' + row.name + '}';
+    },
+    savePreParams(data) {
+      this.itemValue = '${' + data + '}';
+    },
+    handleRowClick(row) {
+      if (row && row.name) {
+        this.itemValue = row.name;
+      }
+    },
+
+    // 前置返回
+    nodeExpand(data) {
+      if (data.resourceId) {
+        this.expandedNode.push(data.resourceId);
+      }
+    },
+    nodeCollapse(data) {
+      if (data.resourceId) {
+        this.expandedNode.splice(this.expandedNode.indexOf(data.resourceId), 1);
+      }
+    },
+    nodeClick(data, node) {
+      if (data.referenced != 'REF' && data.referenced != 'Deleted' && !data.disabled) {
+        this.operatingElements = this.stepFilter.get(data.type);
+      } else {
+        this.operatingElements = [];
+      }
+      if (!this.operatingElements) {
+        this.operatingElements = this.stepFilter.get("ALL");
+      }
+      this.selectedTreeNode = data;
+      this.selectedNode = node;
+      this.$store.state.selectStep = data;
+      this.reload();
+
+      // 计算前置提取变量
+      this.scenarioPreRequestParams = [];
+      this.getExtractDataByNode(data, node);
+    },
+    reload() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    setAsideHidden(data) {
+      this.asideHidden = data;
+    },
+
+    showNode(node) {
+      for (let i = 0; i < node.hashTree.length; i++) {
+        // 右边展示如果包含了前置提取表单,且是 HTTPSamplerProxy 类型，则不需要显示提取参数列表
+        if (node.hashTree[i].type == 'Extract' && node.type == 'HTTPSamplerProxy'
+          && this.scenarioPreRequestParams.length > 0) {
+          this.scenarioPreRequestParams = [];
+          break;
         }
+      }
+      node.active = true;
+      if (node && this.stepFilter.get("AllSamplerProxy").indexOf(node.type) != -1) {
         return true;
-      },
-      outsideClick(e) {
-        // 获取全部前置提取
-        this.getAllExtractDataByNode();
-      },
-      // 获取响应结果，后续 jsonpath 引用
-      suggestClick(node) {
-        this.response = {};
-        if (node && node.parent && node.parent.data.requestResult) {
-          this.response = node.parent.data.requestResult[0];
-        } else if (this.selectedNode) {
-          this.response = this.selectedNode.data.requestResult[0];
-        }
-      },
-    }
+      }
+      return false;
+    },
+    filterSonNode(item) {
+      if (item.type == 'Assertions' || item.type == 'ConstantTimer'
+        || item.type == 'JDBCPreProcessor' || item.type == 'JDBCPostProcessor') {
+        return false;
+      }
+      return true;
+    },
+    outsideClick(e) {
+      // 获取全部前置提取
+      this.getAllExtractDataByNode();
+    },
+    // 获取响应结果，后续 jsonpath 引用
+    suggestClick(node) {
+      this.response = {};
+      if (node && node.parent && node.parent.data.requestResult) {
+        this.response = node.parent.data.requestResult[0];
+      } else if (this.selectedNode) {
+        this.response = this.selectedNode.data.requestResult[0];
+      }
+    },
   }
+}
 </script>
 
 <style scoped>
 
-  .col-height {
-    height: 40vh;
-    overflow: auto;
-  }
+.col-height {
+  height: 40vh;
+  overflow: auto;
+}
 
-  .maximize-container .ms-aside-container {
-    min-width: 680px;
-  }
+.maximize-container .ms-aside-container {
+  min-width: 680px;
+}
 
-  .ms-aside-container {
-    height: calc(100vh - 50px) !important;
-  }
+.ms-aside-container {
+  height: calc(100vh - 50px) !important;
+}
 
-  .ms-open-btn-left {
-    margin-left: 35px;
-  }
+.ms-open-btn-left {
+  margin-left: 35px;
+}
 
-  .father .child {
-    display: none;
-  }
+.father .child {
+  display: none;
+}
 
-  .father:hover .child {
-    display: block;
-  }
+.father:hover .child {
+  display: block;
+}
 
-  .ms-col-one {
-    margin-top: 10px;
-  }
+.ms-col-one {
+  margin-top: 10px;
+}
 
-  .custom-tree-node {
-    width: 1000px;
-  }
+.custom-tree-node {
+  width: 1000px;
+}
 
-  .kv-row {
-    margin-top: 10px;
-  }
+.kv-row {
+  margin-top: 10px;
+}
 
-  .extract-add {
-    padding: 10px;
-    border: #DCDFE6 solid 1px;
-    margin: 5px 0;
-    border-radius: 5px;
-  }
+.extract-add {
+  padding: 10px;
+  border: #DCDFE6 solid 1px;
+  margin: 5px 0;
+  border-radius: 5px;
+}
 
-  .extract-item {
-    width: 100%;
-  }
+.extract-item {
+  width: 100%;
+}
 </style>
diff --git a/frontend/src/business/components/api/test/components/ApiVariableAdvance.vue b/frontend/src/business/components/api/test/components/ApiVariableAdvance.vue
index 4062b919e9..06423f0ecc 100644
--- a/frontend/src/business/components/api/test/components/ApiVariableAdvance.vue
+++ b/frontend/src/business/components/api/test/components/ApiVariableAdvance.vue
@@ -36,7 +36,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('api_test.variable')">
         <el-row>
-          <el-col :span="6" class="col-height">
+          <el-col :span="6" class="col-height" v-if="environment || scenario || preRequestParams.length > 0">
             <div v-if="environment">
               <p>{{ $t('api_test.environment.environment') }}</p>
               <el-tree :data="environmentParams" :props="treeProps" @node-click="selectVariable"></el-tree>
@@ -45,7 +45,7 @@
               <p>{{ $t('api_test.scenario.scenario') }}</p>
               <el-tree :data="scenarioParams" :props="treeProps" @node-click="selectVariable"></el-tree>
             </div>
-            <div v-if="preRequestParams">
+            <div v-if="preRequestParams && preRequestParams.length > 0">
               <p>{{ $t('api_test.request.parameters_pre_request') }}</p>
               <el-tree :data="preRequestParams" :props="treeProps" @node-click="selectVariable"></el-tree>
             </div>
@@ -53,7 +53,8 @@
           <el-col :span="18" class="col-height">
             <div>
               <h1>{{ $t('api_test.request.jmeter_func') }}</h1>
-              <el-table border :data="jmeterFuncs" class="adjust-table table-content" height="400">
+              <el-table border :data="jmeterFuncs" class="adjust-table table-content" height="400"
+                        @row-click="handleRowClick">
                 <el-table-column prop="type" label="Type" width="150"/>
                 <el-table-column prop="name" label="Functions" width="250"/>
                 <el-table-column prop="description" label="Description"/>
@@ -63,24 +64,27 @@
         </el-row>
       </el-tab-pane>
     </el-tabs>
-    <el-form>
-      <el-form-item>
-        <el-input :placeholder="valueText" size="small"
-                  v-model="itemValue"/>
-      </el-form-item>
-    </el-form>
     <div style="padding-top: 10px;">
-      <el-row type="flex" align="middle">
-        <el-col :span="12">
-          <el-button size="small" type="primary" plain @click="saveAdvanced()">
-            {{ $t('commons.save') }}
-          </el-button>
-          <el-button size="small" type="info" plain @click="addFunc()" v-if="currentTab === 0">
-            {{ $t('api_test.request.parameters_advance_add_func') }}
-          </el-button>
-          <el-button size="small" type="success" plain @click="showPreview()" v-if="currentTab === 0">
-            {{ $t('api_test.request.parameters_preview') }}
-          </el-button>
+      <el-row type="flex">
+        <el-col :span="16">
+          <div>
+            <el-form :inline="true" class="demo-form-inline">
+              <el-form-item>
+                <el-input :placeholder="valueText" size="small" v-model="itemValue"/>
+              </el-form-item>
+              <el-form-item>
+                <el-button size="small" type="primary" plain @click="saveAdvanced()">
+                  {{ $t('commons.save') }}
+                </el-button>
+                <el-button size="small" type="info" plain @click="addFunc()" v-if="currentTab === 0">
+                  {{ $t('api_test.request.parameters_advance_add_func') }}
+                </el-button>
+                <el-button size="small" type="success" plain @click="showPreview()" v-if="currentTab === 0">
+                  {{ $t('api_test.request.parameters_preview') }}
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
         </el-col>
         <el-col>
           <div> {{ itemValuePreview }}</div>
@@ -255,14 +259,14 @@ export default {
         let index = this.mockVariableFuncs.indexOf(itemFunc);
         this.mockVariableFuncs = this.mockVariableFuncs.slice(0, index);
         this.mockVariableFuncs.push({name: '', params: []});
-        let valindex = this.itemValue.indexOf('|'+func.name);
-        this.itemValue = this.itemValue.slice(0,valindex);
-      }else {
+        let valindex = this.itemValue.indexOf('|' + func.name);
+        this.itemValue = this.itemValue.slice(0, valindex);
+      } else {
         this.methodChange(itemFunc, func);
       }
     },
     addFunc() {
-      if (this.itemValue.indexOf('@') == -1) {
+      if (this.currentTab === 0 && this.itemValue.indexOf('@') == -1) {
         this.itemValue = '@' + this.itemValue;
       } else {
         this.itemValue = this.itemValue;
@@ -289,7 +293,7 @@ export default {
       this.mockVariableFuncs.push({name: '', params: []});
     },
     saveAdvanced() {
-      if (this.itemValue.indexOf('@') == -1) {
+      if (this.currentTab === 0 && this.itemValue.indexOf('@') == -1) {
         this.currentItem.value = '@' + this.itemValue;
       } else {
         this.currentItem.value = this.itemValue;
@@ -298,7 +302,12 @@ export default {
       this.mockVariableFuncs = [];
       this.$emit('advancedRefresh', this.currentItem.value);
 
-    }
+    },
+    handleRowClick(row) {
+      if (row && row.name) {
+        this.itemValue = row.name;
+      }
+    },
   }
 }
 </script>
diff --git a/frontend/src/business/components/api/test/components/environment/ApiScenarioVariables.vue b/frontend/src/business/components/api/test/components/environment/ApiScenarioVariables.vue
index 20981239fb..a7e0c64e5c 100644
--- a/frontend/src/business/components/api/test/components/environment/ApiScenarioVariables.vue
+++ b/frontend/src/business/components/api/test/components/environment/ApiScenarioVariables.vue
@@ -54,15 +54,15 @@
           </template>
         </ms-table-column>
 
-        <ms-table-column prop="value" :label="$t('api_test.value')"
-                         min-width="200px" sortable>
+        <el-table-column prop="value" :label="$t('api_test.value')"
+                         min-width="200px" sortable show-overflow-tooltip>
           <template slot-scope="scope">
             <el-input v-model="scope.row.value" size="mini" v-if="scope.row.type !=='CSV'"
                       :placeholder="valueText(scope.row)"
                       :disabled="scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'"/>
             <csv-file-upload :parameter="scope.row" v-if="scope.row.type ==='CSV'"/>
           </template>
-        </ms-table-column>
+        </el-table-column>
         <ms-table-column prop="description" :label="$t('commons.remark')"
                          min-width="160" sortable>
           <template slot-scope="scope">
diff --git a/frontend/src/business/components/api/test/components/environment/ApiVariableAdvance.vue b/frontend/src/business/components/api/test/components/environment/ApiVariableAdvance.vue
index 0a9cd8435f..a84a840e95 100644
--- a/frontend/src/business/components/api/test/components/environment/ApiVariableAdvance.vue
+++ b/frontend/src/business/components/api/test/components/environment/ApiVariableAdvance.vue
@@ -32,24 +32,11 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('api_test.variable')">
         <el-row>
-          <el-col :span="6" class="col-height">
-            <div v-if="environment">
-              <p>{{ $t('api_test.environment.environment') }}</p>
-              <el-tree :data="environmentParams" :props="treeProps" @node-click="selectVariable"></el-tree>
-            </div>
-            <div v-if="scenario">
-              <p>{{ $t('api_test.scenario.scenario') }}</p>
-              <el-tree :data="scenarioParams" :props="treeProps" @node-click="selectVariable"></el-tree>
-            </div>
-            <div v-if="preRequestParams">
-              <p>{{ $t('api_test.request.parameters_pre_request') }}</p>
-              <el-tree :data="preRequestParams" :props="treeProps" @node-click="selectVariable"></el-tree>
-            </div>
-          </el-col>
-          <el-col :span="18" class="col-height">
+          <el-col class="col-height">
             <div>
               <h1>{{ $t('api_test.request.jmeter_func') }}</h1>
-              <el-table border :data="jmeterFuncs" class="adjust-table table-content" height="400">
+              <el-table border :data="jmeterFuncs" class="adjust-table table-content" height="400"
+                        @row-click="handleRowClick">
                 <el-table-column prop="type" label="Type" width="150"/>
                 <el-table-column prop="name" label="Functions" width="250"/>
                 <el-table-column prop="description" label="Description"/>
@@ -59,21 +46,27 @@
         </el-row>
       </el-tab-pane>
     </el-tabs>
-    <el-form>
-      <el-form-item>
-        <el-input :placeholder="valueText" size="small"
-                  v-model="itemValue"/>
-      </el-form-item>
-    </el-form>
     <div style="padding-top: 10px;">
-      <el-row type="flex" align="middle">
-        <el-col :span="12">
-          <el-button size="small" type="info" plain @click="addFunc()" v-if="currentTab === 0">
-            {{ $t('api_test.request.parameters_advance_add_func') }}
-          </el-button>
-          <el-button size="small" type="success" plain @click="showPreview()" v-if="currentTab === 0">
-            {{ $t('api_test.request.parameters_preview') }}
-          </el-button>
+      <el-row type="flex">
+        <el-col :span="16">
+          <div>
+            <el-form :inline="true" class="demo-form-inline">
+              <el-form-item>
+                <el-input :placeholder="valueText" size="small" v-model="itemValue"/>
+              </el-form-item>
+              <el-form-item>
+                <el-button size="small" type="primary" plain @click="saveAdvanced()">
+                  {{ $t('commons.save') }}
+                </el-button>
+                <el-button size="small" type="info" plain @click="addFunc()" v-if="currentTab === 0">
+                  {{ $t('api_test.request.parameters_advance_add_func') }}
+                </el-button>
+                <el-button size="small" type="success" plain @click="showPreview()" v-if="currentTab === 0">
+                  {{ $t('api_test.request.parameters_preview') }}
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
         </el-col>
         <el-col>
           <div> {{ itemValuePreview }}</div>
@@ -293,7 +286,12 @@ export default {
       this.mockVariableFuncs = [];
       this.$emit('advancedRefresh', this.currentItem.value);
 
-    }
+    },
+    handleRowClick(row) {
+      if (row && row.name) {
+        this.itemValue = row.name;
+      }
+    },
   }
 }
 </script>
diff --git a/frontend/src/business/components/api/test/components/environment/ApiVariableSetting.vue b/frontend/src/business/components/api/test/components/environment/ApiVariableSetting.vue
index aebd2b303e..e6b1b18d6a 100644
--- a/frontend/src/business/components/api/test/components/environment/ApiVariableSetting.vue
+++ b/frontend/src/business/components/api/test/components/environment/ApiVariableSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <ms-edit-dialog
     :visible.sync="visible"
-    width="700px"
+    width="70%"
     :title="$t('schema.adv_setting')"
     :with-footer="false"
     append-to-body