From f9f1809f3e43e3408a9b6a4918ef32a41bd10056 Mon Sep 17 00:00:00 2001
From: q4speed <kun@fit2cloud.com>
Date: Wed, 15 Apr 2020 18:25:34 +0800
Subject: [PATCH] =?UTF-8?q?api=E7=95=8C=E9=9D=A2=EF=BC=8C=E6=9C=AA?=
 =?UTF-8?q?=E5=AE=8C=E5=BE=85=E7=BB=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/api/test/ApiScenarioConfig.vue | 170 ++++++++++++
 .../components/api/test/EditApiTest.vue       | 242 ------------------
 .../api/test/components/ApiBody.vue           |  47 ++++
 .../api/test/components/ApiCollapse.vue       |  70 +++++
 .../api/test/components/ApiCollapseItem.vue   | 125 +++++++++
 .../api/test/components/ApiKeyValue.vue       |  83 ++++++
 .../api/test/components/ApiRequest.vue        | 151 +++++++++++
 .../api/test/components/ApiRequestForm.vue    |  75 ++++++
 .../api/test/components/ApiScenarioForm.vue   |  49 ++++
 .../test/components/ApiTestRuntimeConfig.vue  | 121 ---------
 .../test/components/ApiTestSceneConfig.vue    | 196 --------------
 .../components/common/router/router.js        |  10 +-
 frontend/src/i18n/zh-CN.js                    |  22 +-
 13 files changed, 796 insertions(+), 565 deletions(-)
 create mode 100644 frontend/src/business/components/api/test/ApiScenarioConfig.vue
 delete mode 100644 frontend/src/business/components/api/test/EditApiTest.vue
 create mode 100644 frontend/src/business/components/api/test/components/ApiBody.vue
 create mode 100644 frontend/src/business/components/api/test/components/ApiCollapse.vue
 create mode 100644 frontend/src/business/components/api/test/components/ApiCollapseItem.vue
 create mode 100644 frontend/src/business/components/api/test/components/ApiKeyValue.vue
 create mode 100644 frontend/src/business/components/api/test/components/ApiRequest.vue
 create mode 100644 frontend/src/business/components/api/test/components/ApiRequestForm.vue
 create mode 100644 frontend/src/business/components/api/test/components/ApiScenarioForm.vue
 delete mode 100644 frontend/src/business/components/api/test/components/ApiTestRuntimeConfig.vue
 delete mode 100644 frontend/src/business/components/api/test/components/ApiTestSceneConfig.vue

