diff --git a/frontend/src/business/components/api/automation/ApiAutomation.vue b/frontend/src/business/components/api/automation/ApiAutomation.vue
index fe9227773c..8946731b1e 100644
--- a/frontend/src/business/components/api/automation/ApiAutomation.vue
+++ b/frontend/src/business/components/api/automation/ApiAutomation.vue
@@ -38,7 +38,14 @@
 
         <el-tab-pane name="add">
           <template v-slot:label>
-            <el-button type="primary" plain icon="el-icon-plus" size="mini" v-tester/>
+            <el-dropdown @command="handleCommand" v-tester>
+              <el-button type="primary" plain icon="el-icon-plus" size="mini" v-tester/>
+              <el-dropdown-menu slot="dropdown">
+                <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>
           </template>
         </el-tab-pane>
       </el-tabs>
@@ -48,150 +55,168 @@
 
 <script>
 
-import MsContainer from "@/business/components/common/components/MsContainer";
-import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
-import MsMainContainer from "@/business/components/common/components/MsMainContainer";
-import MsApiScenarioList from "@/business/components/api/automation/scenario/ApiScenarioList";
-import {getUUID} from "@/common/js/utils";
-import MsApiScenarioModule from "@/business/components/api/automation/scenario/ApiScenarioModule";
-import MsEditApiScenario from "./scenario/EditApiScenario";
-import {getCurrentProjectID} from "../../../../common/js/utils";
+  import MsContainer from "@/business/components/common/components/MsContainer";
+  import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
+  import MsMainContainer from "@/business/components/common/components/MsMainContainer";
+  import MsApiScenarioList from "@/business/components/api/automation/scenario/ApiScenarioList";
+  import {getUUID} from "@/common/js/utils";
+  import MsApiScenarioModule from "@/business/components/api/automation/scenario/ApiScenarioModule";
+  import MsEditApiScenario from "./scenario/EditApiScenario";
+  import {getCurrentProjectID} from "../../../../common/js/utils";
 
