diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index ebe3dc5fb4..9ffd26fd3d 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -109,7 +109,7 @@
                 </el-col>
                 <el-col :span="3" class="ms-col-one ms-font">
                   <el-link class="head" @click="showScenarioParameters">{{$t('api_test.automation.scenario_total')}}</el-link>
-                  ：{{this.currentScenario.variables!=undefined?this.currentScenario.variables.length-1: 0}}
+                  ：{{this.currentScenario.variables!=undefined?this.currentScenario.variables.length: 0}}
                 </el-col>
                 <el-col :span="3" class="ms-col-one ms-font">
                   <el-checkbox v-model="enableCookieShare">共享cookie</el-checkbox>
@@ -220,7 +220,7 @@
       </el-drawer>
 
       <!--场景公共参数-->
-      <ms-scenario-parameters :currentScenario="currentScenario" @addParameters="addParameters" ref="scenarioParameters"/>
+      <ms-variable-list :currentScenario="currentScenario" @setVariables="setVariables" ref="scenarioParameters"/>
       <!--外部导入-->
       <api-import ref="apiImport" :saved="false" @refresh="apiImport"/>
     </div>
@@ -247,7 +247,7 @@
   import MsLoopController from "./LoopController";
   import MsApiScenarioComponent from "./ApiScenarioComponent";
   import MsApiReportDetail from "../report/ApiReportDetail";
-  import MsScenarioParameters from "./ScenarioParameters";
+  import MsVariableList from "./variable/VariableList";
   import ApiImport from "../../definition/components/import/ApiImport";
   import InputTag from 'vue-input-tag'
   import "@/common/css/material-icons.css"
