diff --git a/frontend/src/business/components/api/definition/ApiDefinition.vue b/frontend/src/business/components/api/definition/ApiDefinition.vue
index b4e80b45a5..1c07087dfd 100644
--- a/frontend/src/business/components/api/definition/ApiDefinition.vue
+++ b/frontend/src/business/components/api/definition/ApiDefinition.vue
@@ -1,45 +1,52 @@
 <template>
   <ms-container>
     <ms-aside-container>
-      <ms-node-tree @selectModule="selectModule" @getApiModuleTree="initTree" @changeProtocol="changeProtocol"
-                    @refresh="refresh" @saveAsEdit="editApi" @debug="debug" @exportAPI="exportAPI"/>
+      <ms-node-tree @selectModule="selectModule"
+                    @getApiModuleTree="initTree"
+                    @changeProtocol="changeProtocol"
+                    @refresh="refresh"
+                    @saveAsEdit="editApi"
+                    @debug="debug"
+                    @exportAPI="exportAPI"/>
     </ms-aside-container>
 
     <ms-main-container>
-      <el-dropdown size="small" split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
+      <el-dropdown size="small" split-button type="primary" class="ms-api-buttion"
+                   @click="handleCommand('ADD')"
                    @command="handleCommand">
         {{$t('commons.add')}}
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="debug">{{$t('api_test.definition.request.fast_debug')}}</el-dropdown-item>
-          <el-dropdown-item command="add">{{$t('api_test.definition.request.title')}}</el-dropdown-item>
-          <el-dropdown-item command="closeAll">{{$t('api_test.definition.request.close_all_label')}}</el-dropdown-item>
+          <el-dropdown-item command="ADD">{{$t('api_test.definition.request.title')}}</el-dropdown-item>
+          <el-dropdown-item command="CLOSE_ALL">{{$t('api_test.definition.request.close_all_label')}}</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
 
-        <!-- 主框架列表 -->
-      <el-tabs v-model="apiDefaultTab" @edit="handleTabsEdit">
-        <el-tab-pane
-          :key="item.name"
-          v-for="(item) in apiTabs"
-          :label="item.title"
-          :closable="item.closable"
-          :name="item.name">
+      <!-- 主框架列表 -->
+      <el-tabs v-model="apiDefaultTab" @edit="handleTabRemove">
+        <el-tab-pane v-for="(item) in apiTabs"
+                     :key="item.name"
+                     :label="item.title"
+                     :closable="item.closable"
+                     :name="item.name">
           <!-- 列表集合 -->
           <ms-api-list
             v-if="item.type === 'list'"
             :current-protocol="currentProtocol"
             :current-module="currentModule"
-            @editApi="editApi"
-            @handleCase="handleCase"
             :visible="visible"
             :currentRow="currentRow"
+            @editApi="editApi"
+            @handleCase="handleCase"
+            @handleEditBatch="handleEditBatch"
             ref="apiList"/>
 
-          <!-- 添加测试窗口-->
-          <div v-else-if="item.type=== 'add'" class="ms-api-div">
-            <ms-api-config @runTest="runTest" @saveApi="saveApi" :current-api="currentApi"
+          <!-- 添加/编辑测试窗口-->
+          <div v-else-if="item.type=== 'ADD'" class="ms-api-div">
+            <ms-api-config @runTest="runTest" @saveApi="saveApi" ref="apiConfig"
+                           :current-api="item.api"
                            :currentProtocol="currentProtocol"
-                           :moduleOptions="moduleOptions" ref="apiConfig"/>
+                           :moduleOptions="moduleOptions"/>
           </div>
 
           <!-- 快捷调试 -->
@@ -51,7 +58,7 @@
           </div>
 
           <!-- 测试-->
-          <div v-else-if="item.type=== 'test'" class="ms-api-div">
+          <div v-else-if="item.type=== 'TEST'" class="ms-api-div">
             <ms-run-test-http-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" v-if="currentProtocol==='HTTP'"/>
             <ms-run-test-tcp-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" v-if="currentProtocol==='TCP'"/>
             <ms-run-test-sql-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" v-if="currentProtocol==='SQL'"/>
@@ -59,14 +66,9 @@
           </div>
         </el-tab-pane>
       </el-tabs>
-
     </ms-main-container>
-
-
   </ms-container>
-
 </template>
-
 <script>
   import MsNodeTree from './components/ApiModule';
   import MsApiList from './components/ApiList';
