diff --git a/frontend/src/business/components/api/test/ApiTestConfig.vue b/frontend/src/business/components/api/test/ApiTestConfig.vue
index a85f5edc15..50d26f98b1 100644
--- a/frontend/src/business/components/api/test/ApiTestConfig.vue
+++ b/frontend/src/business/components/api/test/ApiTestConfig.vue
@@ -8,13 +8,13 @@
               <el-input class="test-name" v-model="test.name" maxlength="64" :placeholder="$t('api_test.input_name')">
                 <el-select class="test-project" v-model="test.projectId" slot="prepend"
                            :placeholder="$t('api_test.select_project')">
-                  <el-option v-for="item in projects" :key="item.id" :label="item.name" :value="item.id"/>
+                  <el-option v-for="project in projects" :key="project.id" :label="project.name" :value="project.id"/>
                 </el-select>
               </el-input>
               <el-button type="primary" plain :disabled="isDisabled" @click="saveTest">保存</el-button>
             </el-row>
           </el-header>
-          <ms-api-scenario-config :scenarios="test.scenario_definition"/>
+          <ms-api-scenario-config :scenarios="test.scenarioDefinition"/>
         </el-container>
       </el-card>
     </div>
@@ -35,9 +35,10 @@
         projects: [],
         change: false,
         test: {
+          id: null,
           projectId: null,
           name: null,
-          scenario_definition: []
+          scenarioDefinition: []
         }
       }
     },
