diff --git a/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue b/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
index 9c1c0d82ab..a93cd86624 100644
--- a/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
+++ b/framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
@@ -7,7 +7,8 @@
           size="mini"
           v-model="selectVariable"
           @change="filter"
-          @keyup.enter="filter">
+          @keyup.enter="filter"
+        >
         </el-input>
       </div>
       <div style="padding-bottom: 10px; float: right">
@@ -15,20 +16,33 @@
           v-permission="['PROJECT_ENVIRONMENT:READ+IMPORT']"
           icon="el-icon-box"
           :content="$t('commons.import')"
-          @click="importJSON"/>
+          @click="importJSON"
+        />
         <el-dropdown
           @command="handleExportCommand"
           class="scenario-ext-btn"
           trigger="hover"
-          v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']">
-          <ms-table-button style="margin-left: 10px" icon="el-icon-box" :content="$t('commons.export')"/>
+          v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']"
+        >
+          <ms-table-button
+            style="margin-left: 10px"
+            icon="el-icon-box"
+            :content="$t('commons.export')"
+          />
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="exportApi">{{ $t('envrionment.export_variable_tip') }}</el-dropdown-item>
+            <el-dropdown-item command="exportApi">{{
+              $t("envrionment.export_variable_tip")
+            }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
 
-        <el-link style="margin-left: 10px" @click="batchAdd" type="primary" :disabled="isReadOnly">
-          {{ $t('commons.batch_add') }}
+        <el-link
+          style="margin-left: 10px"
+          @click="batchAdd"
+          type="primary"
+          :disabled="isReadOnly"
+        >
+          {{ $t("commons.batch_add") }}
         </el-link>
       </div>
     </div>
@@ -40,7 +54,8 @@
         width: 99%;
         margin-top: 10px;
         clear: both;
-      ">
+      "
+    >
       <ms-table
         v-loading="loading"
         row-key="id"
@@ -55,26 +70,39 @@
         :condition="condition"
         @filter="filter"
         @refresh="onChange"
-        ref="variableTable">
-        <ms-table-column prop="num" sortable label="ID" min-width="60"/>
+        ref="variableTable"
+      >
+        <ms-table-column prop="num" sortable label="ID" min-width="60" />
         <ms-table-column
           prop="scope"
           sortable
           :label="$t('commons.scope')"
           :filters="scopeTypeFilters"
-          min-width="120">
+          min-width="120"
+        >
           <template slot-scope="scope">
             <el-select
               v-model="scope.row.scope"
               :placeholder="$t('commons.please_select')"
               size="mini"
-              @change="changeType(scope.row)">
-              <el-option v-for="item in scopeTypeFilters" :key="item.value" :label="item.text" :value="item.value"/>
+              @change="changeType($event, scope.row)"
+            >
+              <el-option
+                v-for="item in scopeTypeFilters"
+                :key="item.value"
+                :label="item.text"
+                :value="item.value"
+              />
             </el-select>
           </template>
         </ms-table-column>
 
-        <ms-table-column prop="name" :label="$t('api_test.variable_name')" min-width="200" sortable>
+        <ms-table-column
+          prop="name"
+          :label="$t('api_test.variable_name')"
+          min-width="200"
+          sortable
+        >
           <template slot-scope="scope">
             <el-input
               v-model="scope.row.name"
@@ -82,31 +110,55 @@
               maxlength="200"
               :placeholder="$t('api_test.variable_name')"
               show-word-limit
-              @change="change"/>
+              @change="change"
+            />
           </template>
         </ms-table-column>
-        <ms-table-column prop="type" :label="$t('test_track.case.type')" min-width="140" sortable>
+        <ms-table-column
+          prop="type"
+          :label="$t('test_track.case.type')"
+          min-width="140"
+          sortable
+        >
           <template slot-scope="scope">
             <el-select
               v-model="scope.row.type"
               v-if="!scope.row.scope || scope.row.scope == 'api'"
               :placeholder="$t('commons.please_select')"
               size="mini"
-              @change="changeType(scope.row)">
-              <el-option v-for="item in typeSelectOptions" :key="item.value" :label="item.label" :value="item.value"/>
+              @change="changeType($event, scope.row)"
+            >
+              <el-option
+                v-for="item in typeSelectOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
 
-            <el-select v-else v-model="scope.row.type" :placeholder="$t('commons.please_select')" size="mini">
+            <el-select
+              v-else
+              v-model="scope.row.type"
+              :placeholder="$t('commons.please_select')"
+              size="mini"
+            >
               <el-option
                 v-for="item in uiTypeSelectOptions"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value"/>
+                :value="item.value"
+              />
             </el-select>
           </template>
         </ms-table-column>
 
-        <el-table-column prop="value" :label="$t('api_test.value')" min-width="200px" sortable show-overflow-tooltip>
+        <ms-table-column
+          prop="value"
+          :label="$t('api_test.value')"
+          min-width="200px"
+          sortable
+          show-overflow-tooltip
+        >
           <template slot-scope="scope">
             <el-input
               v-model="scope.row.value"
@@ -114,20 +166,39 @@
               v-if="scope.row.type !== 'CSV'"
               :placeholder="valueText(scope.row)"
               @change="changeVariableVal(scope.row)"
-              :disabled="scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'"/>
-            <csv-file-upload :parameter="scope.row" v-if="scope.row.type === 'CSV'"/>
+              :disabled="
+                scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'
+              "
+            />
+            <csv-file-upload
+              :parameter="scope.row"
+              v-if="scope.row.type === 'CSV'"
+            />
           </template>
-        </el-table-column>
-        <ms-table-column prop="description" :label="$t('commons.remark')" min-width="160" sortable>
+        </ms-table-column>
+        <ms-table-column
+          prop="description"
+          :label="$t('commons.remark')"
+          min-width="160"
+          sortable
+        >
           <template slot-scope="scope">
-            <el-input v-model="scope.row.description" size="mini"/>
+            <el-input
+              v-model="scope.row.description"
+              @change="descriptionChange(scope.row)"
+              size="mini"
+            />
           </template>
         </ms-table-column>
 
         <ms-table-column :label="$t('commons.operating')" width="150">
           <template v-slot:default="scope">
             <span>
-              <el-switch v-model="scope.row.enable" size="mini"/>
+              <el-switch
+                v-model="scope.row.enable"
+                size="mini"
+                @change="enableChange(scope.row)"
+              />
               <el-button
                 icon="el-icon-delete"
                 type="danger"
@@ -135,15 +206,20 @@
                 size="mini"
                 style="margin-left: 10px"
                 @click="remove(scope.row)"
-                v-if="isDisable(scope.row)"/>
+                v-if="isDisable(scope.row)"
+              />
               <el-button
-                v-if="(!scope.row.scope || scope.row.scope == 'api') && scope.row.type !== 'LIST'"
+                v-if="
+                  (!scope.row.scope || scope.row.scope == 'api') &&
+                  scope.row.type !== 'LIST'
+                "
                 icon="el-icon-setting"
                 circle
                 size="mini"
                 style="margin-left: 10px"
                 @click="openSetting(scope.row)"
-                @blur="change"/>
+                @blur="change"
+              />
             </span>
           </template>
         </ms-table-column>
@@ -152,30 +228,37 @@
         :change="queryPage"
         :current-page.sync="currentPage"
         :page-size.sync="pageSize"
-        :total="total"/>
+        :total="total"
+      />
     </div>
-    <batch-add-parameter @batchSave="batchSave" ref="batchAdd"/>
-    <api-variable-setting ref="apiVariableSetting" @changeData="change"></api-variable-setting>
-    <variable-import ref="variableImport" @mergeData="mergeData"></variable-import>
+    <batch-add-parameter @batchSave="batchSave" ref="batchAdd" />
+    <api-variable-setting
+      ref="apiVariableSetting"
+      @changeData="change"
+    ></api-variable-setting>
+    <variable-import
+      ref="variableImport"
+      @mergeData="mergeData"
+    ></variable-import>
   </div>
 </template>
 
 <script>
-import {KeyValue} from '../../../model/EnvTestModel';
-import MsApiVariableInput from './ApiVariableInput';
-import BatchAddParameter from './BatchAddParameter';
-import MsTableButton from '../../MsTableButton';
-import MsTable from '../../table/MsTable';
-import MsTableColumn from '../../table/MsTableColumn';
-import ApiVariableSetting from './ApiVariableSetting';
-import CsvFileUpload from './variable/CsvFileUpload';
-import {downloadFile, getUUID, operationConfirm} from '../../../utils';
-import VariableImport from './variable/VariableImport';
-import {forEach} from 'lodash-es';
-import MsTablePagination from '../../pagination/TablePagination';
+import { KeyValue } from "../../../model/EnvTestModel";
+import MsApiVariableInput from "./ApiVariableInput";
+import BatchAddParameter from "./BatchAddParameter";
+import MsTableButton from "../../MsTableButton";
+import MsTable from "../../table/MsTable";
+import MsTableColumn from "../../table/MsTableColumn";
+import ApiVariableSetting from "./ApiVariableSetting";
+import CsvFileUpload from "./variable/CsvFileUpload";
+import { downloadFile, getUUID, operationConfirm } from "../../../utils";
+import VariableImport from "./variable/VariableImport";
+import { forEach } from "lodash-es";
+import MsTablePagination from "../../pagination/TablePagination";
 
 export default {
-  name: 'MsApiScenarioVariables',
+  name: "MsApiScenarioVariables",
   components: {
     BatchAddParameter,
     MsApiVariableInput,
@@ -209,34 +292,34 @@ export default {
       total: 0,
       loading: false,
       refreshOver: true,
-      screenHeight: '460px',
+      screenHeight: "460px",
       batchButtons: [
         {
-          name: this.$t('api_test.definition.request.batch_delete'),
+          name: this.$t("api_test.definition.request.batch_delete"),
           handleClick: this.handleDeleteBatch,
         },
       ],
       typeSelectOptions: [
-        {value: 'CONSTANT', label: this.$t('api_test.automation.constant')},
-        {value: 'LIST', label: this.$t('test_track.case.list')},
-        {value: 'CSV', label: 'CSV'},
-        {value: 'COUNTER', label: this.$t('api_test.automation.counter')},
-        {value: 'RANDOM', label: this.$t('api_test.automation.random')},
+        { value: "CONSTANT", label: this.$t("api_test.automation.constant") },
+        { value: "LIST", label: this.$t("test_track.case.list") },
+        { value: "CSV", label: "CSV" },
+        { value: "COUNTER", label: this.$t("api_test.automation.counter") },
+        { value: "RANDOM", label: this.$t("api_test.automation.random") },
       ],
       uiTypeSelectOptions: [
-        {value: 'STRING', label: this.$t('api_test.automation.string')},
-        {value: 'ARRAY', label: this.$t('api_test.automation.array')},
-        {value: 'JSON', label: this.$t('api_test.automation.json')},
-        {value: 'NUMBER', label: this.$t('api_test.automation.number')},
+        { value: "STRING", label: this.$t("api_test.automation.string") },
+        { value: "ARRAY", label: this.$t("api_test.automation.array") },
+        { value: "JSON", label: this.$t("api_test.automation.json") },
+        { value: "NUMBER", label: this.$t("api_test.automation.number") },
       ],
       pageData: [],
-      selectVariable: '',
+      selectVariable: "",
       editData: {},
       allData: [],
       lastPage: 1,
       scopeTypeFilters: [
-        {text: this.$t('commons.api'), value: 'api'},
-        {text: this.$t('commons.ui_test'), value: 'ui'},
+        { text: this.$t("commons.api"), value: "api" },
+        { text: this.$t("commons.ui_test"), value: "ui" },
       ],
       condition: {
         selectAll: false,
@@ -281,85 +364,133 @@ export default {
         delete item.hashTree;
       });
     },
+    // 变量名 change
     change: function () {
       let isNeedCreate = true;
       let removeIndex = -1;
-      let repeatKey = '';
+      let repeatKey = "";
+      const itemNames = new Set();
+
       this.items.forEach((item, index) => {
-        this.items.forEach((row, rowIndex) => {
-          if (item.name === row.name && index !== rowIndex) {
-            repeatKey = item.name;
-          }
-        });
+        // 检查重复的name
+        if (itemNames.has(item.name)) {
+          repeatKey = item.name;
+        } else {
+          itemNames.add(item.name);
+        }
+
+        // 检查空行
         if (!item.name && !item.value) {
-          // 多余的空行
-          if (index !== this.items.length - 1) {
-            removeIndex = index;
-          }
-          // 没有空行，需要创建空行
+          removeIndex = index !== this.items.length - 1 ? index : removeIndex;
           isNeedCreate = false;
         }
       });
-      if (repeatKey !== '') {
+
+      // 处理重复的name
+      if (repeatKey !== "") {
         this.$warning(
-          this.$t('api_test.environment.common_config') +
-          '【' +
-          repeatKey +
-          '】' +
-          this.$t('load_test.param_is_duplicate')
+          `${this.$t(
+            "api_test.environment.common_config"
+          )}【${repeatKey}】${this.$t("load_test.param_is_duplicate")}`
         );
       }
+
+      // 移除多余的空行
+      if (removeIndex !== -1) {
+        this.items.splice(removeIndex, 1);
+      }
+
+      // 需要创建新的空行
       if (isNeedCreate) {
-        this.items.push(new KeyValue({enable: true, id: getUUID(), type: 'CONSTANT', scope: 'api'}));
+        this.items.push(
+          new KeyValue({
+            enable: true,
+            id: getUUID(),
+            type: "CONSTANT",
+            scope: "api",
+          })
+        );
         this.currentPage = Math.ceil(this.allData.length / this.pageSize);
       }
-      // 需过滤数据
+
+      // 重置并过滤数据
       this.allData = [];
       this._filter();
       this.queryPage();
-      this.$emit('change', this.items);
-    },
-    changeType(data) {
-      data.value = '';
-      if (!data.delimiter || (!data.files && data.files.length === 0) || !data.quotedData) {
-        data.delimiter = ',';
-        data.files = [];
-        data.quotedData = 'false';
-      }
 
-      if (!data.scope || data.scope == 'ui') {
-        data.type = 'STRING';
+      // 触发变更事件
+      this.$emit("change", this.items);
+    },
+
+    changeType(value, data) {
+      data.value = "";
+      if (
+        !data.delimiter ||
+        (!data.files && data.files.length === 0) ||
+        !data.quotedData
+      ) {
+        data.delimiter = ",";
+        data.files = [];
+        data.quotedData = "false";
       }
+      if (!data.scope || data.scope == "ui") {
+        data.type = "STRING";
+      }
+      this.items.forEach((item) => {
+        if (item.name === data.name) {
+          item.scope = value;
+          item.type = data.type;
+          item.value = data.value;
+        }
+      });
     },
     changeVariableVal(data) {
-      this.items.forEach(item => {
+      this.items.forEach((item) => {
         if (item.name === data.name) {
           item.value = data.value;
         }
-      })
+      });
+    },
+    // 备注修改
+    descriptionChange(data) {
+      this.items.forEach((item) => {
+        if (item.name === data.name) {
+          item.description = data.description;
+        }
+      });
+    },
+    // 启用禁用
+    enableChange(data) {
+      this.items.forEach((item) => {
+        if (item.name === data.name) {
+          item.enable = data.enable;
+        }
+      });
     },
     valueText(data) {
       switch (data.type) {
-        case 'LIST':
-          return this.$t('api_test.environment.list_info');
-        case 'CONSTANT':
-          return this.$t('api_test.value');
-        case 'COUNTER':
-        case 'RANDOM':
-          return this.$t('api_test.environment.advanced_setting');
+        case "LIST":
+          return this.$t("api_test.environment.list_info");
+        case "CONSTANT":
+          return this.$t("api_test.value");
+        case "COUNTER":
+        case "RANDOM":
+          return this.$t("api_test.environment.advanced_setting");
         default:
-          return this.$t('api_test.value');
+          return this.$t("api_test.value");
       }
     },
     querySearch(queryString, cb) {
       let restaurants = [
-        {value: 'UTF-8'},
-        {value: 'UTF-16'},
-        {value: 'GB2312'},
-        {value: 'ISO-8859-15'},
-        {value: 'US-ASCll'},
+        { value: "UTF-8" },
+        { value: "UTF-16" },
+        { value: "GB2312" },
+        { value: "ISO-8859-15" },
+        { value: "US-ASCll" },
       ];
-      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
+      let results = queryString
+        ? restaurants.filter(this.createFilter(queryString))
+        : restaurants;
       // 调用 callback 返回建议列表的数据
       cb(results);
     },
@@ -367,59 +498,61 @@ export default {
       let index = 1;
       this.allData.forEach((item) => {
         item.num = index;
-        if (!item.type || item.type === 'text') {
-          item.type = 'CONSTANT';
+        if (!item.type || item.type === "text") {
+          item.type = "CONSTANT";
         }
         if (!item.id) {
           item.id = getUUID();
         }
         if (item.remark) {
-          this.$set(item, 'description', item.remark);
+          this.$set(item, "description", item.remark);
           item.remark = undefined;
         }
         if (!item.scope) {
-          this.$set(item, 'scope', 'api');
+          this.$set(item, "scope", "api");
         }
         index++;
       });
     },
     handleDeleteBatch() {
-      operationConfirm(this, this.$t('api_test.environment.variables_delete_info') + ' ？', () => {
-        if (this.condition.selectAll) {
-          let deleteIndex = 0;
-          let deleteRows = this.items.filter((item) => {
-            return this.condition.unSelectIds.indexOf(item.id) < 0;
-          });
-          deleteRows.forEach(deleteRow => {
-            const index = this.items.findIndex((d) => d.id === deleteRow.id);
-            this.items.splice(index, 1);
-          })
-          this.allData = this.items;
-          this.currentPage = 1;
-          this.queryPage();
-        } else {
-          let ids = this.$refs.variableTable.selectRows;
-          ids.forEach((row) => {
-            if (row.id) {
-              const index = this.pageData.findIndex((d) => d.id === row.id);
-              const allIndex = this.allData.findIndex((d) => d.id === row.id);
-              if (index !== this.pageData.length - 1) {
-                this.pageData.splice(index, 1);
+      operationConfirm(
+        this,
+        this.$t("api_test.environment.variables_delete_info") + " ？",
+        () => {
+          if (this.condition.selectAll) {
+            let deleteRows = this.items.filter((item) => {
+              return this.condition.unSelectIds.indexOf(item.id) < 0;
+            });
+            deleteRows.forEach((deleteRow) => {
+              const index = this.items.findIndex((d) => d.id === deleteRow.id);
+              this.items.splice(index, 1);
+            });
+            this.allData = this.items;
+            this.currentPage = 1;
+            this.queryPage();
+          } else {
+            let ids = this.$refs.variableTable.selectRows;
+            ids.forEach((row) => {
+              if (row.id) {
+                const index = this.pageData.findIndex((d) => d.id === row.id);
+                const allIndex = this.allData.findIndex((d) => d.id === row.id);
+                if (index !== this.pageData.length - 1) {
+                  this.pageData.splice(index, 1);
+                }
+                if (allIndex !== this.allData.length - 1) {
+                  this.allData.splice(allIndex, 1);
+                }
               }
-              if (allIndex !== this.allData.length - 1) {
-                this.allData.splice(allIndex, 1);
-              }
-            }
+            });
+          }
+          this.sortParameters();
+          this.$refs.variableTable.cancelCurrentRow();
+          this.$refs.variableTable.clear();
+          this.pageData.forEach((item) => {
+            item.showMore = false;
           });
         }
-        this.sortParameters();
-        this.$refs.variableTable.cancelCurrentRow();
-        this.$refs.variableTable.clear();
-        this.pageData.forEach((item) => {
-          item.showMore = false;
-        });
-
-      });
+      );
     },
     filter() {
       // 过滤
@@ -432,12 +565,16 @@ export default {
     _filter() {
       // filter by scope
       let scopeFilterData = [];
-      if (!this.condition.filters || !this.condition.filters.scope || this.condition.filters.scope.length === 0) {
+      if (
+        !this.condition.filters ||
+        !this.condition.filters.scope ||
+        this.condition.filters.scope.length === 0
+      ) {
         // 重置或者清空
         forEach(this.items, (item) => {
           delete item.hidden;
           if (!item.scope) {
-            this.$set(item, 'scope', 'api');
+            this.$set(item, "scope", "api");
           }
         });
         scopeFilterData = this.items;
@@ -460,8 +597,10 @@ export default {
       }
       let keyword = this.selectVariable;
       scopeFilterData.forEach((filterData) => {
-        if (keyword && keyword !== '' && filterData.name) {
-          if (filterData.name.toLowerCase().indexOf(keyword.toLowerCase()) === -1) {
+        if (keyword && keyword !== "" && filterData.name) {
+          if (
+            filterData.name.toLowerCase().indexOf(keyword.toLowerCase()) === -1
+          ) {
             filterData.hidden = true;
           } else {
             filterData.hidden = undefined;
@@ -492,11 +631,11 @@ export default {
           let required = false;
           keyValues.push(
             new KeyValue({
-              scope: 'api',
+              scope: "api",
               name: line[0],
               required: required,
               value: values,
-              type: 'CONSTANT',
+              type: "CONSTANT",
               valid: false,
               file: false,
               encode: true,
@@ -541,34 +680,37 @@ export default {
     exportJSON() {
       let apiVariable = [];
       this.$refs.variableTable.selectRows.forEach((r) => {
-        if (!r.scope || r.scope != 'ui') {
+        if (!r.scope || r.scope != "ui") {
           apiVariable.push(r);
         }
       });
 
       if (apiVariable.length < 1) {
-        this.$warning(this.$t('api_test.environment.select_api_variable'));
+        this.$warning(this.$t("api_test.environment.select_api_variable"));
         return;
       }
       let variablesJson = [];
-      let messages = '';
+      let messages = "";
       let rows = this.$refs.variableTable.selectRows;
       if (this.condition.selectAll) {
         rows = this.allData;
       }
       rows.forEach((row) => {
-        if (row.type === 'CSV') {
-          messages = this.$t('variables.csv_download');
+        if (row.type === "CSV") {
+          messages = this.$t("variables.csv_download");
         }
-        if (row.name && (!row.scope || row.scope == 'api')) {
+        if (row.name && (!row.scope || row.scope == "api")) {
           variablesJson.push(row);
         }
       });
-      if (messages !== '') {
+      if (messages !== "") {
         this.$warning(messages);
         return;
       }
-      downloadFile('MS_' + variablesJson.length + '_Environments_variables.json', JSON.stringify(variablesJson));
+      downloadFile(
+        "MS_" + variablesJson.length + "_Environments_variables.json",
+        JSON.stringify(variablesJson)
+      );
     },
     importJSON() {
       this.$refs.variableImport.open();
@@ -578,9 +720,11 @@ export default {
         importData.id = getUUID();
         importData.enable = true;
         importData.showMore = false;
-        let sameNameIndex = this.items.findIndex((d) => d.name === importData.name);
+        let sameNameIndex = this.items.findIndex(
+          (d) => d.name === importData.name
+        );
         if (sameNameIndex !== -1) {
-          if (modeId === 'fullCoverage') {
+          if (modeId === "fullCoverage") {
             this.items.splice(sameNameIndex, 1, importData);
           }
         } else {
@@ -599,13 +743,13 @@ export default {
   },
   created() {
     if (this.items.length === 0) {
-      this.items.push(new KeyValue({enable: true, scope: 'api'}));
+      this.items.push(new KeyValue({ enable: true, scope: "api" }));
     } else {
       //历史数据默认是 api 应用场景
       forEach(this.items, (item) => {
         delete item.hidden;
         if (!item.scope) {
-          this.$set(item, 'scope', 'api');
+          this.$set(item, "scope", "api");
         }
       });
       this.allData = this.items;
@@ -633,5 +777,4 @@ export default {
 .kv-delete {
   width: 60px;
 }
-
 </style>