diff --git a/frontend/src/business/components/api/test/ApiScenarioConfig.vue b/frontend/src/business/components/api/test/ApiScenarioConfig.vue
new file mode 100644
index 0000000000..193d2f7926
--- /dev/null
+++ b/frontend/src/business/components/api/test/ApiScenarioConfig.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="container">
+    <div class="main-content">
+      <el-card>
+        <el-container class="scenario-container">
+          <el-header>
+            <span class="scenario-title">场景配置</span>
+          </el-header>
+
+          <el-container>
+            <el-aside class="scenario-aside">
+              <div class="scenario-list">
+                <ms-api-collapse v-model="activeName" @change="handleChange" accordion>
+                  <ms-api-collapse-item v-for="(scenario, index) in scenarios" :key="index"
+                                        :title="scenario.name" :name="index">
+                    <template slot="title">
+                      <div class="scenario-name">{{scenario.name}}</div>
+                      <el-dropdown trigger="click" @command="handleCommand">
+                        <span class="el-dropdown-link el-icon-more scenario-btn"/>
+                        <el-dropdown-menu slot="dropdown">
+                          <el-dropdown-item :command="{type:'delete', index:index}">删除场景</el-dropdown-item>
+                        </el-dropdown-menu>
+                      </el-dropdown>
+                    </template>
+                    <ms-api-request :requests="scenario.requests" :open="select"/>
+                  </ms-api-collapse-item>
+                </ms-api-collapse>
+              </div>
+              <el-button class="scenario-create" type="primary" size="mini" icon="el-icon-plus" plain @click="create"/>
+            </el-aside>
+
+            <el-main class="scenario-main">
+              <div class="scenario-form">
+                <ms-api-scenario-form :scenario="selected"></ms-api-scenario-form>
+                <ms-api-request-form :request="selected"></ms-api-request-form>
+              </div>
+            </el-main>
+          </el-container>
+        </el-container>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  import MsApiCollapseItem from "./components/ApiCollapseItem";
+  import MsApiCollapse from "./components/ApiCollapse";
+  import MsApiRequest from "./components/ApiRequest";
+  import MsApiRequestForm from "./components/ApiRequestForm";
+  import MsApiScenarioForm from "./components/ApiScenarioForm";
+
+  export default {
+    name: "MsApiScenarioConfig",
+
+    components: {MsApiScenarioForm, MsApiRequestForm, MsApiRequest, MsApiCollapse, MsApiCollapseItem},
+
+    data() {
+      return {
+        activeName: 0,
+        scenarios: [],
+        selected: Object
+      }
+    },
+
+    methods: {
+      handleChange: function (index) {
+        this.select(this.scenarios[index]);
+      },
+      handleCommand: function (command) {
+        switch (command.type) {
+          case "delete":
+            this.deleteScenario(command.index);
+            break;
+        }
+      },
+      createScenario: function () {
+        return {
+          type: "Scenario",
+          name: "Scenario",
+          address: "",
+          file: "",
+          variables: [],
+          headers: [],
+          requests: []
+        }
+      },
+      deleteScenario: function (index) {
+        this.scenarios.splice(index, 1);
+        if (this.scenarios.length === 0) {
+          this.create();
+        }
+      },
+      create: function () {
+        let scenario = this.createScenario();
+        this.scenarios.push(scenario);
+      },
+      select: function (obj) {
+        this.selected = obj;
+      }
+    },
+
+    created() {
+      if (this.scenarios.length === 0) {
+        this.create();
+        this.select(this.scenarios[0]);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .scenario-container {
+    height: calc(100vh - 150px);
+    min-height: 600px;
+  }
+
+  .scenario-title {
+    font-size: 16px;
+    margin-left: -20px;
+  }
+
+  .scenario-aside {
+    position: relative;
+    border-radius: 4px;
+    border: 1px solid #EBEEF5;
+    box-sizing: border-box;
+  }
+
+  .scenario-list {
+    overflow-y: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 28px;
+  }
+
+  .scenario-name {
+    font-size: 14px;
+    width: 100%;
+  }
+
+  .scenario-btn {
+    text-align: center;
+    padding: 13px;
+  }
+
+  .scenario-create {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .scenario-main {
+    position: relative;
+    margin-left: 20px;
+    border: 1px solid #EBEEF5;
+  }
+
+  .scenario-form {
+    padding: 20px;
+    overflow-y: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+</style>
diff --git a/frontend/src/business/components/api/test/EditApiTest.vue b/frontend/src/business/components/api/test/EditApiTest.vue
deleted file mode 100644
index a77d0c1af9..0000000000
--- a/frontend/src/business/components/api/test/EditApiTest.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<template>
-  <div class="edit-testplan-container" >
-    <div class="main-content">
-      <el-card>
-        <el-row>
-          <el-col :span="10">
-            <el-input :placeholder="$t('load_test.input_name')" v-model="testPlan.name" class="input-with-select">
-              <template v-slot:prepend>
-                <el-select v-model="testPlan.projectId" :placeholder="$t('load_test.select_project')">
-                  <el-option
-                    v-for="item in projects"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </template>
-            </el-input>
-          </el-col>
-          <el-button type="primary" plain @click="save">{{$t('commons.save')}}</el-button>
-          <el-button type="primary" plain @click="saveAndRun">{{$t('load_test.save_and_run')}}</el-button>
-          <el-button type="warning" plain @click="cancel">{{$t('commons.cancel')}}</el-button>
-        </el-row>
-
-        <el-tabs class="testplan-config" v-model="active" type="border-card" :stretch="true">
-          <el-tab-pane :label="$t('load_test.basic_config')">
-            <api-test-scene-config :test-plan="testPlan" />
-          </el-tab-pane>
-          <el-tab-pane :label="$t('load_test.runtime_config')">
-            <api-test-runtime-config :test-plan="testPlan" ref="runtimeConfig"/>
-          </el-tab-pane>
-        </el-tabs>
-      </el-card>
-    </div>
-  </div>
-</template>
-
-<script>
-  import ApiTestSceneConfig from './components/ApiTestSceneConfig';
-  import ApiTestRuntimeConfig from './components/ApiTestRuntimeConfig';
-
-  export default {
-    name: "EditApiTest",
-    data() {
-      return {
-        result: {},
-        testPlan: {},
-        listProjectPath: "/project/listAll",
-        savePath: "/api/save",
-        editPath: "/api/edit",
-        runPath: "/api/run",
-        projects: [],
-        active: '0',
-        tabs: [{
-          title: this.$t('load_test.basic_config'),
-          id: '0',
-          component: 'ApiTestSceneConfig'
-        }, {
-          title: this.$t('load_test.runtime_config'),
-          id: '1',
-          component: 'ApiTestRuntimeConfig'
-        }]
-      }
-    },
-    components: {
-      ApiTestSceneConfig,
-      ApiTestRuntimeConfig,
-    },
-    watch: {
-      '$route'(to) {
-        // 如果是创建测试
-        if (to.name === 'createFucTest') {
-          window.location.reload();
-          return;
-        }
-        let testId = to.path.split('/')[4]; // find testId
-        if (testId) {
-          this.$get('/api/get/' + testId, response => {
-            this.testPlan = response.data;
-          });
-        }
-      }
-
-    },
-    created() {
-      let testId = this.$route.path.split('/')[4];
-      if (testId) {
-        this.$get('/api/get/' + testId, response => {
-          this.testPlan = response.data;
-        });
-      }
-
-      this.listProjects();
-    },
-    methods: {
-      listProjects() {
-        this.result = this.$get(this.listProjectPath, response => {
-          this.projects = response.data;
-        })
-      },
-      save() {
-        if (!this.validTestPlan()) {
-          return;
-        }
-
-        let options = this.getSaveOption();
-
-        this.result = this.$request(options, () => {
-          this.$message({
-            message: this.$t('commons.save_success'),
-            type: 'success'
-          });
-          this.$refs.runtimeConfig.cancelAllEdit();
-          this.$router.push({path: '/api/test/all'})
-        });
-      },
-      saveAndRun() {
-        if (!this.validTestPlan()) {
-          return;
-        }
-
-        let options = this.getSaveOption();
-
-        this.result = this.$request(options, (response) => {
-          this.testPlan.id = response.data;
-          this.$message({
-            message: this.$t('commons.save_success'),
-            type: 'success'
-          });
-
-          this.result = this.$post(this.runPath, {id: this.testPlan.id}, () => {
-            this.$message({
-              message: this.$t('load_test.is_running'),
-              type: 'success'
-            });
-          })
-        });
-      },
-      getSaveOption() {
-        let formData = new FormData();
-        let url = this.testPlan.id ? this.editPath : this.savePath;
-
-        if (!this.testPlan.file.id) {
-          formData.append("file", this.testPlan.file);
-        }
-
-        this.testPlan.runtimeConfiguration = JSON.stringify(this.$refs.runtimeConfig.configurations());
-
-        // file属性不需要json化
-        let requestJson = JSON.stringify(this.testPlan, function (key, value) {
-          return key === "file" ? undefined : value
-        });
-
-        formData.append('request', new Blob([requestJson], {
-          type: "application/json"
-        }));
-
-        return {
-          method: 'POST',
-          url: url,
-          data: formData,
-          headers: {
-            'Content-Type': undefined
-          }
-        };
-      },
-      cancel() {
-        this.$router.push({path: '/api/test/all'})
-      },
-      validTestPlan() {
-        if (!this.testPlan.name) {
-          this.$message({
-            message: this.$t('load_test.test_name_is_null'),
-            type: 'error'
-          });
-
-          return false;
-        }
-
-        if (!this.testPlan.projectId) {
-          this.$message({
-            message: this.$t('load_test.project_is_null'),
-            type: 'error'
-          });
-
-          return false;
-        }
-
-        if (!this.testPlan.file) {
-          this.$message({
-            message: this.$t('load_test.jmx_is_null'),
-            type: 'error'
-          });
-
-          return false;
-        }
-
-        if (!this.$refs.runtimeConfig.validConfig()) {
-          return false;
-        }
-
-        /// todo: 其他校验
-
-        return true;
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .edit-testplan-container {
-    float: none;
-    text-align: center;
-    padding: 15px;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-  }
-
-  .edit-testplan-container .main-content {
-    margin: 0 auto;
-    width: 100%;
-    max-width: 1200px;
-  }
-
-  .edit-testplan-container .testplan-config {
-    margin-top: 15px;
-  }
-
-  .el-select {
-    min-width: 130px;
-  }
-
-  .edit-testplan-container .input-with-select .el-input-group__prepend {
-    background-color: #fff;
-  }
-
-  .advanced-config {
-    height: calc(100vh - 280px);
-    overflow: auto;
-  }
-</style>
diff --git a/frontend/src/business/components/api/test/components/ApiBody.vue b/frontend/src/business/components/api/test/components/ApiBody.vue
new file mode 100644
index 0000000000..a6074a6e65
--- /dev/null
+++ b/frontend/src/business/components/api/test/components/ApiBody.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <el-radio-group v-model="body.type" size="mini">
+      <el-radio-button label="kv">
+        {{$t('api_test.request.body_kv')}}
+      </el-radio-button>
+      <el-radio-button label="text">
+        {{$t('api_test.request.body_text')}}
+      </el-radio-button>
+    </el-radio-group>
+
+    <ms-api-key-value :items="body.kvs" v-if="isKV"/>
+
+    <el-input class="textarea" type="textarea" v-model="body.text" :autosize="{ minRows: 10, maxRows: 25}" resize="none"
+              v-else/>
+  </div>
+</template>
+
+<script>
+  import MsApiKeyValue from "./ApiKeyValue";
+
+  export default {
+    name: "MsApiBody",
+    components: {MsApiKeyValue},
+    props: {
+      body: Object
+    },
+
+    data() {
+      return {};
+    },
+
+    methods: {},
+
+    computed: {
+      isKV() {
+        return this.body.type === "kv";
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .textarea {
+    margin-top: 10px;
+  }
+</style>
diff --git a/frontend/src/business/components/api/test/components/ApiCollapse.vue b/frontend/src/business/components/api/test/components/ApiCollapse.vue
new file mode 100644
index 0000000000..303c06f80a
--- /dev/null
+++ b/frontend/src/business/components/api/test/components/ApiCollapse.vue
@@ -0,0 +1,70 @@
+<template>
+  <div role="tablist" aria-multiselectable="true">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'MsApiCollapse',
+
+    componentName: 'MsApiCollapse',
+
+    props: {
+      accordion: Boolean,
+      value: {
+        type: [Array, String, Number],
+        default() {
+          return [];
+        }
+      }
+    },
+
+    data() {
+      return {
+        activeNames: [].concat(this.value)
+      };
+    },
+
+    provide() {
+      return {
+        collapse: this
+      };
+    },
+
+    watch: {
+      value(value) {
+        this.activeNames = [].concat(value);
+      }
+    },
+
+    methods: {
+      setActiveNames(activeNames) {
+        activeNames = [].concat(activeNames);
+        let value = this.accordion ? activeNames[0] : activeNames;
+        this.activeNames = activeNames;
+        this.$emit('input', value);
+        this.$emit('change', value);
+      },
+      handleItemClick(item) {
+        if (this.accordion) {
+          this.setActiveNames(
+            (this.activeNames[0] || this.activeNames[0] === 0) && item.name);
+        } else {
+          let activeNames = this.activeNames.slice(0);
+          let index = activeNames.indexOf(item.name);
+
+          if (index > -1) {
+            activeNames.splice(index, 1);
+          } else {
+            activeNames.push(item.name);
+          }
+          this.setActiveNames(activeNames);
+        }
+      }
+    },
+
+    created() {
+      this.$on('item-click', this.handleItemClick);
+    }
+  };
+</script>
diff --git a/frontend/src/business/components/api/test/components/ApiCollapseItem.vue b/frontend/src/business/components/api/test/components/ApiCollapseItem.vue
new file mode 100644
index 0000000000..add6a4e7ff
--- /dev/null
+++ b/frontend/src/business/components/api/test/components/ApiCollapseItem.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="el-collapse-item"
+       :class="{'is-active': isActive, 'is-disabled': disabled }">
+    <div
+      role="tab"
+      :aria-expanded="isActive"
+      :aria-controls="`el-collapse-content-${id}`"
+      :aria-describedby="`el-collapse-content-${id}`"
+    >
+      <div
+        class="el-collapse-item__header"
+        @click="handleHeaderClick"
+        role="button"
+        :id="`el-collapse-head-${id}`"
+        :tabindex="disabled ? undefined : 0"
+        @keyup.space.enter.stop="handleEnterClick"
+        :class="{
+          'focusing': focusing,
+          'is-active': isActive
+        }"
+        @focus="handleFocus"
+        @blur="focusing = false"
+      >
+        <i
+          class="el-collapse-item__arrow el-icon-arrow-right"
+          :class="{'is-active': isActive}">
+        </i>
+        <slot name="title">{{title}}</slot>
+      </div>
+    </div>
+    <el-collapse-transition>
+      <div
+        class="el-collapse-item__wrap"
+        v-show="isActive"
+        role="tabpanel"
+        :aria-hidden="!isActive"
+        :aria-labelledby="`el-collapse-head-${id}`"
+        :id="`el-collapse-content-${id}`"
+      >
+        <div class="el-collapse-item__content">
+          <slot></slot>
+        </div>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+<script>
+  import Emitter from 'element-ui/src/mixins/emitter';
+  import {generateId} from 'element-ui/src/utils/util';
+
+  export default {
+    name: 'MsApiCollapseItem',
+
+    componentName: 'MsApiCollapseItem',
+
+    mixins: [Emitter],
+
+    data() {
+      return {
+        contentWrapStyle: {
+          height: 'auto',
+          display: 'block'
+        },
+        contentHeight: 0,
+        focusing: false,
+        isClick: false,
+        id: generateId()
+      };
+    },
+
+    inject: ['collapse'],
+
+    props: {
+      title: String,
+      name: {
+        type: [String, Number],
+        default() {
+          return this._uid;
+        }
+      },
+      disabled: Boolean
+    },
+
+    computed: {
+      isActive() {
+        return this.collapse.activeNames.indexOf(this.name) > -1;
+      }
+    },
+
+    methods: {
+      handleFocus() {
+        setTimeout(() => {
+          if (!this.isClick) {
+            this.focusing = true;
+          } else {
+            this.isClick = false;
+          }
+        }, 50);
+      },
+      handleHeaderClick() {
+        if (this.disabled) return;
+        this.dispatch('MsApiCollapse', 'item-click', this);
+        this.focusing = false;
+        this.isClick = true;
+      },
+      handleEnterClick() {
+        this.dispatch('MsApiCollapse', 'item-click', this);
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .el-collapse-item__header {
+    padding-left: 7px;
+  }
+
+  .el-collapse-item__header.is-active {
+    background-color: #E9E9E9;
+  }
+
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+</style>
diff --git a/frontend/src/business/components/api/test/components/ApiKeyValue.vue b/frontend/src/business/components/api/test/components/ApiKeyValue.vue
new file mode 100644
index 0000000000..9cab3f286e
--- /dev/null
+++ b/frontend/src/business/components/api/test/components/ApiKeyValue.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <span class="kv-description" v-if="description">
+      {{description}}
+    </span>
+    <div class="kv-row" v-for="(item, index) in items" :key="index">
+      <el-row type="flex" :gutter="20" justify="space-between" align="middle">
+        <el-col :span="11">
+          <el-input v-model="item.key" placeholder="Key" size="small" maxlength="100" @change="check"/>
+        </el-col>
+        <el-col :span="11">
+          <el-input v-model="item.value" placeholder="Value" size="small" maxlength="100" @change="check"/>
+        </el-col>
+        <el-col :span="1">
+          <el-button size="mini" class="el-icon-delete-solid" circle @click="remove(index)"/>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "MsApiKeyValue",
+
+    props: {
+      description: String,
+      items: Array
+    },
+
+    methods: {
+      create: function () {
+        return {
+          key: "",
+          value: ""
+        }
+      },
+      remove: function (index) {
+        this.items.splice(index, 1);
+        if (this.items.length === 0) {
+          this.items.push(this.create());
+        }
+      },
+      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;
+          }
+        });
+        if (isNeedCreate) {
+          this.items.push(this.create());
+        }
+        if (removeIndex !== -1) {
+          this.remove(removeIndex);
+        }
+        // TODO 检查key重复
+      }
+    },
+
+    created() {
+      if (this.items.length === 0) {
+        this.items.push(this.create());
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .kv-description {
+    font-size: 14px;
+  }
+
+  .kv-row {
+    margin-top: 10px;
+  }
+</style>
diff --git a/frontend/src/business/components/api/test/components/ApiRequest.vue b/frontend/src/business/components/api/test/components/ApiRequest.vue
new file mode 100644
index 0000000000..464027ab64
--- /dev/null
+++ b/frontend/src/business/components/api/test/components/ApiRequest.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="request-container">
+    <div class="request-item" v-for="(request, index) in requests" :key="index" @click="select(request)"
+         :class="{'selected': isSelected(request)}">
+      <span class="request-method">
+        {{request.method}}
+      </span>
+      <span class="request-name">
+        {{request.name}}
+      </span>
+      <span class="request-btn">
+        <el-dropdown trigger="click" @command="handleCommand">
+          <span class="el-dropdown-link el-icon-more"></span>
+          <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>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </span>
+    </div>
+    <el-button class="request-create" type="primary" size="mini" icon="el-icon-plus" plain @click="create"/>
+  </div>
+</template>
+
+<script>
+  import {generateId} from 'element-ui/src/utils/util';
+
+  export default {
+    name: "MsApiRequest",
+    props: {
+      requests: Array,
+      open: Function
+    },
+
+    data() {
+      return {
+        selected: 0
+      }
+    },
+
+    computed: {
+      isSelected() {
+        return function (request) {
+          return this.selected.randomId === request.randomId;
+        }
+      }
+    },
+
+    methods: {
+      create: function () {
+        let request = this.createRequest();
+        this.requests.push(request);
+      },
+      handleCommand: function (command) {
+        switch (command.type) {
+          case "copy":
+            this.copyRequest(command.index);
+            break;
+          case "delete":
+            this.deleteRequest(command.index);
+            break;
+        }
+      },
+      copyRequest: function (index) {
+        let request = this.requests[index];
+        this.requests.push(JSON.parse(JSON.stringify(request)));
+      },
+      deleteRequest: function (index) {
+        this.requests.splice(index, 1);
+        if (this.requests.length === 0) {
+          this.create();
+        }
+      },
+      createRequest: function () {
+        return {
+          randomId: generateId(),
+          type: "Request",
+          method: "GET",
+          name: "",
+          parameters: [],
+          headers: [],
+          body: {
+            type: "kv",
+            kvs: [],
+            text: ""
+          },
+          assertions: [],
+          extract: []
+        }
+      },
+      select: function (request) {
+        this.selected = request;
+        this.open(request);
+      }
+    },
+
+    created() {
+      if (this.requests.length === 0) {
+        this.create();
+        this.select(this.requests[0]);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .request-item {
+    border-left: 5px solid #1E90FF;
+    line-height: 40px;
+    max-height: 40px;
+    border-top: 1px solid #EBEEF5;
+    cursor: pointer;
+  }
+
+  .request-item:first-child {
+    border-top: 0;
+  }
+
+  .request-item:hover, .request-item.selected:hover {
+    background-color: #ECF5FF;
+  }
+
+  .request-item.selected {
+    background-color: #F5F5F5;
+  }
+
+  .request-method {
+    padding: 0 5px;
+    width: 60px;
+    color: #1E90FF;
+  }
+
+  .request-name {
+    font-size: 14px;
+    width: 100%;
+  }
+
+  .request-btn {
+    float: right;
+    text-align: center;
+    height: 40px;
+  }
+
+  .request-btn .el-icon-more {
+    padding: 13px;
+  }
+
+  .request-create {
+    width: 100%;
+  }
+</style>
diff --git a/frontend/src/business/components/api/test/components/ApiRequestForm.vue b/frontend/src/business/components/api/test/components/ApiRequestForm.vue
new file mode 100644
index 0000000000..e642811645
--- /dev/null
+++ b/frontend/src/business/components/api/test/components/ApiRequestForm.vue
@@ -0,0 +1,75 @@
+<template>
+  <el-form :model="request" :rules="rules" ref="request" label-width="100px" label-position="left" v-if="isRequest">
+    <el-form-item :label="$t('api_test.request.name')" prop="name">
+      <el-input v-model="request.name"></el-input>
+    </el-form-item>
+
+    <el-form-item :label="$t('api_test.request.url')" prop="url">
+      <el-input v-model="request.url" :placeholder="$t('api_test.request.url_describe')">
+        <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-select>
+      </el-input>
+    </el-form-item>
+
+    <el-tabs v-model="activeName">
+      <el-tab-pane :label="$t('api_test.request.parameters')" name="parameters">
+        <ms-api-key-value :items="request.parameters" :description="$t('api_test.request.parameters_desc')"/>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('api_test.request.headers')" name="headers">
+        <ms-api-key-value :items="request.headers"/>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('api_test.request.body')" name="body" v-if="isNotGet">
+        <ms-api-body :body="request.body"/>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('api_test.request.assertions')" name="assertions" v-if="false">
+        TODO
+      </el-tab-pane>
+      <el-tab-pane :label="$t('api_test.request.extract')" name="extract" v-if="false">
+        TODO
+      </el-tab-pane>
+    </el-tabs>
+  </el-form>
+</template>
+
+<script>
+  import MsApiKeyValue from "./ApiKeyValue";
+  import MsApiBody from "./ApiBody";
+
+  export default {
+    name: "MsApiRequestForm",
+    components: {MsApiBody, MsApiKeyValue},
+    props: {
+      request: Object
+    },
+
+    data() {
+      return {
+        activeName: "parameters",
+        rules: {}
+      }
+    },
+
+    computed: {
+      isRequest() {
+        return this.request.type === "Request";
+      },
+      isNotGet() {
+        return this.request.method !== "GET";
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .request-method-select {
+    width: 110px;
+  }
+</style>
diff --git a/frontend/src/business/components/api/test/components/ApiScenarioForm.vue b/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
new file mode 100644
index 0000000000..953240aab7
--- /dev/null
+++ b/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
@@ -0,0 +1,49 @@
+<template>
+  <el-form :model="scenario" :rules="rules" ref="scenario" label-width="100px" label-position="left" v-if="isScenario">
+    <el-form-item :label="$t('api_test.scenario.name')" prop="name">
+      <el-input v-model="scenario.name"></el-input>
+    </el-form-item>
+
+    <el-form-item :label="$t('api_test.scenario.base_url')" prop="url">
+      <el-input :placeholder="$t('api_test.scenario.base_url_describe')" v-model="scenario.url"></el-input>
+    </el-form-item>
+
+    <el-tabs v-model="activeName">
+      <el-tab-pane :label="$t('api_test.scenario.variables')" name="variables">
+        <ms-api-key-value :items="scenario.variables"/>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('api_test.scenario.headers')" name="headers">
+        <ms-api-key-value :items="scenario.headers"/>
+      </el-tab-pane>
+    </el-tabs>
+  </el-form>
+</template>
+
+<script>
+  import MsApiKeyValue from "./ApiKeyValue";
+
+  export default {
+    name: "MsApiScenarioForm",
+    components: {MsApiKeyValue},
+    props: {
+      scenario: Object
+    },
+
+    data() {
+      return {
+        activeName: "variables",
+        rules: {}
+      }
+    },
+
+    computed: {
+      isScenario() {
+        return this.scenario.type === "Scenario";
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/api/test/components/ApiTestRuntimeConfig.vue b/frontend/src/business/components/api/test/components/ApiTestRuntimeConfig.vue
deleted file mode 100644
index 9dbcb03caa..0000000000
--- a/frontend/src/business/components/api/test/components/ApiTestRuntimeConfig.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-
-  <div>
-      <el-row>
-        <el-col :span="5" :offset="6">
-          <span>浏览器</span>
-        </el-col>
-      </el-row>
-
-      <el-row >
-        <el-col :span="20" :offset="2">
-            <el-radio-group v-model="browser.value" class="browser-radio">
-              <el-radio v-for="item in browser.options" :key="item.label" :label="item.label">
-                <img :src="item.url"/>
-              </el-radio>
-            </el-radio-group>
-        </el-col>
-      </el-row>
-
-      <el-row>
-        <el-col :span="5" :offset="6">
-          <span>资源池</span>
-        </el-col>
-      </el-row>
-
-      <el-row>
-        <el-col :span="18" :offset="1">
-          <el-select v-model="resourcePool.value" filterable placeholder="请选择">
-            <el-option
-              v-for="item in resourcePool.options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        </el-col>
-      </el-row>
-
-  </div>
-</template>
-
-<script>
-
-    export default {
-      name: "ApiTestRuntimeConfig",
-      data() {
-        return {
-          resourcePool: {
-            options: [
-              {
-                value: '选项1',
-                label: '资源池1'
-              },
-              {
-                value: '选项2',
-                label: '资源池3'
-              },
-              {
-                value: '选项3',
-                label: '资源池3'
-            }],
-            value: ''
-          },
-          browser: {
-            options: [{
-                url: require('@/assets/browser/firefox.svg'),
-                label: 'firefox',
-              },
-              {
-                url: require('@/assets/browser/chrome.svg'),
-                label: 'chrome',
-              },
-              {
-                url: require('@/assets/browser/ie.svg'),
-                label: 'ie',
-              },
-              {
-                url: require('@/assets/browser/opera.svg'),
-                label: 'opera',
-              }
-            ],
-            value: 'firefox'
-          }
-        }
-      },
-      methods: {
-        validConfig() {
-          if (this.resourcePool.value == '') {
-            this.$message.error(this.$t('api_test.select_resource_pool'));
-            return false;
-          }
-          return true;
-        },
-        configurations() {
-          return {
-            resourcePool: this.resourcePool,
-            browser: this.browser
-          }
-        },
-        cancelAllEdit() {
-          this.browser.value = 'firefox';
-          this.resourcePool.value = '';
-        }
-      }
-    }
-</script>
-
-<style scoped>
-
-  .el-row {
-    margin-top: 30px;
-    margin-bottom: 30px;
-  }
-
-  span {
-    font-size: 20px;
-    font-weight: bold;
-    color: dimgray;
-  }
-
-</style>
diff --git a/frontend/src/business/components/api/test/components/ApiTestSceneConfig.vue b/frontend/src/business/components/api/test/components/ApiTestSceneConfig.vue
deleted file mode 100644
index c89c04e8ab..0000000000
--- a/frontend/src/business/components/api/test/components/ApiTestSceneConfig.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<template>
-  <div v-loading="result.loading">
-    <el-upload
-      accept=".jmx"
-      drag
-      action=""
-      :limit="1"
-      :show-file-list="false"
-      :before-upload="beforeUpload"
-      :http-request="handleUpload"
-      :on-exceed="handleExceed"
-      :file-list="fileList">
-      <i class="el-icon-upload"/>
-      <div class="el-upload__text" v-html="$t('load_test.upload_tips')"></div>
-      <template v-slot:tip>
-        <div class="el-upload__tip">{{$t('load_test.upload_type')}}</div>
-      </template>
-    </el-upload>
-
-    <el-table class="basic-config" :data="tableData">
-      <el-table-column
-        prop="name"
-        :label="$t('load_test.file_name')">
-      </el-table-column>
-      <el-table-column
-        prop="size"
-        :label="$t('load_test.file_size')">
-      </el-table-column>
-      <el-table-column
-        prop="type"
-        :label="$t('load_test.file_type')">
-      </el-table-column>
-      <el-table-column
-        :label="$t('load_test.last_modify_time')">
-        <template v-slot:default="scope">
-          <i class="el-icon-time"/>
-          <span class="last-modified">{{ scope.row.lastModified | timestampFormatDate }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="status"
-        :label="$t('load_test.file_status')">
-      </el-table-column>
-      <el-table-column
-        :label="$t('commons.operating')">
-        <template v-slot:default="scope">
-          <el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id" type="primary" icon="el-icon-download"
-                     size="mini" circle/>
-          <el-button @click="handleDelete(scope.row, scope.$index)" type="danger" icon="el-icon-delete" size="mini"
-                     circle/>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-  import {Message} from "element-ui";
-
-  export default {
-    name: "ApiTestSceneConfig",
-    props: ["testPlan"],
-    data() {
-      return {
-        result: {},
-        getFileMetadataPath: "/api/file/metadata",
-        jmxDownloadPath: '/api/file/download',
-        jmxDeletePath: '/api/file/delete',
-        fileList: [],
-        tableData: [],
-      };
-    },
-    created() {
-      if (this.testPlan.id) {
-        this.getFileMetadata(this.testPlan)
-      }
-    },
-    watch: {
-      testPlan() {
-        if (this.testPlan.id) {
-          this.getFileMetadata(this.testPlan)
-        }
-      }
-    },
-    methods: {
-      getFileMetadata(testPlan) {
-        this.fileList = [];// 一个测试只有一个文件
-        this.tableData = [];// 一个测试只有一个文件
-        this.result = this.$get(this.getFileMetadataPath + "/" + testPlan.id, response => {
-          let file = response.data;
-
-          if (!file) {
-            Message.error({message: this.$t('load_test.related_file_not_found'), showClose: true});
-            return;
-          }
-
-          this.testPlan.file = file;
-          this.fileList.push({
-            id: file.id,
-            name: file.name
-          });
-
-          this.tableData.push({
-            id: file.id,
-            name: file.name,
-            size: file.size + 'Byte', /// todo: 按照大小显示Byte、KB、MB等
-            type: 'JMX',
-            lastModified: file.updateTime,
-            status: 'todo',
-          });
-        })
-      },
-      beforeUpload(file) {
-        if (!this.fileValidator(file)) {
-          /// todo: 显示错误信息
-          return false;
-        }
-
-        this.tableData.push({
-          name: file.name,
-          size: file.size + 'Byte', /// todo: 按照大小显示Byte、KB、MB等
-          type: 'JMX',
-          lastModified: file.lastModified,
-          status: 'todo',
-        });
-
-        return true;
-      },
-      handleUpload(uploadResources) {
-        this.testPlan.file = uploadResources.file;
-      },
-      handleDownload(file) {
-        let data = {
-          name: file.name,
-          id: file.id,
-        };
-        let config = {
-          url: this.jmxDownloadPath,
-          method: 'post',
-          data: data,
-          responseType: 'blob'
-        };
-        this.result = this.$request(config).then(response => {
-          const content = response.data;
-          const blob = new Blob([content]);
-          if ("download" in document.createElement("a")) {
-            // 非IE下载
-            //  chrome/firefox
-            let aTag = document.createElement('a');
-            aTag.download = file.name;
-            aTag.href = URL.createObjectURL(blob);
-            aTag.click();
-            URL.revokeObjectURL(aTag.href)
-          } else {
-            // IE10+下载
-            navigator.msSaveBlob(blob, this.filename)
-          }
-        }).catch(e => {
-          Message.error({message: e.message, showClose: true});
-        });
-      },
-      handleDelete(file, index) {
-        this.$alert(this.$t('commons.delete_file_confirm') + file.name + "？", '', {
-          confirmButtonText: this.$t('commons.confirm'),
-          callback: (action) => {
-            if (action === 'confirm') {
-              this._handleDelete(file, index);
-            }
-          }
-        });
-      },
-      _handleDelete(file, index) {
-        this.fileList.splice(index, 1);
-        this.tableData.splice(index, 1);
-        this.testPlan.file = null;
-      },
-      handleExceed() {
-        this.$message.error(this.$t('load_test.delete_file'));
-      },
-      fileValidator(file) {
-        /// todo: 是否需要对文件内容和大小做限制
-        return file.size > 0;
-      },
-    },
-  }
-</script>
-
-<style scoped>
-  .basic-config {
-    width: 100%
-  }
-
-  .last-modified {
-    margin-left: 5px;
-  }
-</style>
diff --git a/frontend/src/business/components/common/router/router.js b/frontend/src/business/components/common/router/router.js
index 7a70a42f38..01831e0eb5 100644
--- a/frontend/src/business/components/common/router/router.js
+++ b/frontend/src/business/components/common/router/router.js
@@ -18,7 +18,7 @@ import PerformanceTestReport from "../../performance/report/PerformanceTestRepor
 import ApiTestReport from "../../api/report/ApiTestReport";
 import ApiTest from "../../api/ApiTest";
 import PerformanceTest from "../../performance/PerformanceTest";
-import EditApiTest from "../../api/test/EditApiTest";
+import ApiScenarioConfig from "../../api/test/ApiScenarioConfig";
 import PerformanceTestHome from "../../performance/home/PerformanceTestHome";
 import ApiTestList from "../../api/test/ApiTestList";
 import ApiTestHome from "../../api/home/ApiTestHome";
@@ -96,13 +96,13 @@ const router = new VueRouter({
         },
         {
           path: 'test/create',
-          name: "createFucTest",
-          component: EditApiTest,
+          name: "createAPITest",
+          component: ApiScenarioConfig,
         },
         {
           path: "test/edit/:testId",
-          name: "editFucTest",
-          component: EditApiTest,
+          name: "editAPITest",
+          component: ApiScenarioConfig,
           props: {
             content: (route) => {
               return {
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 26749d5899..31a068f99a 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -168,7 +168,27 @@ export default {
     'resource_pool_is_null': '资源池为空',
   },
   api_test: {
-    'select_resource_pool': '请选择资源池'
+    scenario: {
+      name: "场景名称",
+      base_url: "基础URL",
+      base_url_describe: "基础URL作为所有请求的URL前缀",
+      variables: "变量",
+      headers: "请求头"
+    },
+    request: {
+      name: "请求名称",
+      method: "请求方法",
+      url: "请求URL",
+      url_describe: "例如: https://fit2cloud.com",
+      parameters: "请求参数",
+      parameters_desc: "参数追加到URL，例如https://fit2cloud.com/entries?key1=Value1&Key2=Value2",
+      headers: "请求头",
+      body: "请求内容",
+      body_kv: "键值对",
+      body_text: "文本",
+      assertions: "断言",
+      extract: "提取"
+    }
   },
   test_track: {
     'test_track': '测试跟踪',