diff --git a/frontend/src/business/components/api/test/components/ApiKeyValue.vue b/frontend/src/business/components/api/test/components/ApiKeyValue.vue
index d3632a17d2..a2480c6da9 100644
--- a/frontend/src/business/components/api/test/components/ApiKeyValue.vue
+++ b/frontend/src/business/components/api/test/components/ApiKeyValue.vue
@@ -39,13 +39,88 @@
                :visible.sync="itemValueVisible"
                class="advanced-item-value"
                width="50%">
-      <el-form>
-        <el-form-item>
-          <el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" :placeholder="valueText"
-                    v-model="itemValue"/>
-        </el-form-item>
-      </el-form>
-      <div>
+      <!--      <el-form>
+              <el-form-item>
+                <el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" :placeholder="valueText"
+                          v-model="itemValue"/>
+              </el-form-item>
+            </el-form>
+            <div>
+              <el-row type="flex" align="middle">
+                <el-col :span="6">
+                  <el-button size="small" type="primary" plain @click="saveAdvanced()">
+                    {{ $t('commons.save') }}
+                  </el-button>
+                  <el-button size="small" type="success" plain @click="showPreview(itemValue)">
+                    {{ $t('api_test.request.parameters_preview') }}
+                  </el-button>
+                </el-col>
+                <el-col>
+                  <div> {{ itemValuePreview }}</div>
+                </el-col>
+              </el-row>
+            </div>
+
+            <div class="format-tip">
+              <div>
+                <p>{{ $t('api_test.request.parameters_filter') }}：
+                  <el-tag size="mini" v-for="func in funcs" :key="func" @click="appendFunc(func)"
+                          style="margin-left: 2px;cursor: pointer;">
+                    <span>{{ func }}</span>
+                  </el-tag>
+                </p>
+              </div>
+              <div>
+                <span>{{ $t('api_test.request.parameters_filter_desc') }}：
+                  <el-link href="http://mockjs.com/examples.html" target="_blank">http://mockjs.com/examples.html</el-link>
+                </span>
+                <p>{{ $t('api_test.request.parameters_filter_example') }}：@string(10) | md5 | substr: 1, 3</p>
+                <p>{{ $t('api_test.request.parameters_filter_example') }}：@integer(1, 5) | concat:_metersphere</p>
+                <p><strong>{{ $t('api_test.request.parameters_filter_tips') }}</strong></p>
+              </div>
+            </div>-->
+      <el-tabs tab-position="left" style="height: 60vh;">
+        <el-tab-pane label="Mock 数据">
+          <el-row type="flex" :gutter="20" style="overflow-x: auto;">
+            <el-col :span="6">
+              <el-autocomplete
+                :disabled="isReadOnly"
+                size="small"
+                class="input-with-autocomplete"
+                v-model="itemValue"
+                :fetch-suggestions="funcSearch"
+                :placeholder="valueText"
+                value-key="name"
+                highlight-first-item
+                @select="change">
+              </el-autocomplete>
+            </el-col>
+            <el-col :span="6">
+              <el-row v-for="(func, index) in funcs" :key="index">
+                <div @click="addFunc(func)" style="padding-top: 5px;">
+                  <el-col :span="12">
+                    <el-radio v-model="currentFunc" :label="func.name">{{ func.name }}</el-radio>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-input size="mini" :placeholder="param.name" v-model="param.value"
+                              v-for="(param, index) in func.params" :key="index"/>
+                  </el-col>
+                </div>
+              </el-row>
+            </el-col>
+            <!--<el-col v-for="(f, index) in itemFuncs" :key="index">
+              <el-menu>
+                <el-menu-item v-for="(func, index) in funcs.slice(0, 5)" :key="index" @click="addFunc(func)">
+                  {{ func.func }}
+                </el-menu-item>
+              </el-menu>
+            </el-col>-->
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="变量"></el-tab-pane>
+      </el-tabs>
+
+      <div style="padding-top: 10px;">
         <el-row type="flex" align="middle">
           <el-col :span="6">
             <el-button size="small" type="primary" plain @click="saveAdvanced()">
@@ -60,32 +135,13 @@
           </el-col>
         </el-row>
       </div>
-
-      <div class="format-tip">
-        <div>
-          <p>{{ $t('api_test.request.parameters_filter') }}：
-            <el-tag size="mini" v-for="func in funcs" :key="func" @click="appendFunc(func)"
-                    style="margin-left: 2px;cursor: pointer;">
-              <span>{{ func }}</span>
-            </el-tag>
-          </p>
-        </div>
-        <div>
-          <span>{{ $t('api_test.request.parameters_filter_desc') }}：
-            <el-link href="http://mockjs.com/examples.html" target="_blank">http://mockjs.com/examples.html</el-link>
-          </span>
-          <p>{{ $t('api_test.request.parameters_filter_example') }}：@string(10) | md5 | substr: 1, 3</p>
-          <p>{{ $t('api_test.request.parameters_filter_example') }}：@integer(1, 5) | concat:_metersphere</p>
-          <p><strong>{{ $t('api_test.request.parameters_filter_tips') }}</strong></p>
-        </div>
-      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import {KeyValue} from "../model/ScenarioModel";
-import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
+import {MOCKJS_FUNC} from "@/common/js/constants";
 import {calculate} from "@/business/components/api/test/model/ScenarioModel";
 
 export default {
@@ -107,9 +163,32 @@ export default {
     return {
       itemValueVisible: false,
       itemValue: null,
-      funcs: ["md5", "sha1", "sha224", "sha256", "sha384", "sha512", "base64",
-        "unbase64", "substr", "concat", "lconcat", "lower", "upper", "length", "number"],
-      itemValuePreview: null
+      funcs: [
+        {name: "md5"},
+        {name: "base64"},
+        {name: "unbase64"},
+        {
+          name: "substr",
+          params: [{name: "start"}, {name: "end"}]
+        },
+        {
+          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"}
+      ],
+      itemValuePreview: null,
+      itemFuncs: [],
+      currentFunc: ""
     }
   },
 
@@ -160,7 +239,7 @@ export default {
       };
     },
     funcSearch(queryString, cb) {
-      let funcs = MOCKJS_FUNC.concat(JMETER_FUNC);
+      let funcs = MOCKJS_FUNC;
       let results = queryString ? funcs.filter(this.funcFilter(queryString)) : funcs;
       // 调用 callback 返回建议列表的数据
       cb(results);
@@ -173,6 +252,9 @@ export default {
     showPreview(itemValue) {
       this.itemValuePreview = calculate(itemValue);
     },
+    addFunc(func) {
+      this.itemFuncs.push(func);
+    },
     appendFunc(func) {
       if (this.itemValue) {
         this.itemValue += " | " + func;
@@ -230,4 +312,9 @@ export default {
   padding: 10px;
   border-radius: 3px;
 }
+
+.func-background {
+  background: #2395f1;
+}
+
 </style>