From a1d82020ed6b1346b36b2780576ff5677866b7fa Mon Sep 17 00:00:00 2001
From: uctoo <admin@uctoo.com>
Date: Wed, 28 Jul 2021 15:29:26 +0800
Subject: [PATCH] add apimanager module catch-admin-vue files and README doc

---
 catch/apimanager/README.md                    |  95 ++
 catch/apimanager/catch-admin-vue/package.json | 116 +++
 .../catch-admin-vue/src/api/userenv.js        |   7 +
 catch/apimanager/catch-admin-vue/src/main.js  |  48 ++
 .../views/apimanager/apicategory/index.vue    |  44 +
 .../src/views/apimanager/apienv/index.vue     | 270 ++++++
 .../src/views/apimanager/apirun/index.vue     | 659 ++++++++++++++
 .../src/views/apimanager/apirun/itemBtn.vue   | 114 +++
 .../src/views/apimanager/apitester/index.vue  | 816 ++++++++++++++++++
 .../src/views/apimanager/router.js            |   8 +
 10 files changed, 2177 insertions(+)
 create mode 100644 catch/apimanager/README.md
 create mode 100644 catch/apimanager/catch-admin-vue/package.json
 create mode 100644 catch/apimanager/catch-admin-vue/src/api/userenv.js
 create mode 100644 catch/apimanager/catch-admin-vue/src/main.js
 create mode 100644 catch/apimanager/catch-admin-vue/src/views/apimanager/apicategory/index.vue
 create mode 100644 catch/apimanager/catch-admin-vue/src/views/apimanager/apienv/index.vue
 create mode 100644 catch/apimanager/catch-admin-vue/src/views/apimanager/apirun/index.vue
 create mode 100644 catch/apimanager/catch-admin-vue/src/views/apimanager/apirun/itemBtn.vue
 create mode 100644 catch/apimanager/catch-admin-vue/src/views/apimanager/apitester/index.vue
 create mode 100644 catch/apimanager/catch-admin-vue/src/views/apimanager/router.js

