fork from bc4552c5a8

client/containers/Project/Interface/InterfaceList/AddInterfaceCatForm.js

@@ -0,0 +1,69 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, Input, Button } from 'antd';
+const FormItem = Form.Item;
+function hasErrors(fieldsError) {
+  return Object.keys(fieldsError).some(field => fieldsError[field]);
+}
+class AddInterfaceForm extends Component {
+  static propTypes = {
+    form: PropTypes.object,
+    onSubmit: PropTypes.func,
+    onCancel: PropTypes.func,
+    catdata: PropTypes.object
+  };
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        this.props.onSubmit(values);
+      }
+    });
+  };
+
+  render() {
+    const { getFieldDecorator, getFieldsError } = this.props.form;
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 14 }
+      }
+    };
+
+    return (
+      <Form onSubmit={this.handleSubmit}>
+        <FormItem {...formItemLayout} label="分类名">
+          {getFieldDecorator('name', {
+            rules: [
+              {
+                required: true,
+                message: '请输入分类名称!'
+              }
+            ],
+            initialValue: this.props.catdata ? this.props.catdata.name || null : null
+          })(<Input placeholder="分类名称" />)}
+        </FormItem>
+        <FormItem {...formItemLayout} label="备注">
+          {getFieldDecorator('desc', {
+            initialValue: this.props.catdata ? this.props.catdata.desc || null : null
+          })(<Input placeholder="备注" />)}
+        </FormItem>
+
+        <FormItem className="catModalfoot" wrapperCol={{ span: 24, offset: 8 }}>
+          <Button onClick={this.props.onCancel} style={{ marginRight: '10px' }}>
+            取消
+          </Button>
+          <Button type="primary" htmlType="submit" disabled={hasErrors(getFieldsError())}>
+            提交
+          </Button>
+        </FormItem>
+      </Form>
+    );
+  }
+}
+
+export default Form.create()(AddInterfaceForm);

client/containers/Project/Interface/InterfaceList/AddInterfaceForm.js

@@ -0,0 +1,129 @@
+import React, { PureComponent as Component } from 'react'
+import PropTypes from 'prop-types'
+import { Form, Input, Select, Button } from 'antd';
+
+import constants from '../../../../constants/variable.js'
+import { handleApiPath, nameLengthLimit } from '../../../../common.js'
+const HTTP_METHOD = constants.HTTP_METHOD;
+const HTTP_METHOD_KEYS = Object.keys(HTTP_METHOD);
+
+const FormItem = Form.Item;
+const Option = Select.Option;
+function hasErrors(fieldsError) {
+  return Object.keys(fieldsError).some(field => fieldsError[field]);
+}
+
+
+class AddInterfaceForm extends Component {
+  static propTypes = {
+    form: PropTypes.object,
+    onSubmit: PropTypes.func,
+    onCancel: PropTypes.func,
+    catid: PropTypes.number,
+    catdata: PropTypes.array
+  }
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        this.props.onSubmit(values, () => {
+          this.props.form.resetFields();
+        });
+
+      }
+    });
+  }
+
+  handlePath = (e) => {
+    let val = e.target.value
+    this.props.form.setFieldsValue({
+      path: handleApiPath(val)
+    })
+  }
+  render() {
+    const { getFieldDecorator, getFieldsError } = this.props.form;
+    const prefixSelector = getFieldDecorator('method', {
+      initialValue: 'GET'
+    })(
+      <Select style={{ width: 75 }}>
+        {HTTP_METHOD_KEYS.map(item => {
+          return <Option key={item} value={item}>{item}</Option>
+        })}
+      </Select>
+      );
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 14 }
+      }
+    };
+
+
+    return (
+
+      <Form onSubmit={this.handleSubmit}>
+        <FormItem
+          {...formItemLayout}
+          label="接口分类"
+        >
+          {getFieldDecorator('catid', {
+            initialValue: this.props.catid ? this.props.catid + '' : this.props.catdata[0]._id + ''
+          })(
+            <Select>
+              {this.props.catdata.map(item => {
+                return <Option key={item._id} value={item._id + ""}>{item.name}</Option>
+              })}
+            </Select>
+            )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="接口名称"
+        >
+          {getFieldDecorator('title', {
+            rules: nameLengthLimit('接口')
+          })(
+            <Input placeholder="接口名称" />
+            )}
+        </FormItem>
+
+        <FormItem
+          {...formItemLayout}
+          label="接口路径"
+        >
+          {getFieldDecorator('path', {
+            rules: [{
+              required: true, message: '请输入接口路径!'
+            }]
+          })(
+            <Input onBlur={this.handlePath} addonBefore={prefixSelector} placeholder="/path" />
+            )}
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label="注"
+        >
+          <span style={{ color: "#929292" }}>详细的接口数据可以在编辑页面中添加</span>
+        </FormItem>
+        <FormItem className="catModalfoot" wrapperCol={{ span: 24, offset: 8 }} >
+          <Button onClick={this.props.onCancel} style={{ marginRight: "10px" }}  >取消</Button>
+          <Button
+            type="primary"
+            htmlType="submit"
+            disabled={hasErrors(getFieldsError())}
+          >
+            提交
+          </Button>
+        </FormItem>
+
+      </Form>
+
+    );
+  }
+}
+
+export default Form.create()(AddInterfaceForm);

client/containers/Project/Interface/InterfaceList/Edit.js