@@ -262,10 +262,10 @@
       currentScenario: {},
     },
     components: {
+      MsVariableList,
       ScenarioRelevance,
       ScenarioApiRelevance,
       ApiEnvironmentConfig,
-      MsScenarioParameters,
       MsApiReportDetail,
       MsInputTag, MsRun,
       MsApiScenarioComponent,
@@ -333,10 +333,7 @@
       this.operatingElements = ELEMENTS.get("ALL");
       this.getMaintainerOptions();
       this.getApiScenario();
-    }
-    ,
-    watch: {}
-    ,
+    },
     directives: {OutsideClick},
     computed: {
       buttons() {
@@ -457,6 +454,9 @@
       getIdx(index) {
         return index - 0.33
       },
+      setVariables(v) {
+        this.currentScenario.variables = v;
+      },
       showButton(...names) {
         for (const name of names) {
           if (this.operatingElements.includes(name)) {
@@ -836,7 +836,20 @@
                 let obj = JSON.parse(response.data.scenarioDefinition);
                 if (obj) {
                   this.currentEnvironmentId = obj.environmentId;
-                  this.currentScenario.variables = obj.variables;
+                  this.currentScenario.variables = [];
+                  let index = 1;
+                  obj.variables.forEach(item => {
+                    // 兼容历史数据
+                    if (item.name) {
+                      if (!item.type) {
+                        item.type = "VARIABLE";
+                        item.id = getUUID();
+                      }
+                      item.num = index;
+                      this.currentScenario.variables.push(item);
+                      index++;
+                    }
+                  })
                   this.enableCookieShare = obj.enableCookieShare;
                   this.scenarioDefinition = obj.hashTree;
                 }
@@ -848,8 +861,7 @@
             this.getEnvironments();
           })
         }
-      }
-      ,
+      },
       setParameter() {
         this.currentScenario.stepTotal = this.scenarioDefinition.length;
         this.currentScenario.projectId = getCurrentProjectID();
@@ -873,17 +885,10 @@
       runRefresh() {
         this.debugVisible = true;
         this.loading = false;
-      }
-      ,
+      },
       showScenarioParameters() {
         this.$refs.scenarioParameters.open(this.currentScenario.variables);
-      }
-      ,
-      addParameters(data) {
-        this.currentScenario.variables = data;
-        this.reload();
-      }
-      ,
+      },
       apiImport(importData) {
         if (importData && importData.data) {
           importData.data.forEach(item => {
diff --git a/frontend/src/business/components/api/automation/scenario/ScenarioParameters.vue b/frontend/src/business/components/api/automation/scenario/ScenarioParameters.vue
deleted file mode 100644
index b250fbd08d..0000000000
--- a/frontend/src/business/components/api/automation/scenario/ScenarioParameters.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <el-dialog :close-on-click-modal="false" :title="$t('api_test.scenario.variables')"
-             :visible.sync="visible" class="environment-dialog" width="60%"
-             @close="close">
-    <el-container>
-      <ms-api-scenario-variables :items="variables"
-                                 :description="$t('api_test.scenario.kv_description')"/>
-    </el-container>
-    <template v-slot:footer>
-      <ms-dialog-footer
-        @cancel="close"
-        @confirm="saveParameters"/>
-    </template>
-
-  </el-dialog>
-</template>
-
-<script>
-  import MsApiScenarioVariables from "./ApiScenarioVariables";
-  import {KeyValue} from "../../definition/model/ApiTestModel";
-  import MsDialogFooter from "../../../common/components/MsDialogFooter";
-
-  export default {
-    name: "MsScenarioParameters",
-    components: {
-      MsApiScenarioVariables,
-      MsDialogFooter
-    },
-    data() {
-      return {
-        variables: [new KeyValue()],
-        visible: false,
-      }
-    },
-    methods: {
-      open: function (v) {
-        this.visible = true;
-        if(v){
-          this.variables = v;
-        }
-      },
-      close() {
-        this.visible = false;
-      },
-      saveParameters() {
-        this.visible = false;
-        this.$emit('addParameters', this.variables);
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/business/components/api/automation/scenario/variable/CsvFileUpload.vue b/frontend/src/business/components/api/automation/scenario/variable/CsvFileUpload.vue
new file mode 100644
index 0000000000..cc1876beda
--- /dev/null
+++ b/frontend/src/business/components/api/automation/scenario/variable/CsvFileUpload.vue
@@ -0,0 +1,125 @@
+<template>
+    <span>
+       <el-upload
+         action="#"
+         class="api-body-upload"
+         list-type="picture-card"
+         :http-request="upload"
+         :beforeUpload="uploadValidate"
+         :file-list="parameter.files"
+         :limit="1"
+         :on-exceed="exceed"
+         ref="upload">
+
+         <div class="upload-default">
+           <i class="el-icon-plus"/>
+         </div>
+           <div class="upload-item" slot="file" slot-scope="{file}">
+             <span>{{file.file ? file.file.name : file.name}}</span>
+             <span class="el-upload-list__item-actions">
+              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                <i class="el-icon-delete"/>
+              </span>
+             </span>
+        </div>
+
+      </el-upload>
+    </span>
+</template>
+
+<script>
+  export default {
+    name: "MsApiBodyFileUpload",
+    data() {
+      return {
+        disabled: false,
+      };
+    },
+    props: {
+      parameter: Object,
+      default() {
+        return {}
+      }
+    },
+    methods: {
+      handleRemove(file) {
+        this.$refs.upload.handleRemove(file);
+        for (let i = 0; i < this.parameter.files.length; i++) {
+          let fileName = file.file ? file.file.name : file.name;
+          let paramFileName = this.parameter.files[i].file ?
+            this.parameter.files[i].file.name : this.parameter.files[i].name;
+          if (fileName === paramFileName) {
+            this.parameter.files.splice(i, 1);
+            this.$refs.upload.handleRemove(file);
+            break;
+          }
+        }
+      },
+      exceed() {
+        this.$warning(this.$t('test_track.case.import.upload_limit_count'));
+      },
+      upload(file) {
+        this.parameter.files.push(file);
+      },
+      uploadValidate(file) {
+        if (file.size / 1024 / 1024 > 500) {
+          this.$warning(this.$t('api_test.request.body_upload_limit_size'));
+          return false;
+        }
+        if (!file.name.endsWith(".csv")) {
+          this.$warning("只能上传CSV文件");
+          return false;
+        }
+        return true;
+      },
+    },
+    created() {
+      if (!this.parameter.files) {
+        this.parameter.files = [];
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  .el-upload {
+    background-color: black;
+  }
+
+  .api-body-upload >>> .el-upload {
+    height: 30px;
+    width: 32px;
+  }
+
+  .upload-default {
+    min-height: 30px;
+    width: 32px;
+    line-height: 32px;
+  }
+
+  .el-icon-plus {
+    font-size: 16px;
+  }
+
+  .api-body-upload >>> .el-upload-list__item {
+    height: 30px;
+    width: auto;
+    padding: 6px;
+    margin-bottom: 0px;
+  }
+
+  .api-body-upload >>> .el-upload-list--picture-card {
+  }
+
+  .api-body-upload {
+    min-height: 30px;
+    border: 1px solid #EBEEF5;
+    padding: 2px;
+    border-radius: 4px;
+  }
+
+  .upload-item {
+  }
+
+</style>
diff --git a/frontend/src/business/components/api/automation/scenario/variable/EditConstant.vue b/frontend/src/business/components/api/automation/scenario/variable/EditConstant.vue
new file mode 100644
index 0000000000..3dcc73dd4a
--- /dev/null
+++ b/frontend/src/business/components/api/automation/scenario/variable/EditConstant.vue
@@ -0,0 +1,84 @@
+<template>
+  <el-dialog append-to-body :close-on-click-modal="false" :title="$t('api_test.scenario.variables')"
+             :visible.sync="visible" class="environment-dialog" width="40%"
+             @close="close">
+    <el-form :model="form" label-position="right" label-width="80px" size="small" ref="form" :rules="rule">
+      <el-form-item :label="$t('api_test.variable_name')" prop="name">
+        <el-input v-model="form.name" :placeholder="$t('api_test.variable_name')"></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('commons.description')" prop="description">
+        <el-input class="ms-http-textarea"
+                  v-model="form.description"
+                  type="textarea"
+                  :autosize="{ minRows: 2, maxRows: 10}"
+                  :rows="2" size="small"/>
+      </el-form-item>
+
+      <el-form-item :label="$t('api_test.value')" prop="value">
+        <el-input v-model="form.value" :placeholder="$t('api_test.value')"></el-input>
+      </el-form-item>
+    </el-form>
+
+    <template v-slot:footer>
+      <ms-dialog-footer
+        @cancel="close"
+        @confirm="saveParameters"/>
+    </template>
+
+  </el-dialog>
+</template>
+
+<script>
+  import MsDialogFooter from "../../../../common/components/MsDialogFooter";
+
+  export default {
+    name: "MsEditConstant",
+    components: {
+      MsDialogFooter
+    },
+    data() {
+      return {
+        visible: false,
+        form: {type: "CONSTANT"},
+        editFlag: false,
+        rule: {
+          name: [
+            {required: true, message: this.$t('api_test.variable_name'), trigger: 'blur'},
+          ],
+        },
+      }
+    },
+    methods: {
+      open: function (v) {
+        this.visible = true;
+        if (v) {
+          this.form = v;
+          this.editFlag = true;
+        } else {
+          this.form = {};
+          this.editFlag = false;
+        }
+        this.form.type = "CONSTANT";
+      },
+      close() {
+        this.visible = false;
+        this.form = {};
+      },
+      saveParameters() {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.visible = false;
+            if (!this.editFlag) {
+              this.$emit('addParameters', this.form);
+            }
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/api/automation/scenario/variable/EditCounter.vue b/frontend/src/business/components/api/automation/scenario/variable/EditCounter.vue
new file mode 100644
index 0000000000..2ba19cf61b
--- /dev/null
+++ b/frontend/src/business/components/api/automation/scenario/variable/EditCounter.vue
@@ -0,0 +1,92 @@
+<template>
+  <el-dialog append-to-body :close-on-click-modal="false" title="计数器编辑"
+             :visible.sync="visible" class="environment-dialog" width="610px"
+             @close="close">
+    <el-form :model="form" label-position="right" label-width="80px" size="small" ref="form" :rules="rule">
+      <el-form-item :label="$t('api_test.variable_name')" prop="name">
+        <el-input v-model="form.name" :placeholder="$t('api_test.variable_name')"></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('commons.description')" prop="description">
+        <el-input class="ms-http-textarea"
+                  v-model="form.description"
+                  type="textarea"
+                  :autosize="{ minRows: 2, maxRows: 10}"
+                  :rows="2" size="small"/>
+      </el-form-item>
+
+      <el-form-item label="开始" prop="set">
+        <el-input-number size="small" v-model="form.startNumber" placeholder="0" :max="1000*10000000" :min="0"/>
+        <span style="margin: 0px 10px 10px ">结束</span>
+        <el-input-number size="small" v-model="form.endNumber" placeholder="10" :max="1000*10000000" :min="0"/>
+        <span style="margin: 0px 10px 10px ">增量</span>
+        <el-input-number size="small" v-model="form.increment" placeholder="1" :max="1000*10000000" :min="0"/>
+      </el-form-item>
+
+      <el-form-item label="开始" prop="value">
+        <el-input v-model="form.value" placeholder="000产生至少3位数字。user_000输出形式为user_nnn"></el-input>
+      </el-form-item>
+    </el-form>
+
+    <template v-slot:footer>
+      <ms-dialog-footer
+        @cancel="close"
+        @confirm="saveParameters"/>
+    </template>
+
+  </el-dialog>
+</template>
+
+<script>
+  import MsDialogFooter from "../../../../common/components/MsDialogFooter";
+
+  export default {
+    name: "MsEditCounter",
+    components: {
+      MsDialogFooter
+    },
+    data() {
+      return {
+        visible: false,
+        form: {type: "COUNTER"},
+        editFlag: false,
+        rule: {
+          name: [
+            {required: true, message: this.$t('api_test.variable_name'), trigger: 'blur'},
+          ],
+        },
+      }
+    },
+    methods: {
+      open: function (v) {
+        this.visible = true;
+        if (v) {
+          this.form = v;
+          this.editFlag = true;
+        } else {
+          this.form = {};
+          this.editFlag = false;
+        }
+        this.form.type = "COUNTER";
+      },
+      close() {
+        this.visible = false;
+        this.form = {};
+      },
+      saveParameters() {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.visible = false;
+            if (!this.editFlag) {
+              this.$emit('addParameters', this.form);
+            }
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/api/automation/scenario/variable/EditCsv.vue b/frontend/src/business/components/api/automation/scenario/variable/EditCsv.vue
new file mode 100644
index 0000000000..5a755b76d2
--- /dev/null
+++ b/frontend/src/business/components/api/automation/scenario/variable/EditCsv.vue
@@ -0,0 +1,115 @@
+<template>
+  <el-dialog append-to-body :close-on-click-modal="false" title="CSV编辑"
+             :visible.sync="visible" class="environment-dialog" width="600px"
+             @close="close">
+    <el-form :model="form" label-position="right" label-width="80px" size="small" ref="form" :rules="rule">
+      <el-form-item :label="$t('api_test.variable_name')" prop="name">
+        <el-input v-model="form.name" :placeholder="$t('api_test.variable_name')"></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('commons.description')" prop="description">
+        <el-input class="ms-http-textarea"
+                  v-model="form.description"
+                  type="textarea"
+                  :autosize="{ minRows: 2, maxRows: 10}"
+                  :rows="2" size="small"/>
+      </el-form-item>
+      <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 40px">
+        <el-tab-pane label="配置" name="config">
+          <el-row>
+            <el-col :span="4" style="margin-top: 5px">
+              <span>添加文件</span>
+            </el-col>
+            <el-col :span="20">
+              <ms-csv-file-upload :parameter="form.files"/>
+            </el-col>
+          </el-row>
+          <el-row style="margin-top: 10px">
+            <el-col :span="4" style="margin-top: 5px">
+              <span>Encoding</span>
+            </el-col>
+            <el-col :span="20">
+              <el-input v-model="form.encoding" size="small"/>
+            </el-col>
+          </el-row>
+          <el-row style="margin-top: 10px">
+            <el-col :span="4" style="margin-top: 5px">
+              <span>分隔符</span>
+            </el-col>
+            <el-col :span="20">
+              <el-input v-model="form.splits" size="small"/>
+            </el-col>
+          </el-row>
+
+        </el-tab-pane>
+        <el-tab-pane :label="$t('schema.preview')" name="preview">配置管理</el-tab-pane>
+      </el-tabs>
+    </el-form>
+    <template v-slot:footer>
+      <ms-dialog-footer
+        @cancel="close"
+        @confirm="saveParameters"/>
+    </template>
+
+  </el-dialog>
+</template>
+
+<script>
+  import MsDialogFooter from "../../../../common/components/MsDialogFooter";
+  import MsCsvFileUpload from "./CsvFileUpload";
+
+  export default {
+    name: "MsEditCsv",
+    components: {
+      MsDialogFooter,
+      MsCsvFileUpload
+    },
+    data() {
+      return {
+        activeName: "config",
+        visible: false,
+        form: {type: "CSV", files: {}},
+        editFlag: false,
+        rule: {
+          name: [
+            {required: true, message: this.$t('api_test.variable_name'), trigger: 'blur'},
+          ],
+        },
+      }
+    },
+    methods: {
+      open: function (v) {
+        this.visible = true;
+        if (v) {
+          this.form = v;
+          this.editFlag = true;
+        } else {
+          this.form = {files: {}};
+          this.editFlag = false;
+        }
+        this.form.type = "CSV";
+      },
+      close() {
+        this.visible = false;
+        this.form = {files: {}};
+      },
+      handleClick() {
+
+      },
+      saveParameters() {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.visible = false;
+            if (!this.editFlag) {
+              this.$emit('addParameters', this.form);
+            }
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/api/automation/scenario/variable/EditListValue.vue b/frontend/src/business/components/api/automation/scenario/variable/EditListValue.vue
new file mode 100644
index 0000000000..a1123e53b8
--- /dev/null
+++ b/frontend/src/business/components/api/automation/scenario/variable/EditListValue.vue
@@ -0,0 +1,84 @@
+<template>
+  <el-dialog append-to-body :close-on-click-modal="false" title="列表编辑"
+             :visible.sync="visible" class="environment-dialog" width="40%"
+             @close="close">
+    <el-form :model="form" label-position="right" label-width="80px" size="small" ref="form" :rules="rule">
+      <el-form-item :label="$t('api_test.variable_name')" prop="name">
+        <el-input v-model="form.name" :placeholder="$t('api_test.variable_name')"></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('commons.description')" prop="description">
+        <el-input class="ms-http-textarea"
+                  v-model="form.description"
+                  type="textarea"
+                  :autosize="{ minRows: 2, maxRows: 10}"
+                  :rows="2" size="small"/>
+      </el-form-item>
+
+      <el-form-item :label="$t('api_test.value')" prop="value">
+        <el-input v-model="form.value" placeholder="列表数据用,分隔"></el-input>
+      </el-form-item>
+    </el-form>
+
+    <template v-slot:footer>
+      <ms-dialog-footer
+        @cancel="close"
+        @confirm="saveParameters"/>
+    </template>
+
+  </el-dialog>
+</template>
+
+<script>
+  import MsDialogFooter from "../../../../common/components/MsDialogFooter";
+
+  export default {
+    name: "MsEditListValue",
+    components: {
+      MsDialogFooter
+    },
+    data() {
+      return {
+        visible: false,
+        form: {type: "LIST"},
+        editFlag: false,
+        rule: {
+          name: [
+            {required: true, message: this.$t('api_test.variable_name'), trigger: 'blur'},
+          ],
+        },
+      }
+    },
+    methods: {
+      open: function (v) {
+        this.visible = true;
+        if (v) {
+          this.form = v;
+          this.editFlag = true;
+        } else {
+          this.form = {};
+          this.editFlag = false;
+        }
+        this.form.type = "LIST";
+      },
+      close() {
+        this.visible = false;
+        this.form = {};
+      },
+      saveParameters() {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.visible = false;
+            if (!this.editFlag) {
+              this.$emit('addParameters', this.form);
+            }
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/api/automation/scenario/variable/EditRandom.vue b/frontend/src/business/components/api/automation/scenario/variable/EditRandom.vue
new file mode 100644
index 0000000000..d55c8e6c0a
--- /dev/null
+++ b/frontend/src/business/components/api/automation/scenario/variable/EditRandom.vue
@@ -0,0 +1,90 @@
+<template>
+  <el-dialog append-to-body :close-on-click-modal="false" title="随机数编辑"
+             :visible.sync="visible" class="environment-dialog" width="600px"
+             @close="close">
+    <el-form :model="form" label-position="right" label-width="80px" size="small" ref="form" :rules="rule">
+      <el-form-item :label="$t('api_test.variable_name')" prop="name">
+        <el-input v-model="form.name" :placeholder="$t('api_test.variable_name')"></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('commons.description')" prop="description">
+        <el-input class="ms-http-textarea"
+                  v-model="form.description"
+                  type="textarea"
+                  :autosize="{ minRows: 2, maxRows: 10}"
+                  :rows="2" size="small"/>
+      </el-form-item>
+
+      <el-form-item label="最小值" prop="set">
+        <el-input-number size="small" v-model="form.minNumber" placeholder="0" :max="1000*10000000" :min="0"/>
+        <span style="margin: 0px 10px 10px ">最大值</span>
+        <el-input-number size="small" v-model="form.maxNumber" placeholder="10" :max="1000*10000000" :min="0"/>
+      </el-form-item>
+
+      <el-form-item label="开始" prop="value">
+        <el-input v-model="form.value" placeholder="000产生至少3位数字。user_000输出形式为user_nnn"></el-input>
+      </el-form-item>
+    </el-form>
+
+    <template v-slot:footer>
+      <ms-dialog-footer
+        @cancel="close"
+        @confirm="saveParameters"/>
+    </template>
+
+  </el-dialog>
+</template>
+
+<script>
+  import MsDialogFooter from "../../../../common/components/MsDialogFooter";
+
+  export default {
+    name: "MsEditRandom",
+    components: {
+      MsDialogFooter
+    },
+    data() {
+      return {
+        visible: false,
+        form: {type: "RANDOM"},
+        editFlag: false,
+        rule: {
+          name: [
+            {required: true, message: this.$t('api_test.variable_name'), trigger: 'blur'},
+          ],
+        },
+      }
+    },
+    methods: {
+      open: function (v) {
+        this.visible = true;
+        if (v) {
+          this.form = v;
+          this.editFlag = true;
+        } else {
+          this.form = {};
+          this.editFlag = false;
+        }
+        this.form.type = "RANDOM";
+      },
+      close() {
+        this.visible = false;
+        this.form = {};
+      },
+      saveParameters() {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.visible = false;
+            if (!this.editFlag) {
+              this.$emit('addParameters', this.form);
+            }
+          }
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue b/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
new file mode 100644
index 0000000000..d5c587a91a
--- /dev/null
+++ b/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
@@ -0,0 +1,173 @@
+<template>
+  <el-dialog :title="$t('api_test.scenario.variables')"
+             :visible.sync="visible" class="environment-dialog" width="60%"
+             @close="close">
+    <div>
+      <el-table ref="scenarioTable" border :data="variables" class="adjust-table" @select-all="select" @select="select"
+                v-loading="loading">
+        <el-table-column type="selection" width="38"/>
+        <el-table-column prop="num" label="ID" sortable/>
+        <el-table-column prop="name" :label="$t('api_test.variable_name')" sortable show-overflow-tooltip/>
+        <el-table-column prop="type" :label="$t('test_track.case.type')">
+          <template v-slot:default="scope">
+            <span>{{types.get(scope.row.type)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="value" :label="$t('api_test.value')" show-overflow-tooltip/>
+
+        <el-table-column :label="$t('commons.operating')">
+          <template v-slot:default="{row}">
+            <el-button type="text" @click="edit(row)">{{ $t('commons.edit') }}</el-button>
+          </template>
+        </el-table-column>
+
+      </el-table>
+    </div>
+
+    <template v-slot:footer>
+      <div style="margin:20px">
+        <el-button style="margin-right:10px" @click="deleteVariable">{{$t('commons.delete')}}</el-button>
+
+        <el-dropdown split-button type="primary" @command="handleClick" placement="top-end">
+          {{$t('commons.add')}}
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="CONSTANT">常量</el-dropdown-item>
+            <el-dropdown-item command="LIST">列表</el-dropdown-item>
+            <el-dropdown-item command="CSV">CSV</el-dropdown-item>
+            <el-dropdown-item command="COUNTER">计数器</el-dropdown-item>
+            <el-dropdown-item command="RANDOM">随机数</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </template>
+
+    <ms-edit-constant ref="parameters" @addParameters="addParameters"/>
+    <ms-edit-counter ref="counter" @addParameters="addParameters"/>
+    <ms-edit-random ref="random" @addParameters="addParameters"/>
+    <ms-edit-list-value ref="listValue" @addParameters="addParameters"/>
+    <ms-edit-csv ref="csv" @addParameters="addParameters"/>
+
+  </el-dialog>
+</template>
+
+<script>
+  import MsEditConstant from "./EditConstant";
+  import MsDialogFooter from "../../../../common/components/MsDialogFooter";
+  import MsTableHeader from "@/business/components/common/components/MsTableHeader";
+  import MsTablePagination from "@/business/components/common/pagination/TablePagination";
+  import MsEditCounter from "./EditCounter";
+  import MsEditRandom from "./EditRandom";
+  import MsEditListValue from "./EditListValue";
+  import MsEditCsv from "./EditCsv";
+  import {getUUID} from "@/common/js/utils";
+
+  export default {
+    name: "MsVariableList",
+    components: {
+      MsEditConstant,
+      MsDialogFooter,
+      MsTableHeader,
+      MsTablePagination,
+      MsEditCounter,
+      MsEditRandom,
+      MsEditListValue,
+      MsEditCsv
+    },
+    data() {
+      return {
+        variables: [],
+        types: new Map([
+          ['CONSTANT', '常量'],
+          ['LIST', '列表'],
+          ['CSV', 'CSV'],
+          ['COUNTER', '计数器'],
+          ['RANDOM', '随机数']
+        ]),
+        visible: false,
+        selection: [],
+        loading: false,
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+      }
+    },
+    methods: {
+      handleClick(command) {
+        switch (command) {
+          case "CONSTANT":
+            this.$refs.parameters.open();
+            break;
+          case "LIST":
+            this.$refs.listValue.open();
+            break;
+          case "CSV":
+            this.$refs.csv.open();
+            break;
+          case "COUNTER":
+            this.$refs.counter.open();
+            break;
+          case "RANDOM":
+            this.$refs.random.open();
+            break;
+        }
+      },
+      edit(row) {
+        switch (row.type) {
+          case "CONSTANT":
+            this.$refs.parameters.open(row);
+            break;
+          case "LIST":
+            this.$refs.listValue.open(row);
+            break;
+          case "CSV":
+            this.$refs.csv.open(row);
+            break;
+          case "COUNTER":
+            this.$refs.counter.open(row);
+            break;
+          case "RANDOM":
+            this.$refs.random.open(row);
+            break;
+        }
+      },
+      addParameters(v) {
+        v.id = getUUID();
+        this.variables.push(v);
+        let index = 1;
+        this.variables.forEach(item => {
+          item.num = index;
+          index++;
+        })
+      },
+      select(selection) {
+        this.selection = selection.map(s => s.id);
+      },
+      isSelect(row) {
+        return this.selection.includes(row.id)
+      },
+      open: function (variables) {
+        this.variables = variables;
+        this.visible = true;
+      },
+      close() {
+        this.visible = false;
+        this.$emit('setVariables', this.variables);
+      },
+      deleteVariable() {
+        let ids = Array.from(this.selection);
+        if (ids.length == 0) {
+          this.$warning("请选择一条数据删除");
+          return;
+        }
+        ids.forEach(row => {
+          const index = this.variables.findIndex(d => d.id === row);
+          this.variables.splice(index, 1);
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 4629e2c072..083abdfe28 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -570,7 +570,7 @@ export default {
       create_tag: "Create tag",
       scenario_step: "Ccenario step",
       step_total: "Step total",
-      scenario_total: "Scenario total",
+      scenario_total: "Scenario variable",
       api_list_import: "Api list import",
       external_import: "External import",
       wait_controller: "Wait controller",
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index b91cd2e0c4..d586380f8f 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -569,7 +569,7 @@ export default {
       create_tag: "创建Tag",
       scenario_step: "场景步骤",
       step_total: "步骤总数",
-      scenario_total: "场景公共参数",
+      scenario_total: "场景变量",
       api_list_import: "接口列表导入",
       external_import: "外部导入",
       wait_controller: "等待控制器",
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 3007e1de51..5c077d4ca1 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -569,7 +569,7 @@ export default {
       create_tag: "創建Tag",
       scenario_step: "場景步驟",
       step_total: "步驟總數",
-      scenario_total: "場景公共參數",
+      scenario_total: "場景變量",
       api_list_import: "接口列表導入",
       external_import: "外部導入",
       wait_controller: "等待控制器",