diff --git a/fastrunner/utils/parser.py b/fastrunner/utils/parser.py
index 473b25c..3505dcc 100644
--- a/fastrunner/utils/parser.py
+++ b/fastrunner/utils/parser.py
@@ -1,22 +1,18 @@
 import datetime
 import json
 import logging
+import time
 from concurrent.futures import ThreadPoolExecutor
+from enum import Enum
+from typing import Dict, Optional, Union
 
 import json5
-import time
-
 import requests
-from enum import Enum
-
 from loguru import logger
 
 from fastrunner import models
-from fastrunner.utils.tree import (
-    get_tree_max_id,
-    get_all_ycatid,
-    get_tree_ycatid_mapping,
-)
+from fastrunner.utils.tree import (get_all_ycatid, get_tree_max_id,
+                                   get_tree_ycatid_mapping)
 
 logger = logging.getLogger(__name__)
 
@@ -40,7 +36,7 @@ class Format(object):
     解析标准HttpRunner脚本 前端->后端
     """
 
-    def __init__(self, body, level="test"):
+    def __init__(self, body: Dict[str, Union[str, Dict]], level: str = "test"):
         """
         body => {
                     header: header -> [{key:'', value:'', desc:''},],
@@ -59,76 +55,66 @@ def __init__(self, body, level="test"):
                     name: name -> string
                 }
         """
-        try:
-            self.name = body.pop("name")
-
-            self.__headers = body["header"].pop("header")
-            if level == "test":
-                # 配置移除request参数
-                self.__params = body["request"]["params"].pop("params")
-                self.__data = body["request"]["form"].pop("data")
-                self.__json = body["request"].pop("json")
-                self.__files = body["request"]["files"].pop("files")
-            else:
-                self.__params = {}
-                self.__data = {}
-                self.__json = {}
-                self.__files = {}
-            self.__variables = body["variables"].pop("variables")
-            self.__setup_hooks = body["hooks"].pop("setup_hooks")
-            self.__teardown_hooks = body["hooks"].pop("teardown_hooks")
-
-            if level == "test":
-                self.__desc = {
-                    "header": body["header"].pop("desc"),
-                    "data": body["request"]["form"].pop("desc"),
-                    "files": body["request"]["files"].pop("desc"),
-                    "params": body["request"]["params"].pop("desc"),
-                    "variables": body["variables"].pop("desc"),
-                }
-                self.url = body.pop("url")
-                self.method = body.pop("method")
-
-                self.__times = body.pop("times")
-                self.__extract = body["extract"].pop("extract")
-                self.__validate = body.pop("validate").pop("validate")
-                self.__desc["extract"] = body["extract"].pop("desc")
-
-            elif level == "config":
-                self.__desc = {
-                    "header": body["header"].pop("desc"),
-                    "variables": body["variables"].pop("desc"),
-                }
+        self.name = body.pop("name", None)
 
-                self.base_url = body.pop("base_url")
-                self.is_default = body.pop("is_default")
-                self.__parameters = body["parameters"].pop("parameters")
-                self.__desc["parameters"] = body["parameters"].pop("desc")
+        self.__headers = body.get("header", {}).pop("header", None)
+        if level == "test":
+            self.__params = (
+                body.get("request", {}).get("params", {}).pop("params", None)
+            )
+            self.__data = body.get("request", {}).get("form", {}).pop("data", None)
+            self.__json = body.get("request", {}).pop("json", None)
+            self.__files = body.get("request", {}).get("files", {}).pop("files", None)
+        else:
+            self.__params = {}
+            self.__data = {}
+            self.__json = {}
+            self.__files = {}
+        self.__variables = body.get("variables", {}).pop("variables", None)
+        self.__setup_hooks = body.get("hooks", {}).pop("setup_hooks", None)
+        self.__teardown_hooks = body.get("hooks", {}).pop("teardown_hooks", None)
 
-            self.__level = level
-            self.testcase = None
+        if level == "test":
+            self.__desc = {
+                "header": body.get("header", {}).pop("desc", None),
+                "data": body.get("request", {}).get("form", {}).pop("desc", None),
+                "files": body.get("request", {}).get("files", {}).pop("desc", None),
+                "params": body.get("request", {}).get("params", {}).pop("desc", None),
+                "variables": body.get("variables", {}).pop("desc", None),
+            }
+            self.url = body.pop("url", None)
+            self.method = body.pop("method", None)
 
-            self.project = body.pop("project")
-            self.relation = body.pop("nodeId")
+            self.__times = body.pop("times", None)
+            self.__extract = body.get("extract", {}).pop("extract", None)
+            self.__validate = body.get("validate", {}).pop("validate", None)
+            self.__desc["extract"] = body.get("extract", {}).pop("desc", None)
 
-            # FastRunner的API没有rig_id字段,需要兼容
-            self.rig_id = body["rig_id"] if body.get("rig_id") else None
-            self.rig_env = body["rig_env"] if body.get("rig_env") else 0
+        elif level == "config":
+            self.__desc = {
+                "header": body.get("header", {}).pop("desc", None),
+                "variables": body.get("variables", {}).pop("desc", None),
+            }
 
-        except KeyError:
-            # project or relation
-            pass
+            self.base_url = body.pop("base_url", None)
+            self.is_default = body.pop("is_default", None)
+            self.__parameters = body.get("parameters", {}).pop("parameters", None)
+            self.__desc["parameters"] = body.get("parameters", {}).pop("desc", None)
+
+        self.__level = level
+        self.testcase = None
 
-    def parse(self):
+        self.project = body.pop("project", None)
+        self.relation = body.pop("nodeId", None)
+
+        # FastRunner的API没有rig_id字段,需要兼容
+        self.rig_id = body.get("rig_id", None)
+        self.rig_env = body.get("rig_env", 0)
+
+    def parse(self) -> Optional[Dict[str, Union[str, Dict]]]:
         """
         返回标准化HttpRunner "desc" 字段运行需去除
         """
-        if not hasattr(self, "rig_id"):
-            self.rig_id = None
-
-        if not hasattr(self, "rig_env"):
-            self.rig_env = 0
-
         if self.__level == "test":
             test = {
                 "name": self.name,
@@ -161,11 +147,8 @@ def parse(self):
             test["request"]["params"] = self.__params
         if self.__data:
             test["request"]["data"] = self.__data
-        if self.__json:
+        if self.__json or self.__json == {}:
             test["request"]["json"] = self.__json
-        # 兼容一些接口需要传空json
-        if self.__json == {}:
-            test["request"]["json"] = {}
         if self.__files:
             test["request"]["files"] = self.__files
         if self.__variables:
@@ -184,32 +167,6 @@ class Parse(object):
     """
 
     def __init__(self, body, level="test"):
-        """
-        body: => {
-                "name": "get token with $user_agent, $os_platform, $app_version",
-                "request": {
-                    "url": "/api/get-token",
-                    "method": "POST",
-                    "headers": {
-                        "app_version": "$app_version",
-                        "os_platform": "$os_platform",
-                        "user_agent": "$user_agent"
-                    },
-                    "json": {
-                        "sign": "${get_sign($user_agent, $device_sn, $os_platform, $app_version)}"
-                    },
-                    "extract": [
-                        {"token": "content.token"}
-                    ],
-                    "validate": [
-                        {"eq": ["status_code", 200]},
-                        {"eq": ["headers.Content-Type", "application/json"]},
-                        {"eq": ["content.success", true]}
-                    ],
-                    "setup_hooks": [],
-                    "teardown_hooks": []
-                }
-        """
         self.name = body.get("name")
         self.__request = body.get("request")  # header files params json data
         self.__variables = body.get("variables")
@@ -230,9 +187,6 @@ def __init__(self, body, level="test"):
 
     @staticmethod
     def __get_type(content):