@@ -0,0 +1,229 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import InterfaceEditForm from './InterfaceEditForm.js';
+import {
+  updateInterfaceData,
+  fetchInterfaceListMenu,
+  fetchInterfaceData
+} from '../../../../reducer/modules/interface.js';
+import { getProject } from '../../../../reducer/modules/project.js';
+import axios from 'axios';
+import { message, Modal } from 'antd';
+import './Edit.scss';
+import { withRouter, Link } from 'react-router-dom';
+import ProjectTag from '../../Setting/ProjectMessage/ProjectTag.js';
+
+@connect(
+  state => {
+    return {
+      curdata: state.inter.curdata,
+      currProject: state.project.currProject
+    };
+  },
+  {
+    updateInterfaceData,
+    fetchInterfaceListMenu,
+    fetchInterfaceData,
+    getProject
+  }
+)
+class InterfaceEdit extends Component {
+  static propTypes = {
+    curdata: PropTypes.object,
+    currProject: PropTypes.object,
+    updateInterfaceData: PropTypes.func,
+    fetchInterfaceListMenu: PropTypes.func,
+    fetchInterfaceData: PropTypes.func,
+    match: PropTypes.object,
+    switchToView: PropTypes.func,
+    getProject: PropTypes.func
+  };
+
+  constructor(props) {
+    super(props);
+    const { curdata, currProject } = this.props;
+    this.state = {
+      mockUrl:
+        location.protocol +
+        '//' +
+        location.hostname +
+        (location.port !== '' ? ':' + location.port : '') +
+        `/mock/${currProject._id}${currProject.basepath}${curdata.path}`,
+      curdata: {},
+      status: 0,
+      visible: false
+      // tag: []
+    };
+  }
+
+  onSubmit = async params => {
+    params.id = this.props.match.params.actionId;
+    let result = await axios.post('/api/interface/up', params);
+    this.props.fetchInterfaceListMenu(this.props.currProject._id).then();
+    this.props.fetchInterfaceData(params.id).then();
+    if (result.data.errcode === 0) {
+      this.props.updateInterfaceData(params);
+      message.success('保存成功');
+    } else {
+      message.error(result.data.errmsg);
+    }
+  };
+
+  componentWillUnmount() {
+    try {
+      if (this.state.status === 1) {
+        this.WebSocket.close();
+      }
+    } catch (e) {
+      return null;
+    }
+  }
+
+  componentDidMount() {
+    let domain = location.hostname + (location.port !== '' ? ':' + location.port : '');
+    let s,
+      initData = false;
+    //因后端 node 仅支持 ws， 暂不支持 wss
+    let wsProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
+
+    setTimeout(() => {
+      if (initData === false) {
+        this.setState({
+          curdata: this.props.curdata,
+          status: 1
+        });
+        initData = true;
+      }
+    }, 3000);
+
+    try {
+      s = new WebSocket(
+        wsProtocol +
+          '://' +
+          domain +
+          '/api/interface/solve_conflict?id=' +
+          this.props.match.params.actionId
+      );
+      s.onopen = () => {
+        this.WebSocket = s;
+      };
+
+      s.onmessage = e => {
+        initData = true;
+        let result = JSON.parse(e.data);
+        if (result.errno === 0) {
+          this.setState({
+            curdata: result.data,
+            status: 1
+          });
+        } else {
+          this.setState({
+            curdata: result.data,
+            status: 2
+          });
+        }
+      };
+
+      s.onerror = () => {
+        this.setState({
+          curdata: this.props.curdata,
+          status: 1
+        });
+        console.warn('websocket 连接失败，将导致多人编辑同一个接口冲突。');
+      };
+    } catch (e) {
+      this.setState({
+        curdata: this.props.curdata,
+        status: 1
+      });
+      console.error('websocket 连接失败，将导致多人编辑同一个接口冲突。');
+    }
+  }
+
+  onTagClick = () => {
+    this.setState({
+      visible: true
+    });
+  };
+
+  handleOk = async () => {
+    let { tag } = this.tag.state;
+    tag = tag.filter(val => {
+      return val.name !== '';
+    });
+
+    let id = this.props.currProject._id;
+    let params = {
+      id,
+      tag
+    };
+    let result = await axios.post('/api/project/up_tag', params);
+
+    if (result.data.errcode === 0) {
+      await this.props.getProject(id);
+      message.success('保存成功');
+    } else {
+      message.error(result.data.errmsg);
+    }
+
+    this.setState({
+      visible: false
+    });
+  };
+
+  handleCancel = () => {
+    this.setState({
+      visible: false
+    });
+  };
+
+  tagSubmit = tagRef => {
+    this.tag = tagRef;
+
+    // this.setState({tag})
+  };
+
+  render() {
+    const { cat, basepath, switch_notice, tag } = this.props.currProject;
+    return (
+      <div className="interface-edit">
+        {this.state.status === 1 ? (
+          <InterfaceEditForm
+            cat={cat}
+            mockUrl={this.state.mockUrl}
+            basepath={basepath}
+            noticed={switch_notice}
+            onSubmit={this.onSubmit}
+            curdata={this.state.curdata}
+            onTagClick={this.onTagClick}
+          />
+        ) : null}
+        {this.state.status === 2 ? (
+          <div style={{ textAlign: 'center', fontSize: '14px', paddingTop: '10px' }}>
+            <Link to={'/user/profile/' + this.state.curdata.uid}>
+              <b>{this.state.curdata.username}</b>
+            </Link>
+            <span>正在编辑该接口，请稍后再试...</span>
+          </div>
+        ) : null}
+        {this.state.status === 0 && '正在加载，请耐心等待...'}
+
+        <Modal
+          title="Tag 设置"
+          width={680}
+          visible={this.state.visible}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          okText="保存"
+        >
+          <div className="tag-modal-center">
+            <ProjectTag tagMsg={tag} ref={this.tagSubmit} />
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default withRouter(InterfaceEdit);

client/containers/Project/Interface/InterfaceList/Edit.scss

@@ -0,0 +1,116 @@
+@import '../../../../styles/mixin.scss';
+
+.interface-edit{
+  padding: 24px;
+  // overflow: hidden;
+  .interface-edit-item{
+    margin-bottom: 16px;
+    .ant-form-item-label label:after{
+      margin-left: 4px;
+    }
+
+    .interface-editor {
+      min-height: 300px;
+    }
+  }
+
+  .interface-edit-json-info{
+    margin-bottom: 5px;
+  }
+
+  .interface-edit-item.hide {
+    display: none;
+  }
+  .interface-edit-item-content{
+    margin-bottom: 16px;
+    .interface-edit-item-content-col{
+      padding:0 1px;
+    }
+    .interface-edit-item-content-col-drag{
+      width:24px;
+      padding: 7px;
+      cursor: ns-resize;
+    }
+  }
+  .interface-edit-del-icon{
+    margin-top: 10px;
+    margin-left: 5px;
+    cursor: pointer
+  }
+  .interface-edit-direc-icon{
+    margin-top: 5px;
+    margin-left: 5px;
+    cursor: pointer
+  }
+  .ant-select-selection__rendered{
+    line-height: 34px;
+  }
+  .interace-edit-desc{
+    height: 250px;
+  }
+  .ant-affix{
+    background-color: #f3f4f6;
+     padding: 16px 0;
+     z-index: 999;
+  }
+  .interface-edit-submit-button{
+      background-color: #1d1d3d;
+      color: #fff;
+  }
+
+  .interface-edit-submit-button:hover{
+    border-color: #434370;
+    background-color: #434370;
+  }
+}
+
+.table-interfacelist {
+  margin-top: .2rem;
+  white-space: nowrap;
+  table {
+    table-layout: fixed;
+  }
+  .path {
+    width: 95%;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    padding-right: 24px;
+    // line-height: 100%;
+    vertical-align: middle;
+  }
+
+  .opened {
+    color: #00a854;
+    padding-right: 6px;
+    font-size: 14px;
+  }
+  .colValue{
+    display: inline-block;
+    border-radius: 4px;
+    color: #00a854;
+    background: #cfefdf;
+    border-color: #cfefdf;
+    height: 23px;
+    line-height: 23px;
+    text-align: center;
+    font-size: 10px;
+    margin-right: 7px;
+    padding: 0 5px;
+  }
+  .ant-select-selection {
+    background-color: transparent;
+    border: none;
+  }
+}
+
+.toolTip .ant-tooltip-inner{
+  white-space: normal;
+  word-break: break-all;
+}
+
+.tag-modal-center {
+  padding-left: 48px;
+}
+

client/containers/Project/Interface/InterfaceList/InterfaceContent.js

@@ -0,0 +1,183 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Tabs, Modal, Button } from 'antd';
+import Edit from './Edit.js';
+import View from './View.js';
+import { Prompt } from 'react-router';
+import { fetchInterfaceData } from '../../../../reducer/modules/interface.js';
+import { withRouter } from 'react-router-dom';
+import Run from './Run/Run.js';
+const plugin = require('client/plugin.js');
+
+const TabPane = Tabs.TabPane;
+@connect(
+  state => {
+    return {
+      curdata: state.inter.curdata,
+      list: state.inter.list,
+      editStatus: state.inter.editStatus
+    };
+  },
+  {
+    fetchInterfaceData
+  }
+)
+class Content extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    list: PropTypes.array,
+    curdata: PropTypes.object,
+    fetchInterfaceData: PropTypes.func,
+    history: PropTypes.object,
+    editStatus: PropTypes.bool
+  };
+  constructor(props) {
+    super(props);
+    this.title = 'YApi-高效、易用、功能强大的可视化接口管理平台';
+    this.state = {
+      curtab: 'view',
+      visible: false,
+      nextTab: ''
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    const params = this.props.match.params;
+    this.actionId = params.actionId;
+    this.handleRequest(this.props);
+  }
+
+  componentWillUnmount() {
+    document.getElementsByTagName('title')[0].innerText = this.title;
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const params = nextProps.match.params;
+    if (params.actionId !== this.actionId) {
+      this.actionId = params.actionId;
+      this.handleRequest(nextProps);
+    }
+  }
+
+  handleRequest(nextProps) {
+    const params = nextProps.match.params;
+    this.props.fetchInterfaceData(params.actionId);
+    this.setState({
+      curtab: 'view'
+    });
+  }
+
+  switchToView = () => {
+    this.setState({
+      curtab: 'view'
+    });
+  };
+
+  onChange = key => {
+    if (this.state.curtab === 'edit' && this.props.editStatus) {
+      this.showModal();
+    } else {
+      this.setState({
+        curtab: key
+      });
+    }
+    this.setState({
+      nextTab: key
+    });
+  };
+  // 确定离开页面
+  handleOk = () => {
+    this.setState({
+      visible: false,
+      curtab: this.state.nextTab
+    });
+  };
+  // 离开编辑页面的提示
+  showModal = () => {
+    this.setState({
+      visible: true
+    });
+  };
+  // 取消离开编辑页面
+  handleCancel = () => {
+    this.setState({
+      visible: false
+    });
+  };
+  render() {
+    if (this.props.curdata.title) {
+      document.getElementsByTagName('title')[0].innerText =
+        this.props.curdata.title + '-' + this.title;
+    }
+
+    let InterfaceTabs = {
+      view: {
+        component: View,
+        name: '预览'
+      },
+      edit: {
+        component: Edit,
+        name: '编辑'
+      },
+      run: {
+        component: Run,
+        name: '运行'
+      }
+    };
+
+    plugin.emitHook('interface_tab', InterfaceTabs);
+
+    const tabs = (
+      <Tabs
+        className="tabs-large"
+        onChange={this.onChange}
+        activeKey={this.state.curtab}
+        defaultActiveKey="view"
+      >
+        {Object.keys(InterfaceTabs).map(key => {
+          let item = InterfaceTabs[key];
+          return <TabPane tab={item.name} key={key} />;
+        })}
+      </Tabs>
+    );
+    let tabContent = null;
+    if (this.state.curtab) {
+      let C = InterfaceTabs[this.state.curtab].component;
+      tabContent = <C switchToView={this.switchToView} />;
+    }
+
+    return (
+      <div className="interface-content">
+        <Prompt
+          when={this.state.curtab === 'edit' && this.props.editStatus ? true : false}
+          message={() => {
+            // this.showModal();
+            return '离开页面会丢失当前编辑的内容，确定要离开吗？';
+          }}
+        />
+        {tabs}
+        {tabContent}
+        {this.state.visible && (
+          <Modal
+            title="你即将离开编辑页面"
+            visible={this.state.visible}
+            onCancel={this.handleCancel}
+            footer={[
+              <Button key="back" onClick={this.handleCancel}>
+                取 消
+              </Button>,
+              <Button key="submit" onClick={this.handleOk}>
+                确 定
+              </Button>
+            ]}
+          >
+            <p>离开页面会丢失当前编辑的内容，确定要离开吗？</p>
+          </Modal>
+        )}
+      </div>
+    );
+  }
+}
+
+export default withRouter(Content);

client/containers/Project/Interface/InterfaceList/InterfaceList.js

@@ -0,0 +1,409 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import { Table, Button, Modal, message, Tooltip, Select, Icon } from 'antd';
+import AddInterfaceForm from './AddInterfaceForm';
+import {
+  fetchInterfaceListMenu,
+  fetchInterfaceList,
+  fetchInterfaceCatList
+} from '../../../../reducer/modules/interface.js';
+import { getProject } from '../../../../reducer/modules/project.js';
+import { Link } from 'react-router-dom';
+import variable from '../../../../constants/variable';
+import './Edit.scss';
+import Label from '../../../../components/Label/Label.js';
+
+const Option = Select.Option;
+const limit = 20;
+
+@connect(
+  state => {
+    return {
+      curData: state.inter.curdata,
+      curProject: state.project.currProject,
+      catList: state.inter.list,
+      totalTableList: state.inter.totalTableList,
+      catTableList: state.inter.catTableList,
+      totalCount: state.inter.totalCount,
+      count: state.inter.count
+    };
+  },
+  {
+    fetchInterfaceListMenu,
+    fetchInterfaceList,
+    fetchInterfaceCatList,
+    getProject
+  }
+)
+class InterfaceList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      data: [],
+      filteredInfo: {},
+      catid: null,
+      total: null,
+      current: 1
+    };
+  }
+
+  static propTypes = {
+    curData: PropTypes.object,
+    catList: PropTypes.array,
+    match: PropTypes.object,
+    curProject: PropTypes.object,
+    history: PropTypes.object,
+    fetchInterfaceListMenu: PropTypes.func,
+    fetchInterfaceList: PropTypes.func,
+    fetchInterfaceCatList: PropTypes.func,
+    totalTableList: PropTypes.array,
+    catTableList: PropTypes.array,
+    totalCount: PropTypes.number,
+    count: PropTypes.number,
+    getProject: PropTypes.func
+  };
+
+  handleRequest = async props => {
+    const { params } = props.match;
+    if (!params.actionId) {
+      let projectId = params.id;
+      this.setState({
+        catid: null
+      });
+      let option = {
+        page: this.state.current,
+        limit,
+        project_id: projectId,
+        status: this.state.filteredInfo.status,
+        tag: this.state.filteredInfo.tag
+      };
+      await this.props.fetchInterfaceList(option);
+    } else if (isNaN(params.actionId)) {
+      let catid = params.actionId.substr(4);
+      this.setState({catid: +catid});
+      let option = {
+        page: this.state.current,
+        limit,
+        catid,
+        status: this.state.filteredInfo.status,
+        tag: this.state.filteredInfo.tag
+      };
+      await this.props.fetchInterfaceCatList(option);
+    }
+  };
+
+  // 更新分类简介
+  handleChangeInterfaceCat = (desc, name) => {
+    let params = {
+      catid: this.state.catid,
+      name: name,
+      desc: desc
+    };
+
+    axios.post('/api/interface/up_cat', params).then(async res => {
+      if (res.data.errcode !== 0) {
+        return message.error(res.data.errmsg);
+      }
+      let project_id = this.props.match.params.id;
+      await this.props.getProject(project_id);
+      await this.props.fetchInterfaceListMenu(project_id);
+      message.success('接口集合简介更新成功');
+    });
+  };
+
+  handleChange = (pagination, filters, sorter) => {
+    this.setState({
+      current: pagination.current || 1,
+      sortedInfo: sorter,
+      filteredInfo: filters
+    }, () => this.handleRequest(this.props));
+  };
+
+  UNSAFE_componentWillMount() {
+    this.actionId = this.props.match.params.actionId;
+    this.handleRequest(this.props);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    let _actionId = nextProps.match.params.actionId;
+
+    if (this.actionId !== _actionId) {
+      this.actionId = _actionId;
+      this.setState(
+        {
+          current: 1
+        },
+        () => this.handleRequest(nextProps)
+      );
+    }
+  }
+
+  handleAddInterface = data => {
+    data.project_id = this.props.curProject._id;
+    axios.post('/api/interface/add', data).then(res => {
+      if (res.data.errcode !== 0) {
+        return message.error(`${res.data.errmsg}, 你可以在左侧的接口列表中对接口进行删改`);
+      }
+      message.success('接口添加成功');
+      let interfaceId = res.data.data._id;
+      this.props.history.push('/project/' + data.project_id + '/interface/api/' + interfaceId);
+      this.props.fetchInterfaceListMenu(data.project_id);
+    });
+  };
+
+  changeInterfaceCat = async (id, catid) => {
+    const params = {
+      id: id,
+      catid
+    };
+    let result = await axios.post('/api/interface/up', params);
+    if (result.data.errcode === 0) {
+      message.success('修改成功');
+      this.handleRequest(this.props);
+      this.props.fetchInterfaceListMenu(this.props.curProject._id);
+    } else {
+      message.error(result.data.errmsg);
+    }
+  };
+
+  changeInterfaceStatus = async value => {
+    const params = {
+      id: value.split('-')[0],
+      status: value.split('-')[1]
+    };
+    let result = await axios.post('/api/interface/up', params);
+    if (result.data.errcode === 0) {
+      message.success('修改成功');
+      this.handleRequest(this.props);
+    } else {
+      message.error(result.data.errmsg);
+    }
+  };
+
+  //page change will be processed in handleChange by pagination
+  // changePage = current => {
+  //   if (this.state.current !== current) {
+  //     this.setState(
+  //       {
+  //         current: current
+  //       },
+  //       () => this.handleRequest(this.props)
+  //     );
+  //   }
+  // };
+
+  render() {
+    let tag = this.props.curProject.tag;
+    let tagFilter = tag.map(item => {
+      return {text: item.name, value: item.name};
+    });
+
+    const columns = [
+      {
+        title: '接口名称',
+        dataIndex: 'title',
+        key: 'title',
+        width: 30,
+        render: (text, item) => {
+          return (
+            <Tooltip title= {text}>
+              <Link to={'/project/' + item.project_id + '/interface/api/' + item._id}>
+                <span className="path">{text}</span>
+              </Link>
+            </Tooltip>
+          );
+        }
+      },
+      {
+        title: '接口路径',
+        dataIndex: 'path',
+        key: 'path',
+        width: 50,
+        render: (item, record) => {
+          const path = this.props.curProject.basepath + item;
+          let methodColor =
+            variable.METHOD_COLOR[record.method ? record.method.toLowerCase() : 'get'] ||
+            variable.METHOD_COLOR['get'];
+          return (
+            <div>
+              <span
+                style={{ color: methodColor.color, backgroundColor: methodColor.bac }}
+                className="colValue"
+              >
+                {record.method}
+              </span>
+              <Tooltip title="开放接口" placement="topLeft">
+                <span>{record.api_opened && <Icon className="opened" type="eye-o" />}</span>
+              </Tooltip>
+              <Tooltip title={path} placement="topLeft" overlayClassName="toolTip">
+                <span className="path">{path}</span>
+              </Tooltip>
+            </div>
+          );
+        }
+      },
+      {
+        title: '接口分类',
+        dataIndex: 'catid',
+        key: 'catid',
+        width: 28,
+        render: (item, record) => {
+          return (
+            <Select
+              value={item + ''}
+              className="select path"
+              onChange={catid => this.changeInterfaceCat(record._id, catid)}
+            >
+              {this.props.catList.map(cat => {
+                return (
+                  <Option key={cat.id + ''} value={cat._id + ''}>
+                    <span>{cat.name}</span>
+                  </Option>
+                );
+              })}
+            </Select>
+          );
+        }
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 24,
+        render: (text, record) => {
+          const key = record.key;
+          return (
+            <Select
+              value={key + '-' + text}
+              className="select"
+              onChange={this.changeInterfaceStatus}
+            >
+              <Option value={key + '-done'}>
+                <span className="tag-status done">已完成</span>
+              </Option>
+              <Option value={key + '-undone'}>
+                <span className="tag-status undone">未完成</span>
+              </Option>
+            </Select>
+          );
+        },
+        filters: [
+          {
+            text: '已完成',
+            value: 'done'
+          },
+          {
+            text: '未完成',
+            value: 'undone'
+          }
+        ],
+        onFilter: (value, record) => record.status.indexOf(value) === 0
+      },
+      {
+        title: 'tag',
+        dataIndex: 'tag',
+        key: 'tag',
+        width: 14,
+        render: text => {
+          let textMsg = text.length > 0 ? text.join('\n') : '未设置';
+          return <div className="table-desc">{textMsg}</div>;
+        },
+        filters: tagFilter,
+        onFilter: (value, record) => {
+          return record.tag.indexOf(value) >= 0;
+        }
+      }
+    ];
+    let intername = '',
+      desc = '';
+    let cat = this.props.curProject ? this.props.curProject.cat : [];
+
+    if (cat) {
+      for (let i = 0; i < cat.length; i++) {
+        if (cat[i]._id === this.state.catid) {
+          intername = cat[i].name;
+          desc = cat[i].desc;
+          break;
+        }
+      }
+    }
+    // const data = this.state.data ? this.state.data.map(item => {
+    //   item.key = item._id;
+    //   return item;
+    // }) : [];
+    let data = [];
+    let total = 0;
+    const { params } = this.props.match;
+    if (!params.actionId) {
+      data = this.props.totalTableList;
+      total = this.props.totalCount;
+    } else if (isNaN(params.actionId)) {
+      data = this.props.catTableList;
+      total = this.props.count;
+    }
+
+    data = data.map(item => {
+      item.key = item._id;
+      return item;
+    });
+
+    const pageConfig = {
+      total: total,
+      pageSize: limit,
+      current: this.state.current
+      // onChange: this.changePage
+    };
+
+    const isDisabled = this.props.catList.length === 0;
+
+    // console.log(this.props.curProject.tag)
+
+    return (
+      <div style={{ padding: '24px' }}>
+        <h2 className="interface-title" style={{ display: 'inline-block', margin: 0 }}>
+          {intername ? intername : '全部接口'}共 ({total}) 个
+        </h2>
+
+        <Button
+          style={{ float: 'right' }}
+          disabled={isDisabled}
+          type="primary"
+          onClick={() => this.setState({ visible: true })}
+        >
+          添加接口
+        </Button>
+        <div style={{ marginTop: '10px' }}>
+          <Label onChange={value => this.handleChangeInterfaceCat(value, intername)} desc={desc} />
+        </div>
+        <Table
+          className="table-interfacelist"
+          pagination={pageConfig}
+          columns={columns}
+          onChange={this.handleChange}
+          dataSource={data}
+        />
+        {this.state.visible && (
+          <Modal
+            title="添加接口"
+            visible={this.state.visible}
+            onCancel={() => this.setState({ visible: false })}
+            footer={null}
+            className="addcatmodal"
+          >
+            <AddInterfaceForm
+              catid={this.state.catid}
+              catdata={cat}
+              onCancel={() => this.setState({ visible: false })}
+              onSubmit={this.handleAddInterface}
+            />
+          </Modal>
+        )}
+      </div>
+    );
+  }
+}
+
+export default InterfaceList;