@@ -53,11 +54,21 @@
 
     methods: {
       saveTest: function () {
-
         this.change = false;
-        this.$message({
-          message: this.$t('commons.save_success'),
-          type: 'success'
+
+        let param = {
+          id: this.test.id,
+          projectId: this.test.projectId,
+          name: this.test.name,
+          scenarioDefinition: JSON.stringify(this.test.scenarioDefinition)
+        }
+
+        this.result = this.$post("/api/save", param, response => {
+          this.test.id = response.data;
+          this.$message({
+            message: this.$t('commons.save_success'),
+            type: 'success'
+          });
         });
       }
     },
diff --git a/frontend/src/business/components/api/test/components/ApiAssertionRegex.vue b/frontend/src/business/components/api/test/components/ApiAssertionRegex.vue
index 3c53617938..bc61db655b 100644
--- a/frontend/src/business/components/api/test/components/ApiAssertionRegex.vue
+++ b/frontend/src/business/components/api/test/components/ApiAssertionRegex.vue
@@ -4,9 +4,9 @@
       <el-col class="assertion-select">
         <el-select class="assertion-item" v-model="regex.subject" size="small"
                    :placeholder="$t('api_test.request.assertions.select_subject')">
-          <el-option label="Http-Code" value="HTTP-CODE"></el-option>
-          <el-option label="Header" value="HEADER"></el-option>
-          <el-option label="Body" value="BODY"></el-option>
+          <el-option label="HttpCode" value="HTTP_CODE"/>
+          <el-option label="Header" value="HEADER"/>
+          <el-option label="Body" value="BODY"/>
         </el-select>
       </el-col>
       <el-col>
diff --git a/frontend/src/business/components/api/test/components/ApiAssertionText.vue b/frontend/src/business/components/api/test/components/ApiAssertionText.vue
index 9916f71637..20bc6840c6 100644
--- a/frontend/src/business/components/api/test/components/ApiAssertionText.vue
+++ b/frontend/src/business/components/api/test/components/ApiAssertionText.vue
@@ -4,19 +4,19 @@
       <el-col class="assertion-select">
         <el-select class="assertion-item" v-model="subject" size="small"
                    :placeholder="$t('api_test.request.assertions.select_subject')">
-          <el-option label="Http-Code" value="HTTP-CODE"></el-option>
-          <el-option label="Header" value="HEADER"></el-option>
-          <el-option label="Body" value="BODY"></el-option>
+          <el-option label="HttpCode" value="HTTP_CODE"/>
+          <el-option label="Header" value="HEADER"/>
+          <el-option label="Body" value="BODY"/>
         </el-select>
       </el-col>
       <el-col class="assertion-select">
         <el-select class="assertion-item" v-model="condition" size="small"
                    :placeholder="$t('api_test.request.assertions.select_contains')">
-          <el-option :label="$t('api_test.request.assertions.contains')" value="CONTAINS"></el-option>
-          <el-option :label="$t('api_test.request.assertions.not_contains')" value="NOT_CONTAINS"></el-option>
-          <el-option :label="$t('api_test.request.assertions.equals')" value="EQUALS"></el-option>
-          <el-option :label="$t('api_test.request.assertions.start_with')" value="START_WITH"></el-option>
-          <el-option :label="$t('api_test.request.assertions.end_with')" value="END_WITH"></el-option>
+          <el-option :label="$t('api_test.request.assertions.contains')" value="CONTAINS"/>
+          <el-option :label="$t('api_test.request.assertions.not_contains')" value="NOT_CONTAINS"/>
+          <el-option :label="$t('api_test.request.assertions.equals')" value="EQUALS"/>
+          <el-option :label="$t('api_test.request.assertions.start_with')" value="START_WITH"/>
+          <el-option :label="$t('api_test.request.assertions.end_with')" value="END_WITH"/>
         </el-select>
       </el-col>
       <el-col>
diff --git a/frontend/src/business/components/api/test/components/ApiKeyValue.vue b/frontend/src/business/components/api/test/components/ApiKeyValue.vue
index ed90e30d78..12aff27318 100644
--- a/frontend/src/business/components/api/test/components/ApiKeyValue.vue
+++ b/frontend/src/business/components/api/test/components/ApiKeyValue.vue
@@ -12,8 +12,21 @@
           <el-input v-model="item.value" placeholder="Value" size="small" maxlength="100" @change="check"/>
         </el-col>
         <el-col class="kv-delete">
-          <el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"
-                     :disabled="isDisable(index)"/>
+          <el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"/>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="kv-row">
+      <el-row type="flex" :gutter="20" justify="space-between" align="middle">
+        <el-col>
+          <el-input v-model="kv.key" placeholder="Key" size="small" maxlength="100" @change="add"/>
+        </el-col>
+        <el-col>
+          <el-input v-model="kv.value" placeholder="Value" size="small" maxlength="100" @change="add"/>
+        </el-col>
+        <el-col class="kv-delete">
+          <el-button size="mini" class="el-icon-delete-solid" circle :disabled="true"/>
         </el-col>
       </el-row>
     </div>
@@ -31,45 +44,33 @@
       items: Array
     },
 
+    data() {
+      return {
+        kv: new KeyValue()
+      }
+    },
+
     methods: {
       add: function () {
-        this.items.push(new KeyValue());
+        if (this.kv.key || this.kv.value) {
+          this.items.push(this.kv);
+          this.kv = new KeyValue();
+        }
       },
       remove: function (index) {
         this.items.splice(index, 1);
-        if (this.items.length === 0) {
-          this.add();
-        }
       },
       check: function () {
-        let isNeedCreate = true;
         let removeIndex = -1;
         this.items.forEach((item, index) => {
           if (!item.key && !item.value) {
-            // 多余的空行
-            if (index !== this.items.length - 1) {
-              removeIndex = index;
-            }
-            // 没有空行，需要创建空行
-            isNeedCreate = false;
+            removeIndex = index;
           }
         });
-        if (isNeedCreate) {
-          this.add();
-        }
         if (removeIndex !== -1) {
           this.remove(removeIndex);
         }
         // TODO 检查key重复
-      },
-      isDisable: function (index) {
-        return this.items.length - 1 === index;
-      }
-    },
-
-    created() {
-      if (this.items.length === 0) {
-        this.add();
       }
     }
   }
diff --git a/frontend/src/business/components/api/test/components/ApiRequestConfig.vue b/frontend/src/business/components/api/test/components/ApiRequestConfig.vue
index 9746e52699..7e6f87a15d 100644
--- a/frontend/src/business/components/api/test/components/ApiRequestConfig.vue
+++ b/frontend/src/business/components/api/test/components/ApiRequestConfig.vue
@@ -11,7 +11,7 @@
         </div>
         <div class="request-btn">
           <el-dropdown trigger="click" @command="handleCommand">
-            <span class="el-dropdown-link el-icon-more"></span>
+            <span class="el-dropdown-link el-icon-more"/>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item :command="{type: 'copy', index: index}">复制请求</el-dropdown-item>
               <el-dropdown-item :command="{type: 'delete', index: index}">删除请求</el-dropdown-item>