@@ -114,7 +116,7 @@
     },
     data() {
       return {
-        isHide: true,
+        showCasePage: true,
         apiDefaultTab: 'default',
         currentProtocol: null,
         currentModule: null,
@@ -131,73 +133,89 @@
     },
     watch: {
       currentProtocol() {
-        this.handleCommand("closeAll");
+        this.handleCommand("CLOSE_ALL");
       }
     },
     methods: {
       handleCommand(e) {
-        if (e === "add") {
-          this.currentApi = {status: "Underway", method: "GET", userId: getCurrentUser().id, url: "", protocol: this.currentProtocol};
-          this.handleTabsEdit(this.$t('api_test.definition.request.title'), e);
-        }
-        else if (e === "test") {
-          this.handleTabsEdit(this.$t("commons.api"), e);
-        }
-        else if (e === "closeAll") {
-          let tabs = this.apiTabs[0];
-          this.apiTabs = [];
-          this.apiDefaultTab = tabs.name;
-          this.apiTabs.push(tabs);
-          this.refresh();
-        }
-        else {
-          this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug");
+        switch (e) {
+          case "ADD":
+            this.handleTabAdd(e);
+            break;
+          case "TEST":
+            this.handleTabsEdit(this.$t("commons.api"), e);
+            break;
+          case "CLOSE_ALL":
+            this.handleTabClose();
+            break;
+          default:
+            this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug");
+            break;
         }
       },
-      handleTabsEdit(targetName, action) {
-        if (action === 'remove') {
-          let tabs = this.apiTabs;
-          let activeName = this.apiDefaultTab;
-          if (activeName === targetName) {
-            tabs.forEach((tab, index) => {
-              if (tab.name === targetName) {
-                let nextTab = tabs[index + 1] || tabs[index - 1];
-                if (nextTab) {
-                  activeName = nextTab.name;
-                }
+      handleTabAdd(e) {
+        let api = {status: "Underway", method: "GET", userId: getCurrentUser().id, url: "", protocol: this.currentProtocol};
+        this.handleTabsEdit(this.$t('api_test.definition.request.title'), e, api);
+      },
+      handleTabClose() {
+        let tabs = this.apiTabs[0];
+        this.apiTabs = [];
+        this.apiDefaultTab = tabs.name;
+        this.apiTabs.push(tabs);
+        this.refresh();
+      },
+      handleTabRemove(targetName) {
+        let tabs = this.apiTabs;
+        let activeName = this.apiDefaultTab;
+        if (activeName === targetName) {
+          tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              let nextTab = tabs[index + 1] || tabs[index - 1];
+              if (nextTab) {
+                activeName = nextTab.name;
               }
-            });
-          }
-          this.apiDefaultTab = activeName;
-          this.apiTabs = tabs.filter(tab => tab.name !== targetName);
-          this.refresh();
-        } else {
-          if (targetName === undefined || targetName === null) {
-            targetName = this.$t('api_test.definition.request.title');
-          }
-          let newTabName = getUUID().substring(0, 8);
-          this.apiTabs.push({
-            title: targetName,
-            name: newTabName,
-            closable: true,
-            type: action
+            }
           });
-          this.apiDefaultTab = newTabName;
         }
+        this.apiDefaultTab = activeName;
+        this.apiTabs = tabs.filter(tab => tab.name !== targetName);
+        this.refresh();
+      },
+      handleTabsEdit(targetName, action, api) {
+        if (targetName === undefined || targetName === null) {
+          targetName = this.$t('api_test.definition.request.title');
+        }
+        let newTabName = getUUID();
+        this.apiTabs.push({
+          title: targetName,
+          name: newTabName,
+          closable: true,
+          type: action,
+          api: api,
+        });
+        this.apiDefaultTab = newTabName;
       },
       debug() {
         this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug");
       },
       editApi(row) {
-        this.currentApi = row;
-        this.handleTabsEdit(this.$t('api_test.definition.request.edit_api') + "-" + row.name, "add");
+        let name = this.$t('api_test.definition.request.edit_api');
+        if (row.name) {
+          name = this.$t('api_test.definition.request.edit_api') + "-" + row.name;
+        }
+        this.handleTabsEdit(name, "ADD", row);
       },
-      handleCase(testCase) {
-        this.currentApi = testCase;
-        this.isHide = false;
+      handleEditBatch(rows) {
+        rows.forEach(row => {
+          this.handleTabsEdit(this.$t('api_test.definition.request.edit_api') + "-" + row.name, "ADD", row);
+        })
+      },
+      handleCase(api) {
+        this.currentApi = api;
+        this.showCasePage = false;
       },
       apiCaseClose() {
-        this.isHide = true;
+        this.showCasePage = true;
       },
       selectModule(data) {
         this.currentModule = data;
@@ -206,7 +224,7 @@
         if (!this.$refs.apiList[0].tableData) {
           return;
         }
-        let obj = {projectName: getCurrentProjectID(), protocol: this.currentProtocol, data: this.$refs.apiList[0].tableData}
+        let obj = {protocol: this.currentProtocol, data: this.$refs.apiList[0].tableData}
         downloadFile("导出API.json", JSON.stringify(obj));
       },
       refresh(data) {
@@ -224,7 +242,7 @@
       },
       runTest(data) {
         this.setTabTitle(data);
-        this.handleCommand("test");
+        this.handleCommand("TEST");
       },
       saveApi(data) {
         this.setTabTitle(data);
diff --git a/frontend/src/business/components/api/definition/components/ApiList.vue b/frontend/src/business/components/api/definition/components/ApiList.vue
index 7320201a41..11687f393d 100644
--- a/frontend/src/business/components/api/definition/components/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/ApiList.vue
@@ -72,10 +72,9 @@
         <el-table-column :label="$t('commons.operating')" min-width="130" align="center">
           <template v-slot:default="scope">
             <el-button type="text" @click="reductionApi(scope.row)" v-if="currentModule!=undefined && currentModule.id === 'gc'">恢复</el-button>
-            <el-button type="text" @click="editApi(scope.row)" v-else>编辑</el-button>
-            <el-button v-if="scope.row.caseTotal > 0" type="text" @click="handleTestCase(scope.row)">用例</el-button>
-            <el-button v-else type="text" @click="handleTestCase(scope.row)">+用例</el-button>
-            <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button>
+            <el-button type="text" @click="editApi(scope.row)" v-else>{{$t('commons.edit')}}</el-button>
+            <el-button type="text" @click="handleTestCase(scope.row)">{{$t('api_test.definition.request.case')}}</el-button>
+            <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">{{$t('commons.delete')}}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -124,7 +123,10 @@
         moduleId: "",
         deletePath: "/test/case/delete",
         selectRows: new Set(),
-        buttons: [{name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch}],
+        buttons: [
+          {name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
+          {name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
+        ],
         methodColorMap: new Map(API_METHOD_COLOUR),
         tableData: [],
         currentPage: 1,
@@ -267,6 +269,9 @@
           });
         }
       },
+      handleEditBatch() {
+        this.$emit('handleEditBatch', this.selectRows);
+      },
       handleTestCase(api) {
         this.selectApi = api;
         let request = JSON.parse(api.request);
diff --git a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
index 9794ab2617..d89b29472b 100644
--- a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
+++ b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
@@ -21,7 +21,7 @@
           <el-tab-pane :label="$t('api_test.definition.request.query_param')" name="parameters">
             <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.query_info')" placement="top-start" slot="label">
               <span>{{$t('api_test.definition.request.query_param')}}
-                <div class="el-step__icon is-text ms-api-col ms-query" v-if="request.arguments.length>1">
+                <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.arguments.length>1">
                   <div class="el-step__icon-inner">{{request.arguments.length-1}}</div>
                 </div></span>
             </el-tooltip>
@@ -34,7 +34,7 @@
             <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.rest_info')" placement="top-start" slot="label">
               <span>
                 {{$t('api_test.definition.request.rest_param')}}
-                <div class="el-step__icon is-text ms-api-col ms-query" v-if="request.rest.length>1">
+                <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.rest.length>1">
                   <div class="el-step__icon-inner">{{request.rest.length-1}}</div>
                 </div>
               </span>
diff --git a/frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue b/frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue
index fd9f604c8e..478247993a 100644
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue
+++ b/frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue
@@ -29,12 +29,9 @@
     </el-card>
 
     <!-- 加载用例 -->
-    <el-drawer :visible.sync="visible" direction="btt" :with-header="false" :modal="false" size="50%">
-      <ms-api-case-list @apiCaseClose="apiCaseClose" @selectTestCase="selectTestCase" :currentApi="api"
-                        :loaded="loaded" :refreshSign="refreshSign" :createCase="createCase"
-                        ref="caseList"/>
-    </el-drawer>
-    >
+    <ms-api-case-list @apiCaseClose="apiCaseClose" @selectTestCase="selectTestCase" :currentApi="api"
+                      :loaded="loaded" :refreshSign="refreshSign" :createCase="createCase"
+                      ref="caseList"/>
 
     <!-- 环境 -->
     <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
@@ -125,7 +122,7 @@
       },
       loadCase() {
         this.refreshSign = getUUID();
-        this.loaded = true;
+        this.$refs.caseList.open();
         this.visible = true;
       },
       apiCaseClose() {
@@ -155,7 +152,7 @@
       saveAsCase() {
         //用于触发创建操作
         this.createCase = getUUID();
-        this.visible = true;
+        this.$refs.caseList.open();
         this.loaded = false;
       },
       saveAsApi() {
diff --git a/frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue b/frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue
index 108a496606..c65a36cc60 100644
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue
+++ b/frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue
@@ -70,12 +70,12 @@
     </el-card>
 
     <!-- 加载用例 -->
-      <ms-api-case-list @selectTestCase="selectTestCase"
-                        :loaded="loaded"
-                        :refreshSign="refreshSign"
-                        :createCase="createCase"
-                        :currentApi="api"
-                        ref="caseList"/>
+    <ms-api-case-list @selectTestCase="selectTestCase"
+                      :loaded="loaded"
+                      :refreshSign="refreshSign"
+                      :createCase="createCase"
+                      :currentApi="api"
+                      ref="caseList"/>
 
     <!-- 环境 -->
     <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
@@ -169,7 +169,6 @@
       loadCase() {
         this.refreshSign = getUUID();
         this.loaded = true;
-        // this.visible = true;
         this.$refs.caseList.open();
       },
       apiCaseClose() {
@@ -199,7 +198,7 @@
       saveAsCase() {
         //用于触发创建操作
         this.createCase = getUUID();
-        this.visible = true;
+        this.$refs.caseList.open();
         this.loaded = false;
       },
       saveAsApi() {
diff --git a/frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue b/frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue
index c156f530a5..467f892b01 100644
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue
+++ b/frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue
@@ -28,12 +28,9 @@
     </el-card>
 
     <!-- 加载用例 -->
-    <el-drawer :visible.sync="visible" direction="btt" :with-header="false" :modal="false" size="50%">
-      <ms-api-case-list @apiCaseClose="apiCaseClose" @selectTestCase="selectTestCase" :currentApi="api" :refreshSign="refreshSign"
-                        :loaded="loaded" :createCase="createCase"
-                        ref="caseList"/>
-    </el-drawer>
-    >
+    <ms-api-case-list @apiCaseClose="apiCaseClose" @selectTestCase="selectTestCase" :currentApi="api" :refreshSign="refreshSign"
+                      :loaded="loaded" :createCase="createCase"
+                      ref="caseList"/>
 
     <!-- 环境 -->
     <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
@@ -124,7 +121,7 @@
       },
       loadCase() {
         this.refreshSign = getUUID();
-        this.loaded = true;
+        this.$refs.caseList.open();
         this.visible = true;
       },
       apiCaseClose() {
@@ -153,7 +150,7 @@
       },
       saveAsCase() {
         this.createCase = getUUID();
-        this.visible = true;
+        this.$refs.caseList.open();
         this.loaded = false;
       },
       saveAsApi() {
diff --git a/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue b/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
index 30858d8c18..52bc76ee33 100644
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
+++ b/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
@@ -29,11 +29,9 @@
     </el-card>
 
     <!-- 加载用例 -->
-    <el-drawer :visible.sync="visible" direction="btt" :with-header="false" :modal="false" size="50%">
-      <ms-api-case-list @apiCaseClose="apiCaseClose" @selectTestCase="selectTestCase" :currentApi="api" :refreshSign="refreshSign"
-                        :loaded="loaded" :createCase="createCase"
-                        ref="caseList"/>
-    </el-drawer>
+    <ms-api-case-list @apiCaseClose="apiCaseClose" @selectTestCase="selectTestCase" :currentApi="api" :refreshSign="refreshSign"
+                      :loaded="loaded" :createCase="createCase"
+                      ref="caseList"/>
     <!-- 环境 -->
     <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
     <!-- 执行组件 -->
@@ -123,7 +121,7 @@
       },
       loadCase() {
         this.refreshSign = getUUID();
-        this.loaded = true;
+        this.$refs.caseList.open();
         this.visible = true;
       },
       apiCaseClose() {
@@ -152,7 +150,7 @@
       },
       saveAsCase() {
         this.createCase = getUUID();
-        this.visible = true;
+        this.$refs.caseList.open();
         this.loaded = false;
       },
       saveAsApi() {
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 178e3b557a..6b8491e49c 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -536,6 +536,7 @@ export default {
         test_plan_select: "Please select test plan",
         create_info: 'Create',
         update_info: 'Update',
+        batch_edit: "Batch edit",
       }
     },
     automation: {
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 53c3bf884b..e59aad04ea 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -535,6 +535,7 @@ export default {
         test_plan_select: "请选择测试计划",
         create_info: '创建',
         update_info: '更新',
+        batch_edit: "批量编辑",
       }
     },
     automation: {
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index ce2288c503..b34cf557e2 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -535,6 +535,7 @@ export default {
         test_plan_select: "請選擇測試計劃",
         create_info: '創建',
         update_info: '更新',
+        batch_edit: "批量編輯",
       }
     },
     automation: {