client/containers/Project/Interface/InterfaceList/InterfaceMenu.js

@@ -0,0 +1,641 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  fetchInterfaceListMenu,
+  fetchInterfaceList,
+  fetchInterfaceCatList,
+  fetchInterfaceData,
+  deleteInterfaceData,
+  deleteInterfaceCatData,
+  initInterface
+} from '../../../../reducer/modules/interface.js';
+import { getProject } from '../../../../reducer/modules/project.js';
+import { Input, Icon, Button, Modal, message, Tree, Tooltip } from 'antd';
+import AddInterfaceForm from './AddInterfaceForm';
+import AddInterfaceCatForm from './AddInterfaceCatForm';
+import axios from 'axios';
+import { Link, withRouter } from 'react-router-dom';
+import produce from 'immer';
+import { arrayChangeIndex } from '../../../../common.js';
+
+import './interfaceMenu.scss';
+
+const confirm = Modal.confirm;
+const TreeNode = Tree.TreeNode;
+const headHeight = 240; // menu顶部到网页顶部部分的高度
+
+@connect(
+  state => {
+    return {
+      list: state.inter.list,
+      inter: state.inter.curdata,
+      curProject: state.project.currProject,
+      expands: []
+    };
+  },
+  {
+    fetchInterfaceListMenu,
+    fetchInterfaceData,
+    deleteInterfaceCatData,
+    deleteInterfaceData,
+    initInterface,
+    getProject,
+    fetchInterfaceCatList,
+    fetchInterfaceList
+  }
+)
+class InterfaceMenu extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    inter: PropTypes.object,
+    projectId: PropTypes.string,
+    list: PropTypes.array,
+    fetchInterfaceListMenu: PropTypes.func,
+    curProject: PropTypes.object,
+    fetchInterfaceData: PropTypes.func,
+    addInterfaceData: PropTypes.func,
+    deleteInterfaceData: PropTypes.func,
+    initInterface: PropTypes.func,
+    history: PropTypes.object,
+    router: PropTypes.object,
+    getProject: PropTypes.func,
+    fetchInterfaceCatList: PropTypes.func,
+    fetchInterfaceList: PropTypes.func
+  };
+
+  /**
+   * @param {String} key
+   */
+  changeModal = (key, status) => {
+    //visible add_cat_modal_visible change_cat_modal_visible del_cat_modal_visible
+    let newState = {};
+    newState[key] = status;
+    this.setState(newState);
+  };
+
+  handleCancel = () => {
+    this.setState({
+      visible: false
+    });
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      curKey: null,
+      visible: false,
+      delIcon: null,
+      curCatid: null,
+      add_cat_modal_visible: false,
+      change_cat_modal_visible: false,
+      del_cat_modal_visible: false,
+      curCatdata: {},
+      expands: null,
+      list: []
+    };
+  }
+
+  handleRequest() {
+    this.props.initInterface();
+    this.getList();
+  }
+
+  async getList() {
+    let r = await this.props.fetchInterfaceListMenu(this.props.projectId);
+    this.setState({
+      list: r.payload.data.data
+    });
+  }
+
+  UNSAFE_componentWillMount() {
+    this.handleRequest();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.list !== nextProps.list) {
+      // console.log('next', nextProps.list)
+      this.setState({
+        list: nextProps.list
+      });
+    }
+  }
+
+  onSelect = selectedKeys => {
+    const { history, match } = this.props;
+    let curkey = selectedKeys[0];
+
+    if (!curkey || !selectedKeys) {
+      return false;
+    }
+    let basepath = '/project/' + match.params.id + '/interface/api';
+    if (curkey === 'root') {
+      history.push(basepath);
+    } else {
+      history.push(basepath + '/' + curkey);
+    }
+    this.setState({
+      expands: null
+    });
+  };
+
+  changeExpands = () => {
+    this.setState({
+      expands: null
+    });
+  };
+
+  handleAddInterface = (data, cb) => {
+    data.project_id = this.props.projectId;
+    axios.post('/api/interface/add', data).then(res => {
+      if (res.data.errcode !== 0) {
+        return message.error(res.data.errmsg);
+      }
+      message.success('接口添加成功');
+      let interfaceId = res.data.data._id;
+      this.props.history.push('/project/' + this.props.projectId + '/interface/api/' + interfaceId);
+      this.getList();
+      this.setState({
+        visible: false
+      });
+      if (cb) {
+        cb();
+      }
+    });
+  };
+
+  handleAddInterfaceCat = data => {
+    data.project_id = this.props.projectId;
+    axios.post('/api/interface/add_cat', data).then(res => {
+      if (res.data.errcode !== 0) {
+        return message.error(res.data.errmsg);
+      }
+      message.success('接口分类添加成功');
+      this.getList();
+      this.props.getProject(data.project_id);
+      this.setState({
+        add_cat_modal_visible: false
+      });
+    });
+  };
+
+  handleChangeInterfaceCat = data => {
+    data.project_id = this.props.projectId;
+
+    let params = {
+      catid: this.state.curCatdata._id,
+      name: data.name,
+      desc: data.desc
+    };
+
+    axios.post('/api/interface/up_cat', params).then(res => {
+      if (res.data.errcode !== 0) {
+        return message.error(res.data.errmsg);
+      }
+      message.success('接口分类更新成功');
+      this.getList();
+      this.props.getProject(data.project_id);
+      this.setState({
+        change_cat_modal_visible: false
+      });
+    });
+  };
+
+  showConfirm = data => {
+    let that = this;
+    let id = data._id;
+    let catid = data.catid;
+    const ref = confirm({
+      title: '您确认删除此接口????',
+      content: '温馨提示：接口删除后，无法恢复',
+      okText: '确认',
+      cancelText: '取消',
+      async onOk() {
+        await that.props.deleteInterfaceData(id, that.props.projectId);
+        await that.getList();
+        await that.props.fetchInterfaceCatList({ catid });
+        ref.destroy();
+        that.props.history.push(
+          '/project/' + that.props.match.params.id + '/interface/api/cat_' + catid
+        );
+      },
+      onCancel() {
+        ref.destroy();
+      }
+    });
+  };
+
+  showDelCatConfirm = catid => {
+    let that = this;
+    const ref = confirm({
+      title: '确定删除此接口分类吗？',
+      content: '温馨提示：该操作会删除该分类下所有接口，接口删除后无法恢复',
+      okText: '确认',
+      cancelText: '取消',
+      async onOk() {
+        await that.props.deleteInterfaceCatData(catid, that.props.projectId);
+        await that.getList();
+        // await that.props.getProject(that.props.projectId)
+        await that.props.fetchInterfaceList({ project_id: that.props.projectId });
+        that.props.history.push('/project/' + that.props.match.params.id + '/interface/api');
+        ref.destroy();
+      },
+      onCancel() {}
+    });
+  };
+
+  copyInterface = async id => {
+    let interfaceData = await this.props.fetchInterfaceData(id);
+    // let data = JSON.parse(JSON.stringify(interfaceData.payload.data.data));
+    // data.title = data.title + '_copy';
+    // data.path = data.path + '_' + Date.now();
+    let data = interfaceData.payload.data.data;
+    let newData = produce(data, draftData => {
+      draftData.title = draftData.title + '_copy';
+      draftData.path = draftData.path + '_' + Date.now();
+    });
+
+    axios.post('/api/interface/add', newData).then(async res => {
+      if (res.data.errcode !== 0) {
+        return message.error(res.data.errmsg);
+      }
+      message.success('接口添加成功');
+      let interfaceId = res.data.data._id;
+      await this.getList();
+      this.props.history.push('/project/' + this.props.projectId + '/interface/api/' + interfaceId);
+      this.setState({
+        visible: false
+      });
+    });
+  };
+
+  enterItem = id => {
+    this.setState({ delIcon: id });
+  };
+
+  leaveItem = () => {
+    this.setState({ delIcon: null });
+  };
+
+  onFilter = e => {
+    this.setState({
+      filter: e.target.value,
+      list: JSON.parse(JSON.stringify(this.props.list))
+    });
+  };
+
+  onExpand = e => {
+    this.setState({
+      expands: e
+    });
+  };
+
+  onDrop = async e => {
+    const dropCatIndex = e.node.props.pos.split('-')[1] - 1;
+    const dragCatIndex = e.dragNode.props.pos.split('-')[1] - 1;
+    if (dropCatIndex < 0 || dragCatIndex < 0) {
+      return;
+    }
+    const { list } = this.props;
+    const dropCatId = this.props.list[dropCatIndex]._id;
+    const id = e.dragNode.props.eventKey;
+    const dragCatId = this.props.list[dragCatIndex]._id;
+
+    const dropPos = e.node.props.pos.split('-');
+    const dropIndex = Number(dropPos[dropPos.length - 1]);
+    const dragPos = e.dragNode.props.pos.split('-');
+    const dragIndex = Number(dragPos[dragPos.length - 1]);
+
+    if (id.indexOf('cat') === -1) {
+      if (dropCatId === dragCatId) {
+        // 同一个分类下的接口交换顺序
+        let colList = list[dropCatIndex].list;
+        let changes = arrayChangeIndex(colList, dragIndex, dropIndex);
+        axios.post('/api/interface/up_index', changes).then();
+      } else {
+        await axios.post('/api/interface/up', { id, catid: dropCatId });
+      }
+      const { projectId, router } = this.props;
+      this.props.fetchInterfaceListMenu(projectId);
+      this.props.fetchInterfaceList({ project_id: projectId });
+      if (router && isNaN(router.params.actionId)) {
+        // 更新分类list下的数据
+        let catid = router.params.actionId.substr(4);
+        this.props.fetchInterfaceCatList({ catid });
+      }
+    } else {
+      // 分类之间拖动
+      let changes = arrayChangeIndex(list, dragIndex - 1, dropIndex - 1);
+      axios.post('/api/interface/up_cat_index', changes).then();
+      this.props.fetchInterfaceListMenu(this.props.projectId);
+    }
+  };
+  // 数据过滤
+  filterList = list => {
+    let that = this;
+    let arr = [];
+    let menuList = produce(list, draftList => {
+      draftList.filter(item => {
+        let interfaceFilter = false;
+        // arr = [];
+        if (item.name.indexOf(that.state.filter) === -1) {
+          item.list = item.list.filter(inter => {
+            if (
+              inter.title.indexOf(that.state.filter) === -1 &&
+              inter.path.indexOf(that.state.filter) === -1
+            ) {
+              return false;
+            }
+            //arr.push('cat_' + inter.catid)
+            interfaceFilter = true;
+            return true;
+          });
+          arr.push('cat_' + item._id);
+          return interfaceFilter === true;
+        }
+        arr.push('cat_' + item._id);
+        return true;
+      });
+    });
+
+    return { menuList, arr };
+  };
+
+  render() {
+    const matchParams = this.props.match.params;
+    // let menuList = this.state.list;
+    const searchBox = (
+      <div className="interface-filter">
+        <Input onChange={this.onFilter} value={this.state.filter} placeholder="搜索接口" />
+        <Button
+          type="primary"
+          onClick={() => this.changeModal('add_cat_modal_visible', true)}
+          className="btn-filter"
+        >
+          添加分类
+        </Button>
+        {this.state.visible ? (
+          <Modal
+            title="添加接口"
+            visible={this.state.visible}
+            onCancel={() => this.changeModal('visible', false)}
+            footer={null}
+            className="addcatmodal"
+          >
+            <AddInterfaceForm
+              catdata={this.props.curProject.cat}
+              catid={this.state.curCatid}
+              onCancel={() => this.changeModal('visible', false)}
+              onSubmit={this.handleAddInterface}
+            />
+          </Modal>
+        ) : (
+          ''
+        )}
+
+        {this.state.add_cat_modal_visible ? (
+          <Modal
+            title="添加分类"
+            visible={this.state.add_cat_modal_visible}
+            onCancel={() => this.changeModal('add_cat_modal_visible', false)}
+            footer={null}
+            className="addcatmodal"
+          >
+            <AddInterfaceCatForm
+              onCancel={() => this.changeModal('add_cat_modal_visible', false)}
+              onSubmit={this.handleAddInterfaceCat}
+            />
+          </Modal>
+        ) : (
+          ''
+        )}
+
+        {this.state.change_cat_modal_visible ? (
+          <Modal
+            title="修改分类"
+            visible={this.state.change_cat_modal_visible}
+            onCancel={() => this.changeModal('change_cat_modal_visible', false)}
+            footer={null}
+            className="addcatmodal"
+          >
+            <AddInterfaceCatForm
+              catdata={this.state.curCatdata}
+              onCancel={() => this.changeModal('change_cat_modal_visible', false)}
+              onSubmit={this.handleChangeInterfaceCat}
+            />
+          </Modal>
+        ) : (
+          ''
+        )}
+      </div>
+    );
+    const defaultExpandedKeys = () => {
+      const { router, inter, list } = this.props,
+        rNull = { expands: [], selects: [] };
+      if (list.length === 0) {
+        return rNull;
+      }
+      if (router) {
+        if (!isNaN(router.params.actionId)) {
+          if (!inter || !inter._id) {
+            return rNull;
+          }
+          return {
+            expands: this.state.expands ? this.state.expands : ['cat_' + inter.catid],
+            selects: [inter._id + '']
+          };
+        } else {
+          let catid = router.params.actionId.substr(4);
+          return {
+            expands: this.state.expands ? this.state.expands : ['cat_' + catid],
+            selects: ['cat_' + catid]
+          };
+        }
+      } else {
+        return {
+          expands: this.state.expands ? this.state.expands : ['cat_' + list[0]._id],
+          selects: ['root']
+        };
+      }
+    };
+
+    const itemInterfaceCreate = item => {
+      return (
+        <TreeNode
+          title={
+            <div
+              className="container-title"
+              onMouseEnter={() => this.enterItem(item._id)}
+              onMouseLeave={this.leaveItem}
+            >
+              <Tooltip title= {item.title}>
+                <Link
+                  className="interface-item"
+                  onClick={e => e.stopPropagation()}
+                  to={'/project/' + matchParams.id + '/interface/api/' + item._id}
+                >
+                  {item.title}
+                </Link>
+              </Tooltip>
+              <div className="btns">
+                <Tooltip title="删除接口">
+                  <Icon
+                    type="delete"
+                    className="interface-delete-icon"
+                    onClick={e => {
+                      e.stopPropagation();
+                      this.showConfirm(item);
+                    }}
+                    style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
+                  />
+                </Tooltip>
+                <Tooltip title="复制接口">
+                  <Icon
+                    type="copy"
+                    className="interface-delete-icon"
+                    onClick={e => {
+                      e.stopPropagation();
+                      this.copyInterface(item._id);
+                    }}
+                    style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
+                  />
+                </Tooltip>
+              </div>
+              {/*<Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}>
+            <Icon type='ellipsis' className="interface-delete-icon" style={{ opacity: this.state.delIcon == item._id ? 1 : 0 }}/>
+          </Dropdown>*/}
+            </div>
+          }
+          key={'' + item._id}
+        />
+      );
+    };
+
+    let currentKes = defaultExpandedKeys();
+    let menuList;
+    if (this.state.filter) {
+      let res = this.filterList(this.state.list);
+      menuList = res.menuList;
+      currentKes.expands = res.arr;
+    } else {
+      menuList = this.state.list;
+    }
+
+    return (
+      <div>
+        {searchBox}
+        {menuList.length > 0 ? (
+          <div
+            className="tree-wrappper"
+            style={{ maxHeight: parseInt(document.body.clientHeight) - headHeight + 'px' }}
+          >
+            <Tree
+              className="interface-list"
+              defaultExpandedKeys={currentKes.expands}
+              defaultSelectedKeys={currentKes.selects}
+              expandedKeys={currentKes.expands}
+              selectedKeys={currentKes.selects}
+              onSelect={this.onSelect}
+              onExpand={this.onExpand}
+              draggable
+              onDrop={this.onDrop}
+            >
+              <TreeNode
+                className="item-all-interface"
+                title={
+                  <Link
+                    onClick={e => {
+                      e.stopPropagation();
+                      this.changeExpands();
+                    }}
+                    to={'/project/' + matchParams.id + '/interface/api'}
+                  >
+                    <Icon type="folder" style={{ marginRight: 5 }} />
+                    全部接口
+                  </Link>
+                }
+                key="root"
+              />
+              {menuList.map(item => {
+                return (
+                  <TreeNode
+                    title={
+                      <div
+                        className="container-title"
+                        onMouseEnter={() => this.enterItem(item._id)}
+                        onMouseLeave={this.leaveItem}
+                      >
+                        <Link
+                          className="interface-item"
+                          onClick={e => {
+                            e.stopPropagation();
+                            this.changeExpands();
+                          }}
+                          to={'/project/' + matchParams.id + '/interface/api/cat_' + item._id}
+                        >
+                          <Icon type="folder-open" style={{ marginRight: 5 }} />
+                          {item.name}
+                        </Link>
+                        <div className="btns">
+                          <Tooltip title="删除分类">
+                            <Icon
+                              type="delete"
+                              className="interface-delete-icon"
+                              onClick={e => {
+                                e.stopPropagation();
+                                this.showDelCatConfirm(item._id);
+                              }}
+                              style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
+                            />
+                          </Tooltip>
+                          <Tooltip title="修改分类">
+                            <Icon
+                              type="edit"
+                              className="interface-delete-icon"
+                              style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
+                              onClick={e => {
+                                e.stopPropagation();
+                                this.changeModal('change_cat_modal_visible', true);
+                                this.setState({
+                                  curCatdata: item
+                                });
+                              }}
+                            />
+                          </Tooltip>
+                          <Tooltip title="添加接口">
+                            <Icon
+                              type="plus"
+                              className="interface-delete-icon"
+                              style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }}
+                              onClick={e => {
+                                e.stopPropagation();
+                                this.changeModal('visible', true);
+                                this.setState({
+                                  curCatid: item._id
+                                });
+                              }}
+                            />
+                          </Tooltip>
+                        </div>
+
+                        {/*<Dropdown overlay={menu(item)} trigger={['click']} onClick={e => e.stopPropagation()}>
+                <Icon type='ellipsis' className="interface-delete-icon" />
+              </Dropdown>*/}
+                      </div>
+                    }
+                    key={'cat_' + item._id}
+                    className={`interface-item-nav ${item.list.length ? '' : 'cat_switch_hidden'}`}
+                  >
+                    {item.list.map(itemInterfaceCreate)}
+                  </TreeNode>
+                );
+              })}
+            </Tree>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default withRouter(InterfaceMenu);

client/containers/Project/Interface/InterfaceList/Run/AddColModal.js

@@ -0,0 +1,149 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import { Modal, Collapse, Row, Col, Input, message, Button, Icon } from 'antd';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import { withRouter } from 'react-router';
+import { fetchInterfaceColList } from '../../../../../reducer/modules/interfaceCol';
+
+const { TextArea } = Input;
+const Panel = Collapse.Panel;
+
+@connect(
+  state => ({
+    interfaceColList: state.interfaceCol.interfaceColList
+  }),
+  {
+    fetchInterfaceColList
+  }
+)
+@withRouter
+export default class AddColModal extends Component {
+  static propTypes = {
+    visible: PropTypes.bool,
+    interfaceColList: PropTypes.array,
+    fetchInterfaceColList: PropTypes.func,
+    match: PropTypes.object,
+    onOk: PropTypes.func,
+    onCancel: PropTypes.func,
+    caseName: PropTypes.string
+  };
+
+  state = {
+    visible: false,
+    addColName: '',
+    addColDesc: '',
+    id: 0,
+    caseName: ''
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  UNSAFE_componentWillMount() {
+    this.props.fetchInterfaceColList(this.props.match.params.id);
+    this.setState({ caseName: this.props.caseName });
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({ id: nextProps.interfaceColList[0]._id });
+    this.setState({ caseName: nextProps.caseName });
+  }
+
+  addCol = async () => {
+    const { addColName: name, addColDesc: desc } = this.state;
+    const project_id = this.props.match.params.id;
+    const res = await axios.post('/api/col/add_col', { name, desc, project_id });
+    if (!res.data.errcode) {
+      message.success('添加集合成功');
+      await this.props.fetchInterfaceColList(project_id);
+
+      this.setState({ id: res.data.data._id });
+    } else {
+      message.error(res.data.errmsg);
+    }
+  };
+
+  select = id => {
+    this.setState({ id });
+  };
+
+  render() {
+    const { interfaceColList = [] } = this.props;
+    const { id } = this.state;
+    return (
+      <Modal
+        className="add-col-modal"
+        title="添加到集合"
+        visible={this.props.visible}
+        onOk={() => this.props.onOk(id, this.state.caseName)}
+        onCancel={this.props.onCancel}
+      >
+        <Row gutter={6} className="modal-input">
+          <Col span="5">
+            <div className="label">接口用例名：</div>
+          </Col>
+          <Col span="15">
+            <Input
+              placeholder="请输入接口用例名称"
+              value={this.state.caseName}
+              onChange={e => this.setState({ caseName: e.target.value })}
+            />
+          </Col>
+        </Row>
+        <p>请选择添加到的集合：</p>
+        <ul className="col-list">
+          {interfaceColList.length ? (
+            interfaceColList.map(col => (
+              <li
+                key={col._id}
+                className={`col-item ${col._id === id ? 'selected' : ''}`}
+                onClick={() => this.select(col._id)}
+              >
+                <Icon type="folder-open" style={{ marginRight: 6 }} />
+                {col.name}
+              </li>
+            ))
+          ) : (
+            <span>暂无集合，请添加！</span>
+          )}
+        </ul>
+        <Collapse>
+          <Panel header="添加新集合">
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label">集合名：</div>
+              </Col>
+              <Col span="15">
+                <Input
+                  placeholder="请输入集合名称"
+                  value={this.state.addColName}
+                  onChange={e => this.setState({ addColName: e.target.value })}
+                />
+              </Col>
+            </Row>
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label">简介：</div>
+              </Col>
+              <Col span="15">
+                <TextArea
+                  rows={3}
+                  placeholder="请输入集合描述"
+                  value={this.state.addColDesc}
+                  onChange={e => this.setState({ addColDesc: e.target.value })}
+                />
+              </Col>
+            </Row>
+            <Row type="flex" justify="end">
+              <Button style={{ float: 'right' }} type="primary" onClick={this.addCol}>
+                添 加
+              </Button>
+            </Row>
+          </Panel>
+        </Collapse>
+      </Modal>
+    );
+  }
+}

client/containers/Project/Interface/InterfaceList/Run/Run.js

@@ -0,0 +1,113 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import axios from 'axios';
+import { message } from 'antd';
+import { Postman } from '../../../../../components';
+import AddColModal from './AddColModal';
+
+// import {
+// } from '../../../reducer/modules/group.js'
+
+import './Run.scss';
+
+@connect(state => ({
+  currInterface: state.inter.curdata,
+  currProject: state.project.currProject,
+  curUid: state.user.uid
+}))
+@withRouter
+export default class Run extends Component {
+  static propTypes = {
+    currProject: PropTypes.object,
+    currInterface: PropTypes.object,
+    match: PropTypes.object,
+    curUid: PropTypes.number
+  };
+
+  state = {};
+
+  constructor(props) {
+    super(props);
+  }
+
+  UNSAFE_componentWillMount() {}
+
+  UNSAFE_componentWillReceiveProps() {}
+
+  savePostmanRef = postman => {
+    this.postman = postman;
+  };
+
+  saveCase = async (colId, caseName) => {
+    const project_id = this.props.match.params.id;
+    const interface_id = this.props.currInterface._id;
+    const {
+      case_env,
+      req_params,
+      req_query,
+      req_headers,
+      req_body_type,
+      req_body_form,
+      req_body_other
+    } = this.postman.state;
+
+    let params = {
+      interface_id,
+      casename: caseName,
+      col_id: colId,
+      project_id,
+      case_env,
+      req_params,
+      req_query,
+      req_headers,
+      req_body_type,
+      req_body_form,
+      req_body_other
+    };
+
+    if (params.test_res_body && typeof params.test_res_body === 'object') {
+      params.test_res_body = JSON.stringify(params.test_res_body, null, '   ');
+    }
+
+    const res = await axios.post('/api/col/add_case', params);
+    if (res.data.errcode) {
+      message.error(res.data.errmsg);
+    } else {
+      message.success('添加成功');
+      this.setState({ saveCaseModalVisible: false });
+    }
+  };
+
+  render() {
+    const { currInterface, currProject } = this.props;
+    const data = Object.assign({}, currInterface, {
+      env: currProject.env,
+      pre_script: currProject.pre_script,
+      after_script: currProject.after_script
+    });
+    data.path = currProject.basepath + currInterface.path;
+    return (
+      <div>
+        <Postman
+          data={data}
+          id={currProject._id}
+          type="inter"
+          saveTip="保存到集合"
+          save={() => this.setState({ saveCaseModalVisible: true })}
+          ref={this.savePostmanRef}
+          interfaceId={currInterface._id}
+          projectId={currInterface.project_id}
+          curUid={this.props.curUid}
+        />
+        <AddColModal
+          visible={this.state.saveCaseModalVisible}
+          caseName={currInterface.title}
+          onCancel={() => this.setState({ saveCaseModalVisible: false })}
+          onOk={this.saveCase}
+        />
+      </div>
+    );
+  }
+}

client/containers/Project/Interface/InterfaceList/Run/Run.scss

@@ -0,0 +1,19 @@
+
+.add-col-modal {
+  .col-list {
+    height: 200px;
+    overflow: auto;
+    margin: 7px 0 16px 0;
+    background: #eaeaea;
+    .col-item {
+      padding: 7px 10px 7px 10px;
+    }
+    .col-item:hover {
+      background: #fa0;
+    }
+    .col-item.selected {
+      background: #2395f1;
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+}

client/containers/Project/Interface/InterfaceList/View.js

@@ -0,0 +1,630 @@
+import './View.scss'
+import React, { PureComponent as Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { Table, Icon, Row, Col, Tooltip, message } from 'antd'
+import { Link } from 'react-router-dom'
+import AceEditor from 'client/components/AceEditor/AceEditor'
+import { formatTime, safeArray } from '../../../../common.js'
+import ErrMsg from '../../../../components/ErrMsg/ErrMsg.js'
+import variable from '../../../../constants/variable'
+import constants from '../../../../constants/variable.js'
+import copy from 'copy-to-clipboard'
+import SchemaTable from '../../../../components/SchemaTable/SchemaTable.js'
+
+const HTTP_METHOD = constants.HTTP_METHOD
+
+@connect(state => {
+  return {
+    curData: state.inter.curdata,
+    custom_field: state.group.field,
+    currProject: state.project.currProject
+  }
+})
+class View extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      init: true,
+      enter: false
+    }
+  }
+  static propTypes = {
+    curData: PropTypes.object,
+    currProject: PropTypes.object,
+    custom_field: PropTypes.object
+  }
+
+  req_body_form(req_body_type, req_body_form) {
+    if (req_body_type === 'form') {
+      const columns = [
+        {
+          title: '参数名称',
+          dataIndex: 'name',
+          key: 'name',
+          width: 140
+        },
+        {
+          title: '参数类型',
+          dataIndex: 'type',
+          key: 'type',
+          width: 100,
+          render: text => {
+            text = text || ''
+            return text.toLowerCase() === 'text' ? (
+              <span>
+                <i className='query-icon text'>T</i>文本
+              </span>
+            ) : (
+              <span>
+                <Icon type='file' className='query-icon' />
+                文件
+              </span>
+            )
+          }
+        },
+        {
+          title: '是否必须',
+          dataIndex: 'required',
+          key: 'required',
+          width: 100
+        },
+        {
+          title: '示例',
+          dataIndex: 'example',
+          key: 'example',
+          width: 80,
+          render(_, item) {
+            return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
+          }
+        },
+        {
+          title: '备注',
+          dataIndex: 'value',
+          key: 'value',
+          render(_, item) {
+            return <p style={{ whiteSpace: 'pre-wrap' }}>{item.value}</p>
+          }
+        }
+      ]
+
+      const dataSource = []
+      if (req_body_form && req_body_form.length) {
+        req_body_form.map((item, i) => {
+          dataSource.push({
+            key: i,
+            name: item.name,
+            value: item.desc,
+            example: item.example,
+            required: item.required == 0 ? '否' : '是',
+            type: item.type
+          })
+        })
+      }
+
+      return (
+        <div
+              style={{ display: dataSource.length ? '' : 'none' }}
+              className='colBody'>
+          <Table
+                bordered
+                size='small'
+                pagination={false}
+                columns={columns}
+                dataSource={dataSource}
+            />
+        </div>
+      )
+    }
+  }
+  res_body(res_body_type, res_body, res_body_is_json_schema) {
+    if (res_body_type === 'json') {
+      if (res_body_is_json_schema) {
+        return <SchemaTable dataSource={res_body} />
+      } else {
+        return (
+          <div className='colBody'>
+            {/* <div id="vres_body_json" style={{ minHeight: h * 16 + 100 }}></div> */}
+            <AceEditor
+                  data={res_body}
+                  readOnly={true}
+                  style={{ minHeight: 600 }}
+              />
+          </div>
+        )
+      }
+    } else if (res_body_type === 'raw') {
+      return (
+        <div className='colBody'>
+          <AceEditor
+                data={res_body}
+                readOnly={true}
+                mode='text'
+                style={{ minHeight: 300 }}
+            />
+        </div>
+      )
+    }
+  }
+
+  req_body(req_body_type, req_body_other, req_body_is_json_schema) {
+    if (req_body_other) {
+      if (req_body_is_json_schema && req_body_type === 'json') {
+        return <SchemaTable dataSource={req_body_other} />
+      } else {
+        return (
+          <div className='colBody'>
+            <AceEditor
+                  data={req_body_other}
+                  readOnly={true}
+                  style={{ minHeight: 300 }}
+                  mode={req_body_type === 'json' ? 'javascript' : 'text'}
+              />
+          </div>
+        )
+      }
+    }
+  }
+
+  req_query(query) {
+    const columns = [
+      {
+        title: '参数名称',
+        dataIndex: 'name',
+        width: 140,
+        key: 'name'
+      },
+      {
+        title: '类型',
+        dataIndex: 'type',
+        width: 140,
+        key: 'type'
+      },
+      {
+        title: '是否必须',
+        width: 100,
+        dataIndex: 'required',
+        key: 'required'
+      },
+      {
+        title: '示例',
+        dataIndex: 'example',
+        key: 'example',
+        width: 80,
+        render(_, item) {
+          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
+        }
+      },
+      {
+        title: '备注',
+        dataIndex: 'value',
+        key: 'value',
+        render(_, item) {
+          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.value}</p>
+        }
+      }
+    ]
+
+    const dataSource = []
+    if (query && query.length) {
+      query.map((item, i) => {
+        dataSource.push({
+          key: i,
+          name: item.name,
+          value: item.desc,
+          example: item.example,
+          required: item.required == 0 ? '否' : '是',
+          type: item.type
+        })
+      })
+    }
+
+    return (
+      <Table
+            bordered
+            size='small'
+            pagination={false}
+            columns={columns}
+            dataSource={dataSource}
+        />
+    )
+  }
+
+  countEnter(str) {
+    let i = 0
+    let c = 0
+    if (!str || !str.indexOf) {
+      return 0
+    }
+    while (str.indexOf('\n', i) > -1) {
+      i = str.indexOf('\n', i) + 2
+      c++
+    }
+    return c
+  }
+
+  componentDidMount() {
+    if (!this.props.curData.title && this.state.init) {
+      this.setState({ init: false })
+    }
+  }
+
+  enterItem = () => {
+    this.setState({
+      enter: true
+    })
+  }
+
+  leaveItem = () => {
+    this.setState({
+      enter: false
+    })
+  }
+
+  copyUrl = url => {
+    copy(url)
+    message.success('已经成功复制到剪切板')
+  }
+
+  flagMsg = (mock, strice) => {
+    if (mock && strice) {
+      return <span>( 全局mock & 严格模式 )</span>
+    } else if (!mock && strice) {
+      return <span>( 严格模式 )</span>
+    } else if (mock && !strice) {
+      return <span>( 全局mock )</span>
+    } else {
+      return
+    }
+  }
+
+  render() {
+    const dataSource = []
+    if (
+        this.props.curData.req_headers &&
+        this.props.curData.req_headers.length
+    ) {
+      this.props.curData.req_headers.map((item, i) => {
+        dataSource.push({
+          key: i,
+          name: item.name,
+          required: item.required == 0 ? '否' : '是',
+          value: item.value,
+          example: item.example,
+          desc: item.desc
+        })
+      })
+    }
+
+    const req_dataSource = []
+    if (this.props.curData.req_params && this.props.curData.req_params.length) {
+      this.props.curData.req_params.map((item, i) => {
+        req_dataSource.push({
+          key: i,
+          name: item.name,
+          desc: item.desc,
+          example: item.example,
+          type: item.type
+        })
+      })
+    }
+    const req_params_columns = [
+      {
+        title: '参数名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: 140
+      },
+      {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        width: 140
+      },
+      {
+        title: '示例',
+        dataIndex: 'example',
+        key: 'example',
+        width: 80,
+        render(_, item) {
+          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
+        }
+      },
+      {
+        title: '备注',
+        dataIndex: 'desc',
+        key: 'desc',
+        render(_, item) {
+          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.desc}</p>
+        }
+      }
+    ]
+
+    const columns = [
+      {
+        title: '参数名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: '200px'
+      },
+      {
+        title: '参数值',
+        dataIndex: 'value',
+        key: 'value',
+        width: '300px'
+      },
+      {
+        title: '是否必须',
+        dataIndex: 'required',
+        key: 'required',
+        width: '100px'
+      },
+      {
+        title: '示例',
+        dataIndex: 'example',
+        key: 'example',
+        width: '80px',
+        render(_, item) {
+          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.example}</p>
+        }
+      },
+      {
+        title: '备注',
+        dataIndex: 'desc',
+        key: 'desc',
+        render(_, item) {
+          return <p style={{ whiteSpace: 'pre-wrap' }}>{item.desc}</p>
+        }
+      }
+    ]
+    let status = {
+      undone: '未完成',
+      done: '已完成'
+    }
+
+    let bodyShow =
+        this.props.curData.req_body_other ||
+        (this.props.curData.req_body_type === 'form' &&
+            this.props.curData.req_body_form &&
+            this.props.curData.req_body_form.length)
+
+    let requestShow =
+        (dataSource && dataSource.length) ||
+        (req_dataSource && req_dataSource.length) ||
+        (this.props.curData.req_query && this.props.curData.req_query.length) ||
+        bodyShow
+
+    let methodColor =
+        variable.METHOD_COLOR[
+            this.props.curData.method
+                ? this.props.curData.method.toLowerCase()
+                : 'get'
+            ]
+
+    // statusColor = statusColor[this.props.curData.status?this.props.curData.status.toLowerCase():"undone"];
+    // const aceEditor = <div style={{ display: this.props.curData.req_body_other && (this.props.curData.req_body_type !== "form") ? "block" : "none" }} className="colBody">
+    //   <AceEditor data={this.props.curData.req_body_other} readOnly={true} style={{ minHeight: 300 }} mode={this.props.curData.req_body_type === 'json' ? 'javascript' : 'text'} />
+    // </div>
+    if (!methodColor) {
+      methodColor = 'get'
+    }
+
+    const { tag, up_time, title, uid, username } = this.props.curData
+
+    let res = (
+      <div className='caseContainer'>
+        <h2 className='interface-title' style={{ marginTop: 0 }}>
+          基本信息
+        </h2>
+        <div className='panel-view'>
+          <Row className='row'>
+            <Col span={4} className='colKey'>
+              接口名称：
+            </Col>
+            <Col span={8} className='colName'>
+              {title}
+            </Col>
+            <Col span={4} className="colKey">
+              创&ensp;建&ensp;人：
+            </Col>
+            <Col span={8} className='colValue'>
+              <Link className='user-name' to={'/user/profile/' + uid}>
+                <img src={'/api/user/avatar?uid=' + uid} className='user-img' />
+                {username}
+              </Link>
+            </Col>
+          </Row>
+          <Row className="row">
+            <Col span={4} className="colKey">
+              状&emsp;&emsp;态：
+            </Col>
+            <Col span={8} className={'tag-status ' + this.props.curData.status}>
+              {status[this.props.curData.status]}
+            </Col>
+            <Col span={4} className='colKey'>
+              更新时间：
+            </Col>
+            <Col span={8}>{formatTime(up_time)}</Col>
+          </Row>
+          {safeArray(tag) && safeArray(tag).length > 0 && (
+            <Row className='row remark'>
+              <Col span={4} className='colKey'>
+                Tag ：
+              </Col>
+              <Col span={18} className='colValue'>
+                {tag.join(' , ')}
+              </Col>
+            </Row>
+            )}
+          <Row className='row'>
+            <Col span={4} className='colKey'>
+              接口路径：
+            </Col>
+            <Col
+                  span={18}
+                  className='colValue'
+                  onMouseEnter={this.enterItem}
+                  onMouseLeave={this.leaveItem}>
+              <span
+                  style={{
+                    color: methodColor.color,
+                    backgroundColor: methodColor.bac
+                  }}
+                  className='colValue tag-method'>
+                {this.props.curData.method}
+              </span>
+              <span className='colValue'>
+                {this.props.currProject.basepath}
+                {this.props.curData.path}
+              </span>
+              <Tooltip title='复制路径'>
+                <Icon
+                      type='copy'
+                      className='interface-url-icon'
+                      onClick={() =>
+                          this.copyUrl(
+                              this.props.currProject.basepath + this.props.curData.path,
+                          )
+                      }
+                      style={{
+                        display: this.state.enter ? 'inline-block' : 'none'
+                      }}
+                  />
+              </Tooltip>
+            </Col>
+          </Row>
+          <Row className='row'>
+            <Col span={4} className='colKey'>
+              Mock地址：
+            </Col>
+            <Col span={18} className='colValue'>
+              {this.flagMsg(
+                    this.props.currProject.is_mock_open,
+                    this.props.currProject.strice,
+                )}
+              <span
+                    className='href'
+                    onClick={() =>
+                        window.open(
+                            location.protocol +
+                            '//' +
+                            location.hostname +
+                            (location.port !== '' ? ':' + location.port : '') +
+                            `/mock/${this.props.currProject._id}${this.props.currProject.basepath}${this.props.curData.path}`,
+                            '_blank',
+                        )
+                    }>
+                {location.protocol +
+                    '//' +
+                    location.hostname +
+                    (location.port !== '' ? ':' + location.port : '') +
+                    `/mock/${this.props.currProject._id}${this.props.currProject.basepath}${this.props.curData.path}`}
+              </span>
+            </Col>
+          </Row>
+          {this.props.curData.custom_field_value &&
+                this.props.custom_field.enable && (
+                <Row className='row remark'>
+                  <Col span={4} className='colKey'>
+                    {this.props.custom_field.name}：
+                  </Col>
+                  <Col span={18} className='colValue'>
+                    {this.props.curData.custom_field_value}
+                  </Col>
+                </Row>
+                )}
+        </div>
+        {this.props.curData.desc && <h2 className='interface-title'>备注</h2>}
+        {this.props.curData.desc && (
+          <div
+                  className='tui-editor-contents'
+                  style={{ margin: '0px', padding: '0px 20px', float: 'none' }}
+                  dangerouslySetInnerHTML={{ __html: this.props.curData.desc }}
+              />
+          )}
+        <h2
+              className='interface-title'
+              style={{ display: requestShow ? '' : 'none' }}>
+          请求参数
+        </h2>
+        {req_dataSource.length ? (
+          <div className='colHeader'>
+            <h3 className='col-title'>路径参数：</h3>
+            <Table
+                    bordered
+                    size='small'
+                    pagination={false}
+                    columns={req_params_columns}
+                    dataSource={req_dataSource}
+                />
+          </div>
+          ) : (
+              ''
+          )}
+        {dataSource.length ? (
+          <div className='colHeader'>
+            <h3 className='col-title'>Headers：</h3>
+            <Table
+                    bordered
+                    size='small'
+                    pagination={false}
+                    columns={columns}
+                    dataSource={dataSource}
+                />
+          </div>
+          ) : (
+              ''
+          )}
+        {this.props.curData.req_query && this.props.curData.req_query.length ? (
+          <div className='colQuery'>
+            <h3 className='col-title'>Query：</h3>
+            {this.req_query(this.props.curData.req_query)}
+          </div>
+          ) : (
+              ''
+          )}
+
+        <div
+              style={{
+                display:
+                    this.props.curData.method &&
+                    HTTP_METHOD[this.props.curData.method.toUpperCase()].request_body
+                        ? ''
+                        : 'none'
+              }}>
+          <h3 style={{ display: bodyShow ? '' : 'none' }} className='col-title'>
+            Body:
+          </h3>
+          {this.props.curData.req_body_type === 'form'
+                ? this.req_body_form(
+                    this.props.curData.req_body_type,
+                    this.props.curData.req_body_form,
+                )
+                : this.req_body(
+                    this.props.curData.req_body_type,
+                    this.props.curData.req_body_other,
+                    this.props.curData.req_body_is_json_schema,
+                )}
+        </div>
+
+        <h2 className='interface-title'>返回数据</h2>
+        {this.res_body(
+              this.props.curData.res_body_type,
+              this.props.curData.res_body,
+              this.props.curData.res_body_is_json_schema,
+          )}
+      </div>
+    )
+
+    if (!this.props.curData.title) {
+      if (this.state.init) {
+        res = <div />
+      } else {
+        res = <ErrMsg type='noData' />
+      }
+    }
+    return res
+  }
+}
+
+export default View