-export default {
-  name: "ApiAutomation",
-  components: {
-    MsApiScenarioModule,
-    MsApiScenarioList,
-    MsMainContainer,
-    MsAsideContainer,
-    MsContainer,
-    MsEditApiScenario
-  },
-  comments: {},
-  computed: {
-    checkRedirectID: function () {
-      let redirectIDParam = this.$route.params.redirectID;
-      this.changeRedirectParam(redirectIDParam);
-      return redirectIDParam;
+  export default {
+    name: "ApiAutomation",
+    components: {
+      MsApiScenarioModule,
+      MsApiScenarioList,
+      MsMainContainer,
+      MsAsideContainer,
+      MsContainer,
+      MsEditApiScenario
     },
-    isRedirectEdit: function () {
-      let redirectParam = this.$route.params.dataSelectRange;
-      this.checkRedirectEditPage(redirectParam);
-      return redirectParam;
-    }
-  },
-  data() {
-    return {
-      redirectID: '',
-      renderComponent: true,
-      isHide: true,
-      activeName: 'default',
-      currentModule: null,
-      moduleOptions: [],
-      tabs: [],
-      trashEnable: false,
-      selectNodeIds: [],
-    }
-  },
-  watch: {
-    redirectID() {
-      this.renderComponent = false;
-      this.$nextTick(() => {
-        // 在 DOM 中添加 my-component 组件
-        this.renderComponent = true;
-      });
-    }
-  },
-  methods: {
-    checkRedirectEditPage(redirectParam) {
-      if(redirectParam!=null){
-        let selectParamArr = redirectParam.split("edit:");
-        if (selectParamArr.length == 2) {
-          let scenarioId = selectParamArr[1];
-          let projectId = getCurrentProjectID();
-          //查找单条数据，跳转修改页面
-          let url = "/api/automation/list/" + 1 + "/" + 1;
-          this.$post(url, {id:scenarioId,projectId:projectId}, response => {
-            let data = response.data;
-            if(data!=null){
-              //如果树未加载
-              if(JSON.stringify(this.moduleOptions) === '{}' ){
-                this.$refs.nodeTree.list();
+    comments: {},
+    computed: {
+      checkRedirectID: function () {
+        let redirectIDParam = this.$route.params.redirectID;
+        this.changeRedirectParam(redirectIDParam);
+        return redirectIDParam;
+      },
+      isRedirectEdit: function () {
+        let redirectParam = this.$route.params.dataSelectRange;
+        this.checkRedirectEditPage(redirectParam);
+        return redirectParam;
+      }
+    },
+    data() {
+      return {
+        redirectID: '',
+        renderComponent: true,
+        isHide: true,
+        activeName: 'default',
+        currentModule: null,
+        moduleOptions: [],
+        tabs: [],
+        trashEnable: false,
+        selectNodeIds: [],
+      }
+    },
+    watch: {
+      redirectID() {
+        this.renderComponent = false;
+        this.$nextTick(() => {
+          // 在 DOM 中添加 my-component 组件
+          this.renderComponent = true;
+        });
+      }
+    },
+    methods: {
+      checkRedirectEditPage(redirectParam) {
+        if (redirectParam != null) {
+          let selectParamArr = redirectParam.split("edit:");
+          if (selectParamArr.length == 2) {
+            let scenarioId = selectParamArr[1];
+            let projectId = getCurrentProjectID();
+            //查找单条数据，跳转修改页面
+            let url = "/api/automation/list/" + 1 + "/" + 1;
+            this.$post(url, {id: scenarioId, projectId: projectId}, response => {
+              let data = response.data;
+              if (data != null) {
+                //如果树未加载
+                if (JSON.stringify(this.moduleOptions) === '{}') {
+                  this.$refs.nodeTree.list();
+                }
+                let row = data.listObject[0];
+                row.tags = JSON.parse(row.tags);
+                this.editScenario(row);
               }
-              let row = data.listObject[0];
-              row.tags = JSON.parse(row.tags);
-              this.editScenario(row);
-            }
-          });
+            });
+          }
         }
-      }
-    },
-    changeRedirectParam(redirectIDParam) {
-      this.redirectID = redirectIDParam;
-    },
-    addTab(tab) {
-      if (!getCurrentProjectID()) {
-        this.$warning(this.$t('commons.check_project_tip'));
-        return;
-      }
-      if (tab.name === 'add') {
-        let label = this.$t('api_test.automation.add_scenario');
-        let name = getUUID().substring(0, 8);
-        this.activeName = name;
-        this.tabs.push({label: label, name: name, currentScenario: {apiScenarioModuleId: "", id: getUUID()}});
-      }
-      if (tab.name === 'edit') {
-        let label = this.$t('api_test.automation.add_scenario');
-        let name = getUUID().substring(0, 8);
-        this.activeName = name;
-        label = tab.currentScenario.name;
-        this.tabs.push({label: label, name: name, currentScenario: tab.currentScenario});
-      }
-    },
-    removeTab(targetName) {
-      this.tabs = this.tabs.filter(tab => tab.name !== targetName);
-      if (this.tabs.length > 0) {
-        this.activeName = this.tabs[this.tabs.length - 1].name;
-      } else {
-        this.activeName = "default"
-      }
-    },
-    setTabLabel(data) {
-      for (const tab of this.tabs) {
-        if (tab.name === this.activeName) {
-          tab.label = data.name;
-          break;
+      },
+      changeRedirectParam(redirectIDParam) {
+        this.redirectID = redirectIDParam;
+      },
+      addTab(tab) {
+        if (!getCurrentProjectID()) {
+          this.$warning(this.$t('commons.check_project_tip'));
+          return;
         }
-      }
-    },
-    selectModule(data) {
-      this.currentModule = data;
-    },
-    saveScenario(data) {
-      this.setTabLabel(data);
-      this.$refs.apiScenarioList.search(data);
-    },
-    refresh(data) {
-      this.$refs.apiScenarioList.search(data);
-    },
-    editScenario(row) {
-      this.addTab({name: 'edit', currentScenario: row});
-    },
+        if (tab.name === 'add') {
+          let label = this.$t('api_test.automation.add_scenario');
+          let name = getUUID().substring(0, 8);
+          this.activeName = name;
+          this.tabs.push({label: label, name: name, currentScenario: {apiScenarioModuleId: "", id: getUUID()}});
+        }
+        if (tab.name === 'edit') {
+          let label = this.$t('api_test.automation.add_scenario');
+          let name = getUUID().substring(0, 8);
+          this.activeName = name;
+          label = tab.currentScenario.name;
+          this.tabs.push({label: label, name: name, currentScenario: tab.currentScenario});
+        }
+      },
+      handleTabClose() {
+        this.tabs = [];
+        this.activeName = "default";
+        this.refresh();
+      },
+      handleCommand(e) {
+        switch (e) {
+          case "ADD":
+            this.addTab({name: 'add'});
+            break;
+          case "CLOSE_ALL":
+            this.handleTabClose();
+            break;
+          default:
+            this.addTab({name: 'add'});
+            break;
+        }
+      },
+      removeTab(targetName) {
+        this.tabs = this.tabs.filter(tab => tab.name !== targetName);
+        if (this.tabs.length > 0) {
+          this.activeName = this.tabs[this.tabs.length - 1].name;
+        } else {
+          this.activeName = "default"
+        }
+      },
+      setTabLabel(data) {
+        for (const tab of this.tabs) {
+          if (tab.name === this.activeName) {
+            tab.label = data.name;
+            break;
+          }
+        }
+      },
+      selectModule(data) {
+        this.currentModule = data;
+      },
+      saveScenario(data) {
+        this.setTabLabel(data);
+        this.$refs.apiScenarioList.search(data);
+      },
+      refresh(data) {
+        this.$refs.apiScenarioList.search(data);
+      },
+      editScenario(row) {
+        this.addTab({name: 'edit', currentScenario: row});
+      },
 
-    nodeChange(node, nodeIds, pNodes) {
-      this.selectNodeIds = nodeIds;
-    },
-    setModuleOptions(data) {
-      this.moduleOptions = data;
-    },
-    changeSelectDataRangeAll(tableType) {
-      this.$route.params.dataSelectRange = 'all';
-    },
-    enableTrash(data) {
-      this.trashEnable = data;
+      nodeChange(node, nodeIds, pNodes) {
+        this.selectNodeIds = nodeIds;
+      },
+      setModuleOptions(data) {
+        this.moduleOptions = data;
+      },
+      changeSelectDataRangeAll(tableType) {
+        this.$route.params.dataSelectRange = 'all';
+      },
+      enableTrash(data) {
+        this.trashEnable = data;
+      }
     }
   }
-}
 </script>
 
 <style scoped>
diff --git a/frontend/src/business/components/api/definition/ApiDefinition.vue b/frontend/src/business/components/api/definition/ApiDefinition.vue
index 57044a762e..48b9496ea3 100644
--- a/frontend/src/business/components/api/definition/ApiDefinition.vue
+++ b/frontend/src/business/components/api/definition/ApiDefinition.vue
@@ -15,20 +15,8 @@
     </ms-aside-container>
 
     <ms-main-container>
-      <el-dropdown size="small" split-button type="primary" class="ms-api-buttion"
-                   @click="handleCommand('ADD')"
-                   @command="handleCommand" v-tester>
-        {{ $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="CLOSE_ALL">{{ $t('api_test.definition.request.close_all_label') }}
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-
       <!-- 主框架列表 -->
-      <el-tabs v-model="apiDefaultTab" @edit="handleTabRemove">
+      <el-tabs v-model="apiDefaultTab" @edit="handleTabRemove" @tab-click="addTab">
         <el-tab-pane v-for="(item) in apiTabs"
                      :key="item.name"
                      :label="item.title"
@@ -98,313 +86,320 @@
                                     @refresh="refresh" v-if="currentProtocol==='DUBBO'"/>
           </div>
         </el-tab-pane>
+
+        <el-tab-pane name="add">
+          <template v-slot:label>
+            <el-dropdown @command="handleCommand" v-tester>
+              <el-button type="primary" plain icon="el-icon-plus" size="mini" v-tester/>
+              <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="CLOSE_ALL">{{ $t('api_test.definition.request.close_all_label') }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-tab-pane>
       </el-tabs>
     </ms-main-container>
   </ms-container>
 </template>
 <script>
-import MsApiList from './components/list/ApiList';
-import MsContainer from "../../common/components/MsContainer";
-import MsMainContainer from "../../common/components/MsMainContainer";
-import MsAsideContainer from "../../common/components/MsAsideContainer";
-import MsApiConfig from "./components/ApiConfig";
-import MsDebugHttpPage from "./components/debug/DebugHttpPage";
-import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
-import MsDebugTcpPage from "./components/debug/DebugTcpPage";
-import MsDebugDubboPage from "./components/debug/DebugDubboPage";
+  import MsApiList from './components/list/ApiList';
+  import MsContainer from "../../common/components/MsContainer";
+  import MsMainContainer from "../../common/components/MsMainContainer";
+  import MsAsideContainer from "../../common/components/MsAsideContainer";
+  import MsApiConfig from "./components/ApiConfig";
+  import MsDebugHttpPage from "./components/debug/DebugHttpPage";
+  import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
+  import MsDebugTcpPage from "./components/debug/DebugTcpPage";
+  import MsDebugDubboPage from "./components/debug/DebugDubboPage";
 
-import MsRunTestHttpPage from "./components/runtest/RunTestHTTPPage";
-import MsRunTestTcpPage from "./components/runtest/RunTestTCPPage";
-import MsRunTestSqlPage from "./components/runtest/RunTestSQLPage";
-import MsRunTestDubboPage from "./components/runtest/RunTestDubboPage";
-import {downloadFile, getCurrentUser, getUUID, getCurrentProjectID} from "@/common/js/utils";
-import MsApiModule from "./components/module/ApiModule";
-import ApiCaseSimpleList from "./components/list/ApiCaseSimpleList";
-import {PROJECT_NAME} from "../../../../common/js/constants";
+  import MsRunTestHttpPage from "./components/runtest/RunTestHTTPPage";
+  import MsRunTestTcpPage from "./components/runtest/RunTestTCPPage";
+  import MsRunTestSqlPage from "./components/runtest/RunTestSQLPage";
+  import MsRunTestDubboPage from "./components/runtest/RunTestDubboPage";
+  import {downloadFile, getCurrentUser, getUUID, getCurrentProjectID} from "@/common/js/utils";
+  import MsApiModule from "./components/module/ApiModule";
+  import ApiCaseSimpleList from "./components/list/ApiCaseSimpleList";
+  import {PROJECT_NAME} from "../../../../common/js/constants";
 
-export default {
-  name: "ApiDefinition",
-  computed: {
-    queryDataType: function () {
-      let routeParam = this.$route.params.dataType;
-      let redirectIDParam = this.$route.params.redirectID;
-      this.changeRedirectParam(redirectIDParam);
-      if (routeParam === 'apiTestCase') {
-        this.isApiListEnableChange(false);
-      } else {
-        this.isApiListEnableChange(true);
-      }
-      return routeParam;
+  export default {
+    name: "ApiDefinition",
+    computed: {
+      queryDataType: function () {
+        let routeParam = this.$route.params.dataType;
+        let redirectIDParam = this.$route.params.redirectID;
+        this.changeRedirectParam(redirectIDParam);
+        if (routeParam === 'apiTestCase') {
+          this.isApiListEnableChange(false);
+        } else {
+          this.isApiListEnableChange(true);
+        }
+        return routeParam;
+      },
     },
-  },
-  components: {
-    ApiCaseSimpleList,
-    MsApiModule,
-    MsApiList,
-    MsMainContainer,
-    MsContainer,
-    MsAsideContainer,
-    MsApiConfig,
-    MsDebugHttpPage,
-    MsRunTestHttpPage,
-    MsDebugJdbcPage,
-    MsDebugTcpPage,
-    MsDebugDubboPage,
-    MsRunTestTcpPage,
-    MsRunTestSqlPage,
-    MsRunTestDubboPage
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
+    components: {
+      ApiCaseSimpleList,
+      MsApiModule,
+      MsApiList,
+      MsMainContainer,
+      MsContainer,
+      MsAsideContainer,
+      MsApiConfig,
+      MsDebugHttpPage,
+      MsRunTestHttpPage,
+      MsDebugJdbcPage,
+      MsDebugTcpPage,
+      MsDebugDubboPage,
+      MsRunTestTcpPage,
+      MsRunTestSqlPage,
+      MsRunTestDubboPage
     },
-    currentRow: {
-      type: Object,
-    }
-  },
-  data() {
-    return {
-      redirectID: '',
-      renderComponent: true,
-      selectDataRange: 'all',
-      showCasePage: true,
-      apiDefaultTab: 'default',
-      currentProtocol: null,
-      currentModule: null,
-      selectNodeIds: [],
-      currentApi: {},
-      moduleOptions: {},
-      trashEnable: false,
-      apiTabs: [{
-        title: this.$t('api_test.definition.api_title'),
-        name: 'default',
-        type: "list",
-        closable: false
-      }],
-      isApiListEnable: true
-    }
-  },
-  watch: {
-    currentProtocol() {
-      this.handleCommand("CLOSE_ALL");
-    },
-    redirectID() {
-      this.renderComponent = false;
-      this.$nextTick(() => {
-        // 在 DOM 中添加 my-component 组件
-        this.renderComponent = true;
-      });
-    }
-  },
-  methods: {
-    changeRedirectParam(redirectIDParam) {
-      this.redirectID = redirectIDParam;
-    },
-    isApiListEnableChange(data) {
-      this.isApiListEnable = data;
-    },
-    handleCommand(e) {
-      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;
+    props: {
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+      currentRow: {
+        type: Object,
       }
     },
-    handleTabAdd(e) {
-      if (!getCurrentProjectID()) {
-        this.$warning(this.$t('commons.check_project_tip'));
-        return;
+    data() {
+      return {
+        redirectID: '',
+        renderComponent: true,
+        selectDataRange: 'all',
+        showCasePage: true,
+        apiDefaultTab: 'default',
+        currentProtocol: null,
+        currentModule: null,
+        selectNodeIds: [],
+        currentApi: {},
+        moduleOptions: {},
+        trashEnable: false,
+        apiTabs: [{
+          title: this.$t('api_test.definition.api_title'),
+          name: 'default',
+          type: "list",
+          closable: false
+        }],
+        isApiListEnable: true
       }
-      let api = {
-        status: "Underway", method: "GET", userId: getCurrentUser().id,
-        url: "", protocol: this.currentProtocol, environmentId: ""
-      };
-      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;
-            }
-          }
+    watch: {
+      currentProtocol() {
+        this.handleCommand("CLOSE_ALL");
+      },
+      redirectID() {
+        this.renderComponent = false;
+        this.$nextTick(() => {
+          // 在 DOM 中添加 my-component 组件
+          this.renderComponent = true;
         });
       }
-      this.apiDefaultTab = activeName;
-      this.apiTabs = tabs.filter(tab => tab.name !== targetName);
-      this.refresh();
     },
-    //创建左侧树的根目录模块
-    createRootModel() {
-      this.$refs.nodeTree.createRootModel();
-    },
-    handleTabsEdit(targetName, action, api) {
-      if (!getCurrentProjectID()) {
-        this.$warning(this.$t('commons.check_project_tip'));
-        return;
-      }
-      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(id) {
-      this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug", id);
-    },
-    editApi(row) {
-      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(api) {
-      this.currentApi = api;
-      this.showCasePage = false;
-    },
-    apiCaseClose() {
-      this.showCasePage = true;
-    },
-    exportAPI() {
-      if (!this.isApiListEnable) {
-        this.$warning('用例列表暂不支持导出，请切换成接口列表');
-        return;
-      }
-      let obj = {projectName: getCurrentProjectID(), protocol: this.currentProtocol}
-      if (this.$refs.apiList[0].selectRows && this.$refs.apiList[0].selectRows.size > 0) {
-        let arr = Array.from(this.$refs.apiList[0].selectRows);
-        obj.data = arr;
-        this.buildApiPath(obj.data);
-        downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
-      } else {
-        let condition = {};
-        let url = "/api/definition/list/all";
-        condition.filters = ["Prepare", "Underway", "Completed"];
-        condition.projectId = getCurrentProjectID();
-        this.$post(url, condition, response => {
-          obj.data = response.data;
+    methods: {
+      changeRedirectParam(redirectIDParam) {
+        this.redirectID = redirectIDParam;
+      },
+      isApiListEnableChange(data) {
+        this.isApiListEnable = data;
+      },
+      addTab(tab) {
+        if (tab.name === 'add') {
+          this.handleCommand("ADD");
+        }
+      },
+      handleCommand(e) {
+        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;
+        }
+      },
+      handleTabAdd(e) {
+        if (!getCurrentProjectID()) {
+          this.$warning(this.$t('commons.check_project_tip'));
+          return;
+        }
+        let api = {
+          status: "Underway", method: "GET", userId: getCurrentUser().id,
+          url: "", protocol: this.currentProtocol, environmentId: ""
+        };
+        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();
+      },
+      //创建左侧树的根目录模块
+      createRootModel() {
+        this.$refs.nodeTree.createRootModel();
+      },
+      handleTabsEdit(targetName, action, api) {
+        if (!getCurrentProjectID()) {
+          this.$warning(this.$t('commons.check_project_tip'));
+          return;
+        }
+        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(id) {
+        this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug", id);
+      },
+      editApi(row) {
+        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(api) {
+        this.currentApi = api;
+        this.showCasePage = false;
+      },
+      apiCaseClose() {
+        this.showCasePage = true;
+      },
+      exportAPI() {
+        if (!this.isApiListEnable) {
+          this.$warning('用例列表暂不支持导出，请切换成接口列表');
+          return;
+        }
+        let obj = {projectName: getCurrentProjectID(), protocol: this.currentProtocol}
+        if (this.$refs.apiList[0].selectRows && this.$refs.apiList[0].selectRows.size > 0) {
+          let arr = Array.from(this.$refs.apiList[0].selectRows);
+          obj.data = arr;
           this.buildApiPath(obj.data);
           downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
-        });
-      }
-    },
-    buildApiPath(apis) {
-      apis.forEach((api) => {
-        this.moduleOptions.forEach(item => {
-          if (api.moduleId === item.id) {
-            api.modulePath = item.path;
-          }
-        });
-      });
-    },
-    refresh(data) {
-      this.$refs.apiList[0].initTable(data);
-    },
-    setTabTitle(data) {
-      for (let index in this.apiTabs) {
-        let tab = this.apiTabs[index];
-        if (tab.name === this.apiDefaultTab) {
-          tab.title = this.$t('api_test.definition.request.edit_api') + "-" + data.name;
-          break;
+        } else {
+          let condition = {};
+          let url = "/api/definition/list/all";
+          condition.filters = ["Prepare", "Underway", "Completed"];
+          condition.projectId = getCurrentProjectID();
+          this.$post(url, condition, response => {
+            obj.data = response.data;
+            this.buildApiPath(obj.data);
+            downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
+          });
         }
-      }
-    },
-    runTest(data) {
-      this.setTabTitle(data);
-      this.handleTabsEdit(this.$t("commons.api"), "TEST", data);
-    },
-    saveApi(data) {
-      this.setTabTitle(data);
-      this.refresh(data);
-    },
+      },
+      buildApiPath(apis) {
+        apis.forEach((api) => {
+          this.moduleOptions.forEach(item => {
+            if (api.moduleId === item.id) {
+              api.modulePath = item.path;
+            }
+          });
+        });
+      },
+      refresh(data) {
+        this.$refs.apiList[0].initTable(data);
+      },
+      setTabTitle(data) {
+        for (let index in this.apiTabs) {
+          let tab = this.apiTabs[index];
+          if (tab.name === this.apiDefaultTab) {
+            tab.title = this.$t('api_test.definition.request.edit_api') + "-" + data.name;
+            break;
+          }
+        }
+      },
+      runTest(data) {
+        this.setTabTitle(data);
+        this.handleTabsEdit(this.$t("commons.api"), "TEST", data);
+      },
+      saveApi(data) {
+        this.setTabTitle(data);
+        this.refresh(data);
+      },
 
-    showExecResult(row) {
-      this.debug(row);
-    },
-    nodeChange(node, nodeIds, pNodes) {
-      this.selectNodeIds = nodeIds;
-    },
-    handleProtocolChange(protocol) {
-      this.currentProtocol = protocol;
-    },
-    setModuleOptions(data) {
-      this.moduleOptions = data;
-    },
-    changeSelectDataRangeAll(tableType) {
-      this.$route.params.dataSelectRange = 'all';
-    },
-    enableTrash(data) {
-      this.trashEnable = data;
+      showExecResult(row) {
+        this.debug(row);
+      },
+      nodeChange(node, nodeIds, pNodes) {
+        this.selectNodeIds = nodeIds;
+      },
+      handleProtocolChange(protocol) {
+        this.currentProtocol = protocol;
+      },
+      setModuleOptions(data) {
+        this.moduleOptions = data;
+      },
+      changeSelectDataRangeAll(tableType) {
+        this.$route.params.dataSelectRange = 'all';
+      },
+      enableTrash(data) {
+        this.trashEnable = data;
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-.ms-api-buttion {
-  position: absolute;
-  top: 100px;
-  right: 4px;
-  padding: 0;
-  background: 0 0;
-  border: none;
-  outline: 0;
-  cursor: pointer;
-  margin-right: 10px;
-  font-size: 16px;
-}
 
-.ms-api-div {
-  overflow-y: auto;
-  height: calc(100vh - 155px)
-}
+  .ms-api-div {
+    overflow-y: auto;
+    height: calc(100vh - 155px)
+  }
 
-/deep/ .el-tabs__header {
-  margin: 0 0 5px;
-  width: calc(100% - 90px);
-}
+  /deep/ .el-main {
+    overflow: hidden;
+  }
 
-/deep/ .el-main {
-  overflow: hidden;
-}
+  /deep/ .el-tabs__header {
+    margin: 0 0 0px;
+    /*width: calc(100% - 90px);*/
+  }
 
-/deep/ .el-card {
-  /*border: 1px solid #EBEEF5;*/
-  /*border-style: none;*/
-  border-top: none;
-}
+  /deep/ .el-card {
+    /*border: 1px solid #EBEEF5;*/
+    /*border-style: none;*/
+    border-top: none;
+  }
 
-/deep/ .api-component {
-  margin-top: 10px;
-}
+  /deep/ .api-component {
+    margin-top: 10px;
+  }
 
 </style>