diff --git a/frontend/src/business/components/api/test/components/ApiRequestForm.vue b/frontend/src/business/components/api/test/components/ApiRequestForm.vue
index 0ddf3375e9..34b0791f57 100644
--- a/frontend/src/business/components/api/test/components/ApiRequestForm.vue
+++ b/frontend/src/business/components/api/test/components/ApiRequestForm.vue
@@ -1,20 +1,20 @@
 <template>
   <el-form :model="request" :rules="rules" ref="request" label-width="100px">
     <el-form-item :label="$t('api_test.request.name')" prop="name">
-      <el-input v-model="request.name" maxlength="100"></el-input>
+      <el-input v-model="request.name" maxlength="100"/>
     </el-form-item>
 
     <el-form-item :label="$t('api_test.request.url')" prop="url">
       <el-input v-model="request.url" maxlength="100" :placeholder="$t('api_test.request.url_description')">
         <el-select v-model="request.method" slot="prepend" class="request-method-select">
-          <el-option label="GET" value="GET"></el-option>
-          <el-option label="POST" value="POST"></el-option>
-          <el-option label="PUT" value="PUT"></el-option>
-          <el-option label="PATCH" value="PATCH"></el-option>
-          <el-option label="DELETE" value="DELETE"></el-option>
-          <el-option label="OPTIONS" value="OPTIONS"></el-option>
-          <el-option label="HEAD" value="HEAD"></el-option>
-          <el-option label="CONNECT" value="CONNECT"></el-option>
+          <el-option label="GET" value="GET"/>
+          <el-option label="POST" value="POST"/>
+          <el-option label="PUT" value="PUT"/>
+          <el-option label="PATCH" value="PATCH"/>
+          <el-option label="DELETE" value="DELETE"/>
+          <el-option label="OPTIONS" value="OPTIONS"/>
+          <el-option label="HEAD" value="HEAD"/>
+          <el-option label="CONNECT" value="CONNECT"/>
         </el-select>
       </el-input>
     </el-form-item>
@@ -30,7 +30,7 @@
         <ms-api-body :body="request.body"/>
       </el-tab-pane>
       <el-tab-pane :label="$t('api_test.request.assertions.label')" name="assertions">
-        <ms-api-assertions :assertions="request.assertions"></ms-api-assertions>
+        <ms-api-assertions :assertions="request.assertions"/>
       </el-tab-pane>
       <el-tab-pane :label="$t('api_test.request.extract')" name="extract" v-if="false">
         TODO
diff --git a/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue b/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
index 99e50313f0..7b9d508e10 100644
--- a/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
+++ b/frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
@@ -18,14 +18,13 @@
           </ms-api-collapse-item>
         </ms-api-collapse>
       </div>
-      <el-button class="scenario-create" type="primary" size="mini" icon="el-icon-plus" plain
-                 @click="createScenario"/>
+      <el-button class="scenario-create" type="primary" size="mini" icon="el-icon-plus" plain @click="createScenario"/>
     </el-aside>
 
     <el-main class="scenario-main">
       <div class="scenario-form">
-        <ms-api-scenario-form :scenario="selected" v-if="isScenario"></ms-api-scenario-form>
-        <ms-api-request-form :request="selected" v-if="isRequest"></ms-api-request-form>
+        <ms-api-scenario-form :scenario="selected" v-if="isScenario"/>
+        <ms-api-request-form :request="selected" v-if="isRequest"/>
       </div>
     </el-main>
   </el-container>
diff --git a/frontend/src/business/components/api/test/components/ApiScenarioForm.vue b/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
index 59c0de6f83..52c1d2769e 100644
--- a/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
+++ b/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
@@ -1,7 +1,7 @@
 <template>
   <el-form :model="scenario" :rules="rules" ref="scenario" label-width="100px">
     <el-form-item :label="$t('api_test.scenario.name')" prop="name">
-      <el-input v-model="scenario.name" maxlength="100"></el-input>
+      <el-input v-model="scenario.name" maxlength="100"/>
     </el-form-item>
 
     <el-form-item :label="$t('api_test.scenario.base_url')" prop="url">