client/containers/Project/Interface/InterfaceList/View.scss

@@ -0,0 +1,135 @@
+.caseContainer{
+    padding: 24px;
+    font-size: 13px;
+    // display: flex;
+    overflow: hidden;
+    >div{
+        margin: 8px 0px;
+        // background-color: #ececec;
+        padding: 16px;
+        width: 100%;
+        box-sizing: border-box;
+        float: left;
+        .colKey{
+            font-weight: bold;
+            text-align: left;
+            width: 100px;
+            padding-left: 10px;
+        }
+
+        .colName{
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+    }
+    .col-title{margin-bottom: 5px}
+    .colValue.href {
+      color: #2395f1;
+      cursor: pointer;
+    }
+    .ace_print-margin{
+        display: none;
+    }
+
+    .interface-url-icon{
+      padding-left: 8px;
+    }
+    .colBody{
+        .query-icon {
+          display: inline-block;
+          width: .13rem;
+          margin-right: 4px;
+          position: relative;
+          &.text:after {
+              content: 'T';
+              display: block;
+              position: absolute;
+              right: 2px;
+              bottom: -2px;
+              transform: scale(.7);
+          }
+        }
+    }
+    .colDesc{
+        margin-bottom: 0px;
+        padding-bottom: 0px;
+    }
+    .ant-table-thead {
+        th{
+            color: #6d6c6c;
+            font-weight: normal;
+        }
+        tr{
+            // background-color: black;
+        }
+    }
+    .ant-table-thead>tr>th{
+        background: #f7f7f7;
+    }
+    .colMethod{
+        .colValue{
+            display: inline-block;
+            border-radius: 4px;
+            color: #00a854;
+            background: #cfefdf;
+            border-color: #cfefdf;
+            height: 23px;
+            line-height: 23px;
+            text-align: center;
+            font-size: 10px;
+            margin-right: 7px;
+            padding: 0 5px;
+        }
+    }
+    .colstatus{
+        .colValue{
+            height: 23px;
+            padding: 0 5px;
+            line-height: 23px;
+            display: inline-block;
+            border-radius: 4px;
+            color: white;
+        }
+    }
+    .user-img {
+      width: .3rem;
+      height: .3rem;
+      border-radius: 50%;
+      border: 2px solid #eee;
+      vertical-align: middle;
+      margin-right: 4px;
+    }
+    .tag-method {
+      padding: 4px 6px;
+      margin-right: 8px;
+      border-radius: 4px;
+      vertical-align: middle;
+    }
+}
+
+.colHalf {
+    width: 50%;
+    float: left;
+    margin-bottom: .16rem;
+    .colKey{
+        padding-bottom: 0px;
+        text-align: right;
+    }
+}
+
+.panel-view {
+  .row {
+    margin-bottom: .16rem;
+    line-height: 36px;
+  }
+  .user-img {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+  .user-name {
+    padding-left: .38rem;
+  }
+}

client/containers/Project/Interface/InterfaceList/editor.css

@@ -0,0 +1,617 @@
+.tui-editor-contents h1 {
+  font-size: 45px;
+  line-height: 1.5;
+  border-bottom: 3px double #999;
+  margin: 52px 0 15px 0;
+  padding-bottom: 7px;
+  color: #000;
+}
+
+.tui-editor-contents h2 {
+  font-size: 34px;
+  line-height: 1.5;
+  border-bottom: 1px solid #dbdbdb;
+  margin: 30px 0 13px 0;
+  padding-bottom: 7px;
+  color: #333;
+}
+
+.tui-editor-contents h3,
+.tui-editor-contents h4 {
+  font-size: 24px;
+  line-height: 1.5;
+  margin: 20px 0 2px;
+  color: #333;
+}
+
+.tui-editor-contents h5,
+.tui-editor-contents h6 {
+  font-size: 16px;
+  line-height: 1.5;
+  margin: 10px 0 -4px;
+  color: #333;
+}
+
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+  direction: ltr;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker {
+  color: black;
+}
+.CodeMirror-guttermarker-subtle {
+  color: #999;
+}
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
+}
+@-webkit-keyframes blink {
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
+}
+@keyframes blink {
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+/* .CodeMirror-overwrite .CodeMirror-cursor {
+} */
+
+.cm-tab {
+  display: inline-block;
+  text-decoration: inherit;
+}
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -50px;
+  bottom: -20px;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {
+  color: blue;
+}
+.cm-s-default .cm-quote {
+  color: #090;
+}
+.cm-negative {
+  color: #d44;
+}
+.cm-positive {
+  color: #292;
+}
+.cm-header,
+.cm-strong {
+  font-weight: bold;
+}
+.cm-em {
+  font-style: italic;
+}
+.cm-link {
+  text-decoration: underline;
+}
+.cm-strikethrough {
+  text-decoration: line-through;
+}
+
+.cm-s-default .cm-keyword {
+  color: #708;
+}
+.cm-s-default .cm-atom {
+  color: #219;
+}
+.cm-s-default .cm-number {
+  color: #164;
+}
+.cm-s-default .cm-def {
+  color: #00f;
+}
+/* .cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {
+} */
+.cm-s-default .cm-variable-2 {
+  color: #05a;
+}
+.cm-s-default .cm-variable-3,
+.cm-s-default .cm-type {
+  color: #085;
+}
+.cm-s-default .cm-comment {
+  color: #a50;
+}
+.cm-s-default .cm-string {
+  color: #a11;
+}
+.cm-s-default .cm-string-2 {
+  color: #f50;
+}
+.cm-s-default .cm-meta {
+  color: #555;
+}
+.cm-s-default .cm-qualifier {
+  color: #555;
+}
+.cm-s-default .cm-builtin {
+  color: #30a;
+}
+.cm-s-default .cm-bracket {
+  color: #997;
+}
+.cm-s-default .cm-tag {
+  color: #170;
+}
+.cm-s-default .cm-attribute {
+  color: #00c;
+}
+.cm-s-default .cm-hr {
+  color: #999;
+}
+.cm-s-default .cm-link {
+  color: #00c;
+}
+
+.cm-s-default .cm-error {
+  color: #f00;
+}
+.cm-invalidchar {
+  color: #f00;
+}
+
+.CodeMirror-composing {
+  border-bottom: 2px solid;
+}
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+  color: #0b0;
+}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+  color: #a22;
+}
+.CodeMirror-matchingtag {
+  background: rgba(255, 150, 0, 0.3);
+}
+.CodeMirror-activeline-background {
+  background: #e8f2ff;
+}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px;
+  margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar,
+.CodeMirror-hscrollbar,
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0;
+  top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0;
+  left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0;
+  bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0;
+  bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute;
+  left: 0;
+  top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection {
+  background-color: transparent;
+}
+.CodeMirror-gutter-wrapper ::-moz-selection {
+  background-color: transparent;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+/* .CodeMirror-widget {
+} */
+
+.CodeMirror-rtl pre {
+  direction: rtl;
+}
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre {
+  position: static;
+}
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected {
+  background: #d9d9d9;
+}
+.CodeMirror-focused .CodeMirror-selected {
+  background: #d7d4f0;
+}
+.CodeMirror-crosshair {
+  cursor: crosshair;
+}
+.CodeMirror-line::selection,
+.CodeMirror-line > span::selection,
+.CodeMirror-line > span > span::selection {
+  background: #d7d4f0;
+}
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line > span::-moz-selection,
+.CodeMirror-line > span > span::-moz-selection {
+  background: #d7d4f0;
+}
+
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, 0.4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border {
+  padding-right: 0.1px;
+}
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after {
+  content: '';
+}
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext {
+  background: none;
+}

client/containers/Project/Interface/InterfaceList/interfaceMenu.scss

@@ -0,0 +1,4 @@
+.tree-wrappper{
+  min-height: 500px;
+  overflow-y: scroll;
+}