diff --git a/catch/apimanager/README.md b/catch/apimanager/README.md
new file mode 100644
index 0000000..59a4f0f
--- /dev/null
+++ b/catch/apimanager/README.md
@@ -0,0 +1,95 @@
+apitester 模块是一个用于API管理、测试的模块。
+
+# 概述
+
+  本模块的设计目标是提供开发人员、产品人员等相关角色，可以管理和测试API，可以将系统内部或外部API信息保存在系统内，使得产品具有自完备的特性和持续交付的特性，并可进行灵活的二次开发。
+  
+## 主要特性
+  
+1.  支持API分类管理，支持自定义用户环境变量，支持API测试用例管理。
+2.  支持HTTP、HTTPS接口测试用例的在线运行。（更多协议支持规划在模块roadmap中）
+3.  支持接口文档管理。
+4.  已集成微信第三方平台相关接口测试用例，开发者可快速进行第三方平台应用开发。
+5.  支持多帐号多应用使用环境，易于团队协作，不限制接口数量、用户数量、请求数量。
+6.  基于catchadmin开发，模块安装简单，使用便捷，支持模块数据导入导出。
+7.  开源开放易于二次开发，测试用例可共享，形成产品API知识库。
+8.  支持私有化部署、云原生部署。
+
+  演示地址：www.uctoo.com 控制台使用demo帐号登录
+  模块使用界面截图：
+  <table>
+      <tr>
+          <td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20category%20list.png"></td>
+      </tr>
+      <tr>
+          <td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20category%20edit.png"></td>
+      </tr>
+      <tr>
+          <td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20user%20env%20list.png"></td>
+      </tr>
+      <tr>
+          <td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20user%20env%20edit.png"></td>
+      </tr>
+      <tr>
+          <td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20test%20case%20list.png"></td>
+      </tr>
+       <tr>
+          <td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/api%20test%20case%20edit.png"></td>
+      </tr>
+      <tr>
+          <td><img src="https://gitee.com/UCT_admin/materials/raw/master/uctoo_apitester/images/apirun.png"></td>
+      </tr>
+  </table>
+
+## 产品架构
+1.  基于catchadmin标准模块开发方式开发，可在管理后台一键安装模块和初始化模块数据。
+2.  前端采用axios技术选型，前端可形成标准客户端接口库。
+3.  本地接口（数据源类型local）主要沿用catchadmin基于用户身份的接口鉴权方案，需在API测试用例header添加authorization参数，其值为登录接口返回的值。
+4.  在扫码登录后注册用户帐号接口测试用例，演示了采用微信扫码登录后获取到的用户access_token进行接口鉴权的示例。
+5.  微信相关开发使用了[uctoo/think-easywechat SDK](https://gitee.com/UCT/think-easywechat) 集成catchadmin (TP6+VUE) 和 easywechat 4，支持微信第三方平台、微信小程序云开发、微信支付服务商等特性。
+
+## 安装教程
+  
+### 运行环境依赖
+
+  PHP >= 7.1.0     
+  Mysql >= 5.5.0 (需支持innodb引擎)  
+  PDO PHP Extension     
+  MBstring PHP Extension     
+  CURL PHP Extension     
+  ZIP Extension    
+  Composer  
+  catchadmin  
+    
+### 分步骤安装
+1.  从https://gitee.com/jaguarjack/catchAdmin 或 https://gitee.com/uctoo/uctoo 下载https://gitee.com/uctoo/uctoo/tree/master/catch/apimanager 目录模块，复制到catchadmin对应目录
+2.  apimanager/catch-admin-vue 目录内是模块前端vue项目代码，复制到前端VUE项目对应目录，注意如和原前端vue项目目录的文件有冲突，需自行合并代码版本。如模块新依赖了第三方组件，需要在前端项目目录重新运行 yarn install 命令。
+3.  登录管理后台，在系统管理->模块管理启用API管理模块，即可安装模块和初始化模块数据。
+
+### 云原生安装
+1.  可在 https://www.uctoo.com 注册开发者帐号，登录管理后台，通过云开发功能模块，即可采用云原生方式开通和部署一套独立的UCToo运行实例。（开发中）
+
+### docker安装
+  可参考uctoo-docker项目 https://gitee.com/UCT/uctoo-docker
+
+## 使用手册
+1.  可以通过API管理->API分类功能增删改查API分类。
+2.  可以通过API环境变量功能增删改查用户环境变量。环境变量的key值以{{key}}方式定义，在API测试用例中对应的{{key}}值将替换为环境变量的value值。每个用户可以创建多组环境变量，可以切换当前选中的环境变量组。
+3.  可以通过API列表功能增删改查API测试用例。api_url、header、body、query、auth字段支持环境变量。
+4.  可以对已添加的API测试用例执行测试操作，在API测试界面，可以对api_url、header、body、query、auth等字段进行自定义编辑。发送按钮可以实际执行API测试用例，获得接口返回值。
+
+  具体请参考 https://www.kancloud.cn/doc_uctoo/manual
+  
+## 开发说明
+### 模块roadmap
+
+1.  通过解析路由文件router.php中的数据，自动生成系统接口（system类型）的所有测试用例。即实现系统接口的可视化测试。
+2.  实现API管理功能，即可通过界面配置进行基于appid的接口权限管理，OAUTH2接口鉴权方案。
+3.  实现API测试用例中API文档字段支持markdown编辑和展示。
+4.  实现除POST、GET、PUT、DELETE之外的其他接口请求方式。
+5.  实现全部content-type类型的支持。
+6.  实现测试数据的保存、历史记录等功能。
+7.  实现notify类型接口的测试，目前还没有在市面上见过类似功能的产品，但是实际开发中notify类型的接口在微信第三方平台、各种支付回调、硬件数据上传等很多场景都有遇到。
+8.  实现API测试用例的公开（共享）、私有、保护（有偿获取）等特性。
+
+  具体请参考开源版开发手册 https://www.kancloud.cn/doc_uctoo/uctoo_dev 及 本开源项目示例  
\ No newline at end of file
diff --git a/catch/apimanager/catch-admin-vue/package.json b/catch/apimanager/catch-admin-vue/package.json
new file mode 100644
index 0000000..37d0ef3
--- /dev/null
+++ b/catch/apimanager/catch-admin-vue/package.json
@@ -0,0 +1,116 @@
+{
+  "name": "catch-admin",
+  "version": "4.4.0",
+  "description": "catch-admin manage system on element-admin-vue",
+  "author": "JaguarJack <njphper@gmail.com>",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "lint": "eslint --ext .js,.vue src",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "new": "plop",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit"
+  },
+  "dependencies": {
+    "@form-create/element-ui": "^2.5.4",
+    "axios": "0.18.1",
+    "clipboard": "2.0.4",
+    "codemirror": "5.45.0",
+    "core-js": "3.6.5",
+    "driver.js": "0.9.5",
+    "dropzone": "5.5.1",
+    "echarts": "4.2.1",
+    "element-ui": "2.13.2",
+    "file-saver": "2.0.1",
+    "fuse.js": "3.4.4",
+    "js-cookie": "2.2.0",
+    "jsonlint": "1.6.3",
+    "jszip": "3.2.1",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "path-to-regexp": "2.4.0",
+    "screenfull": "4.2.0",
+    "script-loader": "0.7.2",
+    "sortablejs": "1.8.4",
+    "vue": "2.6.10",
+    "vue-count-to": "1.0.13",
+    "vue-highlightjs": "^1.3.3",
+    "vue-router": "3.0.2",
+    "vue-splitpane": "1.0.4",
+    "vuedraggable": "2.20.0",
+    "vuex": "3.1.0",
+    "xlsx": "0.14.1"
+  },
+  "devDependencies": {
+    "@smallwei/avue": "^2.8.17",
+    "@vue/cli-plugin-babel": "4.4.4",
+    "@vue/cli-plugin-eslint": "4.4.4",
+    "@vue/cli-plugin-unit-jest": "4.4.4",
+    "@vue/cli-service": "4.4.4",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "9.5.1",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "^26.3.0",
+    "babel-plugin-dynamic-import-node": "2.3.3",
+    "chalk": "2.4.2",
+    "chokidar": "2.1.5",
+    "connect": "3.6.6",
+    "eslint": "6.7.2",
+    "eslint-plugin-vue": "6.2.2",
+    "highlight.js": "^10.2.0",
+    "html-webpack-plugin": "3.2.0",
+    "husky": "1.3.1",
+    "lint-staged": "8.1.5",
+    "lodash": "^4.17.20",
+    "mockjs": "1.0.1-beta3",
+    "plop": "2.3.0",
+    "runjs": "4.3.2",
+    "sass": "1.26.2",
+    "sass-loader": "8.0.2",
+    "script-ext-html-webpack-plugin": "2.1.3",
+    "serve-static": "1.13.2",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.0",
+    "vue-highlight.js": "^3.1.0",
+    "vue-json-editor": "^1.4.3",
+    "vue-json-views": "^1.3.0",
+    "vue-template-compiler": "2.6.10"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "bugs": {
+    "url": "https://github.com/JaguarJack/catch-admin-vue/issues"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "keywords": [
+    "vue",
+    "admin",
+    "dashboard",
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
+  ],
+  "license": "MIT",
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "husky": {
+    "hooks": {}
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JaguarJack/catch-admin-vue"
+  }
+}
diff --git a/catch/apimanager/catch-admin-vue/src/api/userenv.js b/catch/apimanager/catch-admin-vue/src/api/userenv.js
new file mode 100644
index 0000000..0679ef0
--- /dev/null
+++ b/catch/apimanager/catch-admin-vue/src/api/userenv.js
@@ -0,0 +1,7 @@
+import request from "@/utils/request";
+export function userenvList() {
+  return request({
+    url: "/apiTesterUserenv",
+    method: "get"
+  });
+}
diff --git a/catch/apimanager/catch-admin-vue/src/main.js b/catch/apimanager/catch-admin-vue/src/main.js
new file mode 100644
index 0000000..30784ad
--- /dev/null
+++ b/catch/apimanager/catch-admin-vue/src/main.js
@@ -0,0 +1,48 @@
+import Vue from 'vue'
+
+import 'normalize.css/normalize.css' // a modern alternative to CSS resets
+
+import Element from 'element-ui'
+import Avue from '@smallwei/avue'
+import 'element-ui/lib/theme-chalk/index.css'
+import './styles/element-variables.scss'
+
+// import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
+
+import '@/styles/index.scss' // global css
+
+import App from './App'
+import store from './store'
+import router from './router'
+
+import './icons' // icon
+import './permission' // permission control
+import './utils/error-log' // error log
+import request from '@/utils/request'
+import * as filters from './filters' // global filters
+import catchAdmin from '@/components/Catch'
+
+Vue.use(Element, {
+  size: 'small'// set element-ui default size
+  // locale: enLang // 如果使用中文，无需设置，请删除
+})
+window.axios = request;
+Vue.use(Avue, { request });
+// register global utility filters
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, filters[key])
+})
+
+// 后台启动
+catchAdmin.boot()
+
+Vue.config.productionTip = false
+Vue.prototype.$http = request
+Vue.prototype.admin = catchAdmin
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})
diff --git a/catch/apimanager/catch-admin-vue/src/views/apimanager/apicategory/index.vue b/catch/apimanager/catch-admin-vue/src/views/apimanager/apicategory/index.vue
new file mode 100644
index 0000000..54ce67f
--- /dev/null
+++ b/catch/apimanager/catch-admin-vue/src/views/apimanager/apicategory/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <catch-table
+    :ref="table.ref"
+    :headers="table.headers"
+    :border="true"
+    :search="table.search"
+    :filter-params="table.filterParams"
+    :hide-pagination="true"
+    :form-create="formCreate"
+    :actions="table.actions"
+    :api-route="table.apiRoute"
+    :dialog-width="table.dialog.width"
+    default-expand-all
+    row-key="id"
+    :tree-props="table.tree.props"
+  />
+</template>
+<script>
+import renderTable from '@/views/render-table-form'
+
+export default {
+  name:'apimanager_apicategory',
+  mixins: [renderTable],
+  data() {
+      return {
+        tableFrom: 'table/apimanager/ApiCategory',
+      }
+  },
+  methods: {
+    beforeSubmit(row) {
+      if (row.form.parent_id instanceof Array) {
+        row.form.parent_id = row.form.parent_id.length > 0 ? row.form.parent_id.pop() : 0
+      }
+      return row
+    },
+    afterHandleResponse() {
+      this.$http.get('table/apimanager/ApiCategory', {params: { only: 'form'}}).then(response => {
+        this.formCreate.rule = response.data.form
+      })
+    }
+  }
+}
+</script>
+
diff --git a/catch/apimanager/catch-admin-vue/src/views/apimanager/apienv/index.vue b/catch/apimanager/catch-admin-vue/src/views/apimanager/apienv/index.vue
new file mode 100644
index 0000000..f80a3d0
--- /dev/null
+++ b/catch/apimanager/catch-admin-vue/src/views/apimanager/apienv/index.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input
+        v-model="queryParam.env_name"
+        placeholder="环境名称"
+        clearable
+        class="filter-item form-search-input"
+      />
+      <el-button
+        class="filter-item search"
+        icon="el-icon-search"
+        @click="handleSearch"
+      >
+        搜索
+      </el-button>
+      <el-button
+        class="filter-item"
+        icon="el-icon-refresh"
+        @click="handleRefresh"
+      >
+        重置
+      </el-button>
+      <el-button
+        class="filter-item fr"
+        type="primary"
+        icon="el-icon-plus"
+        @click="handleCreateEnv"
+      >
+        新增
+      </el-button>
+    </div>
+    <el-table
+      ref="multipleTable"
+      :data="data"
+      tooltip-effect="dark"
+      style="width: 100%"
+      border
+      fit
+      @selection-change="handleSelectMulti"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="env_name" label="环境名称" />
+      <el-table-column prop="selected" label="当前环境" />
+      <el-table-column prop="creator" label="创建人" />
+      <el-table-column prop="created_at" label="创建时间" />
+      <el-table-column prop="updated_at" label="更新时间" />
+      <el-table-column label="操作" fixed="right" width="300">
+        <template slot-scope="module">
+          <el-button
+            type="primary"
+            icon="el-icon-refresh"
+            @click="selectAPIenv(module.row.id)"
+            >切换</el-button
+          >
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            @click="handleUpdate(module.row)"
+          />
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            @click="handleDelete(module.row.id)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="paginate.current"
+      hide-on-single-page
+      :page-sizes="paginate.sizes"
+      :page-size="paginate.limit"
+      :layout="paginate.layout"
+      :total="paginate.total"
+    />
+    <!----------------------------------- 编辑 ---------------------------------------------->
+    <el-dialog
+      :close-on-click-modal="false"
+      :title="title"
+      :visible.sync="formVisible"
+      @close="handleCancel"
+    >
+      <el-form
+        label-position="top"
+        :ref="formName"
+        :model="formFieldsData"
+        :rules="rules"
+      >
+        <el-form-item
+          label="env_name"
+          :label-width="formLabelWidth"
+          prop="env_name"
+        >
+          <el-input
+            v-model="formFieldsData.env_name"
+            placeholder="请输入环境名称"
+            autocomplete="off"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item
+          label="env_json"
+          :label-width="formLabelWidth"
+          prop="env_json"
+        >
+          <avue-crud
+            ref="crudJSON"
+            :option="tableOption"
+            :data="jsonTableData"
+            @row-update="addUpdateJSON"
+            @row-del="rowDelJSON"
+            @row-save="rowSaveJSON"
+          >
+            <template slot-scope="{ row, index }" slot="menu">
+              <el-button
+                type="text"
+                size="small"
+                @click="rowCellJSON(row, index)"
+                >{{ row.$cellEdit ? "自定义保存" : "自定义修改" }}</el-button
+              >
+            </template>
+          </avue-crud>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCancel">取 消</el-button>
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import formOperate from "@/layout/mixin/formOperate";
+export default {
+  name: "apimanager_apienv",
+  mixins: [formOperate],
+  data() {
+    return {
+      formName: "apiEnv",
+      formLabelWidth: "120px",
+      // 刷新路由
+      refreshRoute: true,
+      // 用户搜索
+      queryParam: {
+        env_name: ""
+      },
+      formVisible: false,
+      formFieldsData: {
+        env_name: "",
+        env_json: ""
+      },
+      url: "apiTesterUserenv",
+      // 表单验证
+      rules: {
+        env_name: [{ required: true, message: "请输入环境名称" }],
+        env_json: [{ required: true, message: "请输入环境变量" }]
+      },
+      jsonTableData: [],
+      tableOption: {
+        refreshBtn: false,
+        addBtn: false,
+        editBtn: false,
+        addRowBtn: true,
+        cancelBtn: false,
+        border: true,
+        columnBtn: false,
+        column: [
+          {
+            label: "Key",
+            prop: "key",
+            cell: true,
+            rules: [
+              {
+                required: true,
+                message: "Key值示例:{{KeyName}}",
+                trigger: "blur"
+              }
+            ]
+          },
+          {
+            label: "Value",
+            prop: "value",
+            cell: true,
+            rules: [
+              {
+                required: true,
+                message: "请输入Value值",
+                trigger: "blur"
+              }
+            ]
+          }
+        ]
+      }
+    };
+  },
+  watch: {
+    formFieldsData: {
+      deep: true,
+      handler(data) {
+        if (data.env_json) {
+          let obj = this.JsonToObject(data.env_json);
+          let arr = Object.entries(obj).map(item => {
+            return { key: item[0], value: item[1], $cellEdit: false };
+          });
+          this.jsonTableData = arr;
+        }
+      }
+    }
+  },
+  methods: {
+    handleCreateEnv() {
+      this.jsonTableData = [];
+      this.handleCreate();
+    },
+    selectAPIenv(id) {
+      this.$http.get("apiTesterUserenv/selectAPIenv/" + id).then(response => {
+        this.$message.success(response.message);
+        this.handleRefresh();
+      });
+    },
+    // ↓ 处理 ApiBaseInfo Json数据格式 返回 Object 格式 ↓
+    JsonToObject(json) {
+      if (json) {
+        let flag = /\'/.test(json);
+        if (flag) {
+          return JSON.parse(json.replace(/\'/gi, '"'));
+        } else {
+          return JSON.parse(json);
+        }
+      } else {
+        return null;
+      }
+    },
+    // ↓ JSON 表格 行编辑 ↓
+    rowCellJSON(row, index) {
+      this.$refs.crudJSON.rowCell(row, index);
+    },
+    // ↓ JSON 表格 编辑行数据 ↓
+    addUpdateJSON(form, index, done, loading) {
+      loading();
+      done();
+    },
+    // ↓ JSON 表格 保存行数据 ↓
+    rowSaveJSON(form, done) {
+      done();
+      this.formFieldsData.env_json = this.handlerJson(this.jsonTableData);
+    },
+    // ↓ JSON 表格 删除行数据 ↓
+    rowDelJSON(form, index, done) {
+      this.jsonTableData.splice(index, 1);
+      this.formFieldsData.env_json = this.handlerJson(this.jsonTableData);
+    },
+    handlerJson(arrData) {
+      let cache = {};
+      arrData.forEach(item => {
+        cache[item.key] = item.value;
+      });
+      if (Object.keys(cache).length) {
+        return JSON.stringify(cache);
+      } else {
+        return null;
+      }
+    }
+  }
+};
+</script>
diff --git a/catch/apimanager/catch-admin-vue/src/views/apimanager/apirun/index.vue b/catch/apimanager/catch-admin-vue/src/views/apimanager/apirun/index.vue
new file mode 100644
index 0000000..addbf8a
--- /dev/null
+++ b/catch/apimanager/catch-admin-vue/src/views/apimanager/apirun/index.vue
@@ -0,0 +1,659 @@
+<template>
+  <div class="run-container">
+    <el-card class="box-card">
+      <el-row style="margin-bottom:5px">
+        <el-button
+          @click="dialogTableVisible = true"
+          class="filter-item fr"
+          type="primary"
+          icon="el-icon-s-grid"
+        >
+        </el-button>
+        <el-select
+          style="margin-right:5px"
+          class="filter-item fr"
+          @change="changeUserenv"
+          v-model="currentEnvId"
+          placeholder="用户环境变量"
+        >
+          <el-option
+            :value="env.id"
+            :label="env.env_name"
+            v-for="env in userEnvInfos"
+            :key="env.id"
+          />
+        </el-select>
+      </el-row>
+      <el-input
+        placeholder="请输入内容"
+        v-model="currentInputUrl"
+        class="input-with-select"
+        :disabled="userable"
+      >
+        <el-select
+          class="method_select"
+          :disabled="userable"
+          v-model="currentSelectMethod"
+          slot="prepend"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="(mth, index) in apiMethods"
+            :key="index"
+            :label="mth"
+            :value="mth"
+          ></el-option>
+        </el-select>
+        <el-button
+          type="primary"
+          class="apisend"
+          slot="append"
+          icon="el-icon-s-promotion"
+          @click="_runapi"
+          :disabled="sendAble"
+          >发送</el-button
+        >
+      </el-input>
+      <el-tabs class="mt30 tab-liut" type="border-card">
+        <el-tab-pane label="Header">
+          <el-table :data="headerTableData">
+            <el-table-column width="50">
+              <template slot-scope="{ row }">
+                <el-checkbox v-model="row.open"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="KEY">
+              <template slot-scope="{ row }">
+                <item-btn v-model="row.key" />
+              </template>
+            </el-table-column>
+            <el-table-column label="VALUE">
+              <template slot-scope="{ row }">
+                <item-btn :selectshow="true" v-model="row.value" />
+              </template>
+            </el-table-column>
+            <el-table-column width="50">
+              <template slot="header" slot-scope="scope">
+                <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  circle
+                  @click="addRow(headerTableData, scope)"
+                ></el-button>
+              </template>
+              <template slot-scope="{ row }">
+                <el-button
+                  icon="el-icon-delete"
+                  circle
+                  type="danger"
+                  @click="delRow(row, headerTableData)"
+                ></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="Query">
+          <el-table :data="queryTableData">
+            <el-table-column width="50">
+              <template slot-scope="{ row }">
+                <el-checkbox v-model="row.open"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="KEY">
+              <template slot-scope="{ row }">
+                <item-btn v-model="row.key" />
+              </template>
+            </el-table-column>
+            <el-table-column label="VALUE">
+              <template slot-scope="{ row }">
+                <item-btn :selectshow="true" v-model="row.value" />
+              </template>
+            </el-table-column>
+            <el-table-column width="50">
+              <template slot="header" slot-scope="scope">
+                <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  circle
+                  @click="addRow(queryTableData, scope)"
+                ></el-button>
+              </template>
+              <template slot-scope="{ row }">
+                <el-button
+                  icon="el-icon-delete"
+                  circle
+                  type="danger"
+                  @click="delRow(row, queryTableData)"
+                ></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="Body">
+          <el-radio-group v-model="radio">
+            <el-radio :label="0">none</el-radio>
+            <el-radio :label="1">form-data</el-radio>
+            <el-radio :label="2">x-www-form-urlencoded</el-radio>
+            <el-radio :label="3">json</el-radio>
+            <el-radio :label="4">raw(json)</el-radio>
+          </el-radio-group>
+          <vue-json-editor
+            class="vjd"
+            v-if="radio === 4"
+            v-model="rawJson"
+            :mode="'code'"
+            lang="zh"
+          ></vue-json-editor>
+          <el-table
+            v-else
+            v-loading="loading"
+            element-loading-text="This request dose not have a body"
+            element-loading-spinner="el-icon-warning"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+            :data="bodyTableData"
+          >
+            <el-table-column width="50">
+              <template slot-scope="{ row }">
+                <el-checkbox v-model="row.open"></el-checkbox>
+              </template>
+            </el-table-column>
+            <el-table-column label="KEY">
+              <template slot-scope="{ row }">
+                <item-btn v-model="row.key" />
+              </template>
+            </el-table-column>
+            <el-table-column label="VALUE">
+              <template slot-scope="{ row }">
+                <item-btn :selectshow="true" v-model="row.value" />
+              </template>
+            </el-table-column>
+            <el-table-column width="50">
+              <template slot="header" slot-scope="scope">
+                <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  circle
+                  @click="addRow(bodyTableData, scope)"
+                ></el-button>
+              </template>
+              <template slot-scope="{ row }">
+                <el-button
+                  icon="el-icon-delete"
+                  circle
+                  type="danger"
+                  @click="delRow(row, bodyTableData)"
+                ></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+      <el-card v-if="json" class="box-card mt30">
+        <json-view :data="json" />
+      </el-card>
+    </el-card>
+    <el-dialog :title="currentUserEnvName" :visible.sync="dialogTableVisible">
+      <el-table :data="currentUserEnvJson" border style="width: 100%">
+        <el-table-column prop="key" label="变量" fit> </el-table-column>
+        <el-table-column prop="value" label="值" fit> </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import vueJsonEditor from "vue-json-editor";
+import { userenvList } from "@/api/userenv";
+import ItemBtn from "./itemBtn.vue";
+import jsonView from "vue-json-views";
+import axios from "axios";
+import qs from "qs";
+export default {
+  components: {
+    jsonView,
+    ItemBtn,
+    vueJsonEditor
+  },
+  data() {
+    return {
+      // ↓ 是否允许用户发送请求 ↓
+      sendAble: false,
+      // ↓ 是否允许用户编辑 ↓
+      userable: false,
+      // ↓ 用户变量对话框展示与隐藏 ↓
+      dialogTableVisible: false,
+      // ↓ Api Mthods ↓
+      apiMethods: [
+        "POST",
+        "GET",
+        "PUT",
+        "PATCH",
+        "DELETE",
+        "COPY",
+        "HEAD",
+        "OPTIONS"
+      ],
+      // ↓ Api 响应 ↓
+      json: null,
+      // ↓ api接口基本信息 ↓
+      apiBaseInfo: {},
+      // ↓ 用户所有环境变量 ↓
+      userEnvInfos: [],
+      // ↓ 当前用户选择的环境变量id ↓
+      currentEnvId: null,
+      // ↓ 用户当前输入的Url ↓
+      currentInputUrl: "",
+      // ↓ 用户当前选择的Api Method ↓
+      currentSelectMethod: "GET",
+      regEnv: /\{\{(.+?)\}\}/g,
+      // ↓ 请求 body 下的 数据发送格式 0:none 1:form-data 2:x-www-form-urlencoded ↓
+      radio: 2,
+      checked: true,
+      input: "",
+      // ↓ 请求Body ↓
+      bodyTableData: [],
+      headerTableData: [],
+      queryTableData: [],
+      radioLabel: ["none", "form-data", "x-www-form-urlencoded", "json"],
+      rawJson: {},
+      headers: null,
+      params: null
+    };
+  },
+  computed: {
+    // ↓ 用户当前选择环境变量信息 ↓
+    currentUserEnvInfo() {
+      if (this.userEnvInfos.length !== 0) {
+        return this.userEnvInfos.filter(env => env.id === this.currentEnvId)[0];
+      } else {
+        return null;
+      }
+    },
+    // ↓ 用户当前选择环境变量信息键值对模型 ↓
+    currentUserEnvJson() {
+      if (this.currentUserEnvInfo && this.currentUserEnvInfo.env_json) {
+        let obj = JSON.parse(this.currentUserEnvInfo.env_json);
+        return Object.entries(obj).map(item => {
+          return { key: item[0], value: item[1] };
+        });
+      } else {
+        return null;
+      }
+    },
+    // ↓ 用户当前选择的环境变量名称 ↓
+    currentUserEnvName() {
+      if (this.currentUserEnvInfo && this.currentUserEnvInfo.env_name) {
+        return this.currentUserEnvInfo.env_name;
+      } else {
+        return "未定义名称";
+      }
+    },
+    // ↓ 用户当前选择环境变量信息Map数据模型 ↓
+    currentUserEnvMap() {
+      if (this.currentUserEnvInfo && this.currentUserEnvInfo.env_json) {
+        let obj = JSON.parse(this.currentUserEnvInfo.env_json);
+        return obj;
+      } else {
+        return null;
+      }
+    },
+    // ↓ Api接口url (base_url + url) ↓
+    currentApiUrl() {
+      // ↓ reg formula ↓
+      let regEnv = /\{\{(.+?)\}\}/g;
+      // ↓ 拿到用户当前地址栏看见的 Url ↓
+      let curInputUrl = this.currentInputUrl;
+      // ↓ 判断用户是否使用了变量环境字符串 ↓
+      let flag = regEnv.test(curInputUrl);
+      if (flag) {
+        if (this.currentUserEnvMap) {
+          let new_url = this.replaceUserenv(curInputUrl); //curInputUrl.replace(regEnv,this.currentUserEnvMap["{{host}}"]);
+          return new_url;
+        } else {
+          return null;
+        }
+      } else {
+        return curInputUrl;
+      }
+    },
+    loading() {
+      return !Boolean(this.radio);
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let id = this.$route.query.id;
+      this.$http.get("apitester/" + id).then(response => {
+        this.apiBaseInfo = response.data;
+        this.apiBaseInfo.body = this.apiBaseInfo.body.replace(/'/g, '"');
+        if (this.apiBaseInfo.body) {
+          let resstr = this.apiBaseInfo.body
+            .replace(/\\/g, "")
+            .replace(/"{/g, "{")
+            .replace(/}"/g, "}");
+          this.rawJson = JSON.parse(resstr);
+        } else {
+          this.rawJson = {};
+        }
+        this.resetMethodAndUrl();
+        this.initTable();
+      });
+      userenvList().then(response => {
+        this.userEnvInfos = response.data;
+        if (response.data.length !== 0) {
+          response.data.forEach(env => {
+            if (env.selected) {
+              this.currentEnvId = env.id;
+            }
+          });
+        }
+      });
+    },
+    /**@dis 初始化table表格 */
+    initTable() {
+      let { header, query, body, content_type } = this.apiBaseInfo;
+      this.radio = this.radioLabel.findIndex(el => {
+        if (content_type.indexOf(el) !== -1) return true;
+        return false;
+      });
+      let resTable = [header, query, body].map(el => {
+        return el ? JSON.parse(el) : false;
+      });
+      [this.headerTableData, this.queryTableData, this.bodyTableData].some(
+        (el, index) => {
+          if (resTable[index] === false) return false;
+          for (const [key, value] of Object.entries(resTable[index])) {
+            if (typeof value === "string") {
+              el.push({ open: true, key: key.trim(), value: value.trim() });
+            } else if (typeof value === "object") {
+              el.push({
+                open: true,
+                key: key.trim(),
+                value: JSON.stringify(value)
+              });
+            } else {
+              el.push({ open: true, key: key.trim(), value });
+            }
+          }
+        }
+      );
+    },
+    watchParam(arr) {
+      let regEnv = /\{\{(.+?)\}\}/g;
+      let watchCeche = {};
+      arr.forEach(item => {
+        let regFlag = regEnv.test(item.value);
+        let cacheFlag = this.currentUserEnvMap[item.value];
+        if (regFlag && cacheFlag) {
+          watchCeche[item.key] = cacheFlag;
+        }
+      });
+      return watchCeche;
+    },
+    // ↓ 执行Api 核心业务逻辑 ↓
+    _runapi() {
+      this.requestBeforeHook();
+      switch (this.currentSelectMethod) {
+        case "POST":
+          this.apiPost();
+          break;
+        case "GET":
+          this.apiGet();
+          break;
+        case "PUT":
+          this.apiPut();
+          break;
+        case "DELETE":
+          this.apiDelete();
+          break;
+        case "PATCH":
+        case "COPY":
+        case "HEAD":
+        case "OPTIONS":
+          this.$notify({
+            title: "消息",
+            message: "通知开发人员进行扩展",
+            type: "info"
+          });
+          break;
+        default:
+          this.$notify({
+            title: "消息",
+            message: "平台版本暂时不支持该请求方法",
+            type: "info"
+          });
+          break;
+      }
+    },
+    headFactory(ctype, args) {
+      let product = null;
+      switch (ctype) {
+        case "x-www-form-urlencoded":
+          product = qs.stringify(args);
+          break;
+        case "form-data":
+          let data = new FormData();
+          for (const key in args) {
+            data.append(key, args[key]);
+          }
+          product = data;
+          break;
+        case "raw":
+          this.$notify({
+            title: "消息",
+            message: "平台版本暂时还未支持raw数据格式",
+            type: "info"
+          });
+          product = args;
+          break;
+        case "json":
+        default:
+          product = args;
+          break;
+      }
+      return product;
+    },
+    tbDataToObj(tb) {
+      const params = {};
+      tb.filter(el => el.open)
+        .map(el =>
+          Object.defineProperty({}, el.key, {
+            value: el.value,
+            writable: true,
+            enumerable: true,
+            configurable: true
+          })
+        )
+        .forEach(el => Object.assign(params, el));
+      return params;
+    },
+    async apiGet() {
+      let { status, data } = await axios
+        .get(this.currentApiUrl, {
+          headers: this.headers,
+          params: this.params
+        })
+        .catch(err => {
+          this.json = err;
+          this.$notify({
+            title: "失败",
+            message: "请求发送失败",
+            type: "error"
+          });
+        });
+      if (status === 200) {
+        this.json = data;
+        this.$notify({
+          title: "成功",
+          message: "请求发送成功",
+          type: "success"
+        });
+      }
+    },
+    async apiPost() {
+      const data =
+        this.radio === 4
+          ? this.rawJson
+          : this.headFactory(
+              this.radioLabel[this.radio],
+              this.tbDataToObj(this.bodyTableData)
+            );
+      let res = await axios
+        .post(this.currentApiUrl, data, {
+          headers: this.headers,
+          params: this.params
+        })
+        .catch(err => {
+          this.json = {};
+          this.$notify({
+            title: "失败",
+            message: "请求发送失败",
+            type: "error"
+          });
+        });
+      if (res.status === 200) {
+        this.json = res.data;
+        this.$notify({
+          title: "成功",
+          message: "请求发送成功",
+          type: "success"
+        });
+      }
+    },
+    async apiPut() {
+      const data = this.headFactory(
+        this.radioLabel[this.radio],
+        this.tbDataToObj(this.bodyTableData)
+      );
+
+      let res = await axios
+        .put(this.currentApiUrl, data, {
+          headers: this.headers,
+          params: this.params
+        })
+        .catch(err => {
+          this.json = err;
+          this.$notify({
+            title: "失败",
+            message: "请求发送失败",
+            type: "error"
+          });
+        });
+      if (res.status === 200) {
+        this.json = res.data;
+        this.$notify({
+          title: "成功",
+          message: "请求发送成功",
+          type: "success"
+        });
+      }
+    },
+    async apiDelete() {
+      const data =
+        this.radio === 4
+          ? this.rawJson
+          : this.headFactory(
+              this.radioLabel[this.radio],
+              this.tbDataToObj(this.bodyTableData)
+            );
+      let res = await axios
+        .delete(this.currentApiUrl, {
+          data,
+          headers: this.headers,
+          params: this.params
+        })
+        .catch(err => {
+          this.json = err;
+          this.$notify({
+            title: "失败",
+            message: "请求发送失败",
+            type: "error"
+          });
+        });
+      if (res.status === 200) {
+        this.json = res.data;
+        this.$notify({
+          title: "成功",
+          message: "请求发送成功",
+          type: "success"
+        });
+      }
+    },
+    requestBeforeHook() {
+      this.headers = this.watchParam(this.headerTableData);
+      this.params = Object.assign(
+        this.tbDataToObj(this.queryTableData),
+        this.watchParam(this.queryTableData)
+      );
+    },
+    // ↓ 修改用户环境变量 ↓
+    changeUserenv(env) {
+      this.$http.get("apiTesterUserenv/selectAPIenv/" + env).then(response => {
+        this.$message.success(response.message);
+      });
+    },
+    // ↓ 重置 Api Methods 与 Api Url ↓
+    resetMethodAndUrl() {
+      this.currentInputUrl = this.apiBaseInfo.api_url;
+      this.currentSelectMethod = this.apiBaseInfo.methods.toLocaleUpperCase();
+    },
+    //循环用户选中的环境变量进行替换
+    replaceUserenv(orgStr) {
+      let userEnv = this.currentUserEnvJson;
+      for (let envelement of userEnv) {
+        orgStr = orgStr.replace(envelement.key, envelement.value);
+      }
+      return orgStr;
+    },
+    /**@dis 删除行 */
+    delRow(row, _table) {
+      let index = _table.findIndex(_row => row === _row);
+      _table.splice(index, 1);
+    },
+    addRow(_table) {
+      _table.push({ open: false, key: "KEY", value: "VALUE" });
+    }
+  },
+  watch: {
+    // ↓ 监听经过处理的 Api Url 控制发送按钮是否开启 ↓
+    currentApiUrl(url) {
+      let flag = /http|https/.test(url);
+      if (url && flag) {
+        this.sendAble = false;
+      } else {
+        this.sendAble = true;
+      }
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.run-container {
+  margin: 20px;
+  .method_select {
+    width: 100px;
+  }
+  .apisend {
+    background-color: #70b9eb;
+    color: white;
+  }
+  .mt30 {
+    margin-top: 30px;
+  }
+  .tab-liut {
+    min-height: 200px;
+  }
+}
+</style>
+<style lang="scss">
+.vjd {
+  .jsoneditor-vue {
+    height: 430px;
+  }
+  .jsoneditor-poweredBy {
+    display: none;
+  }
+}
+</style>
diff --git a/catch/apimanager/catch-admin-vue/src/views/apimanager/apirun/itemBtn.vue b/catch/apimanager/catch-admin-vue/src/views/apimanager/apirun/itemBtn.vue
new file mode 100644
index 0000000..29f45d1
--- /dev/null
+++ b/catch/apimanager/catch-admin-vue/src/views/apimanager/apirun/itemBtn.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="item-btn-container">
+    <el-row>
+      <el-col v-show="!selectValue" :span="18">
+        <el-button @click="clickBtn" v-if="isShow">{{ value }}</el-button>
+        <el-input
+          ref="inputRef"
+          placeholder="请输入内容"
+          v-else
+          :value="value"
+          @blur="inputBlur"
+          @input="value => this.$emit('input', value)"
+        ></el-input>
+      </el-col>
+      <el-col v-show="selectValue" :span="18">
+        <el-tag v-if="filename" @close="delFile" closable type="success">{{
+          filename
+        }}</el-tag>
+        <el-upload
+          v-else
+          action="/upload/image"
+          :limit="1"
+          ref="upload"
+          :show-file-list="false"
+          :http-request="uploadGuard"
+        >
+          <el-button size="small" type="primary">点击上传</el-button>
+        </el-upload>
+      </el-col>
+      <el-col :span="6">
+        <el-select v-if="selectshow" v-model="selectValue">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: [String, File, Number],
+      default() {
+        return null;
+      }
+    },
+    selectshow: {
+      value: Boolean,
+      default() {
+        return false;
+      }
+    }
+  },
+  data() {
+    return {
+      isShow: true,
+      options: [
+        {
+          value: false,
+          label: "Text"
+        },
+        {
+          value: true,
+          label: "File"
+        }
+      ],
+      selectValue: false,
+      filename: ""
+    };
+  },
+  computed: {
+    uploadFile() {
+      return this.$refs.upload;
+    }
+  },
+  methods: {
+    /**@dis 切换状态 */
+    clickBtn() {
+      this.isShow = false;
+      this.$nextTick(() => {
+        this.$refs.inputRef.focus();
+      });
+    },
+    inputBlur() {
+      this.isShow = true;
+    },
+    uploadGuard({ file }) {
+      this.filename = file.name;
+      this.$emit("input", file);
+    },
+    delFile() {
+      this.filename = "";
+      this.$emit("input", null);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.item-btn-container {
+  .el-button {
+    max-width: 100%;
+    overflow: hidden;
+    text-align: left;
+  }
+}
+</style>
diff --git a/catch/apimanager/catch-admin-vue/src/views/apimanager/apitester/index.vue b/catch/apimanager/catch-admin-vue/src/views/apimanager/apitester/index.vue
new file mode 100644
index 0000000..e1a8153
--- /dev/null
+++ b/catch/apimanager/catch-admin-vue/src/views/apimanager/apitester/index.vue
@@ -0,0 +1,816 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="12">
+      <el-col :span="6">
+        <el-card shadow="never">
+          <div slot="header" class="clearfix">
+            <span>分类</span>
+          </div>
+          <div class="block">
+            <el-tree
+              :data="apicategory"
+              :props="apicategoryProps"
+              node-key="id"
+              default-expand-all
+              :expand-on-click-node="false"
+              @node-click="getApicategoryData"
+            />
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18">
+        <div class="filter-container">
+          <el-row>
+            <el-input
+              v-model="queryParam.api_title"
+              placeholder="名称"
+              clearable
+              class="filter-item form-search-input"
+            />
+            <el-input
+              v-model="queryParam.api_name"
+              placeholder="标识"
+              clearable
+              class="filter-item form-search-input"
+            />
+            <el-select
+              v-model="queryParam.type"
+              clearable
+              placeholder="请选择数据源类型"
+              class="filter-item"
+              style="margin-right: 5px"
+            >
+              <el-option value="1" label="remote" />
+              <el-option value="2" label="local" />
+            </el-select>
+            <el-button
+              class="filter-item fr"
+              icon="el-icon-refresh"
+              @click="handleRefresh"
+            >
+              重置
+            </el-button>
+            <el-button
+              style="margin-right: 5px"
+              class="filter-item fr search"
+              icon="el-icon-search"
+              @click="handleSearch"
+            >
+              搜索
+            </el-button>
+          </el-row>
+          <el-row style="margin-top: 5px">
+            <el-select
+              class="filter-item "
+              @change="changeUserenv"
+              v-model="userenvid"
+              placeholder="用户环境变量"
+            >
+              <el-option
+                :value="env.id"
+                :label="env.env_name"
+                v-for="env in userenvs"
+                :key="env.id"
+              />
+            </el-select>
+            <el-button
+              class="filter-item fr"
+              type="primary"
+              icon="el-icon-plus"
+              @click="handleCreate"
+            >
+              新增
+            </el-button>
+          </el-row>
+        </div>
+        <el-button
+          v-if="this.selectedIds.length"
+          size="small"
+          class="filter-item mb-5"
+          type="danger"
+          icon="el-icon-delete"
+          @click="handleMultiDelete"
+        >
+          批量删除
+        </el-button>
+        <el-table
+          ref="multipleTable"
+          :data="data"
+          tooltip-effect="dark"
+          style="width: 100%"
+          border
+          fit
+          @selection-change="handleSelectMulti"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+            :selectable="selectInit"
+          />
+          <el-table-column label="名称">
+            <template slot-scope="api">{{ api.row.api_title }}</template>
+          </el-table-column>
+          <el-table-column prop="methods" label="methods" />
+          <el-table-column prop="api_name" label="标识" />
+          <!--   <el-table-column prop="status" label="状态">
+            <template slot-scope="api">
+              <el-switch
+                v-if="api.row.id === 0"
+                v-model="api.row.status"
+                disabled
+                active-text="启用"
+                :active-value="1"
+              />
+              <el-switch
+                v-else
+                v-model="api.row.status"
+                active-text="启用"
+                inactive-text="禁用"
+                :active-value="1"
+                :inactive-value="2"
+                @change="disOrEnableUser(api.row)"
+              />
+            </template>
+          </el-table-column> -->
+          <el-table-column prop="type" label="数据源类型">
+            <template slot-scope="api">
+              <el-tag v-if="api.row.type === 1" type="success">remote</el-tag>
+              <el-tag v-if="api.row.type === 2" type="danger">local</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="created_at" label="创建时间" />
+          <el-table-column label="操作" fixed="right" width="300">
+            <template slot-scope="api">
+              <el-button
+                type="primary"
+                icon="el-icon-refresh"
+                @click="testApi(api.row.id)"
+                >测试</el-button
+              >
+              <el-button
+                type="primary"
+                icon="el-icon-edit"
+                v-if="api.row.id === 0"
+                disabled
+              />
+              <el-button
+                type="primary"
+                icon="el-icon-edit"
+                v-else
+                @click="beforeHandleUpdate(api.row)"
+              />
+              <el-button
+                type="danger"
+                icon="el-icon-edit"
+                v-if="api.row.id === 0"
+                disabled
+              />
+              <el-button
+                type="danger"
+                icon="el-icon-delete"
+                v-else
+                @click="handleDelete(api.row.id)"
+              />
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          background
+          class="pagination-container"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="paginate.current"
+          hide-on-single-page
+          :page-sizes="paginate.sizes"
+          :page-size="paginate.limit"
+          :layout="paginate.layout"
+          :total="paginate.total"
+        />
+      </el-col>
+    </el-row>
+    <!----------------------------------- API ---------------------------------------------->
+    <el-dialog
+      :close-on-click-modal="false"
+      :title="title"
+      :visible.sync="formVisible"
+      :destroy-on-close="true"
+      @close="handleCancel()"
+    >
+      <el-form :ref="formName" :model="formFieldsData" :rules="rules">
+        <el-row :gutter="12">
+          <el-form-item
+            label="分类"
+            :label-width="formLabelWidth"
+            prop="category_id"
+          >
+            <el-cascader
+              v-model="formFieldsData.category_id"
+              :options="treeCategory.data"
+              :props="treeCategory.prop"
+              :show-all-levels="false"
+              style="width: 85%"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="type" :label-width="formLabelWidth" prop="type">
+            <el-select
+              v-model="formFieldsData.type"
+              style="width: 85%"
+              placeholder="请选择数据源类型"
+            >
+              <el-option
+                v-for="(item, key) in type"
+                :key="key"
+                :label="item"
+                :value="key"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="名称"
+            :label-width="formLabelWidth"
+            prop="api_title"
+          >
+            <el-input
+              v-model="formFieldsData.api_title"
+              placeholder="请输入名称"
+              autocomplete="off"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item
+            label="标识"
+            :label-width="formLabelWidth"
+            prop="api_name"
+          >
+            <el-input
+              v-model="formFieldsData.api_name"
+              placeholder="请输入英文唯一标识"
+              autocomplete="off"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item
+            label="methods类型"
+            :label-width="formLabelWidth"
+            prop="methods"
+          >
+            <el-select
+              v-model="formFieldsData.methods"
+              placeholder="请选择methods类型"
+            >
+              <el-option
+                v-for="(item, key) in methodsTypes"
+                :key="key"
+                :label="item"
+                :value="key"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="api_url"
+            :label-width="formLabelWidth"
+            prop="api_url"
+          >
+            <el-input
+              v-model="formFieldsData.api_url"
+              placeholder="请输入api地址"
+              autocomplete="off"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="Header">
+            <avue-crud
+              ref="crudHeader"
+              :option="tableOption"
+              :data="headerTableData"
+              @row-update="addUpdateHeader"
+              @row-del="rowDelHeader"
+              @row-save="rowSaveHeader"
+            >
+              <template slot-scope="{ row, index }" slot="menu">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="rowCellHeader(row, index)"
+                  >{{ row.$cellEdit ? "自定义保存" : "自定义修改" }}</el-button
+                >
+              </template>
+            </avue-crud>
+          </el-form-item>
+          <el-form-item label="Body">
+            <avue-crud
+              ref="crudBody"
+              :option="tableOption"
+              :data="bodyTableData"
+              @row-update="addUpdateBody"
+              @row-del="rowDelBody"
+              @row-save="rowSaveBody"
+            >
+              <template slot-scope="{ row, index }" slot="menu">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="rowCellBody(row, index)"
+                  >{{ row.$cellEdit ? "自定义保存" : "自定义修改" }}</el-button
+                >
+              </template>
+            </avue-crud>
+          </el-form-item>
+          <el-form-item label="Query">
+            <avue-crud
+              ref="crudQuery"
+              :option="tableOption"
+              :data="queryTableData"
+              @row-update="addUpdateQuery"
+              @row-del="rowDelQuery"
+              @row-save="rowSaveQuery"
+            >
+              <template slot-scope="{ row, index }" slot="menu">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="rowCellQuery(row, index)"
+                  >{{ row.$cellEdit ? "自定义保存" : "自定义修改" }}</el-button
+                >
+              </template>
+            </avue-crud>
+          </el-form-item>
+          <el-form-item label="Auth">
+            <avue-crud
+              ref="crudAuth"
+              :option="tableOption"
+              :data="authTableData"
+              @row-update="addUpdateAuth"
+              @row-del="rowDelAuth"
+              @row-save="rowSaveAuth"
+            >
+              <template slot-scope="{ row, index }" slot="menu">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="rowCellAuth(row, index)"
+                  >{{ row.$cellEdit ? "自定义保存" : "自定义修改" }}</el-button
+                >
+              </template>
+            </avue-crud>
+          </el-form-item>
+          <el-form-item
+            label="content-type"
+            :label-width="formLabelWidth"
+            prop="content_type"
+          >
+            <el-select
+              v-model="formFieldsData.content_type"
+              style="width: 85%"
+              placeholder="请选择content_type类型"
+            >
+              <el-option
+                v-for="(item, key) in content_types"
+                :key="key"
+                :label="item"
+                :value="key"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="文档url"
+            :label-width="formLabelWidth"
+            prop="doc_url"
+          >
+            <el-input
+              v-model="formFieldsData.doc_url"
+              placeholder="请输入文档url地址"
+              autocomplete="off"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item
+            label="文档"
+            :label-width="formLabelWidth"
+            prop="document"
+          >
+            <el-input
+              type="textarea"
+              :rows="5"
+              v-model="formFieldsData.document"
+              placeholder="请输入文档内容，markdown格式"
+              autocomplete="off"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item
+            label="示例请求数据"
+            :label-width="formLabelWidth"
+            prop="sample_data"
+          >
+            <el-input
+              type="textarea"
+              :rows="5"
+              v-model="formFieldsData.sample_data"
+              placeholder="请输入示例请求数据"
+              autocomplete="off"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item
+            label="示例返回数据"
+            :label-width="formLabelWidth"
+            prop="sample_result"
+          >
+            <el-input
+              type="textarea"
+              :rows="5"
+              v-model="formFieldsData.sample_result"
+              placeholder="请输入示例返回数据"
+              autocomplete="off"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
+            <el-input-number
+              v-model="formFieldsData.sort"
+              :min="1"
+              :max="100000"
+            />
+          </el-form-item>
+          <el-form-item label="状态" :label-width="formLabelWidth">
+            <el-radio v-model="formFieldsData.status" :label="1" checked
+              >已完成</el-radio
+            >
+            <el-radio v-model="formFieldsData.status" :label="2"
+              >待开发</el-radio
+            >
+            <el-radio v-model="formFieldsData.status" :label="3"
+              >开发中</el-radio
+            >
+            <el-radio v-model="formFieldsData.status" :label="4"
+              >已废弃</el-radio
+            >
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="handleCancel()">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import formOperate from "@/layout/mixin/formOperate";
+import { userenvList } from "@/api/userenv";
+export default {
+  name: "apimanager_apitester",
+  mixins: [formOperate],
+  data() {
+    return {
+      formName: "apis",
+      // 刷新路由
+      refreshRoute: true,
+      apicategoryProps: {
+        label: "category_title"
+      },
+      formLabelWidth: "120px",
+      // api搜索
+      queryParam: {
+        api_title: "",
+        api_name: "",
+        status: "",
+        type: "",
+        category_id: ""
+      },
+      formVisible: false,
+      formFieldsData: {
+        api_title: "",
+        api_name: "",
+        api_url: "",
+        category_id: 0,
+        type: "",
+        methods: "",
+        auth: "",
+        header: "",
+        query: "",
+        body: "",
+        doc_url: "",
+        document: "",
+        sample_data: "",
+        sample_result: "",
+        sort: "",
+        status: "",
+        content_type: "",
+        env_id: "",
+        memo: ""
+      },
+      url: "apitester",
+      data: [],
+      // 分类
+      treeCategory: {
+        data: [],
+        default: [],
+        prop: {
+          label: "category_title",
+          value: "id",
+          emitPath: false,
+          checkStrictly: true
+        }
+      },
+      // methods类型
+      type: {
+        1: "remote",
+        2: "local"
+      },
+      // methods类型
+      methodsTypes: {
+        POST: "POST",
+        GET: "GET",
+        PUT: "PUT",
+        PATCH: "PATCH",
+        DELETE: "DELETE",
+        COPY: "COPY",
+        HEAD: "HEAD",
+        OPTIONS: "OPTIONS"
+      },
+      content_types: {
+        "application/x-www-form-urlencoded":
+          "application/x-www-form-urlencoded",
+        "application/json; charset=utf-8": "application/json; charset=utf-8",
+        "multipart/form-data": "multipart/form-data",
+        raw: "raw"
+      },
+      // 表单验证
+      rules: {
+        api_title: [
+          { required: true, message: "请输入名称", trigger: "blur" },
+          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
+        ],
+        api_name: [
+          { required: true, message: "请输入英文唯一标识", trigger: "blur" }
+        ]
+      },
+      // 分类
+      apicategory: [],
+      userenvs: [],
+      userenvid: {},
+      // ↓ api form 表单 ↓
+      headerTableData: [],
+      bodyTableData: [],
+      queryTableData: [],
+      authTableData: [],
+      // ↓ api form 表单 Options ↓
+      tableOption: {
+        refreshBtn: false,
+        addBtn: false,
+        editBtn: false,
+        addRowBtn: true,
+        cancelBtn: false,
+        border: true,
+        column: [
+          {
+            label: "Key",
+            prop: "key",
+            cell: true,
+            rules: [
+              {
+                required: true,
+                message: "请输入Key值",
+                trigger: "blur"
+              }
+            ]
+          },
+          {
+            label: "Value",
+            prop: "value",
+            cell: true,
+            rules: [
+              {
+                required: true,
+                message: "请输入Value值",
+                trigger: "blur"
+              }
+            ]
+          }
+        ]
+      }
+    };
+  },
+  // 初始化数据
+  mounted() {
+    this.$http.get("apicategory").then(response => {
+      this.apicategory = response.data;
+    });
+    userenvList().then(response => {
+      if (response.data.length !== 0) {
+        response.data.forEach(env => {
+          if (env.selected) {
+            this.userenvid = env.id;
+          }
+        });
+      }
+      this.userenvs = response.data;
+    });
+  },
+  methods: {
+    testApi(id) {
+      this.$router.push({ path: "/apimanager/apirun", query: { id } });
+    },
+    // 获取分类API
+    getApicategoryData(data, node, self) {
+      this.queryParam.category_id = data.id;
+      this.handleSearch();
+    },
+    // 禁用/启用
+    disOrEnableApi(api) {
+      this.$http.put("apitester/switch/status/" + api.id).then(response => {
+        this.$message({
+          message: response.message,
+          type: "success"
+        });
+      });
+    },
+    beforeCreate() {
+      this.$http.get("apicategory").then(response => {
+        this.treeCategory.data = response.data;
+      });
+    },
+    beforeHandleUpdate(api) {
+      this.beforeCreate();
+      this.$http.get(this.url + "/" + api.id).then(response => {
+        const api = response.data;
+        this.handleUpdate(api);
+      });
+    },
+    selectInit(row, index) {
+      return row.id !== 0;
+    },
+    submit() {
+      this.handleSubmit();
+    },
+    onJsonChange(value) {
+      console.log("value:", value);
+    },
+    onJsonSave(value) {
+      console.log("value:", value);
+    },
+    changeUserenv(env) {
+      this.$http
+        .get("apiTesterUserenv/selectAPIenv/" + env)
+        .then(response => {});
+    },
+    // ↓ Header 表格 行编辑 ↓
+    rowCellHeader(row, index) {
+      this.$refs.crudHeader.rowCell(row, index);
+    },
+    rowCellBody(row, index) {
+      this.$refs.crudBody.rowCell(row, index);
+    },
+    rowCellQuery(row, index) {
+      this.$refs.crudQuery.rowCell(row, index);
+    },
+    rowCellAuth(row, index) {
+      this.$refs.crudAuth.rowCell(row, index);
+    },
+    // ↓ Header 表格 编辑行数据 ↓
+    addUpdateHeader(form, index, done, loading) {
+      loading();
+      done();
+    },
+    addUpdateBody(form, index, done, loading) {
+      loading();
+      done();
+    },
+    addUpdateQuery(form, index, done, loading) {
+      loading();
+      done();
+    },
+    addUpdateAuth(form, index, done, loading) {
+      loading();
+      done();
+    },
+    afterCancel() {
+      setTimeout(() => {
+        this.headerTableData = [];
+        this.bodyTableData = [];
+        this.queryTableData = [];
+        this.authTableData = [];
+      }, 400);
+      Object.keys(this.formFieldsData).forEach(k => {
+        switch (k) {
+          case "category_id":
+            this.formFieldsData[k] = null;
+            break;
+          case "type":
+            this.formFieldsData[k] = "1";
+            break;
+          default:
+            break;
+        }
+      });
+    },
+    // ↓ Header 表格 保存行数据 ↓
+    rowSaveHeader(form, done) {
+      done();
+      let json = this.handlerTable(this.headerTableData);
+      this.formFieldsData.header = json;
+    },
+    rowSaveBody(form, done) {
+      done();
+      let json = this.handlerTable(this.bodyTableData);
+      this.formFieldsData.body = json;
+    },
+    rowSaveQuery(form, done) {
+      done();
+      let json = this.handlerTable(this.queryTableData);
+      this.formFieldsData.query = json;
+    },
+    rowSaveAuth(form, done) {
+      done();
+      let json = this.handlerTable(this.authTableData);
+      this.formFieldsData.auth = json;
+    },
+    // ↓ Header 表格 删除行数据 ↓
+    rowDelHeader(form, index, done) {
+      this.headerTableData.splice(index, 1);
+      let json = this.handlerTable(this.headerTableData);
+      this.formFieldsData.header = json;
+    },
+    rowDelBody(form, index, done) {
+      this.bodyTableData.splice(index, 1);
+      let json = this.handlerTable(this.bodyTableData);
+      this.formFieldsData.body = json;
+    },
+    rowDelQuery(form, index, done) {
+      this.queryTableData.splice(index, 1);
+      let json = this.handlerTable(this.queryTableData);
+      this.formFieldsData.query = json;
+    },
+    rowDelAuth(form, index, done) {
+      this.authTableData.splice(index, 1);
+      let json = this.handlerTable(this.authTableData);
+      this.formFieldsData.auth = json;
+    },
+    // ↓ 处理 ApiBaseInfo Json数据格式 返回 Object 格式 ↓
+    JsonToObject(json) {
+      if (json && json !== "") {
+        let flag = /\'/.test(json);
+        if (flag) {
+          return JSON.parse(json.replace(/\'/gi, '"'));
+        } else {
+          return JSON.parse(json);
+        }
+      } else {
+        return null;
+      }
+    },
+    initTableData(json) {
+      let obj = this.JsonToObject(json);
+      let arr = Object.entries(obj).map(item => {
+        return { key: item[0], value: item[1], $cellEdit: false };
+      });
+      return arr;
+    },
+    handlerTable(arr) {
+      let obj = {};
+      if (arr) {
+        arr.forEach(item => {
+          return (obj[item.key] = item.value);
+        });
+      }
+      if (Object.keys(obj).length) {
+        return JSON.stringify(obj);
+      } else {
+        return "";
+      }
+    }
+  },
+  watch: {
+    formFieldsData: {
+      handler(data) {
+        if (data.header) {
+          this.headerTableData = this.initTableData(data.header);
+        }
+        if (data.body) {
+          this.bodyTableData = this.initTableData(data.body);
+        }
+        if (data.auth) {
+          this.authTableData = this.initTableData(data.auth);
+        }
+        if (data.query) {
+          this.queryTableData = this.initTableData(data.query);
+        }
+      },
+      deep: true
+    }
+  }
+};
+</script>
+<style>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>
diff --git a/catch/apimanager/catch-admin-vue/src/views/apimanager/router.js b/catch/apimanager/catch-admin-vue/src/views/apimanager/router.js
new file mode 100644
index 0000000..554a808
--- /dev/null
+++ b/catch/apimanager/catch-admin-vue/src/views/apimanager/router.js
@@ -0,0 +1,8 @@
+export default {
+  // api分类
+  apicategory: () => import('@/views/apimanager/apicategory'),
+  // api测试
+  apitester: () => import('@/views/apimanager/apitester'),
+  apirun: () => import('@/views/apimanager/apirun'),
+  apienv: () => import('@/views/apimanager/apienv')
+}