-        """
-        返回data_type 默认string
-        """
         var_type = {
             "str": 1,
             "int": 2,
@@ -245,7 +199,6 @@ def __get_type(content):
 
         key = str(type(content).__name__)
 
-        # 黑魔法，为了兼容值是int，但又是$引用变量的情况
         if key == "str" and "$int" in content:
             return var_type["int"], content
 
@@ -259,14 +212,9 @@ def __get_type(content):
         return var_type[key], content
 
     def parse_http(self):
-        """
-        标准前端脚本格式
-        """
         init = [{"key": "", "value": "", "desc": ""}]
-
         init_p = [{"key": "", "value": "", "desc": "", "type": 1}]
 
-        #  初始化test结构
         test = {
             "name": self.name,
             "header": init,
@@ -276,105 +224,91 @@ def parse_http(self):
         }
 
         if self.__level == "test":
-            test["times"] = self.__times
-            test["method"] = self.__request["method"]
-            test["url"] = self.__request["url"]
-            test["validate"] = [
-                {"expect": "", "actual": "", "comparator": "equals", "type": 1}
-            ]
-            test["extract"] = init
+            self.parse_test_level(test)
+        elif self.__level == "config":
+            self.parse_config_level(test)
 
-            if self.__extract:
-                test["extract"] = []
-                for content in self.__extract:
-                    for key, value in content.items():
-                        test["extract"].append(
-                            {
-                                "key": key,
-                                "value": value,
-                                "desc": self.__desc["extract"][key],
-                            }
-                        )
+        self.parse_request(test)
+        self.parse_variables(test)
+        self.parse_hooks(test)
 
-            if self.__validate:
-                test["validate"] = []
-                for content in self.__validate:
-                    for key, value in content.items():
-                        obj = Parse.__get_type(value[1])
-                        # 兼容旧的断言
-                        desc = ""
-                        if len(value) >= 3:
-                            # value[2]为None时，设置为''
-                            desc = value[2] or ""
-                        test["validate"].append(
-                            {
-                                "expect": obj[1],
-                                "actual": value[0],
-                                "comparator": key,
-                                "type": obj[0],
-                                "desc": desc,
-                            }
-                        )
+        self.testcase = test
 
-        elif self.__level == "config":
-            test["base_url"] = self.__request["base_url"]
-            test["parameters"] = init
+    def parse_test_level(self, test):
+        test["times"] = self.__times
+        test["method"] = self.__request["method"]
+        test["url"] = self.__request["url"]
+        test["validate"] = [
+            {"expect": "", "actual": "", "comparator": "equals", "type": 1}
+        ]
+        test["extract"] = [{"key": "", "value": "", "desc": ""}]
 
-            if self.__parameters:
-                test["parameters"] = []
-                for content in self.__parameters:
-                    for key, value in content.items():
-                        test["parameters"].append(
-                            {
-                                "key": key,
-                                "value": Parse.__get_type(value)[1],
-                                "desc": self.__desc["parameters"][key],
-                            }
-                        )
+        if self.__extract:
+            test["extract"] = [
+                {"key": key, "value": value, "desc": self.__desc["extract"][key]}
+                for content in self.__extract
+                for key, value in content.items()
+            ]
 
-        if self.__request.get("headers"):
-            test["header"] = []
-            for key, value in self.__request.pop("headers").items():
-                test["header"].append(
-                    {"key": key, "value": value, "desc": self.__desc["header"][key]}
-                )
+        if self.__validate:
+            test["validate"] = []
+            for content in self.__validate:
+                for key, value in content.items():
+                    obj = Parse.__get_type(value[1])
+                    desc = value[2] or "" if len(value) >= 3 else ""
+                    test["validate"].append(
+                        {
+                            "expect": obj[1],
+                            "actual": value[0],
+                            "comparator": key,
+                            "type": obj[0],
+                            "desc": desc,
+                        }
+                    )
 
-        if self.__request.get("data"):
-            test["request"]["data"] = []
-            for key, value in self.__request.pop("data").items():
-                obj = Parse.__get_type(value)
+    def parse_config_level(self, test):
+        test["base_url"] = self.__request["base_url"]
+        test["parameters"] = [{"key": "", "value": "", "desc": ""}]
 
-                test["request"]["data"].append(
-                    {
-                        "key": key,
-                        "value": obj[1],
-                        "type": obj[0],
-                        "desc": self.__desc["data"][key],
-                    }
-                )
+        if self.__parameters:
+            test["parameters"] = [
+                {
+                    "key": key,
+                    "value": Parse.__get_type(value)[1],
+                    "desc": self.__desc["parameters"][key],
+                }
+                for content in self.__parameters
+                for key, value in content.items()
+            ]
+
+    def parse_request(self, test):
+        if self.__request.get("headers"):
+            test["header"] = [
+                {"key": key, "value": value, "desc": self.__desc["header"][key]}
+                for key, value in self.__request.pop("headers").items()
+            ]
 
-        # if self.__request.get('files'):
-        #     for key, value in self.__request.pop("files").items():
-        #         size = FileBinary.objects.get(name=value).size
-        #         test['request']['data'].append({
-        #             "key": key,
-        #             "value": value,
-        #             "size": size,
-        #             "type": 5,
-        #             "desc": self.__desc["files"][key]
-        #         })
+        if self.__request.get("data"):
+            test["request"]["data"] = [
+                {
+                    "key": key,
+                    "value": Parse.__get_type(value)[1],
+                    "type": Parse.__get_type(value)[0],
+                    "desc": self.__desc["data"][key],
+                }
+                for key, value in self.__request.pop("data").items()
+            ]
 
         if self.__request.get("params"):
-            test["request"]["params"] = []
-            for key, value in self.__request.pop("params").items():
-                test["request"]["params"].append(
-                    {
-                        "key": key,
-                        "value": value,
-                        "type": 1,
-                        "desc": self.__desc["params"][key],
-                    }
-                )
+            test["request"]["params"] = [
+                {
+                    "key": key,
+                    "value": value,
+                    "type": 1,
+                    "desc": self.__desc["params"][key],
+                }
+                for key, value in self.__request.pop("params").items()
+            ]
 
         if self.__request.get("json"):
             test["request"]["json_data"] = json.dumps(
@@ -383,39 +317,43 @@ def parse_http(self):
                 separators=(",", ": "),
                 ensure_ascii=False,
             )
+
+    def parse_variables(self, test):
         if self.__variables:
-            test["variables"] = []
-            for content in self.__variables:
-                for key, value in content.items():
-                    obj = Parse.__get_type(value)
-                    test["variables"].append(
-                        {
-                            "key": key,
-                            "value": obj[1],
-                            "desc": self.__desc["variables"][key],
-                            "type": obj[0],
-                        }
-                    )
+            test["variables"] = [
+                {
+                    "key": key,
+                    "value": Parse.__get_type(value)[1],
+                    "desc": self.__desc["variables"][key],
+                    "type": Parse.__get_type(value)[0],
+                }
+                for content in self.__variables
+                for key, value in content.items()
+            ]
 
+    def parse_hooks(self, test):
         if self.__setup_hooks or self.__teardown_hooks:
             test["hooks"] = []
             if len(self.__setup_hooks) > len(self.__teardown_hooks):
                 for index in range(0, len(self.__setup_hooks)):
-                    teardown = ""
-                    if index < len(self.__teardown_hooks):
-                        teardown = self.__teardown_hooks[index]
+                    teardown = (
+                        self.__teardown_hooks[index]
+                        if index < len(self.__teardown_hooks)
+                        else ""
+                    )
                     test["hooks"].append(
                         {"setup": self.__setup_hooks[index], "teardown": teardown}
                     )
             else:
                 for index in range(0, len(self.__teardown_hooks)):
-                    setup = ""
-                    if index < len(self.__setup_hooks):
-                        setup = self.__setup_hooks[index]
+                    setup = (
+                        self.__setup_hooks[index]
+                        if index < len(self.__setup_hooks)
+                        else ""
+                    )
                     test["hooks"].append(
                         {"setup": setup, "teardown": self.__teardown_hooks[index]}
                     )
-        self.testcase = test
 
 
 def format_json(value):
diff --git a/web/src/mixins/apiListMixin.js b/web/src/mixins/apiListMixin.js
new file mode 100644
index 0000000..926eb82
--- /dev/null
+++ b/web/src/mixins/apiListMixin.js
@@ -0,0 +1,27 @@
+// apiListMixin.js
+export default {
+  methods: {
+    getAPIList(params) {
+      this.$nextTick(() => {
+        const defaultParams = {
+          page: this.listCurrentPage || 1, // 提供默认值
+          node: this.node || this.currentNode, // 支持不同的命名
+          project: this.project,
+          search: this.search,
+          tag: this.visibleTag || this.tag,
+          rigEnv: this.rigEnv,
+          onlyMe: this.onlyMe,
+          showYAPI: this.showYAPI,
+          creator: this.selectUser
+        };
+
+        // 使用传入的参数覆盖默认参数
+        const apiParams = { ...defaultParams, ...params };
+
+        this.$api.apiList({ params: apiParams }).then(res => {
+          this.apiData = res;
+        });
+      });
+    }
+  }
+};
diff --git a/web/src/mixins/configMixin.js b/web/src/mixins/configMixin.js
new file mode 100644
index 0000000..5a5a431
--- /dev/null
+++ b/web/src/mixins/configMixin.js
@@ -0,0 +1,28 @@
+// configMixin.js
+export default {
+  data() {
+    return {
+      configOptions: [],
+      currentConfig: null
+    };
+  },
+  methods: {
+    getConfig({ addPlaceholder = false, setDefaultConfig = false } = {}) {
+      this.$api.getAllConfig(this.$route.params.id).then(resp => {
+        this.configOptions = resp;
+
+        // 根据配置决定是否添加占位符，并设置默认选项
+        if (addPlaceholder) {
+          const placeHolderOption = { name: '请选择' };
+          if (setDefaultConfig) {
+            this.configOptions.unshift(placeHolderOption);
+            const _config = this.configOptions.find(item => item.is_default === true);
+            this.currentConfig = _config || placeHolderOption;
+          } else {
+            this.configOptions.push(placeHolderOption);
+          }
+        }
+      });
+    }
+  }
+};
diff --git a/web/src/mixins/treeMixin.js b/web/src/mixins/treeMixin.js
new file mode 100644
index 0000000..3ac3ca1
--- /dev/null
+++ b/web/src/mixins/treeMixin.js
@@ -0,0 +1,15 @@
+// treeMixin.js
+export default {
+  methods: {
+    getTree(callback) {
+      this.$api.getTree(this.$route.params.id, { params: { type: 1 } }).then(resp => {
+        this.dataTree = resp['tree'];
+
+        // 如果有提供回调函数，则调用它
+        if (callback && typeof callback === 'function') {
+          callback(resp);
+        }
+      });
+    }
+  }
+};
diff --git a/web/src/pages/fastrunner/api/RecordApi.vue b/web/src/pages/fastrunner/api/RecordApi.vue
index 24fffdd..8b61049 100644
--- a/web/src/pages/fastrunner/api/RecordApi.vue
+++ b/web/src/pages/fastrunner/api/RecordApi.vue
@@ -1,5 +1,4 @@
 <template>
-
     <el-container>
         <el-header style="background: #fff; padding: 0; ">
             <div class="nav-api-header">
@@ -14,18 +13,8 @@
                         新建节点
                     </el-button>
 
-                    <el-dialog
-                        title="新建节点"
-                        :visible.sync="dialogVisible"
-                        width="30%"
-                        align="center"
-                    >
-                        <el-form
-                            :model="nodeForm"
-                            :rules="rules"
-                            ref="nodeForm"
-                            label-width="100px"
-                            class="project">
+                    <el-dialog title="新建节点" :visible.sync="dialogVisible" width="30%" align="center">
+                        <el-form :model="nodeForm" :rules="rules" ref="nodeForm" label-width="100px" class="project">
                             <el-form-item label="节点名称" prop="name">
                                 <el-input v-model="nodeForm.name"></el-input>
                             </el-form-item>
@@ -37,42 +26,39 @@
                         </el-radio-group>
 
                         <span slot="footer" class="dialog-footer">
-                        <el-button @click="dialogVisible = false">取 消</el-button>
-                        <el-button type="primary" @click="handleConfirm('nodeForm')">确 定</el-button>
-                      </span>
+                            <el-button @click="dialogVisible = false">取 消</el-button>
+                            <el-button type="primary" @click="handleConfirm('nodeForm')">确 定</el-button>
+                        </span>
                     </el-dialog>
 
-
                     <el-button
                         v-show="false"
                         :disabled="currentNode === '' || !isSuperuser"
-                        :title="isSuperuser ? '删除所选节点' : '删除节点权限不足' "
+                        :title="isSuperuser ? '删除所选节点' : '删除节点权限不足'"
                         type="danger"
                         size="small"
                         icon="el-icon-delete"
                         @click="deleteNode"
-                    >删除节点
+                        >删除节点
                     </el-button>
 
-
                     <el-button
                         v-show="false"
-                        :disabled="currentNode === '' "
+                        :disabled="currentNode === ''"
                         type="info"
                         size="small"
                         icon="el-icon-edit-outline"
                         @click="renameNode(currentNode)"
-                    >重命名
+                        >重命名
                     </el-button>
 
-
                     <el-button
-                        :disabled="currentNode === '' "
+                        :disabled="currentNode === ''"
                         type="primary"
                         size="small"
                         icon="el-icon-circle-plus-outline"
                         @click="initResponse = true"
-                    >添加接口
+                        >添加接口
                     </el-button>
 
                     <el-button
@@ -81,48 +67,62 @@
                         size="small"
                         icon="el-icon-circle-plus-outline"
                         @click="importYAPIdialogVisible = true"
-                    >导入接口
+                        >导入接口
                     </el-button>
 
-                    <el-dialog width="30%" title="导入YAPI接口" align="center"
-                               :visible.sync="importYAPIdialogVisible">
+                    <el-dialog width="30%" title="导入YAPI接口" align="center" :visible.sync="importYAPIdialogVisible">
                         <el-form ref="elForm" :model="YAPIformData" :rules="rules" size="medium" label-width="100px">
                             <el-form-item label="YAPI的地址" prop="yapi_base_url">
-                                <el-input v-model="YAPIformData.yapi_base_url" readonly
-                                          placeholder="http://yapi.xxx.com" clearable
-                                          :style="{width: '100%'}"></el-input>
+                                <el-input
+                                    v-model="YAPIformData.yapi_base_url"
+                                    readonly
+                                    placeholder="http://yapi.xxx.com"
+                                    clearable
+                                    :style="{ width: '100%' }"
+                                ></el-input>
                             </el-form-item>
                             <el-form-item label="token" prop="yapi_openapi_token">
-                                <el-input v-model="YAPIformData.yapi_openapi_token" readonly
-                                          placeholder="yapi项目的openapi token" clearable
-                                          :style="{width: '100%'}"></el-input>
+                                <el-input
+                                    v-model="YAPIformData.yapi_openapi_token"
+                                    readonly
+                                    placeholder="yapi项目的openapi token"
+                                    clearable
+                                    :style="{ width: '100%' }"
+                                ></el-input>
                             </el-form-item>
                         </el-form>
                         <div slot="footer">
                             <el-button @click="importYAPIdialogVisible = false">取消</el-button>
-                            <el-button type="primary" @click="handleConfirmYAPI"
-                                       :title="YAPIformData.yapi_openapi_token === YAPIformDataDefaultValue || YAPIformData.yapi_base_url === YAPIformDataDefaultValue ? '请到项目详情中配置yapi信息' : '导入YAPI节点和接口'"
-                                       :disabled="YAPIformData.yapi_openapi_token === YAPIformDataDefaultValue || YAPIformData.yapi_base_url === YAPIformDataDefaultValue">
+                            <el-button
+                                type="primary"
+                                @click="handleConfirmYAPI"
+                                :title="
+                                    YAPIformData.yapi_openapi_token === YAPIformDataDefaultValue ||
+                                    YAPIformData.yapi_base_url === YAPIformDataDefaultValue
+                                        ? '请到项目详情中配置yapi信息'
+                                        : '导入YAPI节点和接口'
+                                "
+                                :disabled="
+                                    YAPIformData.yapi_openapi_token === YAPIformDataDefaultValue ||
+                                        YAPIformData.yapi_base_url === YAPIformDataDefaultValue
+                                "
+                            >
                                 导入
                             </el-button>
                         </div>
                     </el-dialog>
                     <span v-show="this.$store.state.show_hosts">
-                    &nbspHosts:
-                    <el-select
-                        placeholder="请选择"
-                        size="small"
-                        style=“width:100%”
-                        tyle="margin-left: -6px"
-                        v-model="currentHost"
-                    >
-                        <el-option
-                            v-for="item in hostOptions"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.name">
-                        </el-option>
-                    </el-select>
+                        &nbspHosts:
+                        <el-select
+                            placeholder="请选择"
+                            size="small"
+                            style="“width:100%”"
+                            tyle="margin-left: -6px"
+                            v-model="currentHost"
+                        >
+                            <el-option v-for="item in hostOptions" :key="item.id" :label="item.name" :value="item.name">
+                            </el-option>
+                        </el-select>
                     </span>
                     &nbsp配置:
                     <el-select
@@ -132,22 +132,17 @@
                         v-model="currentConfig"
                         value-key="id"
                     >
-                        <el-option
-                            v-for="item in configOptions"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item">
+                        <el-option v-for="item in configOptions" :key="item.id" :label="item.name" :value="item">
                         </el-option>
                     </el-select>
 
-
                     <el-button
                         v-if="!addAPIFlag"
                         style="margin-left: 20px"
                         type="primary"
                         size="mini"
                         @click="run = !run"
-                    >批量运行
+                        >批量运行
                     </el-button>
 
                     <el-button
@@ -158,10 +153,9 @@
                         size="mini"
                         @click="move = !move"
                         :title="'移动API到指定节点'"
-                    >移动API
+                        >移动API
                     </el-button>
 
-
                     <el-button
                         v-if="isSuperuser"
                         type="danger"
@@ -173,14 +167,14 @@
                         @click="del = !del"
                     ></el-button>
 
-
                     <el-switch
                         style="margin-left: 10px"
                         v-model="onlyMe"
                         v-if="!addAPIFlag"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
-                        active-text="只看自己">
+                        active-text="只看自己"
+                    >
                     </el-switch>
 
                     <el-switch
@@ -189,7 +183,8 @@
                         v-if="!addAPIFlag"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
-                        active-text="显示YAPI">
+                        active-text="显示YAPI"
+                    >
                     </el-switch>
 
                     <el-button
@@ -197,9 +192,8 @@
                         type="text"
                         style="position: absolute; right: 30px;"
                         @click="handleBackList"
-                    >返回列表
+                        >返回列表
                     </el-button>
-
                 </div>
             </div>
         </el-header>
@@ -228,26 +222,25 @@
                             ref="tree2"
                             @node-drag-end="handleDragEnd"
                         >
-                            <span class="custom-tree-node"
-                                  slot-scope="{ node, data }"
-                                  @mouseenter="mouseenter(node)" @mouseleave="mouseleave"
-                                  style="display: flex; width: 180px"
+                            <span
+                                class="custom-tree-node"
+                                slot-scope="{ node, data }"
+                                @mouseenter="mouseenter(node)"
+                                @mouseleave="mouseleave"
+                                style="display: flex; width: 180px"
                             >
                                 <span style="overflow: hidden; text-overflow:ellipsis; flex: 1">
                                     <i class="iconfont" v-html="expand"></i>&nbsp;&nbsp;{{ node.label }}
                                 </span>
-                                <span class="icon-group" v-show="node.id === mouseNodeId" >
-                                        <i class="el-icon-folder-add" @click="dialogVisible=true"></i>
-                                        <i class="el-icon-edit" @click="renameNode(node)"></i>
-                                        <i class="el-icon-delete" @click="deleteNode(node)"></i>
+                                <span class="icon-group" v-show="node.id === mouseNodeId">
+                                    <i class="el-icon-folder-add" @click="dialogVisible = true"></i>
+                                    <i class="el-icon-edit" @click="renameNode(node)"></i>
+                                    <i class="el-icon-delete" @click="deleteNode(node)"></i>
                                 </span>
-
                             </span>
                         </el-tree>
                     </div>
-
                 </div>
-
             </el-aside>
 
             <el-main style="padding: 0;">
@@ -265,7 +258,7 @@
                 <api-list
                     v-show="!addAPIFlag"
                     v-on:api="handleAPI"
-                    :pNode="currentNode !== '' ? currentNode.id : '' "
+                    :pNode="currentNode !== '' ? currentNode.id : ''"
                     :project="$route.params.id"
                     :config="currentConfig.name"
                     :host="currentHost"
@@ -282,21 +275,22 @@
                     @click-pager="handleChangePage"
                 >
                 </api-list>
-
             </el-main>
         </el-container>
     </el-container>
-
 </template>
 
 <script>
 import ApiBody from './components/ApiBody'
 import ApiList from './components/ApiList'
+import treeMixin from '@/mixins/treeMixin'
+import configMixin from '@/mixins/configMixin'
 
 export default {
+    mixins: [treeMixin, configMixin],
     watch: {
         filterText(val) {
-            this.$refs.tree2.filter(val);
+            this.$refs.tree2.filter(val)
         }
     },
     components: {
@@ -308,10 +302,10 @@ export default {
     computed: {
         initResponse: {
             get() {
-                return this.addAPIFlag;
+                return this.addAPIFlag
             },
             set(value) {
-                this.addAPIFlag = value;
+                this.addAPIFlag = value
                 this.response = {
                     id: '',
                     body: {
@@ -319,51 +313,65 @@ export default {
                         times: 1,
                         url: '',
                         method: 'POST',
-                        header: [{
-                            key: "",
-                            value: "",
-                            desc: ""
-                        }],
+                        header: [
+                            {
+                                key: '',
+                                value: '',
+                                desc: ''
+                            }
+                        ],
                         request: {
-                            data: [{
-                                key: "",
-                                value: "",
-                                desc: "",
-                                type: 1
-                            }],
-                            params: [{
-                                key: "",
-                                value: "",
-                                desc: "",
-                                type: 1
-                            }],
+                            data: [
+                                {
+                                    key: '',
+                                    value: '',
+                                    desc: '',
+                                    type: 1
+                                }
+                            ],
+                            params: [
+                                {
+                                    key: '',
+                                    value: '',
+                                    desc: '',
+                                    type: 1
+                                }
+                            ],
                             json_data: ''
                         },
-                        validate: [{
-                            expect: "",
-                            actual: "",
-                            comparator: "equals",
-                            type: 1
-                        }],
-                        variables: [{
-                            key: "",
-                            value: "",
-                            desc: "",
-                            type: 1
-                        }],
-                        extract: [{
-                            key: "",
-                            value: "",
-                            desc: ""
-                        }],
-                        hooks: [{
-                            setup: "",
-                            teardown: ""
-                        }]
+                        validate: [
+                            {
+                                expect: '',
+                                actual: '',
+                                comparator: 'equals',
+                                type: 1
+                            }
+                        ],
+                        variables: [
+                            {
+                                key: '',
+                                value: '',
+                                desc: '',
+                                type: 1
+                            }
+                        ],
+                        extract: [
+                            {
+                                key: '',
+                                value: '',
+                                desc: ''
+                            }
+                        ],
+                        hooks: [
+                            {
+                                setup: '',
+                                teardown: ''
+                            }
+                        ]
                     }
-                };
+                }
             }
-        },
+        }
     },
     data() {
         const YAPIformDataDefaultValue = '请到项目详情编辑'
@@ -383,24 +391,27 @@ export default {
             move: false,
             response: '',
             nodeForm: {
-                name: '',
+                name: ''
             },
             rules: {
-                yapi_base_url: [{
-                    required: true,
-                    message: 'yapi的openapi url',
-                    trigger: 'blur'
-                }],
-                yapi_openapi_token: [{
-                    required: true,
-                    message: 'yapi的openapi token',
-                    trigger: 'blur'
-                }],
-                name: [
-                    {required: true, message: '请输入节点名称', trigger: 'blur'},
-                    {min: 1, max: 50, message: '最多不超过50个字符', trigger: 'blur'}
+                yapi_base_url: [
+                    {
+                        required: true,
+                        message: 'yapi的openapi url',
+                        trigger: 'blur'
+                    }
                 ],
-
+                yapi_openapi_token: [
+                    {
+                        required: true,
+                        message: 'yapi的openapi token',
+                        trigger: 'blur'
+                    }
+                ],
+                name: [
+                    { required: true, message: '请输入节点名称', trigger: 'blur' },
+                    { min: 1, max: 50, message: '最多不超过50个字符', trigger: 'blur' }
+                ]
             },
             radio: '根节点',
             addAPIFlag: false,
@@ -423,58 +434,35 @@ export default {
             YAPIformDataDefaultValue: YAPIformDataDefaultValue,
             YAPIformData: {
                 yapi_base_url: YAPIformDataDefaultValue,
-                yapi_openapi_token: YAPIformDataDefaultValue,
-            },
+                yapi_openapi_token: YAPIformDataDefaultValue
+            }
         }
     },
     methods: {
         handleDragEnd() {
-            this.updateTree(false);
+            this.updateTree(false)
         },
         handleAddSuccess() {
-            this.rigEnv = '';
-            this.visibleTag = '';
-            this.back = !this.back;
-            this.addAPIFlag = false;
-            this.isSaveAs = false;
+            this.rigEnv = ''
+            this.visibleTag = ''
+            this.back = !this.back
+            this.addAPIFlag = false
+            this.isSaveAs = false
         },
 
         handleAPI(response) {
-            this.addAPIFlag = true;
-            this.response = response;
-            this.isSaveAs = true;
+            this.addAPIFlag = true
+            this.response = response
+            this.isSaveAs = true
         },
 
         handleChangePage(val) {
-            this.listCurrentPage = val;
-        },
-
-        getTree() {
-            this.$api.getTree(this.$route.params.id, {params: {type: 1}}).then(resp => {
-                this.dataTree = resp['tree'];
-                this.treeId = resp['id'];
-                this.maxId = resp['max'];
-            })
-        },
-        getConfig() {
-            this.$api.getAllConfig(this.$route.params.id).then(resp => {
-                this.configOptions = resp;
-                this.configOptions.unshift({
-                    name: '请选择'
-                });
-                const _config = this.configOptions.filter(item => item.is_default === true);
-                if (_config.length) {
-                    this.currentConfig = _config[0]
-                } else {
-                    this.currentConfig = '请选择'
-                }
-            });
-
+            this.listCurrentPage = val
         },
 
         getHost() {
             this.$api.getAllHost(this.$route.params.id).then(resp => {
-                this.hostOptions = resp;
+                this.hostOptions = resp
                 this.hostOptions.push({
                     name: '请选择'
                 })
@@ -482,19 +470,21 @@ export default {
         },
 
         updateTree(mode) {
-            this.$api.updateTree(this.treeId, {
-                body: this.dataTree,
-                node: this.currentNode.id,
-                mode: mode,
-                type: 1
-            }).then(resp => {
-                if (resp['success']) {
-                    this.dataTree = resp['data']['tree'];
-                    this.maxId = resp['data']['max'];
-                } else {
-                    this.$message.error(resp['msg']);
-                }
-            })
+            this.$api
+                .updateTree(this.treeId, {
+                    body: this.dataTree,
+                    node: this.currentNode.id,
+                    mode: mode,
+                    type: 1
+                })
+                .then(resp => {
+                    if (resp['success']) {
+                        this.dataTree = resp['data']['tree']
+                        this.maxId = resp['data']['max']
+                    } else {
+                        this.$message.error(resp['msg'])
+                    }
+                })
         },
 
         deleteNode(node) {
@@ -504,16 +494,15 @@ export default {
                 type: 'warning'
             }).then(() => {
                 if (this.currentNode === '') {
-                    this.$message.info('请选择一个节点');
+                    this.$message.info('请选择一个节点')
                 } else {
                     if (this.currentNode.children.length !== 0) {
-                        this.$message.warning('此节点有子节点，不可删除！');
+                        this.$message.warning('此节点有子节点，不可删除！')
                     } else {
-                        this.remove(this.currentNode, this.data);
-                        this.updateTree(true);
+                        this.remove(this.currentNode, this.data)
+                        this.updateTree(true)
                     }
                 }
-
             })
         },
 
@@ -524,61 +513,60 @@ export default {
                 inputPattern: /\S/,
                 inputErrorMessage: '节点名称不能为空',
                 inputValue: nodeObj.label
-            }).then(({value}) => {
-                const parent = this.data.parent;
-                const children = parent.data.children || parent.data;
-                const index = children.findIndex(d => d.id === this.currentNode.id);
-                children[index]["label"] = value
-                this.updateTree(false);
-            });
+            }).then(({ value }) => {
+                const parent = this.data.parent
+                const children = parent.data.children || parent.data
+                const index = children.findIndex(d => d.id === this.currentNode.id)
+                children[index]['label'] = value
+                this.updateTree(false)
+            })
         },
 
-
         handleConfirm(formName) {
-            console.log(formName);
-            this.$refs[formName].validate((valid) => {
+            console.log(formName)
+            this.$refs[formName].validate(valid => {
                 if (valid) {
-                    this.append(this.currentNode);
-                    this.updateTree(false);
-                    this.dialogVisible = false;
+                    this.append(this.currentNode)
+                    this.updateTree(false)
+                    this.dialogVisible = false
                     this.nodeForm.name = ''
                 }
-            });
+            })
         },
 
         handleNodeClick(node, data) {
             // 点击分节点之前,先把页码设置为1.2019年7月2日,并且传给子组件.
-            this.listCurrentPage = 1;
-            this.visibleTag = '';
-            this.addAPIFlag = false;
-            this.isSaveAs = false;
-            this.currentNode = node;
-            this.data = data;
-            this.rigEnv = '';
+            this.listCurrentPage = 1
+            this.visibleTag = ''
+            this.addAPIFlag = false
+            this.isSaveAs = false
+            this.currentNode = node
+            this.data = data
+            this.rigEnv = ''
         },
 
         filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
+            if (!value) return true
+            return data.label.indexOf(value) !== -1
         },
 
         remove(data, node) {
-            const parent = node.parent;
-            const children = parent.data.children || parent.data;
-            const index = children.findIndex(d => d.id === data.id);
-            children.splice(index, 1);
+            const parent = node.parent
+            const children = parent.data.children || parent.data
+            const index = children.findIndex(d => d.id === data.id)
+            children.splice(index, 1)
         },
 
         append(data) {
-            const newChild = {id: ++this.maxId, label: this.nodeForm.name, children: []};
+            const newChild = { id: ++this.maxId, label: this.nodeForm.name, children: [] }
             if (data === '' || this.dataTree.length === 0 || this.radio === '根节点') {
-                this.dataTree.push(newChild);
+                this.dataTree.push(newChild)
                 return
             }
             if (!data.children) {
-                this.$set(data, 'children', []);
+                this.$set(data, 'children', [])
             }
-            data.children.push(newChild);
+            data.children.push(newChild)
         },
 
         handleBackList() {
@@ -587,7 +575,7 @@ export default {
         },
 
         getYapiInfo() {
-            const pk = this.$route.params.id;
+            const pk = this.$route.params.id
             this.$api.getProjectYapiInfo(pk).then(res => {
                 this.projectInfo = res
                 if (res.yapi_base_url !== '') {
@@ -599,15 +587,15 @@ export default {
             })
         },
         mouseenter(node) {
-            this.mouseNodeId = node.id;
+            this.mouseNodeId = node.id
         },
-        mouseleave(){
-            this.mouseNodeId = -1;
+        mouseleave() {
+            this.mouseNodeId = -1
         },
         handleConfirmYAPI() {
             this.$refs['elForm'].validate(valid => {
                 if (!valid) return
-                const project_id = this.$route.params.id;
+                const project_id = this.$route.params.id
                 this.$message.info({
                     title: '提示',
                     message: '如果是首次导入，可能时间稍长，请耐心等待~',
@@ -616,25 +604,25 @@ export default {
                 this.importYAPIdialogVisible = false
                 this.$api.addYAPI(project_id).then(resp => {
                     if (resp.success) {
-                        let created =  "新增：" + resp.createdCount + " 条API"
-                        let updated = "更新：" + resp.updatedCount  + " 条API"
-                        if (resp.createdCount > 0 || resp.updatedCount > 0){
+                        let created = '新增：' + resp.createdCount + ' 条API'
+                        let updated = '更新：' + resp.updatedCount + ' 条API'
+                        if (resp.createdCount > 0 || resp.updatedCount > 0) {
                             this.$notify.success({
-                            title: '导入API提示',
-                            message: created + " ；" + updated,
-                            duration: this.$store.state.duration
+                                title: '导入API提示',
+                                message: created + ' ；' + updated,
+                                duration: this.$store.state.duration
                             })
                         }
                         const NOT_CREATED_AND_UPDATED_CODE = '0002'
-                        if (resp.code === NOT_CREATED_AND_UPDATED_CODE){
+                        if (resp.code === NOT_CREATED_AND_UPDATED_CODE) {
                             this.$notify.success({
-                            title: '导入API提示',
-                            message: resp.msg,
-                            duration: this.$store.state.duration
+                                title: '导入API提示',
+                                message: resp.msg,
+                                duration: this.$store.state.duration
                             })
                         }
                         const CREATED_OR_UPDATED_CODE = '0001'
-                        if (resp.code === CREATED_OR_UPDATED_CODE){
+                        if (resp.code === CREATED_OR_UPDATED_CODE) {
                             this.getTree()
                             // 重置tree节点，触发子组件更新apiList
                             // TODO 改成直接调用子组件的getAPIList方法
@@ -650,15 +638,20 @@ export default {
                     }
                 })
             })
-        },
-
+        }
     },
-    name: "RecordApi",
+    name: 'RecordApi',
     mounted() {
-        this.getTree();
-        this.getConfig();
-        this.getHost();
-        this.getYapiInfo();
+        this.getTree(resp => {
+            this.treeId = resp['id']
+            this.maxId = resp['max']
+        })
+        this.getConfig({
+            addPlaceholder: true,
+            setDefaultConfig: true
+        })
+        this.getHost()
+        this.getYapiInfo()
     }
 }
 </script>
diff --git a/web/src/pages/fastrunner/api/components/ApiList.vue b/web/src/pages/fastrunner/api/components/ApiList.vue
index 6fab1fb..7f57281 100644
--- a/web/src/pages/fastrunner/api/components/ApiList.vue
+++ b/web/src/pages/fastrunner/api/components/ApiList.vue
@@ -338,8 +338,11 @@
 
 <script>
 import Report from '../../../reports/DebugReport'
+import apiListMixin from '@/mixins/apiListMixin';
+
 
 export default {
+    mixins: [apiListMixin],
     components: {
         Report
     },
@@ -653,27 +656,6 @@ export default {
         toggleClear() {
             this.$refs.multipleTable.clearSelection();
         },
-        // 查询api列表
-        getAPIList() {
-            // debugger
-            this.$nextTick(() => {
-                this.$api.apiList({
-                    params: {
-                        page: this.listCurrentPage,
-                        node: this.node,
-                        project: this.project,
-                        search: this.search,
-                        tag: this.visibleTag,
-                        rigEnv: this.rigEnv,
-                        onlyMe: this.onlyMe,
-                        showYAPI: this.showYAPI
-                    }
-                }).then(res => {
-                    this.apiData = res;
-                })
-            })
-        },
-
 
         handleCurrentChange(val) {
             this.$api.getPaginationBypage({
diff --git a/web/src/pages/fastrunner/case/AutoTest.vue b/web/src/pages/fastrunner/case/AutoTest.vue
index df1fd85..572333b 100644
--- a/web/src/pages/fastrunner/case/AutoTest.vue
+++ b/web/src/pages/fastrunner/case/AutoTest.vue
@@ -250,8 +250,10 @@
 <script>
 import EditTest from './components/EditTest'
 import TestList from './components/TestList'
+import configMixin from "@/mixins/configMixin";
 
 export default {
+    mixins: [configMixin],
     computed: {
         buttonActivate: {
             get: function () {
@@ -314,14 +316,6 @@ export default {
         handleDragEnd() {
             this.updateTree(false);
         },
-        getConfig() {
-            this.$api.getAllConfig(this.$route.params.id).then(resp => {
-                this.configOptions = resp;
-                this.configOptions.push({
-                    name: '请选择'
-                })
-            })
-        },
 
         handleBackList() {
             this.addTestActivate = true;
diff --git a/web/src/pages/fastrunner/case/components/EditTest.vue b/web/src/pages/fastrunner/case/components/EditTest.vue
index 53d2422..cebe5c0 100644
--- a/web/src/pages/fastrunner/case/components/EditTest.vue
+++ b/web/src/pages/fastrunner/case/components/EditTest.vue
@@ -22,12 +22,12 @@
                         :filter-node-method="filterNode"
                         ref="tree2"
                     >
-            <span class="custom-tree-node" slot-scope="{ node, data }">
-              <span>
-                <i class="iconfont" v-html="expand"></i>
-                &nbsp;&nbsp;{{ node.label }}
-              </span>
-            </span>
+                        <span class="custom-tree-node" slot-scope="{ node, data }">
+                            <span>
+                                <i class="iconfont" v-html="expand"></i>
+                                &nbsp;&nbsp;{{ node.label }}
+                            </span>
+                        </span>
                     </el-tree>
                 </div>
             </div>
@@ -35,18 +35,20 @@
 
         <el-main>
             <div v-show="!editTestStepActivate" class="recordapi__header">
-                <div class="recordapi__header" :style="{flex:1}">
+                <div class="recordapi__header" :style="{ flex: 1 }">
                     <div class="recordapi__header--item">
-                        <el-input placeholder="请输入接口名称" style="width: 350px; text-align: center" clearable
-                                  @input="inputVal" :value="search" @keyup.enter.native="getAPIList">
+                        <el-input
+                            placeholder="请输入接口名称"
+                            style="width: 350px; text-align: center"
+                            clearable
+                            @input="inputVal"
+                            :value="search"
+                            @keyup.enter.native="getAPIList"
+                        >
                         </el-input>
                     </div>
                     <div class="recordapi__header--item">
-                        <el-button
-                            type="primary"
-                            @click="resetSearch"
-                        >重置
-                        </el-button>
+                        <el-button type="primary" @click="resetSearch">重置 </el-button>
                     </div>
 
                     <div class="recordapi__header--item">
@@ -64,16 +66,18 @@
                         </el-dropdown>
                     </div>
                     <div class="recordapi__header--item">
-                        <el-select v-model="selectUser" placeholder="创建人" filterable
-                                   :style="{width: '120px'}">
-                            <el-option v-for="(item, index) in users" :key="index"
-                                       :label="item.label"
-                                       :value="item.value" :disabled="item.disabled"></el-option>
+                        <el-select v-model="selectUser" placeholder="创建人" filterable :style="{ width: '120px' }">
+                            <el-option
+                                v-for="(item, index) in users"
+                                :key="index"
+                                :label="item.label"
+                                :value="item.value"
+                                :disabled="item.disabled"
+                            ></el-option>
                         </el-select>
                     </div>
-
                 </div>
-                <div class="recordapi__header" :style="{flex:1}">
+                <div class="recordapi__header" :style="{ flex: 1 }">
                     <div class="recordapi__header--item">
                         <el-input
                             style="width: 500px; text-align: center"
@@ -83,13 +87,12 @@
                             v-if="testData.length > 0"
                         >
                             <el-select v-model="testTag" slot="prepend" placeholder="请选择" style="width: 105px">
-
                                 <el-option
-                                    v-for="value in tagOptions" :key="value"
+                                    v-for="value in tagOptions"
+                                    :key="value"
                                     :label="value"
                                     :value="value"
                                 ></el-option>
-
                             </el-select>
                         </el-input>
                     </div>
@@ -98,18 +101,13 @@
                         slot="append"
                         type="success"
                         @click="handleClickSave"
-                        :title="disabledSave ? '不能修改其他人的用例': '保存用例'"
+                        :title="disabledSave ? '不能修改其他人的用例' : '保存用例'"
                         :disabled="disabledSave"
-                    >Save
+                        >Save
                     </el-button>
 
                     <div class="recordapi__header--item">
-                        <el-button
-                            type="primary"
-                            v-loading="suite_loading"
-                            @click="handleClickRun"
-                        >Send
-                        </el-button>
+                        <el-button type="primary" v-loading="suite_loading" @click="handleClickRun">Send </el-button>
                     </div>
                 </div>
             </div>
@@ -118,70 +116,63 @@
                 <el-row :gutter="20">
                     <el-col :span="12">
                         <div
-                            v-for="(item,index) in apiData.results"
-                            draggable='true'
+                            v-for="(item, index) in apiData.results"
+                            draggable="true"
                             @dragstart="currentAPI = JSON.parse(JSON.stringify(item))"
                             style="cursor: pointer; margin-top: 10px; overflow: auto;"
                             :key="index"
-
                         >
                             <!--编辑用例时的API列表-->
                             <div class="block edit__block" :class="`block_${item.method.toLowerCase()}`">
-                                    <span class="block-method block_method_color"
-                                          :class="`block_method_${item.method.toLowerCase()}`">
-                                        {{ item.method.toUpperCase() }}
-                                    </span>
-                                <span class="block-method block_method_color block_method_options"
-                                      v-if="item.creator==='yapi'"
-                                      :title="'从YAPI导入的接口'">
-                                            YAPI
-                                    </span>
+                                <span
+                                    class="block-method block_method_color"
+                                    :class="`block_method_${item.method.toLowerCase()}`"
+                                >
+                                    {{ item.method.toUpperCase() }}
+                                </span>
+                                <span
+                                    class="block-method block_method_color block_method_options"
+                                    v-if="item.creator === 'yapi'"
+                                    :title="'从YAPI导入的接口'"
+                                >
+                                    YAPI
+                                </span>
 
                                 <div class="edit__block--inner">
                                     <span class="block-method block_url">{{ item.url }}</span>
                                     <span class="block-summary-description">{{ item.name }}</span>
                                 </div>
                                 <div>
-                                       <span class="el-icon-s-flag"
-                                             v-if="item.cases.length > 0 "
-                                             :title="'API已经被用例引用,共计: ' + item.cases.length + '次'">
-                                       </span>
+                                    <span
+                                        class="el-icon-s-flag"
+                                        v-if="item.cases.length > 0"
+                                        :title="'API已经被用例引用,共计: ' + item.cases.length + '次'"
+                                    >
+                                    </span>
                                 </div>
                             </div>
-
-
                         </div>
-
                     </el-col>
                     <el-col :span="12" class="el-col">
-                        <el-dialog
-                            v-if="dialogTableVisible"
-                            :visible.sync="dialogTableVisible"
-                            width="70%"
-                        >
+                        <el-dialog v-if="dialogTableVisible" :visible.sync="dialogTableVisible" width="70%">
                             <report :summary="summary"></report>
                         </el-dialog>
 
-                        <div style="max-height: 1000px; overflow: auto"
-                             @drop='drop($event)'
-                             @dragover='allowDrop($event)'
+                        <div
+                            style="max-height: 1000px; overflow: auto"
+                            @drop="drop($event)"
+                            @dragover="allowDrop($event)"
                         >
-                            <div class='test-list'>
-                                <span
-                                    v-if="testData.length ===0"
-                                    style="color: red">温馨提示：<br/>选择左侧相应API节点显示可拖拽的API<br/>从左边拖拽API至此区域组成业务用例<br/>
+                            <div class="test-list">
+                                <span v-if="testData.length === 0" style="color: red"
+                                    >温馨提示：<br />选择左侧相应API节点显示可拖拽的API<br />从左边拖拽API至此区域组成业务用例<br />
                                     上下拖动此区域接口调整接口调用顺序
                                 </span>
-                                <div
-                                    v-if="isConfigExist"
-                                    class="block block_test"
-                                    @mousemove="currentTest = -1"
-                                >
-                                    <span
-                                        class="block-method block_method_config block_method_color">{{
-                                            testData[0].body.method
-                                        }}</span>
-                                    <input class="block-test-name" v-model="testData[0].body.name" disabled/>
+                                <div v-if="isConfigExist" class="block block_test" @mousemove="currentTest = -1">
+                                    <span class="block-method block_method_config block_method_color">{{
+                                        testData[0].body.method
+                                    }}</span>
+                                    <input class="block-test-name" v-model="testData[0].body.name" disabled />
 
                                     <el-button
                                         style="position: absolute; right: 12px; top: 8px"
@@ -189,7 +180,8 @@
                                         type="danger"
                                         icon="el-icon-delete"
                                         title="删除"
-                                        circle size="mini"
+                                        circle
+                                        size="mini"
                                         @click="testData.splice(index, 1)"
                                     >
                                     </el-button>
@@ -198,7 +190,7 @@
                                     v-model="testData"
                                     @end="dragEnd"
                                     @start="length = testData.length"
-                                    :options="{animation:200}"
+                                    :options="{ animation: 200 }"
                                 >
                                     <div
                                         v-for="(test, index) in testData"
@@ -207,12 +199,10 @@
                                         @mousemove="currentTest = index"
                                         v-if="test.body.method !== 'config'"
                                     >
-                                        <span
-                                            class="block-method block_method_test block_method_color">Step_{{index}}</span>
-                                        <input class="block-test-name"
-                                               v-model="test.body.name"
-                                        />
-
+                                        <span class="block-method block_method_test block_method_color"
+                                            >Step_{{ index }}</span
+                                        >
+                                        <input class="block-test-name" v-model="test.body.name" />
 
                                         <el-button
                                             style="position: absolute; right: 156px; top: 8px"
@@ -220,7 +210,8 @@
                                             type="info"
                                             icon="el-icon-edit"
                                             title="编辑"
-                                            circle size="mini"
+                                            circle
+                                            size="mini"
                                             @click="editTestStepActivate = true"
                                         >
                                         </el-button>
@@ -230,7 +221,8 @@
                                             v-show="currentTest === index"
                                             type="success"
                                             icon="el-icon-caret-right"
-                                            circle size="mini"
+                                            circle
+                                            size="mini"
                                             title="单个运行"
                                             @click="handleSingleRun()"
                                         >
@@ -241,20 +233,21 @@
                                             v-show="currentTest === index"
                                             type="primary"
                                             icon="el-icon-caret-right"
-                                            circle size="mini"
+                                            circle
+                                            size="mini"
                                             title="运行开始到当前位置的所有api"
                                             @click="handlePartialRun(index)"
                                         >
                                         </el-button>
 
-
                                         <el-button
                                             style="position: absolute; right: 120px; top: 8px"
                                             v-show="currentTest === index"
                                             type="danger"
                                             icon="el-icon-document-copy"
                                             title="复制当前步骤"
-                                            circle size="mini"
+                                            circle
+                                            size="mini"
                                             @click="handleCopyStep(index)"
                                         >
                                         </el-button>
@@ -265,14 +258,14 @@
                                             type="danger"
                                             icon="el-icon-delete"
                                             title="删除"
-                                            circle size="mini"
+                                            circle
+                                            size="mini"
                                             @click="testData.splice(index, 1)"
                                         >
                                         </el-button>
                                     </div>
                                 </draggable>
                             </div>
-
                         </div>
                     </el-col>
                 </el-row>
@@ -302,18 +295,18 @@
             >
             </http-runner>
         </el-main>
-
     </el-container>
-
-
 </template>
 
 <script>
 import draggable from 'vuedraggable'
 import HttpRunner from './TestBody'
 import Report from '../../../reports/DebugReport'
+import treeMixin from '@/mixins/treeMixin'
+import apiListMixin from '@/mixins/apiListMixin'
 
 export default {
+    mixins: [treeMixin, apiListMixin],
     components: {
         draggable,
         HttpRunner,
@@ -322,10 +315,14 @@ export default {
     computed: {
         isConfigExist: {
             get() {
-                if (this.testData.length > 0 && this.testData[0].body.method === "config" && this.testData[0].body.name !== '请选择') {
-                    return true;
+                if (
+                    this.testData.length > 0 &&
+                    this.testData[0].body.method === 'config' &&
+                    this.testData[0].body.name !== '请选择'
+                ) {
+                    return true
                 }
-                return false;
+                return false
             }
         }
     },
@@ -355,46 +352,43 @@ export default {
         }
     },
 
-    name: "EditTest",
+    name: 'EditTest',
     watch: {
         config() {
-
-            const temp = {body: {name: this.config, method: 'config'}};
+            const temp = { body: { name: this.config, method: 'config' } }
             if ((this.testData.length === 0 || this.testData[0].body.method !== 'config') && this.config !== '请选择') {
                 this.testData.splice(0, 0, temp)
             } else {
                 if (this.config !== '请选择') {
                     this.testData.splice(0, 1, temp)
                 }
-
             }
-
         },
         back() {
             if (this.back) {
-                this.testId = ""
-                this.testName = ""
+                this.testId = ''
+                this.testName = ''
                 this.testData = []
             }
-            this.editTestStepActivate = false;
+            this.editTestStepActivate = false
         },
 
         filterText(val) {
-            this.$refs.tree2.filter(val);
+            this.$refs.tree2.filter(val)
         },
 
         testStepResp() {
             this.handleSavePermission()
             try {
-                this.testName = this.testStepResp.case.name;
-                this.testId = this.testStepResp.case.id;
-                this.testTag = this.testStepResp.case.tag;
-                this.relation = this.testStepResp.case.relation;
+                this.testName = this.testStepResp.case.name
+                this.testId = this.testStepResp.case.id
+                this.testTag = this.testStepResp.case.tag
+                this.relation = this.testStepResp.case.relation
                 this.testData = JSON.parse(JSON.stringify(this.testStepResp.step))
             } catch (e) {
-                this.testName = '';
-                this.testId = '';
-                this.testTag = '集成用例';
+                this.testName = ''
+                this.testId = ''
+                this.testTag = '集成用例'
                 this.testData = JSON.parse(JSON.stringify(this.testStepResp))
             }
         },
@@ -404,7 +398,7 @@ export default {
         },
         selectUser() {
             this.getAPIList()
-        },
+        }
     },
 
     data() {
@@ -413,7 +407,7 @@ export default {
                 1: '冒烟用例',
                 2: '集成用例',
                 3: '监控脚本',
-                4: '核心用例',
+                4: '核心用例'
             },
             isSuperuser: this.$store.state.is_superuser,
             userName: this.$store.state.user,
@@ -443,7 +437,7 @@ export default {
 
             testData: [],
             selectUser: this.$store.state.user,
-            users: [],
+            users: []
             // rigEnv: ''
         }
     },
@@ -466,21 +460,21 @@ export default {
         },
 
         handleNewBody(body, newBody) {
-            this.editTestStepActivate = false;
-            const step = this.testData[this.currentTest].case;
-            const id = this.testData[this.currentTest].id;
+            this.editTestStepActivate = false
+            const step = this.testData[this.currentTest].case
+            const id = this.testData[this.currentTest].id
             this.testData[this.currentTest] = {
                 body: body,
                 newBody: newBody,
                 case: step,
                 id: id
-            };
+            }
             // 编辑用例步骤时，也调用接口保存
             this.handleClickSave(false)
         },
         rigEnvChangeHandle(command) {
-            this.$emit('update:rigEnv', command);
-            this.getAPIList();
+            this.$emit('update:rigEnv', command)
+            this.getAPIList()
         },
         validateData() {
             if (this.testName === '' || this.testName.length > 100) {
@@ -488,7 +482,7 @@ export default {
                     title: '提示',
                     duration: this.$store.state.duration,
                     message: '用例集名称必填，不能超过100个字符'
-                });
+                })
                 return false
             }
 
@@ -497,247 +491,234 @@ export default {
                     title: '提示',
                     duration: this.$store.state.duration,
                     message: '测试用例集至少包含一个接口'
-                });
+                })
                 return false
             }
 
-            if (this.testData[0].body.method === "config" && this.testData.length === 1) {
+            if (this.testData[0].body.method === 'config' && this.testData.length === 1) {
                 this.$notify.warning({
                     title: '提示',
                     duration: this.$store.state.duration,
                     message: '测试用例集至少包含一个接口'
-                });
+                })
                 return false
             }
 
-            if (this.testData[0].body.name === "请选择" || this.testData[0].body.method !== "config") {
+            if (this.testData[0].body.name === '请选择' || this.testData[0].body.method !== 'config') {
                 this.$notify.warning({
                     title: '提示',
                     duration: this.$store.state.duration,
                     message: '请先在左上角选择配置后，再运行用例哦~'
-                });
+                })
                 return false
             }
 
-            return true;
+            return true
         },
 
         addTestSuite(addTestFinish) {
-            var length = this.testData.length;
+            var length = this.testData.length
 
-            if (this.testData[0].body.method === "config") {
-                length -= 1;
+            if (this.testData[0].body.method === 'config') {
+                length -= 1
             }
 
-            this.$api.addTestCase({
-                length: length,
-                project: this.project,
-                relation: this.node,
-                name: this.testName,
-                body: this.testData,
-                tag: this.testTag
-            }).then(resp => {
-                if (resp.success) {
-                    this.testId = resp.test_id
-                    if (addTestFinish) {
-                        this.$emit("addSuccess");
+            this.$api
+                .addTestCase({
+                    length: length,
+                    project: this.project,
+                    relation: this.node,
+                    name: this.testName,
+                    body: this.testData,
+                    tag: this.testTag
+                })
+                .then(resp => {
+                    if (resp.success) {
+                        this.testId = resp.test_id
+                        if (addTestFinish) {
+                            this.$emit('addSuccess')
+                        }
+                        this.$notify({
+                            message: resp.msg,
+                            type: 'success',
+                            duration: this.$store.state.duration
+                        })
+                    } else {
+                        this.$notify({
+                            message: resp.msg,
+                            type: 'error',
+                            duration: this.$store.state.duration
+                        })
                     }
-                    this.$notify({
-                        message: resp.msg,
-                        type: 'success',
-                        duration: this.$store.state.duration
-                    })
-                } else {
-                    this.$notify({
-                        message: resp.msg,
-                        type: 'error',
-                        duration: this.$store.state.duration
-                    });
-                }
-            })
+                })
         },
 
-        updateTestSuite(addTestFinish, refresh=false) {
-            var length = this.testData.length;
-            if (this.testData[0].body.method === "config") {
-                length -= 1;
+        updateTestSuite(addTestFinish, refresh = false) {
+            var length = this.testData.length
+            if (this.testData[0].body.method === 'config') {
+                length -= 1
             }
-            this.$api.updateTestCase(this.testId, {
-                length: length,
-                name: this.testName,
-                tag: this.testTag,
-                body: this.testData,
-                project: this.project,
-                relation: this.relation
-            }).then(resp => {
-                // 刷新用例步骤
-                // 注意需要等到用例已经更新完成后
-                if(refresh){
-                    this.refreshStep()
-                }
-                if (resp.success) {
-                    if (addTestFinish) {
-                        this.$emit("addSuccess")
+            this.$api
+                .updateTestCase(this.testId, {
+                    length: length,
+                    name: this.testName,
+                    tag: this.testTag,
+                    body: this.testData,
+                    project: this.project,
+                    relation: this.relation
+                })
+                .then(resp => {
+                    // 刷新用例步骤
+                    // 注意需要等到用例已经更新完成后
+                    if (refresh) {
+                        this.refreshStep()
                     }
-                    this.$notify({
-                        message: resp.msg,
-                        type: 'success',
-                        duration: this.$store.state.duration
-                    })
-                } else {
-                    this.$notify({
-                        message: resp.msg,
-                        type: 'error',
-                        duration: this.$store.state.duration
-                    });
-                }
-            })
+                    if (resp.success) {
+                        if (addTestFinish) {
+                            this.$emit('addSuccess')
+                        }
+                        this.$notify({
+                            message: resp.msg,
+                            type: 'success',
+                            duration: this.$store.state.duration
+                        })
+                    } else {
+                        this.$notify({
+                            message: resp.msg,
+                            type: 'error',
+                            duration: this.$store.state.duration
+                        })
+                    }
+                })
         },
 
         handleClickSave(addTestFinish = true) {
             if (this.validateData()) {
                 if (this.testId === '') {
-                    this.addTestSuite(addTestFinish);
+                    this.addTestSuite(addTestFinish)
                 } else {
-                    this.updateTestSuite(addTestFinish);
+                    this.updateTestSuite(addTestFinish)
                 }
             }
         },
         // 全部运行
         handleClickRun() {
             if (this.validateData()) {
-                this.suite_loading = true;
-                this.$api.runSingleTestSuite({
-                    host: this.host,
-                    name: this.testName,
-                    body: this.testData,
-                    project: this.project
-                }).then(resp => {
-                    this.suite_loading = false;
-                    this.summary = resp;
-                    this.dialogTableVisible = true;
-                }).catch(resp => {
-                    this.suite_loading = false;
-                })
+                this.suite_loading = true
+                this.$api
+                    .runSingleTestSuite({
+                        host: this.host,
+                        name: this.testName,
+                        body: this.testData,
+                        project: this.project
+                    })
+                    .then(resp => {
+                        this.suite_loading = false
+                        this.summary = resp
+                        this.dialogTableVisible = true
+                    })
+                    .catch(resp => {
+                        this.suite_loading = false
+                    })
             }
         },
         handlePartialRun(index) {
             if (this.validateData()) {
-                this.suite_loading = true;
-                this.$api.runSingleTestSuite({
-                    host: this.host,
-                    name: this.testName,
-                    body: this.testData.slice(0, index + 1),
-                    project: this.project
-                }).then(resp => {
-                    this.suite_loading = false;
-                    this.summary = resp;
-                    this.dialogTableVisible = true;
-                }).catch(resp => {
-                    this.suite_loading = false;
-                })
+                this.suite_loading = true
+                this.$api
+                    .runSingleTestSuite({
+                        host: this.host,
+                        name: this.testName,
+                        body: this.testData.slice(0, index + 1),
+                        project: this.project
+                    })
+                    .then(resp => {
+                        this.suite_loading = false
+                        this.summary = resp
+                        this.dialogTableVisible = true
+                    })
+                    .catch(resp => {
+                        this.suite_loading = false
+                    })
             }
-
         },
         // 单个运行
         handleSingleRun() {
-            this.loading = true;
-            var config = null;
-            if (this.testData.length > 0 && this.testData[0].body.method === "config") {
-                config = this.testData[0].body;
+            this.loading = true
+            var config = null
+            if (this.testData.length > 0 && this.testData[0].body.method === 'config') {
+                config = this.testData[0].body
             }
-            this.$api.runSingleTest({
-                host: this.host,
-                config: config,
-                body: this.testData[this.currentTest],
-                project: this.project
-            }).then(resp => {
-                this.loading = false;
-                this.summary = resp;
-                this.dialogTableVisible = true;
-            }).catch(resp => {
-                this.loading = false;
-            })
+            this.$api
+                .runSingleTest({
+                    host: this.host,
+                    config: config,
+                    body: this.testData[this.currentTest],
+                    project: this.project
+                })
+                .then(resp => {
+                    this.loading = false
+                    this.summary = resp
+                    this.dialogTableVisible = true
+                })
+                .catch(resp => {
+                    this.loading = false
+                })
         },
 
         handlePageChange(val) {
-            this.$api.getPaginationBypage({
-                params: {
-                    page: this.currentPage,
-                    node: this.currentNode,
-                    project: this.project,
-                    tag: this.tag,
-                    rigEnv: this.rigEnv,
-                    search: this.search
-                }
-            }).then(res => {
-                this.apiData = res;
-            })
-        },
-
-        //  接口状态搜索
-        tagChangeHandle(command) {
-            // this.tag = command
-            this.$emit('update:tag', command);
-            this.$nextTick(() => {
-                this.$api.apiList({
+            this.$api
+                .getPaginationBypage({
                     params: {
+                        page: this.currentPage,
                         node: this.currentNode,
                         project: this.project,
                         tag: this.tag,
                         rigEnv: this.rigEnv,
                         search: this.search
                     }
-                }).then(res => {
-                    this.apiData = res;
                 })
-            })
-        },
-        resetSearch() {
-            this.selectUser = this.$store.state.user,
-            this.currentNode = '',
-            this.$emit('update:search', '');
-            this.$emit('update:tag', '');
-            this.$emit('update:rigEnv', '');
-            this.getAPIList();
-        },
-        getAPIList() {
-            this.$nextTick(() => {
-                this.$api.apiList({
-                    params: {
-                        node: this.currentNode,
-                        project: this.project,
-                        search: this.search,
-                        rigEnv: this.rigEnv,
-                        tag: this.tag,
-                        creator: this.selectUser
-                    }
-                }).then(res => {
-                    this.apiData = res;
+                .then(res => {
+                    this.apiData = res
                 })
-            })
         },
 
-        getTree() {
-            this.$api.getTree(this.$route.params.id, {
-                params: {
-                    type: 1
-                }
-            }).then(resp => {
-                this.dataTree = resp['tree'];
+        //  接口状态搜索
+        tagChangeHandle(command) {
+            // this.tag = command
+            this.$emit('update:tag', command)
+            this.$nextTick(() => {
+                this.$api
+                    .apiList({
+                        params: {
+                            node: this.currentNode,
+                            project: this.project,
+                            tag: this.tag,
+                            rigEnv: this.rigEnv,
+                            search: this.search
+                        }
+                    })
+                    .then(res => {
+                        this.apiData = res
+                    })
             })
         },
+        resetSearch() {
+            ;(this.selectUser = this.$store.state.user), (this.currentNode = ''), this.$emit('update:search', '')
+            this.$emit('update:tag', '')
+            this.$emit('update:rigEnv', '')
+            this.getAPIList()
+        },
 
         handleNodeClick(node, data) {
-            this.currentNode = node.id;
-            this.data = data;
-            this.getAPIList();
-
+            this.currentNode = node.id
+            this.data = data
+            this.getAPIList()
         },
 
         filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
+            if (!value) return true
+            return data.label.indexOf(value) !== -1
         },
 
         dragEnd(event) {
@@ -747,10 +728,10 @@ export default {
         },
 
         drop(event) {
-            event.preventDefault();
+            event.preventDefault()
             // 创建用例时,默认加上config
             if (this.testData.length === 0) {
-                this.testData.push({body: {name: this.config, method: 'config'}})
+                this.testData.push({ body: { name: this.config, method: 'config' } })
             }
             if (this.currentAPI) {
                 this.testData.push(this.currentAPI)
@@ -758,19 +739,18 @@ export default {
             }
         },
         allowDrop(event) {
-            event.preventDefault();
+            event.preventDefault()
         },
         getUserList() {
             this.$api.getUserList().then(resp => {
-                    for (let i = 0; i < resp.length; i++) {
-                        this.users.push({"label": resp[i].username, "value": resp[i].username})
-                    }
-                    this.users.unshift({"label": "所有人", "value": ""})
+                for (let i = 0; i < resp.length; i++) {
+                    this.users.push({ label: resp[i].username, value: resp[i].username })
                 }
-            )
+                this.users.unshift({ label: '所有人', value: '' })
+            })
         },
 
-        refreshStep(){
+        refreshStep() {
             this.$api.editTest(this.testId).then(resp => {
                 this.testData = JSON.parse(JSON.stringify(resp.step))
             })
@@ -778,23 +758,28 @@ export default {
         handleCopyStep(index) {
             let copyStepObj = JSON.parse(JSON.stringify(this.testData[index]))
             copyStepObj.is_copy = true
-            this.testData.splice(index+1,0, copyStepObj)
+            this.testData.splice(index + 1, 0, copyStepObj)
             this.updateTestSuite(false, true)
         }
     },
     mounted() {
-        this.getTree();
-        this.getAPIList();
+        this.getTree()
+        this.getAPIList({
+            node: this.currentNode,
+            tag: this.tag,
+            creator: this.selectUser
+            // 省略了其他继承自mixin或组件的默认参数
+        })
         this.getUserList()
     }
 }
 </script>
 
 <style scoped>
-
 .el-col {
     min-height: 1px;
 }
+
 .test-list {
     height: 750px;
 }
@@ -802,7 +787,7 @@ export default {
 .block_test {
     margin-top: 10px;
     border: 1px solid #49cc90;
-    background-color: rgba(236, 248, 238, .4)
+    background-color: rgba(236, 248, 238, 0.4);
 }
 
 .block_method_test {
@@ -828,8 +813,7 @@ export default {
     color: #3b4151;
     border: none;
     outline: none;
-    background: rgba(236, 248, 238, .4)
-
+    background: rgba(236, 248, 238, 0.4);
 }
 
 .recordapi__header {