fork from bc4552c5a8

2024-03-01 20:28:14 +08:00
commit 076c21dc36
491 changed files with 84482 additions and 0 deletions
--- a/client/Application.js
+++ b/client/Application.js
@@ -0,0 +1,156 @@
+import React, { PureComponent as Component } from 'react';
+import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Route, BrowserRouter as Router } from 'react-router-dom';
+import { Home, Group, Project, Follows, AddProject, Login } from './containers/index';
+import { Alert } from 'antd';
+import User from './containers/User/User.js';
+import Header from './components/Header/Header';
+import Footer from './components/Footer/Footer';
+import Loading from './components/Loading/Loading';
+import MyPopConfirm from './components/MyPopConfirm/MyPopConfirm';
+import { checkLoginState } from './reducer/modules/user';
+import { requireAuthentication } from './components/AuthenticatedComponent';
+import Notify from './components/Notify/Notify';
+
+const plugin = require('client/plugin.js');
+
+const LOADING_STATUS = 0;
+
+const alertContent = () => {
+  const ua = window.navigator.userAgent,
+    isChrome = ua.indexOf('Chrome') && window.chrome;
+  if (!isChrome) {
+    return (
+      <Alert
+        style={{ zIndex: 99 }}
+        message={'YApi 的接口测试等功能仅支持 Chrome 浏览器，请使用 Chrome 浏览器获得完整功能。'}
+        banner
+        closable
+      />
+    );
+  }
+};
+
+let AppRoute = {
+  home: {
+    path: '/',
+    component: Home
+  },
+  group: {
+    path: '/group',
+    component: Group
+  },
+  project: {
+    path: '/project/:id',
+    component: Project
+  },
+  user: {
+    path: '/user',
+    component: User
+  },
+  follow: {
+    path: '/follow',
+    component: Follows
+  },
+  addProject: {
+    path: '/add-project',
+    component: AddProject
+  },
+  login: {
+    path: '/login',
+    component: Login
+  }
+};
+// 增加路由钩子
+plugin.emitHook('app_route', AppRoute);
+
+@connect(
+  state => {
+    return {
+      loginState: state.user.loginState,
+      curUserRole: state.user.role
+    };
+  },
+  {
+    checkLoginState
+  }
+)
+export default class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      login: LOADING_STATUS
+    };
+  }
+
+  static propTypes = {
+    checkLoginState: PropTypes.func,
+    loginState: PropTypes.number,
+    curUserRole: PropTypes.string
+  };
+
+  componentDidMount() {
+    this.props.checkLoginState();
+  }
+
+  showConfirm = (msg, callback) => {
+    // 自定义 window.confirm
+    // http://reacttraining.cn/web/api/BrowserRouter/getUserConfirmation-func
+    let container = document.createElement('div');
+    document.body.appendChild(container);
+    ReactDOM.render(<MyPopConfirm msg={msg} callback={callback} />, container);
+  };
+
+  route = status => {
+    let r;
+    if (status === LOADING_STATUS) {
+      return <Loading visible />;
+    } else {
+      r = (
+        <Router getUserConfirmation={this.showConfirm}>
+          <div className="g-main">
+            <div className="router-main">
+              {this.props.curUserRole === 'admin' && <Notify />}
+              {alertContent()}
+              {this.props.loginState !== 1 ? <Header /> : null}
+              <div className="router-container">
+                {Object.keys(AppRoute).map(key => {
+                  let item = AppRoute[key];
+                  return key === 'login' ? (
+                    <Route key={key} path={item.path} component={item.component} />
+                  ) : key === 'home' ? (
+                    <Route key={key} exact path={item.path} component={item.component} />
+                  ) : (
+                    <Route
+                      key={key}
+                      path={item.path}
+                      component={requireAuthentication(item.component)}
+                    />
+                  );
+                })}
+              </div>
+              {/* <div className="router-container">
+                <Route exact path="/" component={Home} />
+                <Route path="/group" component={requireAuthentication(Group)} />
+                <Route path="/project/:id" component={requireAuthentication(Project)} />
+                <Route path="/user" component={requireAuthentication(User)} />
+                <Route path="/follow" component={requireAuthentication(Follows)} />
+                <Route path="/add-project" component={requireAuthentication(AddProject)} />
+                <Route path="/login" component={Login} />
+                {/* <Route path="/statistic" component={statisticsPage} /> */}
+              {/* </div> */}
+            </div>
+            <Footer />
+          </div>
+        </Router>
+      );
+    }
+    return r;
+  };
+
+  render() {
+    return this.route(this.props.loginState);
+  }
+}
--- a/client/common.js
+++ b/client/common.js
@@ -0,0 +1,238 @@
+const moment = require('moment');
+const constants = require('./constants/variable');
+const Mock = require('mockjs');
+const json5 = require('json5');
+const MockExtra = require('common/mock-extra.js');
+
+const Roles = {
+  0: 'admin',
+  10: 'owner',
+  20: 'dev',
+  30: 'guest',
+  40: 'member'
+};
+
+const roleAction = {
+  manageUserlist: 'admin',
+  changeMemberRole: 'owner',
+  editInterface: 'dev',
+  viewPrivateInterface: 'guest',
+  viewGroup: 'guest'
+};
+
+function isJson(json) {
+  if (!json) {
+    return false;
+  }
+  try {
+    json = JSON.parse(json);
+    return json;
+  } catch (e) {
+    return false;
+  }
+}
+
+exports.isJson = isJson;
+
+function isJson5(json) {
+  if (!json) {
+    return false;
+  }
+  try {
+    json = json5.parse(json);
+    return json;
+  } catch (e) {
+    return false;
+  }
+}
+exports.safeArray = function(arr) {
+  return Array.isArray(arr) ? arr : [];
+};
+
+exports.json5_parse = function(json) {
+  try {
+    return json5.parse(json);
+  } catch (err) {
+    return json;
+  }
+};
+
+exports.json_parse = function(json) {
+  try {
+    return JSON.parse(json);
+  } catch (err) {
+    return json;
+  }
+};
+
+function deepCopyJson(json) {
+  return JSON.parse(JSON.stringify(json));
+}
+
+exports.deepCopyJson = deepCopyJson;
+
+exports.isJson5 = isJson5;
+
+exports.checkAuth = (action, role) => {
+  return Roles[roleAction[action]] <= Roles[role];
+};
+
+exports.formatTime = timestamp => {
+  return moment.unix(timestamp).format('YYYY-MM-DD HH:mm:ss');
+};
+
+// 防抖函数，减少高频触发的函数执行的频率
+// 请在 constructor 里使用:
+// import { debounce } from '$/common';
+// this.func = debounce(this.func, 400);
+exports.debounce = (func, wait) => {
+  let timeout;
+  return function() {
+    clearTimeout(timeout);
+    timeout = setTimeout(func, wait);
+  };
+};
+
+// 从 Javascript 对象中选取随机属性
+exports.pickRandomProperty = obj => {
+  let result;
+  let count = 0;
+  for (let prop in obj) {
+    if (Math.random() < 1 / ++count) {
+      result = prop;
+    }
+  }
+  return result;
+};
+
+exports.getImgPath = (path, type) => {
+  let rate = window.devicePixelRatio >= 2 ? 2 : 1;
+  return `${path}@${rate}x.${type}`;
+};
+
+function trim(str) {
+  if (!str) {
+    return str;
+  }
+
+  str = str + '';
+
+  return str.replace(/(^\s*)|(\s*$)/g, '');
+}
+
+exports.trim = trim;
+
+exports.handlePath = path => {
+  path = trim(path);
+  if (!path) {
+    return path;
+  }
+  if (path === '/') {
+    return '';
+  }
+  path = path[0] !== '/' ? '/' + path : path;
+  path = path[path.length - 1] === '/' ? path.substr(0, path.length - 1) : path;
+  return path;
+};
+
+exports.handleApiPath = path => {
+  if (!path) {
+    return '';
+  }
+  path = trim(path);
+  path = path[0] !== '/' ? '/' + path : path;
+  return path;
+};
+
+// 名称限制 constants.NAME_LIMIT 字符
+exports.nameLengthLimit = type => {
+  // 返回字符串长度，汉字计数为2
+  const strLength = str => {
+    let length = 0;
+    for (let i = 0; i < str.length; i++) {
+      str.charCodeAt(i) > 255 ? (length += 2) : length++;
+    }
+    return length;
+  };
+  // 返回 form中的 rules 校验规则
+  return [
+    {
+      required: true,
+      validator(rule, value, callback) {
+        const len = value ? strLength(value) : 0;
+        if (len > constants.NAME_LIMIT) {
+          callback(
+            '请输入' + type + '名称，长度不超过' + constants.NAME_LIMIT + '字符(中文算作2字符)!'
+          );
+        } else if (len === 0) {
+          callback(
+            '请输入' + type + '名称，长度不超过' + constants.NAME_LIMIT + '字符(中文算作2字符)!'
+          );
+        } else {
+          return callback();
+        }
+      }
+    }
+  ];
+};
+
+// 去除所有html标签只保留文字
+
+exports.htmlFilter = html => {
+  let reg = /<\/?.+?\/?>/g;
+  return html.replace(reg, '') || '新项目';
+};
+
+// 实现 Object.entries() 方法
+exports.entries = obj => {
+  let res = [];
+  for (let key in obj) {
+    res.push([key, obj[key]]);
+  }
+  return res;
+};
+
+exports.getMockText = mockTpl => {
+  try {
+    return JSON.stringify(Mock.mock(MockExtra(json5.parse(mockTpl), {})), null, '  ');
+  } catch (err) {
+    return '';
+  }
+};
+/**
+ * 合并后新的对象属性与 Obj 一致，nextObj 有对应属性则取 nextObj 属性值，否则取 Obj 属性值
+ * @param  {Object} Obj     旧对象
+ * @param  {Object} nextObj 新对象
+ * @return {Object}           合并后的对象
+ */
+exports.safeAssign = (Obj, nextObj) => {
+  let keys = Object.keys(nextObj);
+  return Object.keys(Obj).reduce((result, value) => {
+    if (keys.indexOf(value) >= 0) {
+      result[value] = nextObj[value];
+    } else {
+      result[value] = Obj[value];
+    }
+    return result;
+  }, {});
+};
+
+// 交换数组的位置
+exports.arrayChangeIndex = (arr, start, end) => {
+  let newArr = [].concat(arr);
+  // newArr[start] = arr[end];
+  // newArr[end] = arr[start];
+  let startItem = newArr[start];
+  newArr.splice(start, 1);
+  // end自动加1
+  newArr.splice(end, 0, startItem);
+  let changes = [];
+  newArr.forEach((item, index) => {
+    changes.push({
+      id: item._id,
+      index: index
+    });
+  });
+
+  return changes;
+};
--- a/client/components/AceEditor/AceEditor.js
+++ b/client/components/AceEditor/AceEditor.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import mockEditor from './mockEditor';
+import PropTypes from 'prop-types';
+import './AceEditor.scss';
+
+const ModeMap = {
+  javascript: 'ace/mode/javascript',
+  json: 'ace/mode/json',
+  text: 'ace/mode/text',
+  xml: 'ace/mode/xml',
+  html: 'ace/mode/html'
+};
+
+const defaultStyle = { width: '100%', height: '200px' };
+
+function getMode(mode) {
+  return ModeMap[mode] || ModeMap.text;
+}
+
+class AceEditor extends React.PureComponent {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    data: PropTypes.any,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+    mode: PropTypes.string, //enum[json, text, javascript], default is javascript
+    readOnly: PropTypes.bool,
+    callback: PropTypes.func,
+    style: PropTypes.object,
+    fullScreen: PropTypes.bool,
+    insertCode: PropTypes.func
+  };
+
+  componentDidMount() {
+    this.editor = mockEditor({
+      container: this.editorElement,
+      data: this.props.data,
+      onChange: this.props.onChange,
+      readOnly: this.props.readOnly,
+      fullScreen: this.props.fullScreen
+    });
+    let mode = this.props.mode || 'javascript';
+    this.editor.editor.getSession().setMode(getMode(mode));
+    if (typeof this.props.callback === 'function') {
+      this.props.callback(this.editor.editor);
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!this.editor) {
+      return;
+    }
+    if (nextProps.data !== this.props.data && this.editor.getValue() !== nextProps.data) {
+      this.editor.setValue(nextProps.data);
+      let mode = nextProps.mode || 'javascript';
+      this.editor.editor.getSession().setMode(getMode(mode));
+      this.editor.editor.clearSelection();
+    }
+  }
+
+  render() {
+    return (
+      <div
+        className={this.props.className}
+        style={this.props.className ? undefined : this.props.style || defaultStyle}
+        ref={editor => {
+          this.editorElement = editor;
+        }}
+      />
+    );
+  }
+}
+
+export default AceEditor;
--- a/client/components/AceEditor/AceEditor.scss
+++ b/client/components/AceEditor/AceEditor.scss
@@ -0,0 +1,25 @@
+.ace_editor.fullScreen {
+  height: auto;
+  width: auto;
+  border: 0;
+  margin: 0;
+  position: fixed !important;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000008;
+}
+
+.ace_editor .ace_print-margin{
+  visibility: hidden !important 
+}
+
+.fullScreen {
+  overflow: hidden
+}
+
+.ace_editor.ace-xcode {
+  background-color: #f5f5f5;
+  color: #000000;
+}
--- a/client/components/AceEditor/mockEditor.js
+++ b/client/components/AceEditor/mockEditor.js
@@ -0,0 +1,197 @@
+var ace = require('brace'),
+  Mock = require('mockjs');
+require('brace/mode/javascript');
+require('brace/mode/json');
+require('brace/mode/xml');
+require('brace/mode/html');
+require('brace/theme/xcode');
+require('brace/ext/language_tools.js');
+var json5 = require('json5');
+const MockExtra = require('common/mock-extra.js');
+
+var langTools = ace.acequire('ace/ext/language_tools'),
+  wordList = [
+    { name: '字符串', mock: '@string' },
+    { name: '自然数', mock: '@natural' },
+    { name: '浮点数', mock: '@float' },
+    { name: '字符', mock: '@character' },
+    { name: '布尔', mock: '@boolean' },
+    { name: 'url', mock: '@url' },
+    { name: '域名', mock: '@domain' },
+    { name: 'ip地址', mock: '@ip' },
+    { name: 'id', mock: '@id' },
+    { name: 'guid', mock: '@guid' },
+    { name: '当前时间', mock: '@now' },
+    { name: '时间戳', mock: '@timestamp' },
+    { name: '日期', mock: '@date' },
+    { name: '时间', mock: '@time' },
+    { name: '日期时间', mock: '@datetime' },
+    { name: '图片连接', mock: '@image' },
+    { name: '图片data', mock: '@imageData' },
+    { name: '颜色', mock: '@color' },
+    { name: '颜色hex', mock: '@hex' },
+    { name: '颜色rgba', mock: '@rgba' },
+    { name: '颜色rgb', mock: '@rgb' },
+    { name: '颜色hsl', mock: '@hsl' },
+    { name: '整数', mock: '@integer' },
+    { name: 'email', mock: '@email' },
+    { name: '大段文本', mock: '@paragraph' },
+    { name: '句子', mock: '@sentence' },
+    { name: '单词', mock: '@word' },
+    { name: '大段中文文本', mock: '@cparagraph' },
+    { name: '中文标题', mock: '@ctitle' },
+    { name: '标题', mock: '@title' },
+    { name: '姓名', mock: '@name' },
+    { name: '中文姓名', mock: '@cname' },
+    { name: '中文姓', mock: '@cfirst' },
+    { name: '中文名', mock: '@clast' },
+    { name: '英文姓', mock: '@first' },
+    { name: '英文名', mock: '@last' },
+    { name: '中文句子', mock: '@csentence' },
+    { name: '中文词组', mock: '@cword' },
+    { name: '地址', mock: '@region' },
+    { name: '省份', mock: '@province' },
+    { name: '城市', mock: '@city' },
+    { name: '地区', mock: '@county' },
+    { name: '转换为大写', mock: '@upper' },
+    { name: '转换为小写', mock: '@lower' },
+    { name: '挑选（枚举）', mock: '@pick' },
+    { name: '打乱数组', mock: '@shuffle' },
+    { name: '协议', mock: '@protocol' }
+  ];
+
+let dom = ace.acequire('ace/lib/dom');
+ace.acequire('ace/commands/default_commands').commands.push({
+  name: 'Toggle Fullscreen',
+  bindKey: 'F9',
+  exec: function(editor) {
+    if (editor._fullscreen_yapi) {
+      let fullScreen = dom.toggleCssClass(document.body, 'fullScreen');
+      dom.setCssClass(editor.container, 'fullScreen', fullScreen);
+      editor.setAutoScrollEditorIntoView(!fullScreen);
+      editor.resize();
+    }
+  }
+});
+
+function run(options) {
+  var editor, mockEditor, rhymeCompleter;
+  function handleJson(json) {
+    var curData = mockEditor.curData;
+    try {
+      curData.text = json;
+      var obj = json5.parse(json);
+      curData.format = true;
+      curData.jsonData = obj;
+      curData.mockData = () => Mock.mock(MockExtra(obj, {})); //为防止时时 mock 导致页面卡死的问题，改成函数式需要用到再计算
+    } catch (e) {
+      curData.format = e.message;
+    }
+  }
+  options = options || {};
+  var container, data;
+  container = options.container || 'mock-editor';
+  if (
+    options.wordList &&
+    typeof options.wordList === 'object' &&
+    options.wordList.name &&
+    options.wordList.mock
+  ) {
+    wordList.push(options.wordList);
+  }
+  data = options.data || '';
+  options.readOnly = options.readOnly || false;
+  options.fullScreen = options.fullScreen || false;
+
+  editor = ace.edit(container);
+  editor.$blockScrolling = Infinity;
+  editor.getSession().setMode('ace/mode/javascript');
+  if (options.readOnly === true) {
+    editor.setReadOnly(true);
+    editor.renderer.$cursorLayer.element.style.display = 'none';
+  }
+  editor.setTheme('ace/theme/xcode');
+  editor.setOptions({
+    enableBasicAutocompletion: true,
+    enableSnippets: false,
+    enableLiveAutocompletion: true,
+    useWorker: true
+  });
+  editor._fullscreen_yapi = options.fullScreen;
+  mockEditor = {
+    curData: {},
+    getValue: () => mockEditor.curData.text,
+    setValue: function(data) {
+      editor.setValue(handleData(data));
+    },
+    editor: editor,
+    options: options,
+    insertCode: code => {
+      let pos = editor.selection.getCursor();
+      editor.session.insert(pos, code);
+    }
+  };
+
+  function formatJson(json) {
+    try {
+      return JSON.stringify(JSON.parse(json), null, 2);
+    } catch (err) {
+      return json;
+    }
+  }
+
+  function handleData(data) {
+    data = data || '';
+    if (typeof data === 'string') {
+      return formatJson(data);
+    } else if (typeof data === 'object') {
+      return JSON.stringify(data, null, '  ');
+    } else {
+      return '' + data;
+    }
+  }
+
+  rhymeCompleter = {
+    identifierRegexps: [/[@]/],
+    getCompletions: function(editor, session, pos, prefix, callback) {
+      if (prefix.length === 0) {
+        callback(null, []);
+        return;
+      }
+      callback(
+        null,
+        wordList.map(function(ea) {
+          return { name: ea.mock, value: ea.mock, score: ea.mock, meta: ea.name };
+        })
+      );
+    }
+  };
+
+  langTools.addCompleter(rhymeCompleter);
+  mockEditor.setValue(handleData(data));
+  handleJson(editor.getValue());
+
+  editor.clearSelection();
+
+  editor.getSession().on('change', () => {
+    handleJson(editor.getValue());
+    if (typeof options.onChange === 'function') {
+      options.onChange.call(mockEditor, mockEditor.curData);
+    }
+    editor.clearSelection();
+  });
+  return mockEditor;
+}
+
+/**
+ * mockEditor({
+      container: 'req_body_json', //dom的id
+      data: that.state.req_body_json, //初始化数据
+      onChange: function (d) {
+        that.setState({
+          req_body_json: d.text
+        })
+      }
+    })
+ */
+module.exports = run;
--- a/client/components/AuthenticatedComponent.js
+++ b/client/components/AuthenticatedComponent.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { changeMenuItem } from '../reducer/modules/menu';
+
+export function requireAuthentication(Component) {
+  return @connect(
+    state => {
+      return {
+        isAuthenticated: state.user.isLogin
+      };
+    },
+    {
+      changeMenuItem
+    }
+  )
+  class AuthenticatedComponent extends React.PureComponent {
+    constructor(props) {
+      super(props);
+    }
+    static propTypes = {
+      isAuthenticated: PropTypes.bool,
+      location: PropTypes.object,
+      dispatch: PropTypes.func,
+      history: PropTypes.object,
+      changeMenuItem: PropTypes.func
+    };
+    UNSAFE_componentWillMount() {
+      this.checkAuth();
+    }
+    UNSAFE_componentWillReceiveProps() {
+      this.checkAuth();
+    }
+    checkAuth() {
+      if (!this.props.isAuthenticated) {
+        this.props.history.push('/');
+        this.props.changeMenuItem('/');
+      }
+    }
+    render() {
+      return <div>{this.props.isAuthenticated ? <Component {...this.props} /> : null}</div>;
+    }
+  };
+}
--- a/client/components/Breadcrumb/Breadcrumb.js
+++ b/client/components/Breadcrumb/Breadcrumb.js
@@ -0,0 +1,42 @@
+import './Breadcrumb.scss';
+import { withRouter } from 'react-router-dom';
+import { Breadcrumb } from 'antd';
+import PropTypes from 'prop-types';
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+@connect(state => {
+  return {
+    breadcrumb: state.user.breadcrumb
+  };
+})
+@withRouter
+export default class BreadcrumbNavigation extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    breadcrumb: PropTypes.array
+  };
+
+  render() {
+    const getItem = this.props.breadcrumb.map((item, index) => {
+      if (item.href) {
+        return (
+          <Breadcrumb.Item key={index}>
+            <Link to={item.href}>{item.name}</Link>
+          </Breadcrumb.Item>
+        );
+      } else {
+        return <Breadcrumb.Item key={index}>{item.name}</Breadcrumb.Item>;
+      }
+    });
+    return (
+      <div className="breadcrumb-container">
+        <Breadcrumb>{getItem}</Breadcrumb>
+      </div>
+    );
+  }
+}
--- a/client/components/Breadcrumb/Breadcrumb.scss
+++ b/client/components/Breadcrumb/Breadcrumb.scss
@@ -0,0 +1,26 @@
+@import '../../styles/mixin.scss';
+
+.breadcrumb-container {
+  .ant-breadcrumb {
+    font-size: 16px;
+    float: left;
+    color: #fff;
+    padding-left: 16px;
+    line-height: unset;
+  
+  }
+  .ant-breadcrumb a {
+    color: #fff;
+    &:hover {
+      color: $color-blue
+    }
+  }
+  .ant-breadcrumb > span:last-child {
+    color: #fff;
+    font-weight: normal;
+  }
+  .ant-breadcrumb-separator {
+    color: #fff;
+    font-weight: normal;
+  }
+}
--- a/client/components/CaseEnv/index.js
+++ b/client/components/CaseEnv/index.js
@@ -0,0 +1,100 @@
+// 测试集合中的环境切换
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Select, Row, Col, Collapse, Icon, Tooltip } from 'antd';
+const Option = Select.Option;
+const Panel = Collapse.Panel;
+import './index.scss';
+
+export default class CaseEnv extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    envList: PropTypes.array,
+    currProjectEnvChange: PropTypes.func,
+    changeClose: PropTypes.func,
+    collapseKey: PropTypes.any,
+    envValue: PropTypes.object
+  };
+
+  callback = key => {
+    this.props.changeClose && this.props.changeClose(key);
+  };
+
+  render() {
+    return (
+      <Collapse
+        style={{
+          margin: 0,
+          marginBottom: '16px'
+        }}
+        onChange={this.callback}
+        // activeKey={this.state.activeKey}
+        activeKey={this.props.collapseKey}
+      >
+        <Panel
+          header={
+            <span>
+              {' '}
+              选择测试用例环境
+              <Tooltip title="默认使用测试用例选择的环境">
+                {' '}
+                <Icon type="question-circle-o" />{' '}
+              </Tooltip>
+            </span>
+          }
+          key="1"
+        >
+          <div className="case-env">
+            {this.props.envList.length > 0 && (
+              <div>
+                {this.props.envList.map(item => {
+                  return (
+                    <Row
+                      key={item._id}
+                      type="flex"
+                      justify="space-around"
+                      align="middle"
+                      className="env-item"
+                    >
+                      <Col span={6} className="label">
+                        <Tooltip title={item.name}>
+                          <span className="label-name">{item.name}</span>
+                        </Tooltip>
+                      </Col>
+                      <Col span={18}>
+                        <Select
+                          style={{
+                            width: '100%'
+                          }}
+                          value={this.props.envValue[item._id] || ''}
+                          defaultValue=""
+                          onChange={val => this.props.currProjectEnvChange(val, item._id)}
+                        >
+                          <Option key="default" value="">
+                            默认环境
+                          </Option>
+
+                          {item.env.map(key => {
+                            return (
+                              <Option value={key.name} key={key._id}>
+                                {key.name + ': ' + key.domain}
+                              </Option>
+                            );
+                          })}
+                        </Select>
+                      </Col>
+                    </Row>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </Panel>
+      </Collapse>
+    );
+  }
+}
--- a/client/components/CaseEnv/index.scss
+++ b/client/components/CaseEnv/index.scss
@@ -0,0 +1,25 @@
+.case-env {
+  .label {
+    // width: 100%;
+    text-align: right;
+    padding-right: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .label:after{
+    content: ":";
+    margin: 0 8px 0 2px;
+    position: relative;
+    top: -.5px;
+  }
+  .label-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .env-item {
+    margin-bottom: 16px;
+  }
+}
--- a/client/components/EasyDragSort/EasyDragSort.js
+++ b/client/components/EasyDragSort/EasyDragSort.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import PropTypes from 'prop-types';
+
+/**
+ * @author suxiaoxin
+ * @demo
+ * <EasyDragSort data={()=>this.state.list} onChange={this.handleChange} >
+ * {list}
+ * </EasyDragSot>
+ */
+let curDragIndex = null;
+
+function isDom(obj) {
+  return (
+    obj &&
+    typeof obj === 'object' &&
+    obj.nodeType === 1 &&
+    typeof obj.nodeName === 'string' &&
+    typeof obj.getAttribute === 'function'
+  );
+}
+
+export default class EasyDragSort extends React.Component {
+  static propTypes = {
+    children: PropTypes.array,
+    onChange: PropTypes.func,
+    onDragEnd: PropTypes.func,
+    data: PropTypes.func,
+    onlyChild: PropTypes.string
+  };
+
+  render() {
+    const that = this;
+    const props = this.props;
+    const { onlyChild } = props;
+    let container = props.children;
+    const onChange = (from, to) => {
+      if (from === to) {
+        return;
+      }
+      let curValue;
+
+      curValue = props.data();
+
+      let newValue = arrMove(curValue, from, to);
+      if (typeof props.onChange === 'function') {
+        return props.onChange(newValue, from, to);
+      }
+    };
+    return (
+      <div>
+        {container.map((item, index) => {
+          if (React.isValidElement(item)) {
+            return React.cloneElement(item, {
+              draggable: onlyChild ? false : true,
+              ref: 'x' + index,
+              'data-ref': 'x' + index,
+              onDragStart: function() {
+                curDragIndex = index;
+              },
+              /**
+               * 控制 dom 是否可拖动
+               * @param {*} e
+               */
+              onMouseDown(e) {
+                if (!onlyChild) {
+                  return;
+                }
+                let el = e.target,
+                  target = e.target;
+                if (!isDom(el)) {
+                  return;
+                }
+                do {
+                  if (el && isDom(el) && el.getAttribute(onlyChild)) {
+                    target = el;
+                  }
+                  if (el && el.tagName == 'DIV' && el.getAttribute('data-ref')) {
+                    break;
+                  }
+                } while ((el = el.parentNode));
+                if (!el) {
+                  return;
+                }
+                let ref = that.refs[el.getAttribute('data-ref')];
+                let dom = ReactDOM.findDOMNode(ref);
+                if (dom) {
+                  dom.draggable = target.getAttribute(onlyChild) ? true : false;
+                }
+              },
+              onDragEnter: function() {
+                onChange(curDragIndex, index);
+                curDragIndex = index;
+              },
+              onDragEnd: function() {
+                curDragIndex = null;
+                if (typeof props.onDragEnd === 'function') {
+                  props.onDragEnd();
+                }
+              }
+            });
+          }
+          return item;
+        })}
+      </div>
+    );
+  }
+}
+
+function arrMove(arr, fromIndex, toIndex) {
+  arr = [].concat(arr);
+  let item = arr.splice(fromIndex, 1)[0];
+  arr.splice(toIndex, 0, item);
+  return arr;
+}
--- a/client/components/ErrMsg/ErrMsg.js
+++ b/client/components/ErrMsg/ErrMsg.js
@@ -0,0 +1,93 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'antd';
+import './ErrMsg.scss';
+import { withRouter } from 'react-router';
+
+/**
+ * 错误信息提示
+ *
+ * @component ErrMsg
+ * @examplelanguage js
+ *
+ * * 错误信息提示组件
+ * * 错误信息提示组件
+ *
+ *
+ */
+
+/**
+ * 标题
+ * 一般用于描述错误信息名称
+ * @property title
+ * @type string
+ * @description 一般用于描述错误信息名称
+ * @returns {object}
+ */
+@withRouter
+class ErrMsg extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    type: PropTypes.string,
+    history: PropTypes.object,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    desc: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    opration: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+  };
+
+  render() {
+    let { type, title, desc, opration } = this.props;
+    let icon = 'frown-o';
+    if (type) {
+      switch (type) {
+        case 'noFollow':
+          title = '你还没有关注项目呢';
+          desc = (
+            <span>
+              先去 <a onClick={() => this.props.history.push('/group')}>“项目广场”</a> 逛逛吧,
+              那里可以添加关注。
+            </span>
+          );
+          break;
+        case 'noInterface':
+          title = '该项目还没有接口呢';
+          desc = '在左侧 “接口列表” 中添加接口';
+          break;
+        case 'noMemberInProject':
+          title = '该项目还没有成员呢';
+          break;
+        case 'noMemberInGroup':
+          title = '该分组还没有成员呢';
+          break;
+        case 'noProject':
+          title = '该分组还没有项目呢';
+          desc = <span>请点击右上角添加项目按钮新建项目</span>;
+          break;
+        case 'noData':
+          title = '暂无数据';
+          desc = '先去别处逛逛吧';
+          break;
+        case 'noChange':
+          title = '没有改动';
+          desc = '该操作未改动 Api 数据';
+          icon = 'meh-o';
+          break;
+        default:
+          console.log('default');
+      }
+    }
+    return (
+      <div className="err-msg">
+        <Icon type={icon} className="icon" />
+        <p className="title">{title}</p>
+        <p className="desc">{desc}</p>
+        <p className="opration">{opration}</p>
+      </div>
+    );
+  }
+}
+
+export default ErrMsg;
--- a/client/components/ErrMsg/ErrMsg.scss
+++ b/client/components/ErrMsg/ErrMsg.scss
@@ -0,0 +1,20 @@
+.err-msg {
+  text-align: center;
+  font-size: .14rem;
+  line-height: 2;
+  margin-bottom: .24rem;
+  color: rgba(13, 27, 62, 0.43);
+  .icon {
+    font-size: .6rem;
+    margin-bottom: .08rem;
+  }
+  .title {
+    font-size: .18rem;
+  }
+  .desc {
+
+  }
+  .opration {
+
+  }
+}
--- a/client/components/Footer/Footer.js
+++ b/client/components/Footer/Footer.js
@@ -0,0 +1,129 @@
+import './Footer.scss';
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'antd';
+import { Icon } from 'antd';
+
+const version = process.env.version;
+class Footer extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    footList: PropTypes.array
+  };
+  render() {
+    return (
+      <div className="footer-wrapper">
+        <Row className="footer-container">
+          {this.props.footList.map(function(item, i) {
+            return (
+              <FootItem
+                key={i}
+                linkList={item.linkList}
+                title={item.title}
+                iconType={item.iconType}
+              />
+            );
+          })}
+        </Row>
+      </div>
+    );
+  }
+}
+
+class FootItem extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    linkList: PropTypes.array,
+    title: PropTypes.string,
+    iconType: PropTypes.string
+  };
+  render() {
+    return (
+      <Col span={6}>
+        <h4 className="title">
+          {this.props.iconType ? <Icon type={this.props.iconType} className="icon" /> : ''}
+          {this.props.title}
+        </h4>
+        {this.props.linkList.map(function(item, i) {
+          return (
+            <p key={i}>
+              <a href={item.itemLink} className="link">
+                {item.itemTitle}
+              </a>
+            </p>
+          );
+        })}
+      </Col>
+    );
+  }
+}
+
+Footer.defaultProps = {
+  footList: [
+    {
+      title: 'GitHub',
+      iconType: 'github',
+      linkList: [
+        {
+          itemTitle: 'YApi 官方源码仓库',
+          itemLink: 'https://github.com/YMFE/yapi.git'
+        },
+        {
+          itemTitle: 'YApi xwj-vic源码仓库',
+          itemLink: 'https://github.com/xwj-vic/yapi.git'
+        }
+      ]
+    },
+    {
+      title: '社区自由维护者',
+      iconType: 'team',
+      linkList: [
+        {
+          itemTitle: '编译指南',
+          itemLink: 'https://blog.opendeveloper.cn/yapi'
+        }
+      ]
+    },
+    {
+      title: '反馈',
+      iconType: 'aliwangwang-o',
+      linkList: [
+        {
+          itemTitle: '官方Github Issues',
+          itemLink: 'https://github.com/YMFE/yapi/issues'
+        },
+        {
+          itemTitle: '官方Github Pull Requests',
+          itemLink: 'https://github.com/YMFE/yapi/pulls'
+        },
+        {
+          itemTitle: 'xwj-vic Github Issues',
+          itemLink: 'https://github.com/xwj-vic/yapi/issues'
+        },
+        {
+          itemTitle: 'xwj-vic Github Pull Requests',
+          itemLink: 'https://github.com/xwj-vic/yapi/pulls'
+        }
+      ]
+    },
+    {
+      title: `Copyright © 2018-${new Date().getFullYear()} YMFE`,
+      linkList: [
+        {
+          itemTitle: `版本: ${version} `,
+          itemLink: 'https://github.com/YMFE/yapi/blob/master/CHANGELOG.md'
+        },
+        {
+          itemTitle: '使用文档',
+          itemLink: 'https://hellosean1025.github.io/yapi/'
+        }
+      ]
+    }
+  ]
+};
+
+export default Footer;
--- a/client/components/Footer/Footer.scss
+++ b/client/components/Footer/Footer.scss
@@ -0,0 +1,65 @@
+@import '../../styles/common.scss';
+@import '../../styles/mixin.scss';
+
+.footer-wrapper{
+  height: 2.4rem;
+  width: 100%;
+  background-color: $color-bg-dark;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+
+.footer-container{
+  margin: 0 auto !important;
+  padding: .48rem .24rem;
+  max-width: 12.2rem;
+  .icon {
+    font-size: .16rem;
+    margin-right: .08rem;
+  }
+  .title {
+    color: #8898aa;
+    font-size: .14rem;
+    margin-bottom: .08rem;
+  }
+  .link {
+    font-size: .14rem;
+    font-weight: 200;
+    color: #8898aa;
+    line-height: .3rem;
+    transition: color .2s;
+    &:hover {
+      color: $color-bg-gray;
+    }
+  }
+}
+.footItem{
+  padding: 24px 2%;
+  width: 25%;
+  float: left;
+  div{
+    margin: 6px 0;
+  }
+  a{
+    font-weight: 200;
+    color: #b3bdc1;
+    &:hover{
+      color: white;
+    }
+  }
+}
+.copyRight{
+    padding: 24px 2%;
+    width: 25%;
+    float: left;
+    font-size: 13px;
+    text-indent: 1em;
+    h4{
+        font-size: 14px;
+        margin: 0 auto 13px;
+        font-weight: 500;
+        position: relative;
+        text-indent: 0;
+    }
+}
--- a/client/components/GuideBtns/GuideBtns.js
+++ b/client/components/GuideBtns/GuideBtns.js
@@ -0,0 +1,51 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'antd';
+import { connect } from 'react-redux';
+import { changeStudyTip, finishStudy } from '../../reducer/modules/user.js';
+
+@connect(
+  null,
+  {
+    changeStudyTip,
+    finishStudy
+  }
+)
+class GuideBtns extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    changeStudyTip: PropTypes.func,
+    finishStudy: PropTypes.func,
+    isLast: PropTypes.bool
+  };
+
+  // 点击下一步
+  nextStep = () => {
+    this.props.changeStudyTip();
+    if (this.props.isLast) {
+      this.props.finishStudy();
+    }
+  };
+
+  // 点击退出指引
+  exitGuide = () => {
+    this.props.finishStudy();
+  };
+
+  render() {
+    return (
+      <div className="btn-container">
+        <Button className="btn" type="primary" onClick={this.nextStep}>
+          {this.props.isLast ? '完 成' : '下一步'}
+        </Button>
+        <Button className="btn" type="dashed" onClick={this.exitGuide}>
+          退出指引
+        </Button>
+      </div>
+    );
+  }
+}
+export default GuideBtns;
--- a/client/components/Header/Header.js
+++ b/client/components/Header/Header.js
@@ -0,0 +1,326 @@
+import './Header.scss';
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { Icon, Layout, Menu, Dropdown, message, Tooltip, Popover, Tag } from 'antd';
+import { checkLoginState, logoutActions, loginTypeAction } from '../../reducer/modules/user';
+import { changeMenuItem } from '../../reducer/modules/menu';
+import { withRouter } from 'react-router';
+import Srch from './Search/Search';
+const { Header } = Layout;
+import LogoSVG from '../LogoSVG/index.js';
+import Breadcrumb from '../Breadcrumb/Breadcrumb.js';
+import GuideBtns from '../GuideBtns/GuideBtns.js';
+const plugin = require('client/plugin.js');
+
+let HeaderMenu = {
+  user: {
+    path: '/user/profile',
+    name: '个人中心',
+    icon: 'user',
+    adminFlag: false
+  },
+  solution: {
+    path: '/user/list',
+    name: '用户管理',
+    icon: 'solution',
+    adminFlag: true
+  }
+};
+
+plugin.emitHook('header_menu', HeaderMenu);
+
+const MenuUser = props => (
+  <Menu theme="dark" className="user-menu">
+    {Object.keys(HeaderMenu).map(key => {
+      let item = HeaderMenu[key];
+      const isAdmin = props.role === 'admin';
+      if (item.adminFlag && !isAdmin) {
+        return null;
+      }
+      return (
+        <Menu.Item key={key}>
+          {item.name === '个人中心' ? (
+            <Link to={item.path + `/${props.uid}`}>
+              <Icon type={item.icon} />
+              {item.name}
+            </Link>
+          ) : (
+            <Link to={item.path}>
+              <Icon type={item.icon} />
+              {item.name}
+            </Link>
+          )}
+        </Menu.Item>
+      );
+    })}
+    <Menu.Item key="9">
+      <a onClick={props.logout}>
+        <Icon type="logout" />退出
+      </a>
+    </Menu.Item>
+  </Menu>
+);
+
+const tipFollow = (
+  <div className="title-container">
+    <h3 className="title">
+      <Icon type="star" /> 关注
+    </h3>
+    <p>这里是你的专属收藏夹，便于你找到自己的项目</p>
+  </div>
+);
+const tipAdd = (
+  <div className="title-container">
+    <h3 className="title">
+      <Icon type="plus-circle" /> 新建项目
+    </h3>
+    <p>在任何页面都可以快速新建项目</p>
+  </div>
+);
+const tipDoc = (
+  <div className="title-container">
+    <h3 className="title">
+      使用文档 <Tag color="orange">推荐!</Tag>
+    </h3>
+    <p>
+      初次使用 YApi，强烈建议你阅读{' '}
+      <a target="_blank" href="https://hellosean1025.github.io/yapi/" rel="noopener noreferrer">
+        使用文档
+      </a>
+      ，我们为你提供了通俗易懂的快速入门教程，更有详细的使用说明，欢迎阅读！{' '}
+    </p>
+  </div>
+);
+
+MenuUser.propTypes = {
+  user: PropTypes.string,
+  msg: PropTypes.string,
+  role: PropTypes.string,
+  uid: PropTypes.number,
+  relieveLink: PropTypes.func,
+  logout: PropTypes.func
+};
+
+const ToolUser = props => {
+  let imageUrl = props.imageUrl ? props.imageUrl : `/api/user/avatar?uid=${props.uid}`;
+  return (
+    <ul>
+      <li className="toolbar-li item-search">
+        <Srch groupList={props.groupList} />
+      </li>
+      <Popover
+        overlayClassName="popover-index"
+        content={<GuideBtns />}
+        title={tipFollow}
+        placement="bottomRight"
+        arrowPointAtCenter
+        visible={props.studyTip === 1 && !props.study}
+      >
+        <Tooltip placement="bottom" title={'我的关注'}>
+          <li className="toolbar-li">
+            <Link to="/follow">
+              <Icon className="dropdown-link" style={{ fontSize: 16 }} type="star" />
+            </Link>
+          </li>
+        </Tooltip>
+      </Popover>
+      <Popover
+        overlayClassName="popover-index"
+        content={<GuideBtns />}
+        title={tipAdd}
+        placement="bottomRight"
+        arrowPointAtCenter
+        visible={props.studyTip === 2 && !props.study}
+      >
+        <Tooltip placement="bottom" title={'新建项目'}>
+          <li className="toolbar-li">
+            <Link to="/add-project">
+              <Icon className="dropdown-link" style={{ fontSize: 16 }} type="plus-circle" />
+            </Link>
+          </li>
+        </Tooltip>
+      </Popover>
+      <Popover
+        overlayClassName="popover-index"
+        content={<GuideBtns isLast={true} />}
+        title={tipDoc}
+        placement="bottomRight"
+        arrowPointAtCenter
+        visible={props.studyTip === 3 && !props.study}
+      >
+        <Tooltip placement="bottom" title={'使用文档'}>
+          <li className="toolbar-li">
+            <a target="_blank" href="https://hellosean1025.github.io/yapi" rel="noopener noreferrer">
+              <Icon className="dropdown-link" style={{ fontSize: 16 }} type="question-circle" />
+            </a>
+          </li>
+        </Tooltip>
+      </Popover>
+      <li className="toolbar-li">
+        <Dropdown
+          placement="bottomRight"
+          trigger={['click']}
+          overlay={
+            <MenuUser
+              user={props.user}
+              msg={props.msg}
+              uid={props.uid}
+              role={props.role}
+              relieveLink={props.relieveLink}
+              logout={props.logout}
+            />
+          }
+        >
+          <a className="dropdown-link">
+            <span className="avatar-image">
+              <img src={imageUrl} />
+            </span>
+            {/*props.imageUrl? <Avatar src={props.imageUrl} />: <Avatar src={`/api/user/avatar?uid=${props.uid}`} />*/}
+            <span className="name">
+              <Icon type="down" />
+            </span>
+          </a>
+        </Dropdown>
+      </li>
+    </ul>
+  );
+};
+ToolUser.propTypes = {
+  user: PropTypes.string,
+  msg: PropTypes.string,
+  role: PropTypes.string,
+  uid: PropTypes.number,
+  relieveLink: PropTypes.func,
+  logout: PropTypes.func,
+  groupList: PropTypes.array,
+  studyTip: PropTypes.number,
+  study: PropTypes.bool,
+  imageUrl: PropTypes.any
+};
+
+@connect(
+  state => {
+    return {
+      user: state.user.userName,
+      uid: state.user.uid,
+      msg: null,
+      role: state.user.role,
+      login: state.user.isLogin,
+      studyTip: state.user.studyTip,
+      study: state.user.study,
+      imageUrl: state.user.imageUrl
+    };
+  },
+  {
+    loginTypeAction,
+    logoutActions,
+    checkLoginState,
+    changeMenuItem
+  }
+)
+@withRouter
+export default class HeaderCom extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    router: PropTypes.object,
+    user: PropTypes.string,
+    msg: PropTypes.string,
+    uid: PropTypes.number,
+    role: PropTypes.string,
+    login: PropTypes.bool,
+    relieveLink: PropTypes.func,
+    logoutActions: PropTypes.func,
+    checkLoginState: PropTypes.func,
+    loginTypeAction: PropTypes.func,
+    changeMenuItem: PropTypes.func,
+    history: PropTypes.object,
+    location: PropTypes.object,
+    study: PropTypes.bool,
+    studyTip: PropTypes.number,
+    imageUrl: PropTypes.any
+  };
+  linkTo = e => {
+    if (e.key != '/doc') {
+      this.props.changeMenuItem(e.key);
+      if (!this.props.login) {
+        message.info('请先登录', 1);
+      }
+    }
+  };
+  relieveLink = () => {
+    this.props.changeMenuItem('');
+  };
+  logout = e => {
+    e.preventDefault();
+    this.props
+      .logoutActions()
+      .then(res => {
+        if (res.payload.data.errcode == 0) {
+          this.props.history.push('/');
+          this.props.changeMenuItem('/');
+          message.success('退出成功! ');
+        } else {
+          message.error(res.payload.data.errmsg);
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+  handleLogin = e => {
+    e.preventDefault();
+    this.props.loginTypeAction('1');
+  };
+  handleReg = e => {
+    e.preventDefault();
+    this.props.loginTypeAction('2');
+  };
+  checkLoginState = () => {
+    this.props.checkLoginState
+      .then(res => {
+        if (res.payload.data.errcode !== 0) {
+          this.props.history.push('/');
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
+  render() {
+    const { login, user, msg, uid, role, studyTip, study, imageUrl } = this.props;
+    return (
+      <Header className="header-box m-header">
+        <div className="content g-row">
+          <Link onClick={this.relieveLink} to="/group" className="logo">
+            <div className="href">
+              <span className="img">
+                <LogoSVG length="32px" />
+              </span>
+            </div>
+          </Link>
+          <Breadcrumb />
+          <div
+            className="user-toolbar"
+            style={{ position: 'relative', zIndex: this.props.studyTip > 0 ? 3 : 1 }}
+          >
+            {login ? (
+              <ToolUser
+                {...{ studyTip, study, user, msg, uid, role, imageUrl }}
+                relieveLink={this.relieveLink}
+                logout={this.logout}
+              />
+            ) : (
+              ''
+            )}
+          </div>
+        </div>
+      </Header>
+    );
+  }
+}
--- a/client/components/Header/Header.scss
+++ b/client/components/Header/Header.scss
@@ -0,0 +1,150 @@
+@import '../../styles/mixin.scss';
+
+.nav-tooltip {
+  color: red;
+}
+
+.user-menu.ant-menu.ant-menu-dark .ant-menu-item-selected {
+  background: #32363a;
+  color: rgba(255, 255, 255, 0.67);
+}
+.user-menu.ant-menu-dark .ant-menu-item-selected > a {
+  color: rgba(255, 255, 255, 0.67);
+}
+
+/* .header-box.css */
+.header-box {
+  height: .56rem;
+  line-height: .56rem;
+  padding: 0;
+  .logo {
+    position: relative;
+    float: left;
+    line-height: .56rem;
+    height: .56rem;
+    width: 56px;
+    border-right: 1px solid #55616d;
+    border-left: 1px solid #55616d;
+    background-color: inherit;
+    transition: all .2s;
+    &:hover{
+      background-color: #2395f1;
+    }
+    .href {
+      text-decoration: none;
+      display: block;
+    }
+    .logo-name {
+      color: $color-white;
+      font-size: .24rem;
+      font-weight: 300;
+      margin-left: .38rem;
+    }
+    .img {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      left: 50%;
+      transform: translate(-16px,-17px);
+    }
+    .ui-badge {
+      position: absolute;
+      right: -18px;
+      top: 6px;
+      width: 30px;
+      height: 21px;
+      background-size: 236px 21px;
+      background-repeat: no-repeat;
+      background-image: none;
+    }
+    // &:before, &:after {
+    //   content: '';
+    //   display: block;
+    //   width: 2px;
+    //   height: .56rem;
+    //   background-color: #222;
+    //   border-left: 1px solid #575D67;
+    //   position: relative;
+    //   top: 0;
+    // }
+    // &:before {
+    //   float: left;
+    //   left: -.08rem;
+    // }
+    // &:after {
+    //   float: right;
+    //   right: -.27rem;
+    // }
+  }
+
+  .nav-toolbar {
+    font-size: .15rem;
+    float: left;
+
+  }
+  .user-menu{
+    margin-top: 20px;
+  }
+  .user-toolbar{
+    float: right;
+    height: .54rem;
+    display: flex;
+    align-items: center;
+    .item-search {
+      width: 2rem;
+    }
+    .toolbar-li{
+      float: left;
+      font-size: .14rem;
+      cursor: pointer;
+      color: #ccc;
+      margin-left: .16rem;
+      transition: color .2s;
+      & a {
+        color: #ccc;
+      }
+      .dropdown-link {
+        color: #ccc;
+        transition: color .2s;
+        // .ant-avatar-image{
+        //   margin-bottom: -10px;
+        // }
+        // .ant-avatar > img{
+        //   height: auto;
+        // }
+        .avatar-image{
+          margin-bottom: -10px;
+          display: inline-block;
+          text-align: center;
+          background: #ccc;
+          color: #fff;
+          white-space: nowrap;
+          position: relative;
+          overflow: hidden;
+          width: 32px;
+          height: 32px;
+          line-height: 0;
+          border-radius: 16px;
+        }
+
+        .avatar-image > img{
+          height: auto;
+          width:100%;
+          display: bloack;
+        }
+
+      }
+      .anticon.active {
+        color: #2395f1;
+      }
+      &:hover{
+        .dropdown-link {
+          color: #2395f1;
+        }
+      }
+      .name {
+        margin-left: .08rem;
+      }
+    }
+  }
+}
--- a/client/components/Header/Search/Search.js
+++ b/client/components/Header/Search/Search.js
@@ -0,0 +1,158 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Icon, Input, AutoComplete } from 'antd';
+import './Search.scss';
+import { withRouter } from 'react-router';
+import axios from 'axios';
+import { setCurrGroup, fetchGroupMsg } from '../../../reducer/modules/group';
+import { changeMenuItem } from '../../../reducer/modules/menu';
+
+import { fetchInterfaceListMenu } from '../../../reducer/modules/interface';
+const Option = AutoComplete.Option;
+
+@connect(
+  state => ({
+    groupList: state.group.groupList,
+    projectList: state.project.projectList
+  }),
+  {
+    setCurrGroup,
+    changeMenuItem,
+    fetchGroupMsg,
+    fetchInterfaceListMenu
+  }
+)
+@withRouter
+export default class Srch extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: []
+    };
+  }
+
+  static propTypes = {
+    groupList: PropTypes.array,
+    projectList: PropTypes.array,
+    router: PropTypes.object,
+    history: PropTypes.object,
+    location: PropTypes.object,
+    setCurrGroup: PropTypes.func,
+    changeMenuItem: PropTypes.func,
+    fetchInterfaceListMenu: PropTypes.func,
+    fetchGroupMsg: PropTypes.func
+  };
+
+  onSelect = async (value, option) => {
+    if (option.props.type === '分组') {
+      this.props.changeMenuItem('/group');
+      this.props.history.push('/group/' + option.props['id']);
+      this.props.setCurrGroup({ group_name: value, _id: option.props['id'] - 0 });
+    } else if (option.props.type === '项目') {
+      await this.props.fetchGroupMsg(option.props['groupId']);
+      this.props.history.push('/project/' + option.props['id']);
+    } else if (option.props.type === '接口') {
+      await this.props.fetchInterfaceListMenu(option.props['projectId']);
+      this.props.history.push(
+        '/project/' + option.props['projectId'] + '/interface/api/' + option.props['id']
+      );
+    }
+  };
+
+  handleSearch = value => {
+    axios
+      .get('/api/project/search?q=' + value)
+      .then(res => {
+        if (res.data && res.data.errcode === 0) {
+          const dataSource = [];
+          for (let title in res.data.data) {
+            res.data.data[title].map(item => {
+              switch (title) {
+                case 'group':
+                  dataSource.push(
+                    <Option
+                      key={`分组${item._id}`}
+                      type="分组"
+                      value={`${item.groupName}`}
+                      id={`${item._id}`}
+                    >
+                      {`分组: ${item.groupName}`}
+                    </Option>
+                  );
+                  break;
+                case 'project':
+                  dataSource.push(
+                    <Option
+                      key={`项目${item._id}`}
+                      type="项目"
+                      id={`${item._id}`}
+                      groupId={`${item.groupId}`}
+                    >
+                      {`项目: ${item.name}`}
+                    </Option>
+                  );
+                  break;
+                case 'interface':
+                  dataSource.push(
+                    <Option
+                      key={`接口${item._id}`}
+                      type="接口"
+                      id={`${item._id}`}
+                      projectId={`${item.projectId}`}
+                    >
+                      {`接口: ${item.title}`}
+                    </Option>
+                  );
+                  break;
+                default:
+                  break;
+              }
+            });
+          }
+          this.setState({
+            dataSource: dataSource
+          });
+        } else {
+          console.log('查询项目或分组失败');
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
+  // getDataSource(groupList){
+  //   const groupArr =[];
+  //   groupList.forEach(item =>{
+  //     groupArr.push("group: "+ item["group_name"]);
+  //   })
+  //   return groupArr;
+  // }
+
+  render() {
+    const { dataSource } = this.state;
+
+    return (
+      <div className="search-wrapper">
+        <AutoComplete
+          className="search-dropdown"
+          dataSource={dataSource}
+          style={{ width: '100%' }}
+          defaultActiveFirstOption={false}
+          onSelect={this.onSelect}
+          onSearch={this.handleSearch}
+          // filterOption={(inputValue, option) =>
+          //   option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+          // }
+        >
+          <Input
+            prefix={<Icon type="search" className="srch-icon" />}
+            placeholder="搜索分组/项目/接口"
+            className="search-input"
+          />
+        </AutoComplete>
+      </div>
+    );
+  }
+}
--- a/client/components/Header/Search/Search.scss
+++ b/client/components/Header/Search/Search.scss
@@ -0,0 +1,10 @@
+$color-grey:#979DA7;
+
+.search-wrapper{
+  cursor: auto;
+  .search-input{
+    width: 2rem;
+  }
+  .srch-icon{
+  }
+}
--- a/client/components/Intro/Intro.js
+++ b/client/components/Intro/Intro.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'antd';
+import './Intro.scss';
+import { OverPack } from 'rc-scroll-anim';
+import TweenOne from 'rc-tween-one';
+import QueueAnim from 'rc-queue-anim';
+
+const IntroPart = props => (
+  <li className="switch-content">
+    <div className="icon-switch">
+      <Icon type={props.iconType} />
+    </div>
+    <div className="text-switch">
+      <p>
+        <b>{props.title}</b>
+      </p>
+      <p>{props.des}</p>
+    </div>
+  </li>
+);
+
+IntroPart.propTypes = {
+  title: PropTypes.string,
+  des: PropTypes.string,
+  iconType: PropTypes.string
+};
+
+class Intro extends React.PureComponent {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    intro: PropTypes.shape({
+      title: PropTypes.string,
+      des: PropTypes.string,
+      img: PropTypes.string,
+      detail: PropTypes.arrayOf(
+        PropTypes.shape({
+          title: PropTypes.string,
+          des: PropTypes.string
+        })
+      )
+    }),
+    className: PropTypes.string
+  };
+  render() {
+    const { intro } = this.props;
+    const id = 'motion';
+    const animType = {
+      queue: 'right',
+      one: { x: '-=30', opacity: 0, type: 'from' }
+    };
+    return (
+      <div className="intro-container">
+        <OverPack playScale="0.3">
+          <TweenOne
+            animation={animType.one}
+            key={`${id}-img`}
+            resetStyleBool
+            id={`${id}-imgWrapper`}
+            className="imgWrapper"
+          >
+            <div className="img-container" id={`${id}-img-container`}>
+              <img src={intro.img} />
+            </div>
+          </TweenOne>
+
+          <QueueAnim
+            type={animType.queue}
+            key={`${id}-text`}
+            leaveReverse
+            ease={['easeOutCubic', 'easeInCubic']}
+            id={`${id}-textWrapper`}
+            className={`${id}-text des-container textWrapper`}
+          >
+            <div key={`${id}-des-content`}>
+              <div className="des-title">{intro.title}</div>
+              <div className="des-detail">{intro.des}</div>
+            </div>
+            <ul className="des-switch" key={`${id}-des-switch`}>
+              {intro.detail.map(function(item, i) {
+                return (
+                  <IntroPart key={i} title={item.title} des={item.des} iconType={item.iconType} />
+                );
+              })}
+            </ul>
+          </QueueAnim>
+        </OverPack>
+      </div>
+    );
+  }
+}
+
+export default Intro;
--- a/client/components/Intro/Intro.scss
+++ b/client/components/Intro/Intro.scss
@@ -0,0 +1,74 @@
+$imgUrl: "../../../static/image/";
+$color-grey: #E5E5E5;
+$color-blue: #2395f1;
+$color-white: #fff;
+
+.intro-container{
+  .imgWrapper{
+    height: 100%;
+    width: 50%;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+  }
+  .textWrapper{
+    display: block;
+    width: 50%;
+    height: 150px;
+    vertical-align: top;
+    position: absolute;
+    margin: auto;
+    right: 0;
+  }
+  .des-container{
+    padding-left: .15rem;
+    .des-title{
+      font-size: .24rem;
+      margin-bottom: .1rem;
+    }
+    .des-detail{
+      font-size: .15rem;
+      margin-bottom: .2rem;
+    }
+    .des-switch{
+      .switch-content{
+        float: left;
+        width: 50%;
+        max-height: .85rem;
+        font-size: .14rem;
+        padding: .1rem .15rem .1rem 0;
+        div{
+          float: left;
+        }
+        .icon-switch{
+          height: .4rem;
+          width: .4rem;
+          border-radius: .02rem;
+          background-color: $color-blue;
+          margin-right: .1rem;
+          color: $color-white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: .18rem;
+        }
+        .text-switch{
+          width: calc(100% - .65rem);
+        }
+      }
+    }
+  }
+  .img-container{
+    height: 100%;
+    width: 100%;
+    padding-right: .15rem;
+    //background-image: url("#{$imgUrl}demo-img.png");
+    img{
+      height: 100%;
+      width: 100%;
+      border: .01rem solid $color-grey;
+      box-shadow : 0 0 3px 1px $color-grey;
+      border-radius: .04rem;
+    }
+  }
+}
--- a/client/components/Label/Label.js
+++ b/client/components/Label/Label.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import { Icon, Input, Tooltip } from 'antd';
+import PropTypes from 'prop-types';
+import './Label.scss';
+
+export default class Label extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputShow: false,
+      inputValue: ''
+    };
+  }
+  static propTypes = {
+    onChange: PropTypes.func,
+    desc: PropTypes.string,
+    cat_name: PropTypes.string
+  };
+  toggle = () => {
+    this.setState({ inputShow: !this.state.inputShow });
+  };
+  handleChange = event => {
+    this.setState({ inputValue: event.target.value });
+  };
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.desc === nextProps.desc) {
+      this.setState({
+        inputShow: false
+      });
+    }
+  }
+  render() {
+    return (
+      <div>
+        {this.props.desc && (
+          <div className="component-label">
+            {!this.state.inputShow ? (
+              <div>
+                <p>
+                  {this.props.desc} &nbsp;&nbsp;
+                  <Tooltip title="编辑简介">
+                    <Icon onClick={this.toggle} className="interface-delete-icon" type="edit" />
+                  </Tooltip>
+                </p>
+              </div>
+            ) : (
+              <div className="label-input-wrapper">
+                <Input onChange={this.handleChange} defaultValue={this.props.desc} size="small" />
+                <Icon
+                  className="interface-delete-icon"
+                  onClick={() => {
+                    this.props.onChange(this.state.inputValue);
+                    this.toggle();
+                  }}
+                  type="check"
+                />
+                <Icon className="interface-delete-icon" onClick={this.toggle} type="close" />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
--- a/client/components/Label/Label.scss
+++ b/client/components/Label/Label.scss
@@ -0,0 +1,28 @@
+.component-label {
+  p {
+    padding: 3px 7px;
+    &:hover {
+      .interface-delete-icon {
+        display: inline-block;
+      }
+    }
+    .interface-delete-icon {
+      display: none;
+    }
+  }
+  .interface-delete-icon {
+    &:hover {
+      color: #2395f1;
+      cursor: pointer;
+    }
+  }
+  .label-input-wrapper {
+    input {
+      width: 30%;
+    }
+    .interface-delete-icon {
+      font-size: 1.4em;
+      margin-left: 10px;
+    }
+  }
+}
--- a/client/components/Loading/Loading.js
+++ b/client/components/Loading/Loading.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Loading.scss';
+
+export default class Loading extends React.PureComponent {
+  static defaultProps = {
+    visible: false
+  };
+  static propTypes = {
+    visible: PropTypes.bool
+  };
+  constructor(props) {
+    super(props);
+    this.state = { show: props.visible };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({ show: nextProps.visible });
+  }
+  render() {
+    return (
+      <div className="loading-box" style={{ display: this.state.show ? 'flex' : 'none' }}>
+        <div className="loading-box-bg" />
+        <div className="loading-box-inner">
+          <div />
+          <div />
+          <div />
+          <div />
+          <div />
+          <div />
+          <div />
+          <div />
+        </div>
+      </div>
+    );
+  }
+}
--- a/client/components/Loading/Loading.scss
+++ b/client/components/Loading/Loading.scss
@@ -0,0 +1,88 @@
+$ball-color:#30a1f2;
+$ball-size:.15rem;
+$ball-margin:.02rem;
+$loader-radius:.25rem;
+
+@function delay($interval, $count, $index) {
+  @return ($index * $interval) - ($interval * $count);
+}
+
+@keyframes ball-spin-fade-loader {
+  50% {
+    opacity: 0.3;
+    transform: scale(0.4);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@mixin ball-spin-fade-loader($n:8,$start:1){
+  @for $i from $start through $n {
+    > div:nth-child(#{$i}) {
+      $quarter: ($loader-radius/2) + ($loader-radius/5.5);
+
+      @if $i == 1 {
+        top: $loader-radius;
+        left: 0;
+      } @else if $i == 2 {
+        top: $quarter;
+        left: $quarter;
+      } @else if $i == 3 {
+        top: 0;
+        left: $loader-radius;
+      } @else if $i == 4 {
+        top: -$quarter;
+        left: $quarter;
+      } @else if $i == 5 {
+        top: -$loader-radius;
+        left: 0;
+      } @else if $i == 6 {
+        top: -$quarter;
+        left: -$quarter;
+      } @else if $i == 7 {
+        top: 0;
+        left: -$loader-radius;
+      } @else if $i == 8 {
+        top: $quarter;
+        left: -$quarter;
+      }
+      animation: ball-spin-fade-loader 1s delay(0.12s, $n, $i - 1) infinite linear;
+    }
+  }
+}
+
+.loading-box{
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9999;
+  &-bg{
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(255,255,255,.7);
+  }
+  &-inner{
+    @include ball-spin-fade-loader();
+    position: relative;
+    >div{
+      position: absolute;
+      width: $ball-size;
+      height: $ball-size;
+      border-radius: 50%;
+      margin: $ball-margin;
+      background-color: $ball-color;
+      animation-fill-mode: both;
+    }
+  }
+}
+
+
+
--- a/client/components/LogoSVG/index.js
+++ b/client/components/LogoSVG/index.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LogoSVG = props => {
+  let length = props.length;
+  return (
+    <svg className="svg" width={length} height={length} viewBox="0 0 64 64" version="1.1">
+      <title>Icon</title>
+      <desc>Created with Sketch.</desc>
+      <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+          <stop stopColor="#FFFFFF" offset="0%" />
+          <stop stopColor="#F2F2F2" offset="100%" />
+        </linearGradient>
+        <circle id="path-2" cx="31.9988602" cy="31.9988602" r="2.92886048" />
+        <filter
+          x="-85.4%"
+          y="-68.3%"
+          width="270.7%"
+          height="270.7%"
+          filterUnits="objectBoundingBox"
+          id="filter-3"
+        >
+          <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+          <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+          <feColorMatrix
+            values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.159703351 0"
+            type="matrix"
+            in="shadowBlurOuter1"
+          />
+        </filter>
+      </defs>
+      <g id="首页" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="大屏幕">
+          <g id="Icon">
+            <circle id="Oval-1" fill="url(#linearGradient-1)" cx="32" cy="32" r="32" />
+            <path
+              d="M36.7078009,31.8054514 L36.7078009,51.7110548 C36.7078009,54.2844537 34.6258634,56.3695395 32.0579205,56.3695395 C29.4899777,56.3695395 27.4099998,54.0704461 27.4099998,51.7941246 L27.4099998,31.8061972 C27.4099998,29.528395 29.4909575,27.218453 32.0589004,27.230043 C34.6268432,27.241633 36.7078009,29.528395 36.7078009,31.8054514 Z"
+              id="blue"
+              fill="#2359F1"
+              fillRule="nonzero"
+            />
+            <path
+              d="M45.2586091,17.1026914 C45.2586091,17.1026914 45.5657231,34.0524383 45.2345291,37.01141 C44.9033351,39.9703817 43.1767091,41.6667796 40.6088126,41.6667796 C38.040916,41.6667796 35.9609757,39.3676862 35.9609757,37.0913646 L35.9609757,17.1034372 C35.9609757,14.825635 38.0418959,12.515693 40.6097924,12.527283 C43.177689,12.538873 45.2586091,14.825635 45.2586091,17.1026914 Z"
+              id="green"
+              fill="#57CF27"
+              fillRule="nonzero"
+              transform="translate(40.674608, 27.097010) rotate(60.000000) translate(-40.674608, -27.097010) "
+            />
+            <path
+              d="M28.0410158,17.0465598 L28.0410158,36.9521632 C28.0410158,39.525562 25.9591158,41.6106479 23.3912193,41.6106479 C20.8233227,41.6106479 18.7433824,39.3115545 18.7433824,37.035233 L18.7433824,17.0473055 C18.7433824,14.7695034 20.8243026,12.4595614 23.3921991,12.4711513 C25.9600956,12.4827413 28.0410158,14.7695034 28.0410158,17.0465598 Z"
+              id="red"
+              fill="#FF561B"
+              fillRule="nonzero"
+              transform="translate(23.392199, 27.040878) rotate(-60.000000) translate(-23.392199, -27.040878) "
+            />
+            <g id="inner-round">
+              <use fill="black" fillOpacity="1" filter="url(#filter-3)" xlinkHref="#path-2" />
+              <use fill="#F7F7F7" fillRule="evenodd" xlinkHref="#path-2" />
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+LogoSVG.propTypes = {
+  length: PropTypes.any
+};
+
+export default LogoSVG;
--- a/client/components/MockDoc/MockDoc.js
+++ b/client/components/MockDoc/MockDoc.js
@@ -0,0 +1,260 @@
+import './MockDoc.scss';
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+
+// 组件用法 <MockDoc mock= mockData doc= docData />
+// mockData: mock数据 格式为json
+// docData：docData数据 格式为array
+
+class MockDoc extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      release: []
+    };
+  }
+
+  static propTypes = {
+    mock: PropTypes.object,
+    doc: PropTypes.array
+  };
+  // btnCol(start,col){
+  //   return function(){
+  //     console.log(start,col);
+  //   }
+  // }
+  render() {
+    let htmlData = mockToArr(this.props.mock);
+    htmlData = arrToHtml(htmlData, this.props.doc);
+    return (
+      <div className="MockDoc">
+        {htmlData.map(function(item, i) {
+          {
+            /*//类型：Object  必有字段  备注：qwqwqw*/
+          }
+          if (item.mes) {
+            var mes = [];
+            item.mes.type
+              ? mes.push(
+                  <span key={i} className="keymes">
+                    {' '}
+                    / /类型：{item.mes.type}
+                  </span>
+                )
+              : '';
+            item.mes.required
+              ? mes.push(
+                  <span key={i + 1} className="keymes">
+                    必有字段
+                  </span>
+                )
+              : '';
+            item.mes.desc
+              ? mes.push(
+                  <span key={i + 2} className="keymes">
+                    备注：{item.mes.desc}
+                  </span>
+                )
+              : '';
+          }
+          return (
+            <div className="jsonItem" key={i}>
+              {<span className="jsonitemNum">{i + 1}.</span>}
+              {produceSpace(item.space)}
+              {setStrToHtml(item.str)}
+              {mes}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+MockDoc.defaultProps = {
+  mock: {
+    ersrcode: '@integer',
+    'data|9-19': [
+      '123',
+      {
+        name: '@name',
+        name1: [
+          {
+            name3: '1'
+          }
+        ]
+      }
+    ],
+    data1: '123',
+    data3: {
+      err: 'errCode',
+      arr: [1, 2]
+    }
+  },
+  doc: [
+    { type: 'strisng', key: 'ersrcode', required: true, desc: '错误编码' },
+    { type: 'number', key: 'data[]', required: true, desc: '返回数据' },
+    { type: 'object', key: 'data[].name', required: true, desc: '数据名' },
+    { type: 'object', key: 'data[].name1[].name3', required: true, desc: '数据名1' },
+    { type: 'object', key: 'data1', required: true, desc: '数据名1' },
+    { type: 'object', key: 'data3.err', required: true, desc: '数据名1' },
+    { type: 'object', key: 'data3', required: true, desc: '数据名1' },
+    { type: 'object', key: 'data3.arr[]', required: true, desc: '数据名1' }
+  ]
+};
+function produceSpace(count) {
+  var space = [];
+  for (var i = 0; i < count; i++) {
+    space.push(<span key={i} className="spaces" />);
+  }
+  return space;
+}
+
+function setStrToHtml(str) {
+  return <span dangerouslySetInnerHTML={{ __html: `${str}` }} />;
+}
+function arrToHtml(mockArr, mock) {
+  for (var i in mockArr) {
+    for (var item in mock) {
+      // if(mockArr[i].key){
+      //   console.log(mockArr[i].key,mock[item].key)
+      // }
+
+      if (mockArr[i].key && mockArr[i].key === mock[item].key) {
+        mockArr[i].mes = mock[item];
+      }
+    }
+  }
+  return mockArr;
+}
+
+function mockToArr(mock, html, space, key) {
+  html = html || [];
+  space = space || 0;
+  key = key || [];
+  if (typeof mock === 'object' && space === 0) {
+    if (mock.constructor === Array) {
+      html.push({
+        space: space,
+        str: '['
+      });
+      space++;
+    } else {
+      html.push({
+        space: space,
+        str: '{'
+      });
+      space++;
+    }
+  }
+  for (var i in mock) {
+    if (!mock.hasOwnProperty(i)) {
+      continue;
+    }
+    var index = i;
+    if (/^\w+(\|\w+)?/.test(i)) {
+      index = i.split('|')[0];
+    }
+    if (typeof mock[i] === 'object') {
+      if (mock[i].constructor === Array) {
+        // shuzu
+        if (mock.constructor != Array) {
+          if (key.length) {
+            key.push('.' + index + '[]');
+          } else {
+            key.push(index + '[]');
+          }
+        } else {
+          key.push('[]');
+        }
+        html.push({
+          space: space,
+          str: index + ' : [',
+          key: key.join('')
+        });
+      } else {
+        // object
+        if (mock.constructor != Array) {
+          if (key.length) {
+            key.push('.' + index);
+          } else {
+            key.push(index);
+          }
+          html.push({
+            space: space,
+            str: index + ' : {'
+          });
+        } else {
+          html.push({
+            space: space,
+            str: '{'
+          });
+        }
+      }
+      space++;
+      mockToArr(mock[i], html, space, key);
+      key.pop();
+      space--;
+    } else {
+      if (mock.constructor === Array) {
+        // html.push(produceSpace(space) + mock[i]+ ",");
+        html.push({
+          space: space,
+          str: `<span class = "valueLight">${mock[i]}</span>` + ','
+        });
+      } else {
+        // html.push(produceSpace(space) + index + ":" + mock[i] + ",");
+        if (mock.constructor != Array) {
+          if (key.length) {
+            // doc.push(key+"."+index);
+            html.push({
+              space: space,
+              str: index + ' : ' + `<span class = "valueLight">${mock[i]}</span>` + ',',
+              key: key.join('') + '.' + index
+            });
+          } else {
+            // doc.push(key + index);
+            html.push({
+              space: space,
+              str: index + ' : ' + `<span class = "valueLight">${mock[i]}</span>` + ',',
+              key: key.join('') + index
+            });
+          }
+        } else {
+          html.push({
+            space: space,
+            str: index + ' : ' + `<span class = "valueLight">${mock[i]}</span>` + ',',
+            key: key.join('')
+          });
+        }
+      }
+    }
+  }
+  if (typeof mock === 'object') {
+    html[html.length - 1].str = html[html.length - 1].str.substr(
+      0,
+      html[html.length - 1].str.length - 1
+    );
+    if (mock.constructor === Array) {
+      space--;
+      // html.push(produceSpace(space)+"]");
+      html.push({
+        space: space,
+        str: ']'
+      });
+    } else {
+      space--;
+      // html.push(produceSpace(space)+"}");
+      html.push({
+        space: space,
+        str: '}'
+      });
+    }
+  }
+  if (space != 0) {
+    html[html.length - 1].str = html[html.length - 1].str + ',';
+  }
+  return html;
+}
+
+export default MockDoc;
--- a/client/components/MockDoc/MockDoc.scss
+++ b/client/components/MockDoc/MockDoc.scss
@@ -0,0 +1,31 @@
+.MockDoc{
+    background-color: #F6F6F6;
+    // padding: 16px;
+    border:16px solid #F6F6F6;
+    overflow: auto;
+    width: 500px;
+    height: 500px;
+    word-break:keep-all;           /* 不换行 */
+    white-space:nowrap;  
+    .jsonItem{
+        font-size: 14px;
+        width: auto;
+        
+    }
+    .jsonitemNum{
+        margin-right: 16px;
+        display: inline-block;
+        width: 25px;
+        border-right: 1px solid gray;
+    }
+    .valueLight{
+        color: #108ee9;
+    }
+}
+.spaces{
+    display: inline-block;
+    width: 30px;
+}
+.keymes{
+    margin-left: 20px;
+}
--- a/client/components/ModalPostman/MethodsList.js
+++ b/client/components/ModalPostman/MethodsList.js
@@ -0,0 +1,192 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Icon, Input, Select, Tooltip } from 'antd';
+import _ from 'underscore';
+const Option = Select.Option;
+
+// 深拷贝
+function deepEqual(state) {
+  return JSON.parse(JSON.stringify(state));
+}
+
+const METHODS_LIST = [
+  { name: 'md5', type: false, params: [], desc: 'md5加密' },
+  { name: 'lower', type: false, params: [], desc: '所有字母变成小写' },
+  { name: 'length', type: false, params: [], desc: '数据长度' },
+  { name: 'substr', type: true, component: 'doubleInput', params: [], desc: '截取部分字符串' },
+  { name: 'sha', type: true, component: 'select', params: ['sha1'], desc: 'sha加密' },
+  { name: 'base64', type: false, params: [], desc: 'base64加密' },
+  { name: 'unbase64', type: false, params: [], desc: 'base64解密' },
+  { name: 'concat', type: true, component: 'input', params: [], desc: '连接字符串' },
+  { name: 'lconcat', type: true, component: 'input', params: [], desc: '左连接' },
+  { name: 'upper', type: false, desc: '所有字母变成大写' },
+  { name: 'number', type: false, desc: '字符串转换为数字类型' }
+];
+
+class MethodsList extends Component {
+  static propTypes = {
+    show: PropTypes.bool,
+    click: PropTypes.func,
+    clickValue: PropTypes.string,
+    paramsInput: PropTypes.func,
+    clickIndex: PropTypes.number,
+    params: PropTypes.array
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      list: METHODS_LIST,
+      moreFlag: true
+    };
+  }
+
+  showMore = () => {
+    this.setState({
+      moreFlag: false
+    });
+  };
+
+  componentDidMount() {
+    var index = _.findIndex(METHODS_LIST, { name: this.props.clickValue });
+
+    let moreFlag = index > 3 ? false : true;
+    this.setState({
+      moreFlag
+    });
+  }
+
+  inputComponent = props => {
+    let clickIndex = props.clickIndex;
+    let paramsIndex = props.paramsIndex;
+    let params = props.params;
+    return (
+      <Input
+        size="small"
+        placeholder="请输入参数"
+        value={params[0]}
+        onChange={e => this.handleParamsChange(e.target.value, clickIndex, paramsIndex, 0)}
+      />
+    );
+  };
+
+  doubleInputComponent = props => {
+    let clickIndex = props.clickIndex;
+    let paramsIndex = props.paramsIndex;
+    let params = props.params;
+
+    return (
+      <div>
+        <Input
+          size="small"
+          placeholder="start"
+          value={params[0]}
+          onChange={e => this.handleParamsChange(e.target.value, clickIndex, paramsIndex, 0)}
+        />
+        <Input
+          size="small"
+          placeholder="length"
+          value={params[1]}
+          onChange={e => this.handleParamsChange(e.target.value, clickIndex, paramsIndex, 1)}
+        />
+      </div>
+    );
+  };
+
+  selectComponent = props => {
+    const subname = ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'];
+    let clickIndex = props.clickIndex;
+    let paramsIndex = props.paramsIndex;
+    let params = props.params;
+    return (
+      <Select
+        value={params[0] || 'sha1'}
+        placeholder="请选择"
+        style={{ width: 150 }}
+        size="small"
+        onChange={e => this.handleParamsChange(e, clickIndex, paramsIndex, 0)}
+      >
+        {subname.map((item, index) => {
+          return (
+            <Option value={item} key={index}>
+              {item}
+            </Option>
+          );
+        })}
+      </Select>
+    );
+  };
+
+  // 处理参数输入
+  handleParamsChange(value, clickIndex, paramsIndex, index) {
+    let newList = deepEqual(this.state.list);
+    newList[paramsIndex].params[index] = value;
+    this.setState({
+      list: newList
+    });
+    this.props.paramsInput(value, clickIndex, index);
+  }
+
+  // 组件选择
+  handleComponent(item, clickIndex, index, params) {
+    let query = {
+      clickIndex: clickIndex,
+      paramsIndex: index,
+      params
+    };
+    switch (item.component) {
+      case 'select':
+        return this.selectComponent(query);
+      case 'input':
+        return this.inputComponent(query);
+      case 'doubleInput':
+        return this.doubleInputComponent(query);
+      default:
+        break;
+    }
+  }
+
+  render() {
+    const { list, moreFlag } = this.state;
+    const { click, clickValue, clickIndex, params } = this.props;
+    let showList = moreFlag ? list.slice(0, 4) : list;
+
+    return (
+      <div className="modal-postman-form-method">
+        <h3 className="methods-title title">方法</h3>
+        {showList.map((item, index) => {
+          return (
+            <Row
+              key={index}
+              type="flex"
+              align="middle"
+              className={'row methods-row ' + (item.name === clickValue ? 'checked' : '')}
+              onClick={() => click(item.name, showList[index].params)}
+            >
+              <Tooltip title={item.desc}>
+                <span>{item.name}</span>
+              </Tooltip>
+              <span className="input-component">
+                {item.type &&
+                  this.handleComponent(
+                    item,
+                    clickIndex,
+                    index,
+                    item.name === clickValue ? params : []
+                  )}
+              </span>
+            </Row>
+          );
+        })}
+        {moreFlag && (
+          <div className="show-more" onClick={this.showMore}>
+            <Icon type="down" />
+            <span style={{ paddingLeft: '4px' }}>更多</span>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default MethodsList;
--- a/client/components/ModalPostman/MockList.js
+++ b/client/components/ModalPostman/MockList.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Row, Input } from 'antd';
+import constants from '../../constants/variable.js';
+const wordList = constants.MOCK_SOURCE;
+const Search = Input.Search;
+
+class MockList extends Component {
+  static propTypes = {
+    click: PropTypes.func,
+    clickValue: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      filter: '',
+      list: []
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      list: wordList
+    });
+  }
+
+  onFilter = e => {
+    const list = wordList.filter(item => {
+      return item.mock.indexOf(e.target.value) !== -1;
+    });
+    this.setState({
+      filter: e.target.value,
+      list: list
+    });
+  };
+
+  render() {
+    const { list, filter } = this.state;
+    const { click, clickValue } = this.props;
+    return (
+      <div className="modal-postman-form-mock">
+        <Search
+          onChange={this.onFilter}
+          value={filter}
+          placeholder="搜索mock数据"
+          className="mock-search"
+        />
+        {list.map((item, index) => {
+          return (
+            <Row
+              key={index}
+              type="flex"
+              align="middle"
+              className={'row ' + (item.mock === clickValue ? 'checked' : '')}
+              onClick={() => click(item.mock)}
+            >
+              <span>{item.mock}</span>
+            </Row>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default MockList;
--- a/client/components/ModalPostman/VariablesSelect.js
+++ b/client/components/ModalPostman/VariablesSelect.js
@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Tree } from 'antd';
+import { connect } from 'react-redux';
+import { fetchVariableParamsList } from '../../reducer/modules/interfaceCol.js';
+
+const TreeNode = Tree.TreeNode;
+const CanSelectPathPrefix = 'CanSelectPath-';
+
+function deleteLastObject(str) {
+  return str
+    .split('.')
+    .slice(0, -1)
+    .join('.');
+}
+
+function deleteLastArr(str) {
+  return str.replace(/\[.*?\]/g, '');
+}
+
+@connect(
+  state => {
+    return {
+      currColId: state.interfaceCol.currColId
+    };
+  },
+  {
+    fetchVariableParamsList
+  }
+)
+class VariablesSelect extends Component {
+  static propTypes = {
+    click: PropTypes.func,
+    currColId: PropTypes.number,
+    fetchVariableParamsList: PropTypes.func,
+    clickValue: PropTypes.string,
+    id: PropTypes.number
+  };
+  state = {
+    records: [],
+    expandedKeys: [],
+    selectedKeys: []
+  };
+
+  handleRecordsData(id) {
+    let newRecords = [];
+    this.id = id;
+    for (let i = 0; i < this.records.length; i++) {
+      if (this.records[i]._id === id) {
+        break;
+      }
+      newRecords.push(this.records[i]);
+    }
+    this.setState({
+      records: newRecords
+    });
+  }
+
+  async componentDidMount() {
+    const { currColId, fetchVariableParamsList, clickValue } = this.props;
+    let result = await fetchVariableParamsList(currColId);
+    let records = result.payload.data.data;
+    this.records = records.sort((a, b) => {
+      return a.index - b.index;
+    });
+    this.handleRecordsData(this.props.id);
+
+    if (clickValue) {
+      let isArrayParams = clickValue.lastIndexOf(']') === clickValue.length - 1;
+      let key = isArrayParams ? deleteLastArr(clickValue) : deleteLastObject(clickValue);
+      this.setState({
+        expandedKeys: [key],
+        selectedKeys: [CanSelectPathPrefix + clickValue]
+      });
+      // this.props.click(clickValue);
+    }
+  }
+
+  async UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.records && nextProps.id && this.id !== nextProps.id) {
+      this.handleRecordsData(nextProps.id);
+    }
+  }
+
+  handleSelect = key => {
+    this.setState({
+      selectedKeys: [key]
+    });
+    if (key && key.indexOf(CanSelectPathPrefix) === 0) {
+      key = key.substr(CanSelectPathPrefix.length);
+      this.props.click(key);
+    } else {
+      this.setState({
+        expandedKeys: [key]
+      });
+    }
+  };
+
+  onExpand = keys => {
+    this.setState({ expandedKeys: keys });
+  };
+
+  render() {
+    const pathSelctByTree = (data, elementKeyPrefix = '$', deepLevel = 0) => {
+      let keys = Object.keys(data);
+      let TreeComponents = keys.map((key, index) => {
+        let item = data[key],
+          casename;
+        if (deepLevel === 0) {
+          elementKeyPrefix = '$';
+          elementKeyPrefix = elementKeyPrefix + '.' + item._id;
+          casename = item.casename;
+          item = {
+            params: item.params,
+            body: item.body
+          };
+        } else if (Array.isArray(data)) {
+          elementKeyPrefix =
+            index === 0
+              ? elementKeyPrefix + '[' + key + ']'
+              : deleteLastArr(elementKeyPrefix) + '[' + key + ']';
+        } else {
+          elementKeyPrefix =
+            index === 0
+              ? elementKeyPrefix + '.' + key
+              : deleteLastObject(elementKeyPrefix) + '.' + key;
+        }
+        if (item && typeof item === 'object') {
+          const isDisable = Array.isArray(item) && item.length === 0;
+          return (
+            <TreeNode key={elementKeyPrefix} disabled={isDisable} title={casename || key}>
+              {pathSelctByTree(item, elementKeyPrefix, deepLevel + 1)}
+            </TreeNode>
+          );
+        }
+        return <TreeNode key={CanSelectPathPrefix + elementKeyPrefix} title={key} />;
+      });
+
+      return TreeComponents;
+    };
+
+    return (
+      <div className="modal-postman-form-variable">
+        <Tree
+          expandedKeys={this.state.expandedKeys}
+          selectedKeys={this.state.selectedKeys}
+          onSelect={([key]) => this.handleSelect(key)}
+          onExpand={this.onExpand}
+        >
+          {pathSelctByTree(this.state.records)}
+        </Tree>
+      </div>
+    );
+  }
+}
+
+export default VariablesSelect;
--- a/client/components/ModalPostman/index.js
+++ b/client/components/ModalPostman/index.js
@@ -0,0 +1,317 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './index.scss';
+import { Alert, Modal, Row, Col, Icon, Collapse, Input, Tooltip } from 'antd';
+import MockList from './MockList.js';
+import MethodsList from './MethodsList.js';
+import VariablesSelect from './VariablesSelect.js';
+import { trim } from '../../common.js';
+
+const { handleParamsValue } = require('common/utils.js');
+const Panel = Collapse.Panel;
+
+// 深拷贝
+function deepEqual(state) {
+  return JSON.parse(JSON.stringify(state));
+}
+
+function closeRightTabsAndAddNewTab(arr, index, name, params) {
+  let newParamsList = [].concat(arr);
+  newParamsList.splice(index + 1, newParamsList.length - index);
+  newParamsList.push({
+    name: '',
+    params: []
+  });
+
+  let curParams = params || [];
+  let curname = name || '';
+  newParamsList[index] = {
+    ...newParamsList[index],
+    name: curname,
+    params: curParams
+  };
+  return newParamsList;
+}
+
+class ModalPostman extends Component {
+  static propTypes = {
+    visible: PropTypes.bool,
+    handleCancel: PropTypes.func,
+    handleOk: PropTypes.func,
+    inputValue: PropTypes.any,
+    envType: PropTypes.string,
+    id: PropTypes.number
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      methodsShow: false,
+      methodsShowMore: false,
+      methodsList: [],
+      constantInput: '',
+      activeKey: '1',
+      methodsParamsList: [
+        {
+          name: '',
+          params: [],
+          type: 'dataSource'
+        }
+      ]
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    let { inputValue } = this.props;
+    this.setState({
+      constantInput: inputValue
+    });
+    // this.props.inputValue && this.handleConstantsInput(this.props.inputValue, 0);
+    inputValue && this.handleInitList(inputValue);
+  }
+
+  handleInitList(val) {
+    val = val.replace(/^\{\{(.+)\}\}$/g, '$1');
+    let valArr = val.split('|');
+
+    if (valArr[0].indexOf('@') >= 0) {
+      this.setState({
+        activeKey: '2'
+      });
+    } else if (valArr[0].indexOf('$') >= 0) {
+      this.setState({
+        activeKey: '3'
+      });
+    }
+
+    let paramsList = [
+      {
+        name: trim(valArr[0]),
+        params: [],
+        type: 'dataSource'
+      }
+    ];
+
+    for (let i = 1; i < valArr.length; i++) {
+      let nameArr = valArr[i].split(':');
+
+      let paramArr = nameArr[1] && nameArr[1].split(',');
+      paramArr =
+        paramArr &&
+        paramArr.map(item => {
+          return trim(item);
+        });
+      let item = {
+        name: trim(nameArr[0]),
+        params: paramArr || []
+      };
+      paramsList.push(item);
+    }
+
+    this.setState(
+      {
+        methodsParamsList: paramsList
+      },
+      () => {
+        this.mockClick(valArr.length)();
+      }
+    );
+  }
+
+  mockClick(index) {
+    return (curname, params) => {
+      let newParamsList = closeRightTabsAndAddNewTab(
+        this.state.methodsParamsList,
+        index,
+        curname,
+        params
+      );
+      this.setState({
+        methodsParamsList: newParamsList
+      });
+    };
+  }
+  //  处理常量输入
+  handleConstantsInput = val => {
+    val = val.replace(/^\{\{(.+)\}\}$/g, '$1');
+    this.setState({
+      constantInput: val
+    });
+    this.mockClick(0)(val);
+  };
+
+  handleParamsInput = (e, clickIndex, paramsIndex) => {
+    let newParamsList = deepEqual(this.state.methodsParamsList);
+    newParamsList[clickIndex].params[paramsIndex] = e;
+    this.setState({
+      methodsParamsList: newParamsList
+    });
+  };
+
+  // 方法
+  MethodsListSource = props => {
+    return (
+      <MethodsList
+        click={this.mockClick(props.index)}
+        clickValue={props.value}
+        params={props.params}
+        paramsInput={this.handleParamsInput}
+        clickIndex={props.index}
+      />
+    );
+  };
+
+  //  处理表达式
+  handleValue(val) {
+    return handleParamsValue(val, {});
+  }
+
+  // 处理错误
+  handleError() {
+    return (
+      <Alert
+        message="请求“变量集”尚未运行,所以我们无法从其响应中提取的值。您可以在测试集合中测试这些变量。"
+        type="warning"
+      />
+    );
+  }
+
+  // 初始化
+  setInit() {
+    let initParamsList = [
+      {
+        name: '',
+        params: [],
+        type: 'dataSource'
+      }
+    ];
+    this.setState({
+      methodsParamsList: initParamsList
+    });
+  }
+  // 处理取消插入
+  handleCancel = () => {
+    this.setInit();
+    this.props.handleCancel();
+  };
+
+  // 处理插入
+  handleOk = installValue => {
+    this.props.handleOk(installValue);
+    this.setInit();
+  };
+  // 处理面板切换
+  handleCollapse = key => {
+    this.setState({
+      activeKey: key
+    });
+  };
+
+  render() {
+    const { visible, envType } = this.props;
+    const { methodsParamsList, constantInput } = this.state;
+
+    const outputParams = () => {
+      let str = '';
+      let length = methodsParamsList.length;
+      methodsParamsList.forEach((item, index) => {
+        let isShow = item.name && length - 2 !== index;
+        str += item.name;
+        item.params.forEach((item, index) => {
+          let isParams = index > 0;
+          str += isParams ? ' , ' : ' : ';
+          str += item;
+        });
+        str += isShow ? ' | ' : '';
+      });
+      return '{{ ' + str + ' }}';
+    };
+
+    return (
+      <Modal
+        title={
+          <p>
+            <Icon type="edit" /> 高级参数设置
+          </p>
+        }
+        visible={visible}
+        onOk={() => this.handleOk(outputParams())}
+        onCancel={this.handleCancel}
+        wrapClassName="modal-postman"
+        width={1024}
+        maskClosable={false}
+        okText="插入"
+      >
+        <Row className="modal-postman-form" type="flex">
+          {methodsParamsList.map((item, index) => {
+            return item.type === 'dataSource' ? (
+              <Col span={8} className="modal-postman-col" key={index}>
+                <Collapse
+                  className="modal-postman-collapse"
+                  activeKey={this.state.activeKey}
+                  onChange={this.handleCollapse}
+                  bordered={false}
+                  accordion
+                >
+                  <Panel header={<h3 className="mock-title">常量</h3>} key="1">
+                    <Input
+                      placeholder="基础参数值"
+                      value={constantInput}
+                      onChange={e => this.handleConstantsInput(e.target.value, index)}
+                    />
+                  </Panel>
+                  <Panel header={<h3 className="mock-title">mock数据</h3>} key="2">
+                    <MockList click={this.mockClick(index)} clickValue={item.name} />
+                  </Panel>
+                  {envType === 'case' && (
+                    <Panel
+                      header={
+                        <h3 className="mock-title">
+                          变量&nbsp;<Tooltip
+                            placement="top"
+                            title="YApi 提供了强大的变量参数功能，你可以在测试的时候使用前面接口的 参数 或 返回值 作为 后面接口的参数，即使接口之间存在依赖，也可以轻松 一键测试~"
+                          >
+                            <Icon type="question-circle-o" />
+                          </Tooltip>
+                        </h3>
+                      }
+                      key="3"
+                    >
+                      <VariablesSelect
+                        id={this.props.id}
+                        click={this.mockClick(index)}
+                        clickValue={item.name}
+                      />
+                    </Panel>
+                  )}
+                </Collapse>
+              </Col>
+            ) : (
+              <Col span={8} className="modal-postman-col" key={index}>
+                <this.MethodsListSource index={index} value={item.name} params={item.params} />
+              </Col>
+            );
+          })}
+        </Row>
+        <Row className="modal-postman-expression">
+          <Col span={6}>
+            <h3 className="title">表达式</h3>
+          </Col>
+          <Col span={18}>
+            <span className="expression-item">{outputParams()}</span>
+          </Col>
+        </Row>
+        <Row className="modal-postman-preview">
+          <Col span={6}>
+            <h3 className="title">预览</h3>
+          </Col>
+          <Col span={18}>
+            <h3>{this.handleValue(outputParams()) || (outputParams() && this.handleError())}</h3>
+          </Col>
+        </Row>
+      </Modal>
+    );
+  }
+}
+
+export default ModalPostman;
--- a/client/components/ModalPostman/index.scss
+++ b/client/components/ModalPostman/index.scss
@@ -0,0 +1,143 @@
+.modal-postman {
+  .ant-modal-body {
+    padding: 0;
+  }
+  .ant-modal-footer {
+    background-color: #f5f5f5;
+  }
+  .modal-postman-form {
+    // padding: 0 16px;
+    max-height: 500px;
+    min-height: 400px;
+    overflow-y: scroll;
+    .ant-radio-group{
+      width:100%;
+    }
+
+    .mock-search {
+      padding-right: 8px;
+      margin-bottom: 16px;
+    }
+    .mock-checked{
+      color:#fff;
+      background-color:#2395f1;
+      width:100%
+    }
+    .row {
+      margin-bottom: 8px;
+      width: 100%;
+      padding: 8px 16px;
+      cursor: pointer;
+    }
+
+    .checked{
+      color:#fff;
+      background-color:#2395f1;
+    }
+  }
+  .modal-postman-expression, .modal-postman-preview {
+    border-top: 1px solid #e9e9e9;
+    padding: 8px 16px;
+    line-height: 38px;
+  }
+  .modal-postman-preview {
+    background-color: #f5f5f5;
+    
+  }
+  .modal-postman-collapse{
+     .ant-collapse-item > .ant-collapse-header{
+      // padding-left: 20px;
+      // margin-left: 8px;
+      background-color: #f5f5f5;
+    }
+
+     .ant-collapse-item > .ant-collapse-header .arrow{
+      left: 14px;
+      font-size: 1.17em;
+    }
+    .ant-collapse-content > .ant-collapse-content-box{
+      padding-top: 8px;
+    }
+
+    .ant-collapse-content {
+      padding: 0 0 0 8px;
+    }
+  }
+
+  .title {
+    border-left: 3px solid #2395f1;
+    padding-left: 8px;
+  }
+
+  .modal-postman-form-mock, .modal-postman-form-variable{
+    max-height: 300px;
+    overflow-y: scroll;
+  }
+
+  .mock-title, .methods-title{
+    margin-bottom: 8px
+  }
+  .modal-postman-form-method{
+    padding-top: 16px;
+    margin-left: 8px;
+    max-height: 500px;
+    overflow: auto;
+  }
+  .methods-row{
+    position: relative;
+    // border-bottom: 1px solid #e9e9e9;
+    .ant-input-sm{
+      margin-top: 2px;
+    }
+  }
+
+  .methods-row:nth-child(5){
+     height: 67px;
+  }
+
+  .modal-postman-col{
+    border-right: 1px solid #e9e9e9;
+  }
+
+  .show-more{
+    color: #2395f1;
+    padding-left: 8px;
+    cursor:pointer;
+  }
+
+  .ant-row-flex {
+    flex-wrap: nowrap
+  }
+  .input-component {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    width: 150px;
+    padding-top: 2px;
+    margin-right: 16px;
+  }
+
+  .modal-postman-expression{
+    .expression-item,.expression {
+      color: rgba(39,56,72,0.85);
+      font-size: 1.17em;
+      font-weight: 500;
+      line-height: 1.5em;
+      padding-right: 4px;
+    }
+
+    .expression-item{
+      color: #2395f1;
+    }
+
+
+  }
+
+  .modal-postman-preview{
+    h3{
+      word-wrap: break-word;
+    }
+  }
+
+  
+}
--- a/client/components/MyPopConfirm/MyPopConfirm.js
+++ b/client/components/MyPopConfirm/MyPopConfirm.js
@@ -0,0 +1,51 @@
+import React, { PureComponent as Component } from 'react';
+import { Modal, Button } from 'antd';
+import PropTypes from 'prop-types';
+
+// 嵌入到 BrowserRouter 内部，覆盖掉默认的 window.confirm
+// http://reacttraining.cn/web/api/BrowserRouter/getUserConfirmation-func
+class MyPopConfirm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: true
+    };
+  }
+  static propTypes = {
+    msg: PropTypes.string,
+    callback: PropTypes.func
+  };
+
+  yes = () => {
+    this.props.callback(true);
+    this.setState({ visible: false });
+  }
+
+  no = () => {
+    this.props.callback(false);
+    this.setState({ visible: false });
+  }
+
+  UNSAFE_componentWillReceiveProps() {
+    this.setState({ visible: true });
+  }
+
+  render() {
+    if (!this.state.visible) {
+      return null;
+    }
+    return (<Modal
+      title="你即将离开编辑页面"
+      visible={this.state.visible}
+      onCancel={this.no}
+      footer={[
+        <Button key="back" onClick={this.no}>取 消</Button>,
+        <Button key="submit" onClick={this.yes}>确 定</Button>
+      ]}
+    >
+      <p>{this.props.msg}</p>
+    </Modal>);
+  }
+}
+
+export default MyPopConfirm;
--- a/client/components/Notify/Notify.js
+++ b/client/components/Notify/Notify.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import { Alert, message } from 'antd';
+
+export default class Notify extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      newVersion: process.env.version,
+      version: process.env.version
+    };
+  }
+
+  componentDidMount() {
+    const versions = 'https://www.fastmock.site/mock/1529fa78fa4c4880ad153d115084a940/yapi/versions';
+    axios.get(versions).then(req => {
+      if (req.status === 200) {
+        this.setState({ newVersion: req.data.data[0] });
+      } else {
+        message.error('无法获取新版本信息！');
+      }
+    });
+  }
+
+  render() {
+    const isShow = this.state.newVersion > this.state.version;
+    return (
+      <div>
+        {isShow && (
+          <Alert
+            message={
+              <div>
+                当前版本是：{this.state.version}&nbsp;&nbsp;可升级到: {this.state.newVersion}
+                &nbsp;&nbsp;&nbsp;
+                <a
+                  target="view_window"
+                  href="https://github.com/YMFE/yapi/blob/master/CHANGELOG.md"
+                >
+                  版本详情
+                </a>
+              </div>
+            }
+            banner
+            closable
+            type="info"
+          />
+        )}
+      </div>
+    );
+  }
+}
--- a/client/components/Postman/CheckCrossInstall.js
+++ b/client/components/Postman/CheckCrossInstall.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Alert } from 'antd';
+import PropTypes from 'prop-types';
+
+exports.initCrossRequest = function (fn) {
+  let startTime = 0;
+  let _crossRequest = setInterval(() => {
+    startTime += 500;
+    if (startTime > 5000) {
+      clearInterval(_crossRequest);
+    }
+    if (window.crossRequest) {
+      clearInterval(_crossRequest);
+      fn(true);
+    } else {
+      fn(false);
+    }
+  }, 500);
+  return _crossRequest;
+};
+
+CheckCrossInstall.propTypes = {
+  hasPlugin: PropTypes.bool
+};
+
+function CheckCrossInstall(props) {
+  const hasPlugin = props.hasPlugin;
+  return (
+    <div className={hasPlugin ? null : 'has-plugin'}>
+      {hasPlugin ? (
+        ''
+      ) : (
+        <Alert
+          message={
+            <div>
+              重要：当前的接口测试服务，需安装免费测试增强插件,仅支持 chrome
+              浏览器，选择下面任意一种安装方式：
+              {/* <div>
+                <a
+                  target="blank"
+                  href="https://chrome.google.com/webstore/detail/cross-request/cmnlfmgbjmaciiopcgodlhpiklaghbok?hl=en-US"
+                >
+                  [Google 商店获取（需翻墙]
+                </a>
+              </div> */}
+              <div>
+                <a target="blank" href="https://juejin.im/post/5e3bbd986fb9a07ce152b53d">
+                  {' '}
+                  [谷歌请求插件详细安装教程]{' '}
+                </a>
+              </div>
+            </div>
+          }
+          type="warning"
+        />
+      )}
+    </div>
+  );
+}
+
+export default CheckCrossInstall;
--- a/client/components/Postman/Postman.js
+++ b/client/components/Postman/Postman.js
--- a/client/components/Postman/Postman.scss
+++ b/client/components/Postman/Postman.scss
@@ -0,0 +1,189 @@
+@import '../../styles/mixin.scss';
+.postman {
+
+
+  
+  .adv-button {
+    margin-bottom: 8px;
+  }
+  .pretty-editor {
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    min-height: 200px;
+  }
+  .pretty-editor-body {
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    min-height: 300px;
+    min-width: 100%;
+  }
+  .pretty-editor-header {
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    min-height: 300px;
+  }
+
+  .interface-test {
+    padding: .24rem;
+    .ant-checkbox-wrapper{
+      display: flex;
+    }
+  }
+
+  
+
+  .insert-code{
+    
+    margin-right: 20px;
+    .code-item{
+      border: 1px solid #dbd9d9;
+      padding:3px;
+      line-height: 30px;
+      margin-bottom: 5px;
+    }
+  }
+
+  .case-script{
+    min-height: 500px;
+    margin: 10px;
+  }
+
+  .response-tab{    
+    margin-top: 20px;
+    margin-bottom: 20px;
+    .ant-tabs-nav{
+      background: #f7f7f7;
+      border-radius: 0 0 4px 4px;      
+      border: 1px solid #d9d9d9;
+      width: 100%;
+    }
+
+    .header, .body{
+      margin-bottom: 10px;
+    }
+
+    .header {
+      padding-left: 10px;
+      padding-right: 5px;
+    }
+
+    .body {
+      padding-left: 5px;
+      padding-right: 10px;
+    }
+
+    .response-test{
+      min-height: 400px;
+    }
+  }
+
+  .ant-spin-blur {
+    .res-code.success {
+      background-color: transparent;
+    }
+    .res-code.fail {
+      background-color: transparent;
+    }
+  }
+  .res-code {
+    padding: .08rem .28rem;
+    color: #fff;
+    margin-left: -.1rem;
+    margin-right: -.28rem;
+    transition: all .2s;
+    position: relative;
+    border-radius: 2px;
+  }
+  .res-code.success {
+    background-color: $color-antd-green;
+  }
+  .res-code.fail {
+    background-color: $color-antd-red;
+  }
+
+  // 容器：左侧是header 右侧是body
+  .container-header-body {
+    display: flex;
+    padding-bottom: .36rem;
+    .header, .body {
+      flex: 1 0 300px;
+      .pretty-editor-header, .pretty-editor-body {
+        height: 100%;
+      }
+      .postman .pretty-editor-body {
+        min-height: 200px;
+      }
+      .ace_print-margin {
+        display: none;
+      }
+    }
+    .header {
+      max-width: 400px;
+    }
+    .container-title {
+      display: flex;
+      justify-content: space-between;
+      padding: .08rem 0;
+    }
+    .resizer {
+      flex: 0 0 21px;
+      position: relative;
+      &:after {
+        content: '';
+        display: block;
+        width: 1px;
+        height: 100%;
+        background-color: #acaaaa;
+        opacity: .8;
+        position: absolute;
+        left: 50%;
+      }
+    }
+    // res body 无返回json时显示text信息
+    .res-body-text {
+      height: 100%;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      padding: 8px;
+    }
+  }
+
+  .has-plugin, .req-part, .resp-part {
+    margin-bottom: 16px;
+  }
+  .url {
+    display: flex;
+    margin: 24px 10px;
+  }
+  .key-value-wrap {
+    display: flex;
+    align-items: center;
+    margin: 0 0 5px 0;
+    .key {
+      flex-basis: 220px;
+    }
+    .value {
+      flex-grow: 1;
+    }
+    .eq-symbol {
+      margin: 0 5px;
+    }
+    .params-enable{
+      width: 24px;
+    }
+  }
+  .icon-btn {
+    cursor: pointer;
+    margin-left: 6px;
+  }
+  .icon-btn:hover {
+    color: #2395f1;
+  }
+
+}
+
+.env-modal{
+  .ant-modal-body{
+    padding: 0;
+  }
+}
--- a/client/components/ProjectCard/ProjectCard.js
+++ b/client/components/ProjectCard/ProjectCard.js
@@ -0,0 +1,179 @@
+import './ProjectCard.scss';
+import React, { PureComponent as Component } from 'react';
+import { Card, Icon, Tooltip, Modal, Alert, Input, message } from 'antd';
+import { connect } from 'react-redux';
+import { delFollow, addFollow } from '../../reducer/modules/follow';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import { debounce } from '../../common';
+import constants from '../../constants/variable.js';
+import produce from 'immer';
+import { getProject, checkProjectName, copyProjectMsg } from '../../reducer/modules/project';
+import { trim } from '../../common.js';
+const confirm = Modal.confirm;
+
+@connect(
+  state => {
+    return {
+      uid: state.user.uid,
+      currPage: state.project.currPage
+    };
+  },
+  {
+    delFollow,
+    addFollow,
+    getProject,
+    checkProjectName,
+    copyProjectMsg
+  }
+)
+@withRouter
+class ProjectCard extends Component {
+  constructor(props) {
+    super(props);
+    this.add = debounce(this.add, 400);
+    this.del = debounce(this.del, 400);
+  }
+
+  static propTypes = {
+    projectData: PropTypes.object,
+    uid: PropTypes.number,
+    inFollowPage: PropTypes.bool,
+    callbackResult: PropTypes.func,
+    history: PropTypes.object,
+    delFollow: PropTypes.func,
+    addFollow: PropTypes.func,
+    isShow: PropTypes.bool,
+    getProject: PropTypes.func,
+    checkProjectName: PropTypes.func,
+    copyProjectMsg: PropTypes.func,
+    currPage: PropTypes.number
+  };
+
+  copy = async projectName => {
+    const id = this.props.projectData._id;
+
+    let projectData = await this.props.getProject(id);
+    let data = projectData.payload.data.data;
+    let newData = produce(data, draftData => {
+      draftData.preName = draftData.name;
+      draftData.name = projectName;
+    });
+
+    await this.props.copyProjectMsg(newData);
+    message.success('项目复制成功');
+    this.props.callbackResult();
+  };
+
+  // 复制项目的二次确认
+  showConfirm = () => {
+    const that = this;
+
+    confirm({
+      title: '确认复制 ' + that.props.projectData.name + ' 项目吗？',
+      okText: '确认',
+      cancelText: '取消',
+      content: (
+        <div style={{ marginTop: '10px', fontSize: '13px', lineHeight: '25px' }}>
+          <Alert
+            message={`该操作将会复制 ${
+              that.props.projectData.name
+            } 下的所有接口集合，但不包括测试集合中的接口`}
+            type="info"
+          />
+          <div style={{ marginTop: '16px' }}>
+            <p>
+              <b>项目名称:</b>
+            </p>
+            <Input id="project_name" placeholder="项目名称" />
+          </div>
+        </div>
+      ),
+      async onOk() {
+        const projectName = trim(document.getElementById('project_name').value);
+
+        // 查询项目名称是否重复
+        const group_id = that.props.projectData.group_id;
+        await that.props.checkProjectName(projectName, group_id);
+        that.copy(projectName);
+      },
+      iconType: 'copy',
+      onCancel() {}
+    });
+  };
+
+  del = () => {
+    const id = this.props.projectData.projectid || this.props.projectData._id;
+    this.props.delFollow(id).then(res => {
+      if (res.payload.data.errcode === 0) {
+        this.props.callbackResult();
+        // message.success('已取消关注！');  // 星号已做出反馈 无需重复提醒用户
+      }
+    });
+  };
+
+  add = () => {
+    const { uid, projectData } = this.props;
+    const param = {
+      uid,
+      projectid: projectData._id,
+      projectname: projectData.name,
+      icon: projectData.icon || constants.PROJECT_ICON[0],
+      color: projectData.color || constants.PROJECT_COLOR.blue
+    };
+    this.props.addFollow(param).then(res => {
+      if (res.payload.data.errcode === 0) {
+        this.props.callbackResult();
+        // message.success('已添加关注！');  // 星号已做出反馈 无需重复提醒用户
+      }
+    });
+  };
+
+  render() {
+    const { projectData, inFollowPage, isShow } = this.props;
+    return (
+      <div className="card-container">
+        <Card
+          bordered={false}
+          className="m-card"
+          onClick={() =>
+            this.props.history.push('/project/' + (projectData.projectid || projectData._id))
+          }
+        >
+          <Icon
+            type={projectData.icon || 'star-o'}
+            className="ui-logo"
+            style={{
+              backgroundColor:
+                constants.PROJECT_COLOR[projectData.color] || constants.PROJECT_COLOR.blue
+            }}
+          />
+          <h4 className="ui-title">{projectData.name || projectData.projectname}</h4>
+        </Card>
+        <div
+          className="card-btns"
+          onClick={projectData.follow || inFollowPage ? this.del : this.add}
+        >
+          <Tooltip
+            placement="rightTop"
+            title={projectData.follow || inFollowPage ? '取消关注' : '添加关注'}
+          >
+            <Icon
+              type={projectData.follow || inFollowPage ? 'star' : 'star-o'}
+              className={'icon ' + (projectData.follow || inFollowPage ? 'active' : '')}
+            />
+          </Tooltip>
+        </div>
+        {isShow && (
+          <div className="copy-btns" onClick={this.showConfirm}>
+            <Tooltip placement="rightTop" title="复制项目">
+              <Icon type="copy" className="icon" />
+            </Tooltip>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default ProjectCard;
--- a/client/components/ProjectCard/ProjectCard.scss
+++ b/client/components/ProjectCard/ProjectCard.scss
@@ -0,0 +1,163 @@
+@import '../../styles/mixin.scss';
+.card-container {
+  position: relative;
+  user-select: none;
+  transition: all .2s;
+  .m-card, .card-btns {
+    transform: translateY(0);
+    transition: all .2s;
+  }
+  &:hover {
+    .m-card, .card-btns , .copy-btns {
+      transform: translateY(-4px);
+    }
+    .m-card .ant-card-body {
+      background-color: $color-bg-gray;
+      box-shadow: 0 4px 8px rgba(50, 50, 93, 0.11), 0 4px 6px rgba(0, 0, 0, 0.08);
+    }
+    .card-btns .icon  {
+      color: rgba(39, 56, 72, 0.85);
+    }
+
+    .copy-btns .icon {
+      color: #2395f1
+    }
+    .card-btns .icon.active , .copy-btns .icon.active {
+      color: #fac200;
+    }
+  }
+  &:active {
+    .m-card, .card-btns, .copy-btns {
+      transform: translateY(4px);
+    }
+  }
+  // 覆盖 card 组件 hover 状态的默认阴影样式
+  .ant-card:not(.ant-card-no-hovering):hover {
+    box-shadow: none;
+  }
+  // 卡片右上角按钮
+  .card-btns {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: .48rem;
+    height: .48rem;
+    // background: linear-gradient(225deg, #ccc, #ccc 50%, transparent 0);
+    border-top-right-radius: 4px;
+    .icon {
+      cursor: pointer;
+      font-size: .16rem;
+      padding: .06rem;
+      position: absolute;
+      right: 0;
+      top: 0;
+      color: #fff;
+    }
+    .icon.active {
+      color: #fff;
+    }
+   
+  }
+
+  // 卡片昨上角按钮
+  .copy-btns {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: .48rem;
+    height: .48rem;
+    // background: linear-gradient(225deg, #ccc, #ccc 50%, transparent 0);
+    border-top-right-radius: 4px;
+    .icon {
+      cursor: pointer;
+      font-size: .16rem;
+      padding: .06rem;
+      position: absolute;
+      right: 0;
+      top: 3px;
+      color: #fff;
+    }
+    .icon.active {
+      color: #fff;
+    }
+    
+  }
+}
+.m-card {
+  cursor: pointer;
+  text-align: center;
+  margin-bottom: .16rem;
+  transition: all .4s;
+  position: relative;
+  .ant-card-body {
+    background-color: transparent;
+    border-radius: 4px;
+    padding-top: .24rem + .16rem + 1rem;
+    box-shadow: 0 4px 6px rgba(255,255,255,.11), 0 1px 3px rgba(255,255,255,.08);
+    // box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+    transition: all .2s;
+  }
+  .ui-logo {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, .24rem);
+    font-size: .5rem;
+    color: #fff;
+    background-color: #2395f1;
+    line-height: 1rem;
+    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+  }
+  .ui-title {
+    font-size: .19rem;
+    font-weight: normal;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+  }
+  .m-card-body {
+    .icon {
+      font-size: .8rem;
+    }
+    .name {
+      font-size: .18rem;
+      margin-top: .16rem;
+    }
+  }
+
+}
+
+@media (max-width: 768px) {
+  .m-card {
+    .ui-logo {
+      width: .6rem;
+      height: .6rem;
+      line-height: .6rem;
+      font-size: .3rem;
+      transform: translate(-50%, 0.08rem);
+    }
+    .ant-card-body {
+      padding-top: .08rem + .08rem + .6rem;
+      padding-bottom: .08rem;
+    }
+  }
+}
+
+@media (min-width: 768px) and (max-width: 992px) {
+  .m-card {
+    .ui-logo {
+      width: .8rem;
+      height: .8rem;
+      line-height: .8rem;
+      font-size: .4rem;
+      transform: translate(-50%, 0.16rem);
+    }
+    .ant-card-body {
+      padding-top: .16rem + .16rem + .8rem;
+      padding-bottom: .16rem;
+    }
+  }
+}
--- a/client/components/SchemaTable/SchemaTable.js
+++ b/client/components/SchemaTable/SchemaTable.js
@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+import { Table } from 'antd';
+import json5 from 'json5';
+import PropTypes from 'prop-types';
+import { schemaTransformToTable } from '../../../common/schema-transformTo-table.js';
+import _ from 'underscore';
+import './index.scss';
+
+const messageMap = {
+  desc: '备注',
+  default: '实例',
+  maximum: '最大值',
+  minimum: '最小值',
+  maxItems: '最大数量',
+  minItems: '最小数量',
+  maxLength: '最大长度',
+  minLength: '最小长度',
+  enum: '枚举',
+  enumDesc: '枚举备注',
+  uniqueItems: '元素是否都不同',
+  itemType: 'item 类型',
+  format: 'format',
+  itemFormat: 'format',
+  mock: 'mock'
+};
+
+const columns = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 550
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+    width: 70,
+    render: (text, item) => {
+      // console.log('text',item.sub);
+      return text === 'array' ? (
+        <span>{item.sub ? item.sub.itemType || '' : 'array'} []</span>
+      ) : (
+        <span>{text}</span>
+      );
+    }
+  },
+  {
+    title: '是否必须',
+    dataIndex: 'required',
+    key: 'required',
+    width: 70,
+    render: text => {
+      return <div>{text ? '必须' : '非必须'}</div>;
+    }
+  },
+  {
+    title: '默认值',
+    dataIndex: 'default',
+    key: 'default',
+    width: 80,
+    render: text => {
+      return <div>{_.isBoolean(text) ? text + '' : text}</div>;
+    }
+  },
+  {
+    title: '备注',
+    dataIndex: 'desc',
+    key: 'desc',
+    width: 200,
+    render: (text, item) => {
+      return _.isUndefined(item.childrenDesc) ? (
+        <span className="table-desc">{text}</span>
+      ) : (
+        <span className="table-desc">{item.childrenDesc}</span>
+      );
+    }
+  },
+  {
+    title: '其他信息',
+    dataIndex: 'sub',
+    key: 'sub',
+    width: 200,
+    render: (text, record) => {
+      let result = text || record;
+
+      return Object.keys(result).map((item, index) => {
+        let name = messageMap[item];
+        let value = result[item];
+        let isShow = !_.isUndefined(result[item]) && !_.isUndefined(name);
+
+        return (
+          isShow && (
+            <p key={index}>
+              <span style={{ fontWeight: '700' }}>{name}: </span>
+              <span>{value.toString()}</span>
+            </p>
+          )
+        );
+      });
+    }
+  }
+];
+
+class SchemaTable extends Component {
+  static propTypes = {
+    dataSource: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let product;
+    try {
+      product = json5.parse(this.props.dataSource);
+    } catch (e) {
+      product = null;
+    }
+    if (!product) {
+      return null;
+    }
+    let data = schemaTransformToTable(product);
+    data = _.isArray(data) ? data : [];
+    return <Table bordered size="small" pagination={false} dataSource={data} columns={columns} />;
+  }
+}
+export default SchemaTable;
--- a/client/components/SchemaTable/index.scss
+++ b/client/components/SchemaTable/index.scss
@@ -0,0 +1,3 @@
+.table-desc {
+  white-space: pre-wrap;
+}
--- a/client/components/Subnav/Subnav.js
+++ b/client/components/Subnav/Subnav.js
@@ -0,0 +1,43 @@
+import './Subnav.scss';
+import React, { PureComponent as Component } from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Menu } from 'antd';
+
+class Subnav extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    data: PropTypes.array,
+    default: PropTypes.string
+  };
+
+  render() {
+    return (
+      <div className="m-subnav">
+        <Menu
+          onClick={this.handleClick}
+          selectedKeys={[this.props.default]}
+          mode="horizontal"
+          className="g-row m-subnav-menu"
+        >
+          {this.props.data.map((item, index) => {
+            // 若导航标题为两个字，则自动在中间加个空格
+            if (item.name.length === 2) {
+              item.name = item.name[0] + ' ' + item.name[1];
+            }
+            return (
+              <Menu.Item className="item" key={item.name.replace(' ', '')}>
+                <Link to={item.path}>{this.props.data[index].name}</Link>
+              </Menu.Item>
+            );
+          })}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default Subnav;
--- a/client/components/Subnav/Subnav.scss
+++ b/client/components/Subnav/Subnav.scss
@@ -0,0 +1,21 @@
+@import '../../styles/common.scss';
+
+.m-subnav {
+  margin-bottom: .24rem;
+  background-color: #fff;
+  box-shadow: 0 0 .04rem rgba(0, 0, 0, .08);
+  font-size: .14rem;
+  border: none;
+  .ant-menu {
+    font-size: unset;
+   }
+  .m-subnav-menu {
+    border: none;
+    padding: 0 .24rem;
+    .item {
+      line-height: .54rem;
+      padding: 0 .36rem;
+      font-weight: normal;
+    }
+  }
+}
--- a/client/components/TimeLine/TimeLine.js
+++ b/client/components/TimeLine/TimeLine.js
@@ -0,0 +1,287 @@
+import React, { PureComponent as Component } from 'react';
+import { Timeline, Spin, Row, Col, Tag, Avatar, Button, Modal, AutoComplete } from 'antd';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { formatTime } from '../../common.js';
+import showDiffMsg from '../../../common/diff-view.js';
+import variable from '../../constants/variable';
+import { Link } from 'react-router-dom';
+import { fetchNewsData, fetchMoreNews } from '../../reducer/modules/news.js';
+import { fetchInterfaceList } from '../../reducer/modules/interface.js';
+import ErrMsg from '../ErrMsg/ErrMsg.js';
+const jsondiffpatch = require('jsondiffpatch/dist/jsondiffpatch.umd.js');
+const formattersHtml = jsondiffpatch.formatters.html;
+import 'jsondiffpatch/dist/formatters-styles/annotated.css';
+import 'jsondiffpatch/dist/formatters-styles/html.css';
+import './TimeLine.scss';
+import { timeago } from '../../../common/utils.js';
+
+// const Option = AutoComplete.Option;
+const { Option, OptGroup } = AutoComplete;
+
+const AddDiffView = props => {
+  const { title, content, className } = props;
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      <h3 className="title">{title}</h3>
+      <div dangerouslySetInnerHTML={{ __html: content }} />
+    </div>
+  );
+};
+
+AddDiffView.propTypes = {
+  title: PropTypes.string,
+  content: PropTypes.string,
+  className: PropTypes.string
+};
+
+// timeago(new Date().getTime() - 40);
+
+@connect(
+  state => {
+    return {
+      newsData: state.news.newsData,
+      curpage: state.news.curpage,
+      curUid: state.user.uid
+    };
+  },
+  {
+    fetchNewsData,
+    fetchMoreNews,
+    fetchInterfaceList
+  }
+)
+class TimeTree extends Component {
+  static propTypes = {
+    newsData: PropTypes.object,
+    fetchNewsData: PropTypes.func,
+    fetchMoreNews: PropTypes.func,
+    setLoading: PropTypes.func,
+    loading: PropTypes.bool,
+    curpage: PropTypes.number,
+    typeid: PropTypes.number,
+    curUid: PropTypes.number,
+    type: PropTypes.string,
+    fetchInterfaceList: PropTypes.func
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      bidden: '',
+      loading: false,
+      visible: false,
+      curDiffData: {},
+      apiList: []
+    };
+    this.curSelectValue = '';
+  }
+
+  getMore() {
+    const that = this;
+
+    if (this.props.curpage <= this.props.newsData.total) {
+      this.setState({ loading: true });
+      this.props
+        .fetchMoreNews(
+          this.props.typeid,
+          this.props.type,
+          this.props.curpage + 1,
+          10,
+          this.curSelectValue
+        )
+        .then(function() {
+          that.setState({ loading: false });
+          if (that.props.newsData.total === that.props.curpage) {
+            that.setState({ bidden: 'logbidden' });
+          }
+        });
+    }
+  }
+
+  handleCancel = () => {
+    this.setState({
+      visible: false
+    });
+  };
+
+  UNSAFE_componentWillMount() {
+    this.props.fetchNewsData(this.props.typeid, this.props.type, 1, 10);
+    if (this.props.type === 'project') {
+      this.getApiList();
+    }
+  }
+
+  openDiff = data => {
+    this.setState({
+      curDiffData: data,
+      visible: true
+    });
+  };
+
+  async getApiList() {
+    let result = await this.props.fetchInterfaceList({
+      project_id: this.props.typeid,
+      limit: 'all'
+    });
+    this.setState({
+      apiList: result.payload.data.data.list
+    });
+  }
+
+  handleSelectApi = selectValue => {
+    this.curSelectValue = selectValue;
+    this.props.fetchNewsData(this.props.typeid, this.props.type, 1, 10, selectValue);
+  };
+
+  render() {
+    let data = this.props.newsData ? this.props.newsData.list : [];
+
+    const curDiffData = this.state.curDiffData;
+    let logType = {
+      project: '项目',
+      group: '分组',
+      interface: '接口',
+      interface_col: '接口集',
+      user: '用户',
+      other: '其他'
+    };
+
+    const children = this.state.apiList.map(item => {
+      let methodColor = variable.METHOD_COLOR[item.method ? item.method.toLowerCase() : 'get'];
+      return (
+        <Option title={item.title} value={item._id + ''} path={item.path} key={item._id}>
+          {item.title}{' '}
+          <Tag
+            style={{ color: methodColor ? methodColor.color : '#cfefdf', backgroundColor: methodColor ? methodColor.bac : '#00a854', border: 'unset' }}
+          >
+            {item.method}
+          </Tag>
+        </Option>
+      );
+    });
+
+    children.unshift(
+      <Option value="" key="all">
+        选择全部
+      </Option>
+    );
+
+    if (data && data.length) {
+      data = data.map((item, i) => {
+        let interfaceDiff = false;
+        // 去掉了 && item.data.interface_id
+        if (item.data && typeof item.data === 'object') {
+          interfaceDiff = true;
+        }
+        return (
+          <Timeline.Item
+            dot={
+              <Link to={`/user/profile/${item.uid}`}>
+                <Avatar src={`/api/user/avatar?uid=${item.uid}`} />
+              </Link>
+            }
+            key={i}
+          >
+            <div className="logMesHeade">
+              <span className="logoTimeago">{timeago(item.add_time)}</span>
+              {/*<span className="logusername"><Link to={`/user/profile/${item.uid}`}><Icon type="user" />{item.username}</Link></span>*/}
+              <span className="logtype">{logType[item.type]}动态</span>
+              <span className="logtime">{formatTime(item.add_time)}</span>
+            </div>
+            <span className="logcontent" dangerouslySetInnerHTML={{ __html: item.content }} />
+            <div style={{ padding: '10px 0 0 10px' }}>
+              {interfaceDiff && <Button onClick={() => this.openDiff(item.data)}>改动详情</Button>}
+            </div>
+          </Timeline.Item>
+        );
+      });
+    } else {
+      data = '';
+    }
+    let pending =
+      this.props.newsData.total <= this.props.curpage ? (
+        <a className="logbidden">以上为全部内容</a>
+      ) : (
+        <a className="loggetMore" onClick={this.getMore.bind(this)}>
+          查看更多
+        </a>
+      );
+    if (this.state.loading) {
+      pending = <Spin />;
+    }
+    let diffView = showDiffMsg(jsondiffpatch, formattersHtml, curDiffData);
+
+    return (
+      <section className="news-timeline">
+        <Modal
+          style={{ minWidth: '800px' }}
+          title="Api 改动日志"
+          visible={this.state.visible}
+          footer={null}
+          onCancel={this.handleCancel}
+        >
+          <i>注： 绿色代表新增内容，红色代表删除内容</i>
+          <div className="project-interface-change-content">
+            {diffView.map((item, index) => {
+              return (
+                <AddDiffView
+                  className="item-content"
+                  title={item.title}
+                  key={index}
+                  content={item.content}
+                />
+              );
+            })}
+            {diffView.length === 0 && <ErrMsg type="noChange" />}
+          </div>
+        </Modal>
+        {this.props.type === 'project' && (
+          <Row className="news-search">
+            <Col span="3">选择查询的 Api：</Col>
+            <Col span="10">
+              <AutoComplete
+                onSelect={this.handleSelectApi}
+                style={{ width: '100%' }}
+                placeholder="Select Api"
+                optionLabelProp="title"
+                filterOption={(inputValue, options) => {
+                  if (options.props.value == '') return true;
+                  if (
+                    options.props.path.indexOf(inputValue) !== -1 ||
+                    options.props.title.indexOf(inputValue) !== -1
+                  ) {
+                    return true;
+                  }
+                  return false;
+                }}
+              >
+                {/* {children} */}
+                <OptGroup label="other">
+                  <Option value="wiki" path="" title="wiki">
+                    wiki
+                  </Option>
+                </OptGroup>
+                <OptGroup label="api">{children}</OptGroup>
+              </AutoComplete>
+            </Col>
+          </Row>
+        )}
+        {data ? (
+          <Timeline className="news-content" pending={pending}>
+            {data}
+          </Timeline>
+        ) : (
+          <ErrMsg type="noData" />
+        )}
+      </section>
+    );
+  }
+}
+
+export default TimeTree;
--- a/client/components/TimeLine/TimeLine.scss
+++ b/client/components/TimeLine/TimeLine.scss
@@ -0,0 +1,206 @@
+
+.project-interface-change-content{
+  min-height: 350px;
+  max-height: 1000px;
+  min-width: 784px;
+  overflow-y: scroll;
+  
+  .item-content{
+    .title{
+      margin: 10px 0;
+    }
+    .content{
+      
+    }
+  }
+}
+
+
+.news-box {
+    display: -webkit-box;
+    -webkit-box-flex: 1;
+    margin: 0px auto 0 auto;
+    font-size: 0.14rem;
+    background: #FFF;
+    display: block;
+    min-height: 550px;
+    border-radius: 4px;
+    .news-timeline{
+      padding-left: 125px;
+      color: #6b6c6d;      
+      .news-search{
+        height:35px;
+        line-height: 30px;
+        margin-top: 10px;
+      }
+      .news-content{
+        margin-top: 20px;
+      }
+
+      .ant-timeline-item{
+        min-height: 60px;
+        .ant-timeline-item-head-custom {
+          padding: 0;
+          width: 0;
+          left: -14px;
+        }
+        .ant-timeline-item-head{
+          // width: 40px;
+          // height: 40px;
+          // left: -13px;
+          top: 13px;
+          // // border-color:#e1e3e4;
+          // border:2px solid #e1e3e4;
+          // border-radius: 50%;
+          .anticon{
+            display: none;
+          }
+        }
+        .ant-timeline-item-tail{
+          // top: 30px;
+        }
+        .ant-avatar {
+          border: 2px solid #e1e3e4;
+          box-sizing: content-box;
+          border-radius: 50%;
+          width: 36px;
+          height: 36px;
+        }
+      }
+      .ant-avatar{
+        // border:2px solid gray;
+      }
+  
+      .logusername{
+        color: #4eaef3;
+        padding: 0px 16px 0px 8px;
+        cursor: pointer;
+      }
+      .logtype{
+        padding-right: 16px;
+      }
+      .logtime{
+        padding-right: 16px;
+  
+      }
+      .logcontent{
+        display: block;
+        padding-left: 8px;
+        line-height: 24px;
+      }
+      .logoTimeago{
+        position: absolute;
+        left: -80px;
+        top: 5px;
+        color: #c0c1c1;
+      }
+      .logbidden{
+        color: #c0c1c1;
+        cursor: default;
+        padding: 8px !important;
+      }
+      .loggetMore{
+        line-height: 30px;
+        color: #4eaef3;
+      }
+  
+      .ant-timeline-item{
+        &:after{
+          content: "";
+          width: 0px;
+          height: 0px;
+          display: block;
+          clear: both;
+        }
+  
+        .ant-timeline-item-content{
+          background-color: #fafafa;
+          float: left;
+          width: auto;
+          margin-left: 40px;
+          padding: 0px;
+          padding-bottom: 10px;
+          // min-width: 300px;
+          // max-width: 600px;
+          width: 625px;
+          border-radius: 8px;
+  
+          .logMesHeade{
+            padding: 8px 8px 8px 8px;
+            line-height: 24px;
+            background-color: #eceef1;
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+          }
+          .logoTimeago{
+            left: -120px;
+          }
+          .logcontent{
+            // text-indent: 2em;
+            line-height: 1.5em;
+            margin-top: 16px;
+            padding: 0px 16px;
+          }
+        }
+  
+      }
+      .ant-timeline-item-pending{
+          padding: 0px;
+          .ant-timeline-item-content{
+            padding: 0px;
+            width: auto;
+            margin-top: 16px;
+            .loggetMore{
+              margin: 0px;
+              padding: 8px;
+            }
+          }
+        }
+    }
+    .logHead{
+      height: 80px;
+      width: 100%;
+      border-bottom: 1px solid #e9e9e9;
+      padding: 24px 0px;
+      overflow: hidden;
+      .breadcrumb-container{
+        float: left;
+        min-width:100px;
+      }
+      .projectDes{
+        color: #7b7b7b;
+        font-size: 25px;
+        float: left;
+        line-height: 0.9em;
+      }
+      .Mockurl{
+        width: 600px !important;
+        float: right;
+        color: #7b7b7b;
+        >span{
+          float: left;
+          line-height: 30px;
+        }
+        p{
+          width: 65%;
+          display: inline-block;
+          position: relative;
+          padding: 4px 7px;
+          height: 28px;
+          cursor: text;
+          font-size: 13px;
+          color: rgba(0,0,0,.65);
+          background-color: #fff;
+          background-image: none;
+          border: 1px solid #d9d9d9;
+          border-radius: 4px;
+          -webkit-transition: all .3s;
+          transition: all .3s;
+          overflow-x:auto;
+        }
+        button{
+          float: right;
+        }
+      }
+    }
+  }
--- a/client/components/UsernameAutoComplete/UsernameAutoComplete.js
+++ b/client/components/UsernameAutoComplete/UsernameAutoComplete.js
@@ -0,0 +1,122 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { Select } from 'antd';
+import axios from 'axios';
+
+const Option = Select.Option;
+
+/**
+ * 用户名输入框自动完成组件
+ *
+ * @component UsernameAutoComplete
+ * @examplelanguage js
+ *
+ * * 用户名输入框自动完成组件
+ * * 用户名输入框自动完成组件
+ *
+ *s
+ */
+
+/**
+ * 获取自动输入的用户信息
+ *
+ * 获取子组件state
+ * @property callbackState
+ * @type function
+ * @description 类型提示：支持数组传值；也支持用函数格式化字符串：函数有两个参数(scale, index)；
+ * 受控属性：滑块滑到某一刻度时所展示的刻度文本信息。如果不需要标签，请将该属性设置为 [] 空列表来覆盖默认转换函数。
+ * @returns {object} {uid: xxx, username: xxx}
+ * @examplelanguage js
+ * @example
+ * onUserSelect(childState) {
+ *   this.setState({
+ *     uid: childState.uid,
+ *     username: childState.username
+ *   })
+ * }
+ *
+ */
+class UsernameAutoComplete extends Component {
+  constructor(props) {
+    super(props);
+    // this.lastFetchId = 0;
+    // this.fetchUser = debounce(this.fetchUser, 800);
+  }
+
+  state = {
+    dataSource: [],
+    fetching: false
+  };
+
+  static propTypes = {
+    callbackState: PropTypes.func
+  };
+
+  // 搜索回调
+  handleSearch = value => {
+    const params = { q: value };
+    // this.lastFetchId += 1;
+    // const fetchId = this.lastFetchId;
+    this.setState({ fetching: true });
+    axios.get('/api/user/search', { params }).then(data => {
+      // if (fetchId !== this.lastFetchId) { // for fetch callback order
+      //   return;
+      // }
+      const userList = [];
+      data = data.data.data;
+
+      if (data) {
+        data.forEach(v =>
+          userList.push({
+            username: v.username,
+            id: v.uid
+          })
+        );
+        // 取回搜索值后，设置 dataSource
+        this.setState({
+          dataSource: userList
+        });
+      }
+    });
+  };
+
+  // 选中候选词时
+  handleChange = value => {
+    this.setState({
+      dataSource: [],
+      // value,
+      fetching: false
+    });
+    this.props.callbackState(value);
+  };
+
+  render() {
+    let { dataSource, fetching } = this.state;
+
+    const children = dataSource.map((item, index) => (
+      <Option key={index} value={'' + item.id}>
+        {item.username}
+      </Option>
+    ));
+
+    // if (!children.length) {
+    //   fetching = false;
+    // }
+    return (
+      <Select
+        mode="multiple"
+        style={{ width: '100%' }}
+        placeholder="请输入用户名"
+        filterOption={false}
+        optionLabelProp="children"
+        notFoundContent={fetching ? <span style={{ color: 'red' }}> 当前用户不存在</span> : null}
+        onSearch={this.handleSearch}
+        onChange={this.handleChange}
+      >
+        {children}
+      </Select>
+    );
+  }
+}
+
+export default UsernameAutoComplete;
--- a/client/components/index.js
+++ b/client/components/index.js
@@ -0,0 +1,10 @@
+import Breadcrumb from './Breadcrumb/Breadcrumb.js';
+import Footer from './Footer/Footer.js';
+import Header from './Header/Header.js';
+import Intro from './Intro/Intro.js';
+import Loading from './Loading/Loading.js';
+import ProjectCard from './ProjectCard/ProjectCard.js';
+import Subnav from './Subnav/Subnav.js';
+import Postman from './Postman/Postman';
+
+export { Breadcrumb, Footer, Header, Intro, Loading, ProjectCard, Subnav, Postman };
--- a/client/constants/variable.js
+++ b/client/constants/variable.js
@@ -0,0 +1,173 @@
+module.exports = {
+  PAGE_LIMIT: 10, // 默认每页展示10条数据
+  NAME_LIMIT: 100, // 限制名称的字符长度(中文算两个长度)
+  HTTP_METHOD: {
+    'GET': {
+      request_body: false,
+      default_tab: 'query'
+    },
+    'POST': {
+      request_body: true,
+      default_tab: 'body'
+    },
+    'PUT': {
+      request_body: true,
+      default_tab: 'body'
+    },
+    'DELETE': {
+      request_body: true,
+      default_tab: 'body'
+    },
+    'HEAD': {
+      request_body: false,
+      default_tab: 'query'
+    },
+    'OPTIONS': {
+      request_body: false,
+      default_tab: 'query'
+    },
+    'PATCH': {
+      request_body: true,
+      default_tab: 'body'
+    }
+  },
+  PROJECT_COLOR: {
+    blue: '#2395f1',
+    green: '#00a854',
+    yellow: '#ffbf00',
+    red: '#f56a00',
+    pink: '#f5317f',
+    cyan: '#00a2ae',
+    gray: '#bfbfbf',
+    purple: '#7265e6'
+  },
+  PROJECT_ICON: [
+    'code-o',
+    'swap',
+    'clock-circle-o',
+    'unlock',
+    'calendar',
+    'play-circle-o',
+    'file-text',
+    'desktop',
+    'hdd',
+    'appstore-o',
+    'line-chart',
+    'mail',
+    'mobile',
+    'notification',
+    'picture',
+    'poweroff',
+    'search',
+    'setting',
+    'share-alt',
+    'shopping-cart',
+    'tag-o',
+    'video-camera',
+    'cloud-o',
+    'star-o',
+    'environment-o',
+    'camera-o',
+    'team',
+    'customer-service',
+    'pay-circle-o',
+    'rocket',
+    'database',
+    'tool',
+    'wifi',
+    'idcard',
+    'medicine-box',
+    'coffee',
+    'safety',
+    'global',
+    'api',
+    'fork',
+    'android-o',
+    'apple-o'
+  ],
+  HTTP_REQUEST_HEADER: ["Accept", "Accept-Charset", "Accept-Encoding", "Accept-Language", "Accept-Datetime", "Authorization", "Cache-Control", "Connection", "Cookie", "Content-Disposition", "Content-Length", "Content-MD5", "Content-Type", "Date", "Expect", "From", "Host", "If-Match", "If-Modified-Since", "If-None-Match", "If-Range", "If-Unmodified-Since", "Max-Forwards", "Origin", "Pragma", "Proxy-Authorization", "Range", "Referer", "TE", "User-Agent", "Upgrade", "Via", "Warning", "X-Requested-With", "DNT", "X-Forwarded-For", "X-Forwarded-Host", "X-Forwarded-Proto", "Front-End-Https", "X-Http-Method-Override", "X-ATT-DeviceId", "X-Wap-Profile", "Proxy-Connection", "X-UIDH", "X-Csrf-Token"],
+  METHOD_COLOR: {
+    post: {
+      bac: "#d2eafb",
+      color: "#108ee9"
+    },
+    get: {
+      bac: "#cfefdf",
+      color: "#00a854"
+    },
+    put: {
+      bac: "#fff3cf",
+      color: "#ffbf00"
+    },
+    delete: {
+      bac: "#fcdbd9",
+      color: "#f04134"
+    },
+    head: {
+      bac: "#fff3cf",
+      color: "#ffbf00"
+    },
+    patch: {
+      bac: "#fff3cf",
+      color: "#ffbf00"
+    },
+    options: {
+      bac: "#fff3cf",
+      color: "#ffbf00"
+    }
+  },
+  MOCK_SOURCE: [
+    { name: '字符串', mock: '@string' },
+    { name: '自然数', mock: '@natural' },
+    { name: '浮点数', mock: '@float' },
+    { name: '字符', mock: '@character' },
+    { name: '布尔', mock: '@boolean' },
+    { name: 'url', mock: '@url' },
+    { name: '域名', mock: '@domain' },
+    { name: 'ip地址', mock: '@ip' },
+    { name: 'id', mock: '@id' },
+    { name: 'guid', mock: '@guid' },
+    { name: '当前时间', mock: '@now' },
+    { name: '时间戳', mock: '@timestamp'},
+    { name: '日期', mock: '@date' },
+    { name: '时间', mock: '@time' },
+    { name: '日期时间', mock: '@datetime' },
+    { name: '图片连接', mock: '@image' },
+    { name: '图片data', mock: "@imageData" },
+    { name: '颜色', mock: '@color' },
+    { name: '颜色hex', mock: '@hex' },
+    { name: '颜色rgba', mock: '@rgba' },
+    { name: '颜色rgb', mock: '@rgb' },
+    { name: '颜色hsl', mock: '@hsl' },
+    { name: '整数', mock: '@integer' },
+    { name: 'email', mock: '@email' },
+    { name: '大段文本', mock: '@paragraph' },
+    { name: '句子', mock: '@sentence' },
+    { name: '单词', mock: '@word' },
+    { name: '大段中文文本', mock: '@cparagraph' },
+    { name: '中文标题', mock: '@ctitle' },
+    { name: '标题', mock: '@title' },
+    { name: '姓名', mock: '@name' },
+    { name: '中文姓名', mock: '@cname' },
+    { name: '中文姓', mock: '@cfirst' },
+    { name: '中文名', mock: '@clast' },
+    { name: '英文姓', mock: '@first' },
+    { name: '英文名', mock: '@last' },
+    { name: '中文句子', mock: '@csentence' },
+    { name: '中文词组', mock: '@cword' },
+    { name: '地址', mock: '@region' },
+    { name: '省份', mock: '@province' },
+    { name: '城市', mock: '@city' },
+    { name: '地区', mock: '@county' },
+    { name: '转换为大写', mock: '@upper' },
+    { name: '转换为小写', mock: '@lower' },
+    { name: '挑选（枚举）', mock: '@pick' },
+    { name: '打乱数组', mock: '@shuffle' },
+    { name: '协议', mock: '@protocol' }
+  ],
+  IP_REGEXP: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/,
+  docHref: {
+    adv_mock_case: 'https://hellosean1025.github.io/yapi/documents/mock.html',
+    adv_mock_script: 'https://hellosean1025.github.io/yapi/documents/adv_mock.html'
+  }
+};
--- a/client/containers/AddProject/AddProject.js
+++ b/client/containers/AddProject/AddProject.js
@@ -0,0 +1,215 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Button, Form, Input, Icon, Tooltip, Select, message, Row, Col, Radio } from 'antd';
+import { addProject } from '../../reducer/modules/project.js';
+import { fetchGroupList } from '../../reducer/modules/group.js';
+import { autobind } from 'core-decorators';
+import { setBreadcrumb } from '../../reducer/modules/user';
+const { TextArea } = Input;
+const FormItem = Form.Item;
+const Option = Select.Option;
+const RadioGroup = Radio.Group;
+import { pickRandomProperty, handlePath, nameLengthLimit } from '../../common';
+import constants from '../../constants/variable.js';
+import { withRouter } from 'react-router';
+import './Addproject.scss';
+
+const formItemLayout = {
+  labelCol: {
+    lg: { span: 3 },
+    xs: { span: 24 },
+    sm: { span: 6 }
+  },
+  wrapperCol: {
+    lg: { span: 21 },
+    xs: { span: 24 },
+    sm: { span: 14 }
+  },
+  className: 'form-item'
+};
+
+@connect(
+  state => {
+    return {
+      groupList: state.group.groupList,
+      currGroup: state.group.currGroup
+    };
+  },
+  {
+    fetchGroupList,
+    addProject,
+    setBreadcrumb
+  }
+)
+@withRouter
+class ProjectList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      groupList: [],
+      currGroupId: null
+    };
+  }
+  static propTypes = {
+    groupList: PropTypes.array,
+    form: PropTypes.object,
+    currGroup: PropTypes.object,
+    addProject: PropTypes.func,
+    history: PropTypes.object,
+    setBreadcrumb: PropTypes.func,
+    fetchGroupList: PropTypes.func
+  };
+
+  handlePath = e => {
+    let val = e.target.value;
+    this.props.form.setFieldsValue({
+      basepath: handlePath(val)
+    });
+  };
+
+  // 确认添加项目
+  @autobind
+  handleOk(e) {
+    const { form, addProject } = this.props;
+    e.preventDefault();
+    form.validateFields((err, values) => {
+      if (!err) {
+        values.group_id = values.group;
+        values.icon = constants.PROJECT_ICON[0];
+        values.color = pickRandomProperty(constants.PROJECT_COLOR);
+        addProject(values).then(res => {
+          if (res.payload.data.errcode == 0) {
+            form.resetFields();
+            message.success('创建成功! ');
+            this.props.history.push('/project/' + res.payload.data.data._id + '/interface/api');
+          }
+        });
+      }
+    });
+  }
+
+  async UNSAFE_componentWillMount() {
+    this.props.setBreadcrumb([{ name: '新建项目' }]);
+    if (!this.props.currGroup._id) {
+      await this.props.fetchGroupList();
+    }
+    if (this.props.groupList.length === 0) {
+      return null;
+    }
+    this.setState({
+      currGroupId: this.props.currGroup._id ? this.props.currGroup._id : this.props.groupList[0]._id
+    });
+    this.setState({ groupList: this.props.groupList });
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <div className="g-row">
+        <div className="g-row m-container">
+          <Form>
+            <FormItem {...formItemLayout} label="项目名称">
+              {getFieldDecorator('name', {
+                rules: nameLengthLimit('项目')
+              })(<Input />)}
+            </FormItem>
+
+            <FormItem {...formItemLayout} label="所属分组">
+              {getFieldDecorator('group', {
+                initialValue: this.state.currGroupId + '',
+                rules: [
+                  {
+                    required: true,
+                    message: '请选择项目所属的分组!'
+                  }
+                ]
+              })(
+                <Select>
+                  {this.state.groupList.map((item, index) => (
+                    <Option
+                      disabled={
+                        !(item.role === 'dev' || item.role === 'owner' || item.role === 'admin')
+                      }
+                      value={item._id.toString()}
+                      key={index}
+                    >
+                      {item.group_name}
+                    </Option>
+                  ))}
+                </Select>
+              )}
+            </FormItem>
+
+            <hr className="breakline" />
+
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  基本路径&nbsp;
+                  <Tooltip title="接口基本路径，为空是根路径">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+            >
+              {getFieldDecorator('basepath', {
+                rules: [
+                  {
+                    required: false,
+                    message: '请输入项目基本路径'
+                  }
+                ]
+              })(<Input onBlur={this.handlePath} />)}
+            </FormItem>
+
+            <FormItem {...formItemLayout} label="描述">
+              {getFieldDecorator('desc', {
+                rules: [
+                  {
+                    required: false,
+                    message: '描述不超过144字!',
+                    max: 144
+                  }
+                ]
+              })(<TextArea rows={4} />)}
+            </FormItem>
+
+            <FormItem {...formItemLayout} label="权限">
+              {getFieldDecorator('project_type', {
+                rules: [
+                  {
+                    required: true
+                  }
+                ],
+                initialValue: 'private'
+              })(
+                <RadioGroup>
+                  <Radio value="private" className="radio">
+                    <Icon type="lock" />私有<br />
+                    <span className="radio-desc">只有组长和项目开发者可以索引并查看项目信息</span>
+                  </Radio>
+                  <br />
+                  {/* <Radio value="public" className="radio">
+                    <Icon type="unlock" />公开<br />
+                    <span className="radio-desc">任何人都可以索引并查看项目信息</span>
+                  </Radio> */}
+                </RadioGroup>
+              )}
+            </FormItem>
+          </Form>
+          <Row>
+            <Col sm={{ offset: 6 }} lg={{ offset: 3 }}>
+              <Button className="m-btn" icon="plus" type="primary" onClick={this.handleOk}>
+                创建项目
+              </Button>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Form.create()(ProjectList);
--- a/client/containers/AddProject/Addproject.scss
+++ b/client/containers/AddProject/Addproject.scss
@@ -0,0 +1,31 @@
+@import '../../styles/common.scss';
+
+.m-container {
+  margin: .24rem auto !important;
+  padding: .24rem !important;
+  background-color: #fff;
+}
+
+.form-item {
+  margin-bottom: .16rem;
+}
+
+.breakline {
+  margin-top: .18rem;
+  margin-bottom: .18rem;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+}
+
+
+.radio {
+  font-weight: 600;
+}
+
+.radio-desc {
+  margin-left: .22rem;
+  position: relative;
+  font-weight: normal;
+  top: -.08rem;
+  color: #919191;
+}
--- a/client/containers/DevTools/DevTools.js
+++ b/client/containers/DevTools/DevTools.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+
+module.exports = createDevTools(
+  <DockMonitor
+    toggleVisibilityKey="ctrl-h"
+    changePositionKey="ctrl-q"
+    defaultIsVisible={false}
+  >
+    <LogMonitor />
+  </DockMonitor>
+);
--- a/client/containers/Follows/Follows.js
+++ b/client/containers/Follows/Follows.js
@@ -0,0 +1,88 @@
+import React, { PureComponent as Component } from 'react';
+import './Follows.scss';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Row, Col } from 'antd';
+import { getFollowList } from '../../reducer/modules/follow';
+import { setBreadcrumb } from '../../reducer/modules/user';
+import ProjectCard from '../../components/ProjectCard/ProjectCard.js';
+import ErrMsg from '../../components/ErrMsg/ErrMsg.js';
+
+@connect(
+  state => {
+    return {
+      data: state.follow.data,
+      uid: state.user.uid
+    };
+  },
+  {
+    getFollowList,
+    setBreadcrumb
+  }
+)
+class Follows extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: []
+    };
+  }
+  static propTypes = {
+    getFollowList: PropTypes.func,
+    setBreadcrumb: PropTypes.func,
+    uid: PropTypes.number
+  };
+
+  receiveRes = () => {
+    this.props.getFollowList(this.props.uid).then(res => {
+      if (res.payload.data.errcode === 0) {
+        this.setState({
+          data: res.payload.data.data.list
+        });
+      }
+    });
+  };
+
+  async UNSAFE_componentWillMount() {
+    this.props.setBreadcrumb([{ name: '我的关注' }]);
+    this.props.getFollowList(this.props.uid).then(res => {
+      if (res.payload.data.errcode === 0) {
+        this.setState({
+          data: res.payload.data.data.list
+        });
+      }
+    });
+  }
+
+  render() {
+    let data = this.state.data;
+    data = data.sort((a, b) => {
+      return b.up_time - a.up_time;
+    });
+    return (
+      <div>
+        <div className="g-row" style={{ paddingLeft: '32px', paddingRight: '32px' }}>
+          <Row gutter={16} className="follow-box pannel-without-tab">
+            {data.length ? (
+              data.map((item, index) => {
+                return (
+                  <Col xs={6} md={4} xl={3} key={index}>
+                    <ProjectCard
+                      projectData={item}
+                      inFollowPage={true}
+                      callbackResult={this.receiveRes}
+                    />
+                  </Col>
+                );
+              })
+            ) : (
+              <ErrMsg type="noFollow" />
+            )}
+          </Row>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Follows;
--- a/client/containers/Follows/Follows.scss
+++ b/client/containers/Follows/Follows.scss
@@ -0,0 +1,9 @@
+@import '../../styles/common.scss';
+@import '../../styles/mixin.scss';
+
+
+.follow-box{
+  padding: 24px;
+  background-color: #fff;
+  margin-top: .24rem;
+}
--- a/client/containers/Group/Group.js
+++ b/client/containers/Group/Group.js
@@ -0,0 +1,123 @@
+import React, { PureComponent as Component } from 'react';
+import GroupList from './GroupList/GroupList.js';
+import ProjectList from './ProjectList/ProjectList.js';
+import MemberList from './MemberList/MemberList.js';
+import GroupLog from './GroupLog/GroupLog.js';
+import GroupSetting from './GroupSetting/GroupSetting.js';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Route, Switch, Redirect } from 'react-router-dom';
+import { Tabs, Layout, Spin } from 'antd';
+const { Content, Sider } = Layout;
+const TabPane = Tabs.TabPane;
+import { fetchNewsData } from '../../reducer/modules/news.js';
+import {
+  setCurrGroup
+} from '../../reducer/modules/group';
+import './Group.scss';
+import axios from 'axios'
+
+@connect(
+  state => {
+    return {
+      curGroupId: state.group.currGroup._id,
+      curUserRole: state.user.role,
+      curUserRoleInGroup: state.group.currGroup.role || state.group.role,
+      currGroup: state.group.currGroup
+    };
+  },
+  {
+    fetchNewsData: fetchNewsData,
+    setCurrGroup
+  }
+)
+export default class Group extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      groupId: -1
+    }
+  }
+
+  async componentDidMount(){
+    let r = await axios.get('/api/group/get_mygroup')
+    try{
+      let group = r.data.data;
+      this.setState({
+        groupId: group._id
+      })
+      this.props.setCurrGroup(group)
+    }catch(e){
+      console.error(e)
+    }
+  }
+
+  static propTypes = {
+    fetchNewsData: PropTypes.func,
+    curGroupId: PropTypes.number,
+    curUserRole: PropTypes.string,
+    currGroup: PropTypes.object,
+    curUserRoleInGroup: PropTypes.string,
+    setCurrGroup: PropTypes.func
+  };
+  // onTabClick=(key)=> {
+  //   // if (key == 3) {
+  //   //   this.props.fetchNewsData(this.props.curGroupId, "group", 1, 10)
+  //   // }
+  // }
+  render() {
+    if(this.state.groupId === -1)return <Spin />
+    const GroupContent = (
+      <Layout style={{ minHeight: 'calc(100vh - 100px)', marginLeft: '24px', marginTop: '24px' }}>
+        <Sider style={{ height: '100%' }} width={300}>
+          <div className="logo" />
+          <GroupList />
+        </Sider>
+        <Layout>
+          <Content
+            style={{
+              height: '100%',
+              margin: '0 24px 0 16px',
+              overflow: 'initial',
+              backgroundColor: '#fff'
+            }}
+          >
+            <Tabs type="card" className="m-tab tabs-large" style={{ height: '100%' }}>
+              <TabPane tab="项目列表" key="1">
+                <ProjectList />
+              </TabPane>
+              {this.props.currGroup.type === 'public' ? (
+                <TabPane tab="成员列表" key="2">
+                  <MemberList />
+                </TabPane>
+              ) : null}
+              {['admin', 'owner', 'guest', 'dev'].indexOf(this.props.curUserRoleInGroup) > -1 ||
+              this.props.curUserRole === 'admin' ? (
+                <TabPane tab="分组动态" key="3">
+                  <GroupLog />
+                </TabPane>
+              ) : (
+                ''
+              )}
+              {(this.props.curUserRole === 'admin' || this.props.curUserRoleInGroup === 'owner') &&
+              this.props.currGroup.type !== 'private' ? (
+                <TabPane tab="分组设置" key="4">
+                  <GroupSetting />
+                </TabPane>
+              ) : null}
+            </Tabs>
+          </Content>
+        </Layout>
+      </Layout>
+    );
+    return (
+      <div className="projectGround">
+        <Switch>
+          <Redirect exact from="/group" to={"/group/" + this.state.groupId} />
+          <Route path="/group/:groupId" render={() => GroupContent} />
+        </Switch>
+      </div>
+    );
+  }
+}
--- a/client/containers/Group/Group.scss
+++ b/client/containers/Group/Group.scss
@@ -0,0 +1,10 @@
+@import '../../styles/mixin.scss';
+
+.g-doc {
+  @include row-width-limit;
+  margin: 0 auto .24rem;
+}
+.news-box .news-timeline .ant-timeline-item .ant-timeline-item-content{
+  min-width: 300px !important;
+  width: 75% !important;
+}
--- a/client/containers/Group/GroupList/GroupList.js
+++ b/client/containers/Group/GroupList/GroupList.js
@@ -0,0 +1,319 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Icon, Modal, Input, message,Spin,  Row, Menu, Col, Popover, Tooltip } from 'antd';
+import { autobind } from 'core-decorators';
+import axios from 'axios';
+import { withRouter } from 'react-router-dom';
+const { TextArea } = Input;
+const Search = Input.Search;
+import UsernameAutoComplete from '../../../components/UsernameAutoComplete/UsernameAutoComplete.js';
+import GuideBtns from '../../../components/GuideBtns/GuideBtns.js';
+import { fetchNewsData } from '../../../reducer/modules/news.js';
+import {
+  fetchGroupList,
+  setCurrGroup,
+  setGroupList,
+  fetchGroupMsg
+} from '../../../reducer/modules/group.js';
+import _ from 'underscore';
+
+import './GroupList.scss';
+
+const tip = (
+  <div className="title-container">
+    <h3 className="title">欢迎使用 YApi ~</h3>
+    <p>
+      这里的 <b>“个人空间”</b>{' '}
+      是你自己才能看到的分组，你拥有这个分组的全部权限，可以在这个分组里探索 YApi 的功能。
+    </p>
+  </div>
+);
+
+@connect(
+  state => ({
+    groupList: state.group.groupList,
+    currGroup: state.group.currGroup,
+    curUserRole: state.user.role,
+    curUserRoleInGroup: state.group.currGroup.role || state.group.role,
+    studyTip: state.user.studyTip,
+    study: state.user.study
+  }),
+  {
+    fetchGroupList,
+    setCurrGroup,
+    setGroupList,
+    fetchNewsData,
+    fetchGroupMsg
+  }
+)
+@withRouter
+export default class GroupList extends Component {
+  static propTypes = {
+    groupList: PropTypes.array,
+    currGroup: PropTypes.object,
+    fetchGroupList: PropTypes.func,
+    setCurrGroup: PropTypes.func,
+    setGroupList: PropTypes.func,
+    match: PropTypes.object,
+    history: PropTypes.object,
+    curUserRole: PropTypes.string,
+    curUserRoleInGroup: PropTypes.string,
+    studyTip: PropTypes.number,
+    study: PropTypes.bool,
+    fetchNewsData: PropTypes.func,
+    fetchGroupMsg: PropTypes.func
+  };
+
+  state = {
+    addGroupModalVisible: false,
+    newGroupName: '',
+    newGroupDesc: '',
+    currGroupName: '',
+    currGroupDesc: '',
+    groupList: [],
+    owner_uids: []
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  async UNSAFE_componentWillMount() {
+    const groupId = !isNaN(this.props.match.params.groupId)
+      ? parseInt(this.props.match.params.groupId)
+      : 0;
+    await this.props.fetchGroupList();
+    let currGroup = false;
+    if (this.props.groupList.length && groupId) {
+      for (let i = 0; i < this.props.groupList.length; i++) {
+        if (this.props.groupList[i]._id === groupId) {
+          currGroup = this.props.groupList[i];
+        }
+      }
+    } else if (!groupId && this.props.groupList.length) {
+      this.props.history.push(`/group/${this.props.groupList[0]._id}`);
+    }
+    if (!currGroup) {
+      currGroup = this.props.groupList[0] || { group_name: '', group_desc: '' };
+      this.props.history.replace(`${currGroup._id}`);
+    }
+    this.setState({ groupList: this.props.groupList });
+    this.props.setCurrGroup(currGroup);
+  }
+
+  @autobind
+  showModal() {
+    this.setState({
+      addGroupModalVisible: true
+    });
+  }
+  @autobind
+  hideModal() {
+    this.setState({
+      newGroupName: '',
+      group_name: '',
+      owner_uids: [],
+      addGroupModalVisible: false
+    });
+  }
+  @autobind
+  async addGroup() {
+    const { newGroupName: group_name, newGroupDesc: group_desc, owner_uids } = this.state;
+    const res = await axios.post('/api/group/add', { group_name, group_desc, owner_uids });
+    if (!res.data.errcode) {
+      this.setState({
+        newGroupName: '',
+        group_name: '',
+        owner_uids: [],
+        addGroupModalVisible: false
+      });
+      await this.props.fetchGroupList();
+      this.setState({ groupList: this.props.groupList });
+      this.props.fetchGroupMsg(this.props.currGroup._id);
+      this.props.fetchNewsData(this.props.currGroup._id, 'group', 1, 10);
+    } else {
+      message.error(res.data.errmsg);
+    }
+  }
+  @autobind
+  async editGroup() {
+    const { currGroupName: group_name, currGroupDesc: group_desc } = this.state;
+    const id = this.props.currGroup._id;
+    const res = await axios.post('/api/group/up', { group_name, group_desc, id });
+    if (res.data.errcode) {
+      message.error(res.data.errmsg);
+    } else {
+      await this.props.fetchGroupList();
+
+      this.setState({ groupList: this.props.groupList });
+      const currGroup = _.find(this.props.groupList, group => {
+        return +group._id === +id;
+      });
+
+      this.props.setCurrGroup(currGroup);
+      // this.props.setCurrGroup({ group_name, group_desc, _id: id });
+      this.props.fetchGroupMsg(this.props.currGroup._id);
+      this.props.fetchNewsData(this.props.currGroup._id, 'group', 1, 10);
+    }
+  }
+  @autobind
+  inputNewGroupName(e) {
+    this.setState({ newGroupName: e.target.value });
+  }
+  @autobind
+  inputNewGroupDesc(e) {
+    this.setState({ newGroupDesc: e.target.value });
+  }
+
+  @autobind
+  selectGroup(e) {
+    const groupId = e.key;
+    //const currGroup = this.props.groupList.find((group) => { return +group._id === +groupId });
+    const currGroup = _.find(this.props.groupList, group => {
+      return +group._id === +groupId;
+    });
+    this.props.setCurrGroup(currGroup);
+    this.props.history.replace(`${currGroup._id}`);
+    this.props.fetchNewsData(groupId, 'group', 1, 10);
+  }
+
+  @autobind
+  onUserSelect(uids) {
+    this.setState({
+      owner_uids: uids
+    });
+  }
+
+  @autobind
+  searchGroup(e, value) {
+    const v = value || e.target.value;
+    const { groupList } = this.props;
+    if (v === '') {
+      this.setState({ groupList });
+    } else {
+      this.setState({
+        groupList: groupList.filter(group => new RegExp(v, 'i').test(group.group_name))
+      });
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // GroupSetting 组件设置的分组信息，通过redux同步到左侧分组菜单中
+    if (this.props.groupList !== nextProps.groupList) {
+      this.setState({
+        groupList: nextProps.groupList
+      });
+    }
+  }
+
+  render() {
+    const { currGroup } = this.props;
+    return (
+      <div className="m-group">
+        {!this.props.study ? <div className="study-mask" /> : null}
+        <div className="group-bar">
+          <div className="curr-group">
+            <div className="curr-group-name">
+              <span className="name">{currGroup.group_name}</span>
+              <Tooltip title="添加分组">
+                <a className="editSet">
+                  <Icon className="btn" type="folder-add" onClick={this.showModal} />
+                </a>
+              </Tooltip>
+            
+            </div>
+            <div className="curr-group-desc">简介: {currGroup.group_desc}</div>
+          </div>
+
+          <div className="group-operate">
+            <div className="search">
+              <Search
+                placeholder="搜索分类"
+                onChange={this.searchGroup}
+                onSearch={v => this.searchGroup(null, v)}
+              />
+            </div>
+          </div>
+          {this.state.groupList.length === 0 && <Spin style={{
+            marginTop: 20,
+            display: 'flex',
+            justifyContent: 'center'
+          }} />}
+          <Menu
+            className="group-list"
+            mode="inline"
+            onClick={this.selectGroup}
+            selectedKeys={[`${currGroup._id}`]}
+          >
+            {this.state.groupList.map(group => {
+              if (group.type === 'private') {
+                return (
+                  <Menu.Item
+                    key={`${group._id}`}
+                    className="group-item"
+                    style={{ zIndex: this.props.studyTip === 0 ? 3 : 1 }}
+                  >
+                    <Icon type="user" />
+                    <Popover
+                      overlayClassName="popover-index"
+                      content={<GuideBtns />}
+                      title={tip}
+                      placement="right"
+                      visible={this.props.studyTip === 0 && !this.props.study}
+                    >
+                      {group.group_name}
+                    </Popover>
+                  </Menu.Item>
+                );
+              } else {
+                return (
+                  <Menu.Item key={`${group._id}`} className="group-item">
+                    <Icon type="folder-open" />
+                    {group.group_name}
+                  </Menu.Item>
+                );
+              }
+            })}
+          </Menu>
+        </div>
+        {this.state.addGroupModalVisible ? (
+          <Modal
+            title="添加分组"
+            visible={this.state.addGroupModalVisible}
+            onOk={this.addGroup}
+            onCancel={this.hideModal}
+            className="add-group-modal"
+          >
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label">分组名：</div>
+              </Col>
+              <Col span="15">
+                <Input placeholder="请输入分组名称" onChange={this.inputNewGroupName} />
+              </Col>
+            </Row>
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label">简介：</div>
+              </Col>
+              <Col span="15">
+                <TextArea rows={3} placeholder="请输入分组描述" onChange={this.inputNewGroupDesc} />
+              </Col>
+            </Row>
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label">组长：</div>
+              </Col>
+              <Col span="15">
+                <UsernameAutoComplete callbackState={this.onUserSelect} />
+              </Col>
+            </Row>
+          </Modal>
+        ) : (
+          ''
+        )}
+      </div>
+    );
+  }
+}
--- a/client/containers/Group/GroupList/GroupList.scss
+++ b/client/containers/Group/GroupList/GroupList.scss
@@ -0,0 +1,147 @@
+@import '../../../styles/mixin.scss';
+
+.group-bar {
+  min-height: 5rem;
+  .curr-group {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+             "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+             SimSun, sans-serif;
+    background-color: $color-bg-dark;
+    color: $color-white;
+    padding: .24rem .24rem 0;
+    .curr-group-name {
+      color: $color-white;
+      font-size: .22rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .text {
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: 140px;
+        font-weight: 200;
+        vertical-align: bottom;
+      }
+      .name{
+        display: inline-block;
+        // width: 117px;
+        margin-right: 20px;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+      }
+      .editSet{
+        color: rgba(255, 255, 255, 0.85);
+        &:hover{
+          color: #2395f1;
+        }
+      }
+      .ant-dropdown-link{
+        float: right;
+        display: block;
+        color: rgba(255, 255, 255, 0.85);
+        &:hover{
+          color: #2395f1;
+        }
+      }
+      .operate {
+        font-size: 0;
+        width: 150px;
+        display: inline-block;
+        i{
+          margin-left: 4px;
+        }
+        ::-webkit-scrollbar {
+          width: 0px;
+        }
+      }
+    }
+    .curr-group-desc {
+      color: $color-white-secondary;
+      font-size: 13px;
+      max-height: 54px;
+      margin-top: .16rem;
+      text-overflow:ellipsis;
+      overflow:hidden;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+    }
+    .delete-group, .edit-group {
+      font-size: 14px;
+      margin-left: .08rem;
+      cursor: pointer;
+      border: 1px solid $color-white;
+      padding: 6px 12px;
+      border-radius: 4px;
+      transition: all .2s;
+    }
+    .delete-group:hover, .edit-group:hover {
+      background-color: $color-blue;
+      border: 1px solid $color-blue;
+    }
+  }
+  .group-operate {
+    padding: 16px 24px;
+    display: flex;
+    justify-content: space-around;
+    background-color: $color-bg-dark;
+    .search {
+      flex-grow: 1;
+    }
+    .ant-input {
+      color: $color-white;
+      background-color: $color-bg-dark;
+    }
+    .ant-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      color: $color-white-secondary;
+    }
+    .ant-input-suffix {
+      color: $color-white;
+    }
+  }
+  .group-list {
+    overflow-x: hidden;
+    border-bottom: 1px solid #e9e9e9;
+    padding-bottom: 24px;
+    border: none;
+    .group-item {
+      // height: 48px;
+      // line-height: 48px;
+      // padding: 0 24px;
+      font-size: 14px;
+    }
+    .group-item:hover {
+      // background: #34495E;
+      // color: $color-white;
+    }
+    .group-item.selected {
+      // background: #34495E;
+    }
+    .group-name {
+      float: left;
+    }
+    .group-edit {
+      float: right;
+      font-size: 18px;
+    }
+  }
+}
+.add-group-modal {
+  .modal-input {
+    margin: 24px;
+  }
+  .label {
+    text-align: right;
+    line-height: 28px;
+  }
+}
+.user-menu{
+  a{
+    &:hover{
+      color: #ccc;
+    }
+  }
+}
--- a/client/containers/Group/GroupLog/GroupLog.js
+++ b/client/containers/Group/GroupLog/GroupLog.js
@@ -0,0 +1,32 @@
+import React, { PureComponent as Component } from 'react';
+import TimeTree from '../../../components/TimeLine/TimeLine';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+// import { Button } from 'antd'
+@connect(state => {
+  return {
+    uid: state.user.uid + '',
+    curGroupId: state.group.currGroup._id
+  };
+})
+class GroupLog extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    uid: PropTypes.string,
+    match: PropTypes.object,
+    curGroupId: PropTypes.number
+  };
+  render() {
+    return (
+      <div className="g-row">
+        <section className="news-box m-panel">
+          <TimeTree type={'group'} typeid={this.props.curGroupId} />
+        </section>
+      </div>
+    );
+  }
+}
+
+export default GroupLog;
--- a/client/containers/Group/GroupSetting/GroupSetting.js
+++ b/client/containers/Group/GroupSetting/GroupSetting.js
@@ -0,0 +1,306 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Input, Button, message, Icon, Card, Alert, Modal, Switch, Row, Col, Tooltip } from 'antd';
+import { fetchNewsData } from '../../../reducer/modules/news.js';
+import {
+  changeGroupMsg,
+  fetchGroupList,
+  setCurrGroup,
+  fetchGroupMsg,
+  updateGroupList,
+  deleteGroup
+} from '../../../reducer/modules/group.js';
+const { TextArea } = Input;
+import { trim } from '../../../common.js';
+import _ from 'underscore';
+import './GroupSetting.scss';
+const confirm = Modal.confirm;
+
+@connect(
+  state => {
+    return {
+      groupList: state.group.groupList,
+      currGroup: state.group.currGroup,
+      curUserRole: state.user.role
+    };
+  },
+  {
+    changeGroupMsg,
+    fetchGroupList,
+    setCurrGroup,
+    fetchGroupMsg,
+    fetchNewsData,
+    updateGroupList,
+    deleteGroup
+  }
+)
+class GroupSetting extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currGroupDesc: '',
+      currGroupName: '',
+      showDangerOptions: false,
+      custom_field1_name: '',
+      custom_field1_enable: false,
+      custom_field1_rule: false
+    };
+  }
+
+  static propTypes = {
+    currGroup: PropTypes.object,
+    curUserRole: PropTypes.string,
+    changeGroupMsg: PropTypes.func,
+    fetchGroupList: PropTypes.func,
+    setCurrGroup: PropTypes.func,
+    fetchGroupMsg: PropTypes.func,
+    fetchNewsData: PropTypes.func,
+    updateGroupList: PropTypes.func,
+    deleteGroup: PropTypes.func,
+    groupList: PropTypes.array
+  };
+
+  initState(props) {
+    this.setState({
+      currGroupName: props.currGroup.group_name,
+      currGroupDesc: props.currGroup.group_desc,
+      custom_field1_name: props.currGroup.custom_field1.name,
+      custom_field1_enable: props.currGroup.custom_field1.enable
+    });
+  }
+
+  // 修改分组名称
+  changeName = e => {
+    this.setState({
+      currGroupName: e.target.value
+    });
+  };
+  // 修改分组描述
+  changeDesc = e => {
+    this.setState({
+      currGroupDesc: e.target.value
+    });
+  };
+
+  // 修改自定义字段名称
+  changeCustomName = e => {
+    let custom_field1_rule = this.state.custom_field1_enable ? !e.target.value : false;
+    this.setState({
+      custom_field1_name: e.target.value,
+      custom_field1_rule
+    });
+  };
+
+  // 修改开启状态
+  changeCustomEnable = e => {
+    let custom_field1_rule = e ? !this.state.custom_field1_name : false;
+    this.setState({
+      custom_field1_enable: e,
+      custom_field1_rule
+    });
+  };
+
+  UNSAFE_componentWillMount() {
+    // console.log('custom_field1',this.props.currGroup.custom_field1)
+    this.initState(this.props);
+  }
+
+  // 点击“查看危险操作”按钮
+  toggleDangerOptions = () => {
+    // console.log(this.state.showDangerOptions);
+    this.setState({
+      showDangerOptions: !this.state.showDangerOptions
+    });
+  };
+
+  // 编辑分组信息
+  editGroup = async () => {
+    const id = this.props.currGroup._id;
+    if (this.state.custom_field1_rule) {
+      return;
+    }
+    const res = await this.props.changeGroupMsg({
+      group_name: this.state.currGroupName,
+      group_desc: this.state.currGroupDesc,
+      custom_field1: {
+        name: this.state.custom_field1_name,
+        enable: this.state.custom_field1_enable
+      },
+      id: this.props.currGroup._id
+    });
+
+    if (!res.payload.data.errcode) {
+      message.success('修改成功！');
+      await this.props.fetchGroupList(this.props.groupList);
+      this.props.updateGroupList(this.props.groupList);
+      const currGroup = _.find(this.props.groupList, group => {
+        return +group._id === +id;
+      });
+      this.props.setCurrGroup(currGroup);
+      this.props.fetchGroupMsg(this.props.currGroup._id);
+      this.props.fetchNewsData(this.props.currGroup._id, 'group', 1, 10);
+    }
+  };
+
+  // 删除分组
+
+  deleteGroup = async () => {
+    const that = this;
+    const { currGroup } = that.props;
+    const res = await this.props.deleteGroup({ id: currGroup._id });
+    if (!res.payload.data.errcode) {
+      message.success('删除成功');
+      await that.props.fetchGroupList();
+      const currGroup = that.props.groupList[0] || { group_name: '', group_desc: '' };
+      that.setState({ groupList: that.props.groupList });
+      that.props.setCurrGroup(currGroup);
+    }
+  };
+
+  // 删除分组的二次确认
+  showConfirm = () => {
+    const that = this;
+    confirm({
+      title: '确认删除 ' + that.props.currGroup.group_name + ' 分组吗？',
+      content: (
+        <div style={{ marginTop: '10px', fontSize: '13px', lineHeight: '25px' }}>
+          <Alert
+            message="警告：此操作非常危险,会删除该分组下面所有项目和接口，并且无法恢复!"
+            type="warning"
+          />
+          <div style={{ marginTop: '16px' }}>
+            <p>
+              <b>请输入分组名称确认此操作:</b>
+            </p>
+            <Input id="group_name" />
+          </div>
+        </div>
+      ),
+      onOk() {
+        const groupName = trim(document.getElementById('group_name').value);
+        if (that.props.currGroup.group_name !== groupName) {
+          message.error('分组名称有误');
+          return new Promise((resolve, reject) => {
+            reject('error');
+          });
+        } else {
+          that.deleteGroup();
+        }
+      },
+      iconType: 'delete',
+      onCancel() {}
+    });
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // 切换分组时，更新分组信息并关闭删除分组操作
+    if (this.props.currGroup._id !== nextProps.currGroup._id) {
+      this.initState(nextProps);
+      this.setState({
+        showDangerOptions: false
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div className="m-panel card-panel card-panel-s panel-group">
+        <Row type="flex" justify="space-around" className="row" align="middle">
+          <Col span={4} className="label">
+            分组名：
+          </Col>
+          <Col span={20}>
+            <Input
+              size="large"
+              placeholder="请输入分组名称"
+              value={this.state.currGroupName}
+              onChange={this.changeName}
+            />
+          </Col>
+        </Row>
+        <Row type="flex" justify="space-around" className="row" align="middle">
+          <Col span={4} className="label">
+            简介：
+          </Col>
+          <Col span={20}>
+            <TextArea
+              size="large"
+              rows={3}
+              placeholder="请输入分组描述"
+              value={this.state.currGroupDesc}
+              onChange={this.changeDesc}
+            />
+          </Col>
+        </Row>
+        <Row type="flex" justify="space-around" className="row" align="middle">
+          <Col span={4} className="label">
+            接口自定义字段&nbsp;
+            <Tooltip title={'可以在接口中添加 额外字段 数据'}>
+              <Icon type="question-circle-o" style={{ width: '10px' }} />
+            </Tooltip> ：
+          </Col>
+          <Col span={12} style={{ position: 'relative' }}>
+            <Input
+              placeholder="请输入自定义字段名称"
+              style={{ borderColor: this.state.custom_field1_rule ? '#f5222d' : '' }}
+              value={this.state.custom_field1_name}
+              onChange={this.changeCustomName}
+            />
+            <div
+              className="custom-field-rule"
+              style={{ display: this.state.custom_field1_rule ? 'block' : 'none' }}
+            >
+              自定义字段名称不能为空
+            </div>
+          </Col>
+          <Col span={2} className="label">
+            开启：
+          </Col>
+          <Col span={6}>
+            <Switch
+              checked={this.state.custom_field1_enable}
+              checkedChildren="开"
+              unCheckedChildren="关"
+              onChange={this.changeCustomEnable}
+            />
+          </Col>
+        </Row>
+        <Row type="flex" justify="center" className="row save">
+          <Col span={4} className="save-button">
+            <Button className="m-btn btn-save" icon="save" type="primary" onClick={this.editGroup}>
+              保 存
+            </Button>
+          </Col>
+        </Row>
+        {/* 只有超级管理员能删除分组 */}
+        {this.props.curUserRole === 'admin' ? (
+          <Row type="flex" justify="center" className="danger-container">
+            <Col span={24} className="title">
+              <h2 className="content">
+                <Icon type="exclamation-circle-o" /> 危险操作
+              </h2>
+              <Button onClick={this.toggleDangerOptions}>
+                查 看<Icon type={this.state.showDangerOptions ? 'up' : 'down'} />
+              </Button>
+            </Col>
+            {this.state.showDangerOptions ? (
+              <Card hoverable={true} className="card-danger" style={{ width: '100%' }}>
+                <div className="card-danger-content">
+                  <h3>删除分组</h3>
+                  <p>分组一旦删除，将无法恢复数据，请慎重操作！</p>
+                  <p>只有超级管理员有权限删除分组。</p>
+                </div>
+                <Button type="danger" ghost className="card-danger-btn" onClick={this.showConfirm}>
+                  删除
+                </Button>
+              </Card>
+            ) : null}
+          </Row>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default GroupSetting;
--- a/client/containers/Group/GroupSetting/GroupSetting.scss
+++ b/client/containers/Group/GroupSetting/GroupSetting.scss
@@ -0,0 +1,29 @@
+.panel-group {
+  .row {
+    // display: flex;
+    // align-items: center;
+    margin-bottom: .24rem;
+  }
+  .save {
+    margin-top: .48rem
+  }
+  .left {
+    flex: 100px 0 1;
+    text-align: right;
+  }
+  .right {
+    flex: 830px 0 1;
+  }
+  .label {
+    text-align: right;
+  }
+  .save-button{
+    text-align: center;
+  }
+
+  .custom-field-rule{
+    padding-top: 4px;
+    position: absolute;
+    color: #f5222d ;
+  }
+}
--- a/client/containers/Group/MemberList/MemberList.js
+++ b/client/containers/Group/MemberList/MemberList.js
@@ -0,0 +1,326 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Table, Select, Button, Modal, Row, Col, message, Popconfirm } from 'antd';
+import { Link } from 'react-router-dom';
+import './MemberList.scss';
+import { autobind } from 'core-decorators';
+import {
+  fetchGroupMemberList,
+  fetchGroupMsg,
+  addMember,
+  delMember,
+  changeMemberRole
+} from '../../../reducer/modules/group.js';
+import ErrMsg from '../../../components/ErrMsg/ErrMsg.js';
+import UsernameAutoComplete from '../../../components/UsernameAutoComplete/UsernameAutoComplete.js';
+const Option = Select.Option;
+
+function arrayAddKey(arr) {
+  return arr.map((item, index) => {
+    return {
+      ...item,
+      key: index
+    };
+  });
+}
+
+@connect(
+  state => {
+    return {
+      currGroup: state.group.currGroup,
+      uid: state.user.uid,
+      role: state.group.role
+    };
+  },
+  {
+    fetchGroupMemberList,
+    fetchGroupMsg,
+    addMember,
+    delMember,
+    changeMemberRole
+  }
+)
+class MemberList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userInfo: [],
+      role: '',
+      visible: false,
+      dataSource: [],
+      inputUids: [],
+      inputRole: 'dev'
+    };
+  }
+  static propTypes = {
+    currGroup: PropTypes.object,
+    uid: PropTypes.number,
+    fetchGroupMemberList: PropTypes.func,
+    fetchGroupMsg: PropTypes.func,
+    addMember: PropTypes.func,
+    delMember: PropTypes.func,
+    changeMemberRole: PropTypes.func,
+    role: PropTypes.string
+  };
+
+  showAddMemberModal = () => {
+    this.setState({
+      visible: true
+    });
+  };
+
+  // 重新获取列表
+  reFetchList = () => {
+    this.props.fetchGroupMemberList(this.props.currGroup._id).then(res => {
+      this.setState({
+        userInfo: arrayAddKey(res.payload.data.data),
+        visible: false
+      });
+    });
+  };
+
+  // 增 - 添加成员
+
+  handleOk = () => {
+    this.props
+      .addMember({
+        id: this.props.currGroup._id,
+        member_uids: this.state.inputUids,
+        role: this.state.inputRole
+      })
+      .then(res => {
+        if (!res.payload.data.errcode) {
+          const { add_members, exist_members } = res.payload.data.data;
+          const addLength = add_members.length;
+          const existLength = exist_members.length;
+          this.setState({
+            inputRole: 'dev',
+            inputUids: []
+          });
+          message.success(`添加成功! 已成功添加 ${addLength} 人，其中 ${existLength} 人已存在`);
+          this.reFetchList(); // 添加成功后重新获取分组成员列表
+        }
+      });
+  };
+  // 添加成员时 选择新增成员权限
+
+  changeNewMemberRole = value => {
+    this.setState({
+      inputRole: value
+    });
+  };
+
+  // 删 - 删除分组成员
+
+  deleteConfirm = member_uid => {
+    return () => {
+      const id = this.props.currGroup._id;
+      this.props.delMember({ id, member_uid }).then(res => {
+        if (!res.payload.data.errcode) {
+          message.success(res.payload.data.errmsg);
+          this.reFetchList(); // 添加成功后重新获取分组成员列表
+        }
+      });
+    };
+  };
+
+  // 改 - 修改成员权限
+  changeUserRole = e => {
+    const id = this.props.currGroup._id;
+    const role = e.split('-')[0];
+    const member_uid = e.split('-')[1];
+    this.props.changeMemberRole({ id, member_uid, role }).then(res => {
+      if (!res.payload.data.errcode) {
+        message.success(res.payload.data.errmsg);
+        this.reFetchList(); // 添加成功后重新获取分组成员列表
+      }
+    });
+  };
+
+  // 关闭模态框
+
+  handleCancel = () => {
+    this.setState({
+      visible: false
+    });
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this._groupId !== this._groupId) {
+      return null;
+    }
+    if (this.props.currGroup._id !== nextProps.currGroup._id) {
+      this.props.fetchGroupMemberList(nextProps.currGroup._id).then(res => {
+        this.setState({
+          userInfo: arrayAddKey(res.payload.data.data)
+        });
+      });
+      this.props.fetchGroupMsg(nextProps.currGroup._id).then(res => {
+        this.setState({
+          role: res.payload.data.data.role
+        });
+      });
+    }
+  }
+
+  componentDidMount() {
+    const currGroupId = (this._groupId = this.props.currGroup._id);
+    this.props.fetchGroupMsg(currGroupId).then(res => {
+      this.setState({
+        role: res.payload.data.data.role
+      });
+    });
+    this.props.fetchGroupMemberList(currGroupId).then(res => {
+      this.setState({
+        userInfo: arrayAddKey(res.payload.data.data)
+      });
+    });
+  }
+
+  @autobind
+  onUserSelect(uids) {
+    this.setState({
+      inputUids: uids
+    });
+  }
+
+  render() {
+    const columns = [
+      {
+        title:
+          this.props.currGroup.group_name + ' 分组成员 (' + this.state.userInfo.length + ') 人',
+        dataIndex: 'username',
+        key: 'username',
+        render: (text, record) => {
+          return (
+            <div className="m-user">
+              <Link to={`/user/profile/${record.uid}`}>
+                <img
+                  src={
+                    location.protocol + '//' + location.host + '/api/user/avatar?uid=' + record.uid
+                  }
+                  className="m-user-img"
+                />
+              </Link>
+              <Link to={`/user/profile/${record.uid}`}>
+                <p className="m-user-name">{text}</p>
+              </Link>
+            </div>
+          );
+        }
+      },
+      {
+        title:
+          this.state.role === 'owner' || this.state.role === 'admin' ? (
+            <div className="btn-container">
+              <Button className="btn" type="primary" onClick={this.showAddMemberModal}>
+                添加成员
+              </Button>
+            </div>
+          ) : (
+            ''
+          ),
+        key: 'action',
+        className: 'member-opration',
+        render: (text, record) => {
+          if (this.state.role === 'owner' || this.state.role === 'admin') {
+            return (
+              <div>
+                <Select
+                  value={record.role + '-' + record.uid}
+                  className="select"
+                  onChange={this.changeUserRole}
+                >
+                  <Option value={'owner-' + record.uid}>组长</Option>
+                  <Option value={'dev-' + record.uid}>开发者</Option>
+                  <Option value={'guest-' + record.uid}>访客</Option>
+                </Select>
+                <Popconfirm
+                  placement="topRight"
+                  title="你确定要删除吗? "
+                  onConfirm={this.deleteConfirm(record.uid)}
+                  okText="确定"
+                  cancelText=""
+                >
+                  <Button type="danger" icon="delete" className="btn-danger" />
+                  {/* <Icon type="delete" className="btn-danger"/> */}
+                </Popconfirm>
+              </div>
+            );
+          } else {
+            // 非管理员可以看到权限 但无法修改
+            if (record.role === 'owner') {
+              return '组长';
+            } else if (record.role === 'dev') {
+              return '开发者';
+            } else if (record.role === 'guest') {
+              return '访客';
+            } else {
+              return '';
+            }
+          }
+        }
+      }
+    ];
+    let userinfo = this.state.userInfo;
+    let ownerinfo = [];
+    let devinfo = [];
+    let guestinfo = [];
+    for (let i = 0; i < userinfo.length; i++) {
+      if (userinfo[i].role === 'owner') {
+        ownerinfo.push(userinfo[i]);
+      }
+      if (userinfo[i].role === 'dev') {
+        devinfo.push(userinfo[i]);
+      }
+      if (userinfo[i].role === 'guest') {
+        guestinfo.push(userinfo[i]);
+      }
+    }
+    userinfo = [...ownerinfo, ...devinfo, ...guestinfo];
+    return (
+      <div className="m-panel">
+        {this.state.visible ? (
+          <Modal
+            title="添加成员"
+            visible={this.state.visible}
+            onOk={this.handleOk}
+            onCancel={this.handleCancel}
+          >
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label usernamelabel">用户名: </div>
+              </Col>
+              <Col span="15">
+                <UsernameAutoComplete callbackState={this.onUserSelect} />
+              </Col>
+            </Row>
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label usernameauth">权限: </div>
+              </Col>
+              <Col span="15">
+                <Select defaultValue="dev" className="select" onChange={this.changeNewMemberRole}>
+                  <Option value="owner">组长</Option>
+                  <Option value="dev">开发者</Option>
+                  <Option value="guest">访客</Option>
+                </Select>
+              </Col>
+            </Row>
+          </Modal>
+        ) : (
+          ''
+        )}
+        <Table
+          columns={columns}
+          dataSource={userinfo}
+          pagination={false}
+          locale={{ emptyText: <ErrMsg type="noMemberInGroup" /> }}
+        />
+      </div>
+    );
+  }
+}
+
+export default MemberList;
--- a/client/containers/Group/MemberList/MemberList.scss
+++ b/client/containers/Group/MemberList/MemberList.scss
@@ -0,0 +1,58 @@
+@import '../../../styles/mixin.scss';
+
+.m-panel{
+  background-color: #fff;
+  padding: 24px;
+  min-height: 4.68rem;
+  margin-top: 0;
+  // box-shadow: $box-shadow-panel;
+}
+
+.m-tab {
+  overflow: inherit !important;
+}
+
+.btn-container {
+  text-align: right;
+}
+
+.modal-input {
+  display: flex;
+  align-items: center;
+  margin-bottom: .24rem;
+  .label {
+    text-align: right;
+  }
+  .select {
+    width: 1.2rem;
+  }
+}
+
+.member-opration {
+  text-align: right;
+  .select {
+    width: 1.2rem;
+  }
+  .btn-danger {
+    margin-left: .08rem;
+    // background-color: transparent;
+    border-color: transparent;
+  }
+}
+
+.m-user {
+  display: flex;
+  align-items: center;
+  .m-user-img {
+    width: .32rem;
+    height: .32rem;
+    border-radius: .04rem;
+  }
+  .m-user-name {
+    margin-left: 8px;
+  }
+  
+}
+.usernamelabel,.usernameauth{
+  line-height: 36px;
+}
--- a/client/containers/Group/ProjectList/ProjectList.js
+++ b/client/containers/Group/ProjectList/ProjectList.js
@@ -0,0 +1,217 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Row, Col, Button, Tooltip } from 'antd';
+import { Link } from 'react-router-dom';
+import {
+  addProject,
+  fetchProjectList,
+  delProject,
+  changeUpdateModal
+} from '../../../reducer/modules/project';
+import ProjectCard from '../../../components/ProjectCard/ProjectCard.js';
+import ErrMsg from '../../../components/ErrMsg/ErrMsg.js';
+import { autobind } from 'core-decorators';
+import { setBreadcrumb } from '../../../reducer/modules/user';
+
+import './ProjectList.scss';
+
+@connect(
+  state => {
+    return {
+      projectList: state.project.projectList,
+      userInfo: state.project.userInfo,
+      tableLoading: state.project.tableLoading,
+      currGroup: state.group.currGroup,
+      currPage: state.project.currPage
+    };
+  },
+  {
+    fetchProjectList,
+    addProject,
+    delProject,
+    changeUpdateModal,
+    setBreadcrumb
+  }
+)
+class ProjectList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      protocol: 'http://',
+      projectData: []
+    };
+  }
+  static propTypes = {
+    form: PropTypes.object,
+    fetchProjectList: PropTypes.func,
+    addProject: PropTypes.func,
+    delProject: PropTypes.func,
+    changeUpdateModal: PropTypes.func,
+    projectList: PropTypes.array,
+    userInfo: PropTypes.object,
+    tableLoading: PropTypes.bool,
+    currGroup: PropTypes.object,
+    setBreadcrumb: PropTypes.func,
+    currPage: PropTypes.number,
+    studyTip: PropTypes.number,
+    study: PropTypes.bool
+  };
+
+  // 取消修改
+  @autobind
+  handleCancel() {
+    this.props.form.resetFields();
+    this.setState({
+      visible: false
+    });
+  }
+
+  // 修改线上域名的协议类型 (http/https)
+  @autobind
+  protocolChange(value) {
+    this.setState({
+      protocol: value
+    });
+  }
+
+  // 获取 ProjectCard 组件的关注事件回调，收到后更新数据
+
+  receiveRes = () => {
+    this.props.fetchProjectList(this.props.currGroup._id, this.props.currPage);
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.props.setBreadcrumb([{ name: '' + (nextProps.currGroup.group_name || '') }]);
+
+    // 切换分组
+    if (this.props.currGroup !== nextProps.currGroup && nextProps.currGroup._id) {
+      this.props.fetchProjectList(nextProps.currGroup._id, this.props.currPage);
+    }
+
+    // 切换项目列表
+    if (this.props.projectList !== nextProps.projectList) {
+      // console.log(nextProps.projectList);
+      const data = nextProps.projectList.map((item, index) => {
+        item.key = index;
+        return item;
+      });
+      this.setState({
+        projectData: data
+      });
+    }
+  }
+
+  render() {
+    let projectData = this.state.projectData;
+    let noFollow = [];
+    let followProject = [];
+    for (var i in projectData) {
+      if (projectData[i].follow) {
+        followProject.push(projectData[i]);
+      } else {
+        noFollow.push(projectData[i]);
+      }
+    }
+    followProject = followProject.sort((a, b) => {
+      return b.up_time - a.up_time;
+    });
+    noFollow = noFollow.sort((a, b) => {
+      return b.up_time - a.up_time;
+    });
+    projectData = [...followProject, ...noFollow];
+
+    const isShow = /(admin)|(owner)|(dev)/.test(this.props.currGroup.role);
+
+    const Follow = () => {
+      return followProject.length ? (
+        <Row>
+          <h3 className="owner-type">我的关注</h3>
+          {followProject.map((item, index) => {
+            return (
+              <Col xs={8} lg={6} xxl={4} key={index}>
+                <ProjectCard projectData={item} callbackResult={this.receiveRes} />
+              </Col>
+            );
+          })}
+        </Row>
+      ) : null;
+    };
+    const NoFollow = () => {
+      return noFollow.length ? (
+        <Row style={{ borderBottom: '1px solid #eee', marginBottom: '15px' }}>
+          <h3 className="owner-type">我的项目</h3>
+          {noFollow.map((item, index) => {
+            return (
+              <Col xs={8} lg={6} xxl={4} key={index}>
+                <ProjectCard projectData={item} callbackResult={this.receiveRes} isShow={isShow} />
+              </Col>
+            );
+          })}
+        </Row>
+      ) : null;
+    };
+
+    const OwnerSpace = () => {
+      return projectData.length ? (
+        <div>
+          <NoFollow />
+          <Follow />
+        </div>
+      ) : (
+        <ErrMsg type="noProject" />
+      );
+    };
+
+    return (
+      <div style={{ paddingTop: '24px' }} className="m-panel card-panel card-panel-s project-list">
+        <Row className="project-list-header">
+          <Col span={16} style={{ textAlign: 'left' }}>
+            {this.props.currGroup.group_name} 分组共 ({projectData.length}) 个项目
+          </Col>
+          <Col span={8}>
+            {isShow ? (
+              <Link to="/add-project">
+                <Button type="primary">添加项目</Button>
+              </Link>
+            ) : (
+              <Tooltip title="您没有权限,请联系该分组组长或管理员">
+                <Button type="primary" disabled>
+                  添加项目
+                </Button>
+              </Tooltip>
+            )}
+          </Col>
+        </Row>
+        <Row>
+          {/* {projectData.length ? projectData.map((item, index) => {
+            return (
+              <Col xs={8} md={6} xl={4} key={index}>
+                <ProjectCard projectData={item} callbackResult={this.receiveRes} />
+              </Col>);
+          }) : <ErrMsg type="noProject" />} */}
+          {this.props.currGroup.type === 'private' ? (
+            <OwnerSpace />
+          ) : projectData.length ? (
+            projectData.map((item, index) => {
+              return (
+                <Col xs={8} lg={6} xxl={4} key={index}>
+                  <ProjectCard
+                    projectData={item}
+                    callbackResult={this.receiveRes}
+                    isShow={isShow}
+                  />
+                </Col>
+              );
+            })
+          ) : (
+            <ErrMsg type="noProject" />
+          )}
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default ProjectList;
--- a/client/containers/Group/ProjectList/ProjectList.scss
+++ b/client/containers/Group/ProjectList/ProjectList.scss
@@ -0,0 +1,62 @@
+.ant-tabs-bar {
+  border-bottom: 1px solid transparent;
+  margin-bottom: 0;
+}
+
+
+.m-panel{
+  background-color: #fff;
+  padding: 24px;
+  min-height: 4.68rem;
+  margin-top: 0;
+}
+
+.project-list{
+  .project-list-header{
+    background: #eee;
+    height: 64px;
+    line-height: 40px;
+    border-radius: 4px;
+    text-align: right;
+    padding: 0 10px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    color: rgba(39, 56, 72, 0.85);
+    font-weight: 500;
+  }
+  .owner-type{
+    // padding: 10px;
+    font-size: 15px;
+    // background-color: #eee;
+    // border-radius: 4px;
+    // margin-bottom: 15px;
+    font-weight: 400;
+    margin-bottom: 0.16rem;
+    border-left: 3px solid #2395f1;
+    padding-left: 8px;
+  }
+}
+
+
+
+.ant-input-group-wrapper {
+  width: 100%;
+}
+
+.dynamic-delete-button {
+  cursor: pointer;
+  position: relative;
+  top: 4px;
+  font-size: 24px;
+  color: #999;
+  transition: all .3s;
+}
+.dynamic-delete-button:hover {
+  color: #777;
+}
+.dynamic-delete-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
--- a/client/containers/Group/ProjectList/UpDateModal.js
+++ b/client/containers/Group/ProjectList/UpDateModal.js
@@ -0,0 +1,387 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Modal, Form, Input, Icon, Tooltip, Select, message, Button, Row, Col } from 'antd';
+import {
+  updateProject,
+  fetchProjectList,
+  delProject,
+  changeUpdateModal,
+  changeTableLoading
+} from '../../../reducer/modules/project';
+const { TextArea } = Input;
+const FormItem = Form.Item;
+const Option = Select.Option;
+
+import './ProjectList.scss';
+
+// layout
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 6 }
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 14 }
+  }
+};
+const formItemLayoutWithOutLabel = {
+  wrapperCol: {
+    xs: { span: 24, offset: 0 },
+    sm: { span: 20, offset: 6 }
+  }
+};
+let uuid = 0;
+
+@connect(
+  state => {
+    return {
+      projectList: state.project.projectList,
+      isUpdateModalShow: state.project.isUpdateModalShow,
+      handleUpdateIndex: state.project.handleUpdateIndex,
+      tableLoading: state.project.tableLoading,
+      currGroup: state.group.currGroup
+    };
+  },
+  {
+    fetchProjectList,
+    updateProject,
+    delProject,
+    changeUpdateModal,
+    changeTableLoading
+  }
+)
+class UpDateModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      protocol: 'http://',
+      envProtocolChange: 'http://'
+    };
+  }
+  static propTypes = {
+    form: PropTypes.object,
+    fetchProjectList: PropTypes.func,
+    updateProject: PropTypes.func,
+    delProject: PropTypes.func,
+    changeUpdateModal: PropTypes.func,
+    changeTableLoading: PropTypes.func,
+    projectList: PropTypes.array,
+    currGroup: PropTypes.object,
+    isUpdateModalShow: PropTypes.bool,
+    handleUpdateIndex: PropTypes.number
+  };
+
+  // 修改线上域名的协议类型 (http/https)
+  protocolChange = value => {
+    this.setState({
+      protocol: value
+    });
+  };
+
+  handleCancel = () => {
+    this.props.form.resetFields();
+    this.props.changeUpdateModal(false, -1);
+  };
+
+  // 确认修改
+  handleOk = e => {
+    e.preventDefault();
+    const {
+      form,
+      updateProject,
+      changeUpdateModal,
+      currGroup,
+      projectList,
+      handleUpdateIndex,
+      fetchProjectList,
+      changeTableLoading
+    } = this.props;
+    form.validateFields((err, values) => {
+      if (!err) {
+        // console.log(projectList[handleUpdateIndex]);
+        let assignValue = Object.assign(projectList[handleUpdateIndex], values);
+        values.protocol = this.state.protocol.split(':')[0];
+        assignValue.env = assignValue.envs.map((item, index) => {
+          return {
+            name: values['envs-name-' + index],
+            domain: values['envs-protocol-' + index] + values['envs-domain-' + index]
+          };
+        });
+        // console.log(assignValue);
+
+        changeTableLoading(true);
+        updateProject(assignValue)
+          .then(res => {
+            if (res.payload.data.errcode == 0) {
+              changeUpdateModal(false, -1);
+              message.success('修改成功! ');
+              fetchProjectList(currGroup._id).then(() => {
+                changeTableLoading(false);
+              });
+            } else {
+              changeTableLoading(false);
+              message.error(res.payload.data.errmsg);
+            }
+          })
+          .catch(() => {
+            changeTableLoading(false);
+          });
+        form.resetFields();
+      }
+    });
+  };
+
+  // 项目的修改操作 - 删除一项环境配置
+  remove = id => {
+    const { form } = this.props;
+    // can use data-binding to get
+    const envs = form.getFieldValue('envs');
+    // We need at least one passenger
+    if (envs.length === 0) {
+      return;
+    }
+
+    // can use data-binding to set
+    form.setFieldsValue({
+      envs: envs.filter(key => {
+        const realKey = key._id ? key._id : key;
+        return realKey !== id;
+      })
+    });
+  };
+
+  // 项目的修改操作 - 添加一项环境配置
+  add = () => {
+    uuid++;
+    const { form } = this.props;
+    // can use data-binding to get
+    const envs = form.getFieldValue('envs');
+    const nextKeys = envs.concat(uuid);
+    // can use data-binding to set
+    // important! notify form to detect changes
+    form.setFieldsValue({
+      envs: nextKeys
+    });
+  };
+
+  render() {
+    const { getFieldDecorator, getFieldValue } = this.props.form;
+    // const that = this;
+    const { isUpdateModalShow, projectList, handleUpdateIndex } = this.props;
+    let initFormValues = {};
+    let envMessage = [];
+    // 如果列表存在且用户点击修改按钮时，设置表单默认值
+    if (projectList.length !== 0 && handleUpdateIndex !== -1) {
+      // console.log(projectList[handleUpdateIndex]);
+      const { name, basepath, desc, env } = projectList[handleUpdateIndex];
+      initFormValues = { name, basepath, desc, env };
+      if (env.length !== 0) {
+        envMessage = env;
+      }
+      initFormValues.prd_host = projectList[handleUpdateIndex].prd_host;
+      initFormValues.prd_protocol = projectList[handleUpdateIndex].protocol + '://';
+    }
+
+    getFieldDecorator('envs', { initialValue: envMessage });
+    const envs = getFieldValue('envs');
+    const formItems = envs.map((k, index) => {
+      const secondIndex = 'next' + index; // 为保证key的唯一性
+      return (
+        <Row key={index} type="flex" justify="space-between" align={index === 0 ? 'middle' : 'top'}>
+          <Col span={10} offset={2}>
+            <FormItem label={index === 0 ? <span>环境名称</span> : ''} required={false} key={index}>
+              {getFieldDecorator(`envs-name-${index}`, {
+                validateTrigger: ['onChange', 'onBlur'],
+                initialValue: envMessage.length !== 0 ? k.name : '',
+                rules: [
+                  {
+                    required: false,
+                    whitespace: true,
+                    validator(rule, value, callback) {
+                      if (value) {
+                        if (value.length === 0) {
+                          callback('请输入环境域名');
+                        } else if (!/\S/.test(value)) {
+                          callback('请输入环境域名');
+                        } else if (/prd/.test(value)) {
+                          callback('环境域名不能是"prd"');
+                        } else {
+                          return callback();
+                        }
+                      } else {
+                        callback('请输入环境域名');
+                      }
+                    }
+                  }
+                ]
+              })(<Input placeholder="请输入环境名称" style={{ width: '90%', marginRight: 8 }} />)}
+            </FormItem>
+          </Col>
+          <Col span={10}>
+            <FormItem
+              label={index === 0 ? <span>环境域名</span> : ''}
+              required={false}
+              key={secondIndex}
+            >
+              {getFieldDecorator(`envs-domain-${index}`, {
+                validateTrigger: ['onChange', 'onBlur'],
+                initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('//')[1] : '',
+                rules: [
+                  {
+                    required: false,
+                    whitespace: true,
+                    message: '请输入环境域名',
+                    validator(rule, value, callback) {
+                      if (value) {
+                        if (value.length === 0) {
+                          callback('请输入环境域名');
+                        } else if (!/\S/.test(value)) {
+                          callback('请输入环境域名');
+                        } else {
+                          return callback();
+                        }
+                      } else {
+                        callback('请输入环境域名');
+                      }
+                    }
+                  }
+                ]
+              })(
+                <Input
+                  placeholder="请输入环境域名"
+                  style={{ width: '90%', marginRight: 8 }}
+                  addonBefore={getFieldDecorator(`envs-protocol-${index}`, {
+                    initialValue:
+                      envMessage.length !== 0 && k.domain
+                        ? k.domain.split('//')[0] + '//'
+                        : 'http://',
+                    rules: [
+                      {
+                        required: true
+                      }
+                    ]
+                  })(
+                    <Select>
+                      <Option value="http://">{'http://'}</Option>
+                      <Option value="https://">{'https://'}</Option>
+                    </Select>
+                  )}
+                />
+              )}
+            </FormItem>
+          </Col>
+          <Col span={2}>
+            {/* 新增的项中，只有最后一项有删除按钮 */}
+            {(envs.length > 0 && k._id) || envs.length == index + 1 ? (
+              <Icon
+                className="dynamic-delete-button"
+                type="minus-circle-o"
+                onClick={() => {
+                  return this.remove(k._id ? k._id : k);
+                }}
+              />
+            ) : null}
+          </Col>
+        </Row>
+      );
+    });
+    return (
+      <Modal
+        title="修改项目"
+        visible={isUpdateModalShow}
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}
+      >
+        <Form>
+          <FormItem {...formItemLayout} label="项目名称">
+            {getFieldDecorator('name', {
+              initialValue: initFormValues.name,
+              rules: [
+                {
+                  required: true,
+                  message: '请输入项目名称!'
+                }
+              ]
+            })(<Input />)}
+          </FormItem>
+
+          <FormItem
+            {...formItemLayout}
+            label={
+              <span>
+                线上域名&nbsp;
+                <Tooltip title="将根据配置的线上域名访问mock数据">
+                  <Icon type="question-circle-o" />
+                </Tooltip>
+              </span>
+            }
+          >
+            {getFieldDecorator('prd_host', {
+              initialValue: initFormValues.prd_host,
+              rules: [
+                {
+                  required: true,
+                  message: '请输入项目线上域名!'
+                }
+              ]
+            })(
+              <Input
+                addonBefore={
+                  <Select defaultValue={initFormValues.prd_protocol} onChange={this.protocolChange}>
+                    <Option value="http://">{'http://'}</Option>
+                    <Option value="https://">{'https://'}</Option>
+                  </Select>
+                }
+              />
+            )}
+          </FormItem>
+
+          <FormItem
+            {...formItemLayout}
+            label={
+              <span>
+                基本路径&nbsp;
+                <Tooltip title="基本路径为空表示根路径">
+                  <Icon type="question-circle-o" />
+                </Tooltip>
+              </span>
+            }
+          >
+            {getFieldDecorator('basepath', {
+              initialValue: initFormValues.basepath,
+              rules: [
+                {
+                  required: false,
+                  message: '请输入项目基本路径! '
+                }
+              ]
+            })(<Input />)}
+          </FormItem>
+
+          <FormItem {...formItemLayout} label="描述">
+            {getFieldDecorator('desc', {
+              initialValue: initFormValues.desc,
+              rules: [
+                {
+                  required: false,
+                  message: '请输入描述!'
+                }
+              ]
+            })(<TextArea rows={4} />)}
+          </FormItem>
+
+          {formItems}
+          <FormItem {...formItemLayoutWithOutLabel}>
+            <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
+              <Icon type="plus" /> 添加环境配置
+            </Button>
+          </FormItem>
+        </Form>
+      </Modal>
+    );
+  }
+}
+
+export default Form.create()(UpDateModal);
--- a/client/containers/Home/Home.js
+++ b/client/containers/Home/Home.js
@@ -0,0 +1,409 @@
+import './Home.scss';
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { Row, Col, Button, Icon, Card } from 'antd';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import LogoSVG from '../../components/LogoSVG/index.js';
+import { changeMenuItem } from '../../reducer/modules/menu';
+const plugin = require('client/plugin.js');
+
+const ThirdLogin = plugin.emitHook('third_login');
+const HomeGuest = () => (
+  <div className="g-body">
+    <div className="m-bg">
+      <div className="m-bg-mask m-bg-mask0" />
+      <div className="m-bg-mask m-bg-mask1" />
+      <div className="m-bg-mask m-bg-mask2" />
+      <div className="m-bg-mask m-bg-mask3" />
+    </div>
+    <div className="main-one">
+      <div className="container">
+        <Row>
+          <Col span={24}>
+            <div className="home-header">
+              <a href="#" className="item">
+                YAPI
+              </a>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://hellosean1025.github.io/yapi"
+                className="item"
+              >
+                使用文档
+              </a>
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col lg={9} xs={24}>
+            <div className="home-des">
+              <div className="logo">
+                <LogoSVG length="72px" />
+                <span className="name">YAPI</span>
+              </div>
+              <div className="detail">
+                高效、易用、功能强大的API管理平台<br />
+                <span className="desc">旨在为开发、产品、测试人员提供更优雅的接口管理服务</span>
+              </div>
+              <div className="btn-group">
+                <Link to="/login">
+                  <Button type="primary" className="btn-home btn-login">
+                    登录 / 注册
+                  </Button>
+                </Link>
+                {ThirdLogin != null ? <ThirdLogin /> : null}
+              </div>
+            </div>
+          </Col>
+          <Col lg={15} xs={0} className="col-img">
+            <div className="img-container">
+              
+            </div>
+          </Col>
+        </Row>
+      </div>
+    </div>
+    <div className="feat-part section-feature">
+      <div className="container home-section">
+        <h3 className="title">为API开发者设计的管理平台</h3>
+        <span className="desc">
+          YApi让接口开发更简单高效，让接口的管理更具可读性、可维护性，让团队协作更合理。
+        </span>
+        <Row key="feat-motion-row">
+          <Col span={8} className="section-item" key="feat-wrapper-1">
+            <Icon type="appstore-o" className="img" />
+            <h4 className="title">项目管理</h4>
+            <span className="desc">提供基本的项目分组，项目管理，接口管理功能</span>
+          </Col>
+          <Col span={8} className="section-item" key="feat-wrapper-2">
+            <Icon type="api" className="img" />
+            <h4 className="title">接口管理</h4>
+            <span className="desc">
+              友好的接口文档，基于websocket的多人协作接口编辑功能和类postman测试工具，让多人协作成倍提升开发效率
+            </span>
+          </Col>
+          <Col span={8} className="section-item" key="feat-wrapper-3">
+            <Icon type="database" className="img" />
+            <h4 className="title">MockServer</h4>
+            <span className="desc">基于Mockjs，使用简单功能强大</span>
+          </Col>
+        </Row>
+      </div>
+    </div>
+    <div className="feat-part m-mock m-skew home-section">
+      <div className="m-skew-bg">
+        <div className="m-bg-mask m-bg-mask0" />
+        <div className="m-bg-mask m-bg-mask1" />
+        <div className="m-bg-mask m-bg-mask2" />
+      </div>
+      <div className="container skew-container">
+        <h3 className="title">功能强大的 Mock 服务</h3>
+        <span className="desc">你想要的 Mock 服务都在这里</span>
+        <Row className="row-card">
+          <Col lg={12} xs={24} className="section-card">
+            <Card title="Mock 规则">
+              <p className="mock-desc">
+                通过学习一些简单的 Mock
+                模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼:
+                所有的数据都可以实时随机生成。
+              </p>
+              <div className="code">
+                <ol start="1">
+                  <li className="item">
+                    <span className="orderNum orderNum-first">1</span>
+                    <span>
+                      <span>&#123;&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">2</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">
+                        &quot;errcode|200-500&quot;
+                      </span>
+                      <span>
+                        :&ensp;<span className="number">200</span>,&ensp;&ensp;
+                      </span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">3</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">&quot;errmsg|4-8&quot;</span>
+                      <span>:&ensp;</span>
+                      <span className="string">&quot;@string&quot;</span>
+                      <span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">4</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">&quot;data&quot;</span>
+                      <span>:&ensp;&#123;&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">5</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">
+                        &quot;boolean|1&quot;
+                      </span>
+                      <span>:&ensp;</span>
+                      <span className="keyword">true</span>
+                      <span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">6</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">
+                        &quot;array|2&quot;
+                      </span>
+                      <span>
+                        :&ensp;&#91;<span className="string">&quot;Bob&quot;</span>,&ensp;<span className="string">
+                          &quot;Jim&quot;
+                        </span>&#93;,&ensp;&ensp;
+                      </span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">7</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">
+                        &quot;combine&quot;
+                      </span>
+                      <span>:&ensp;</span>
+                      <span className="string">&quot;@boolean&ensp;&amp;&ensp;@array&quot;</span>
+                      <span>&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">8</span>
+                    <span>&ensp;&ensp;&ensp;&ensp;&#125;&ensp;&ensp;</span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum orderNum-last">9</span>
+                    <span>&#125;&ensp;&ensp;</span>
+                  </li>
+                </ol>
+              </div>
+            </Card>
+          </Col>
+          <Col lg={12} xs={24} className="section-card mock-after">
+            <Card title="生成的 Mock 数据">
+              <p className="mock-desc">
+                生成的 Mock 数据可以直接用 ajax
+                请求使用，也可以通过服务器代理使用（不需要修改项目一行代码）
+              </p>
+              <div className="code">
+                <ol start="1">
+                  <li className="alt">
+                    <span className="orderNum orderNum-first">1</span>
+                    <span>
+                      <span>&#123;&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="">
+                    <span className="orderNum">2</span>
+                    <span>
+                      &ensp;&ensp;<span className="string">&quot;errcode&quot;</span>
+                      <span>:&ensp;</span>
+                      <span className="number">304</span>
+                      <span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="alt">
+                    <span className="orderNum">3</span>
+                    <span>
+                      &ensp;&ensp;<span className="string">&quot;errmsg&quot;</span>
+                      <span>:&ensp;</span>
+                      <span className="string">&quot;JtkMIoRu)N#ie^h%Z77[F)&quot;</span>
+                      <span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="">
+                    <span className="orderNum">4</span>
+                    <span>
+                      &ensp;&ensp;<span className="string">&quot;data&quot;</span>
+                      <span>:&ensp;&#123;&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="alt">
+                    <span className="orderNum">5</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">&quot;boolean&quot;</span>
+                      <span>:&ensp;</span>
+                      <span className="keyword">true</span>
+                      <span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="">
+                    <span className="orderNum">6</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">&quot;array&quot;</span>
+                      <span>
+                        :&ensp;
+                      </span>&#91;<span className="string">&quot;Bob&quot;</span>,&ensp;<span className="string">
+                        &quot;Jim&quot;
+                      </span>,&ensp;<span className="string">&quot;Bob&quot;</span>,&ensp;<span className="string">
+                        &quot;Jim&quot;
+                      </span>&#93;<span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="alt">
+                    <span className="orderNum">7</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">&quot;combine&quot;</span>
+                      <span>:&ensp;</span>
+                      <span className="string">
+                        &quot;true & Bob,&ensp;Jim,&ensp;Bob,&ensp;Jim&quot;
+                      </span>
+                      <span>&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="">
+                    <span className="orderNum">8</span>
+                    <span>&ensp;&ensp;&#125;&ensp;&ensp;</span>
+                  </li>
+                  <li className="alt">
+                    <span className="orderNum orderNum-last">9</span>
+                    <span>&#125;&ensp;&ensp;</span>
+                  </li>
+                </ol>
+              </div>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    </div>
+    <div className="home-section section-manage">
+      <div className="container">
+        <Row className="row-card" style={{ marginBottom: '.48rem' }}>
+          <Col lg={7} xs={10} className="section-card">
+            <Card>
+              <div className="section-block block-first">
+                <h4>超级管理员(* N)</h4>
+                <p className="item"> - 创建分组</p>
+                <p className="item"> - 分配组长</p>
+                <p className="item"> - 管理所有成员信息</p>
+              </div>
+              <div className="section-block block-second">
+                <h4>组长(* N)</h4>
+                <p className="item"> - 创建项目</p>
+                <p className="item"> - 管理分组或项目的信息</p>
+                <p className="item"> - 管理开发者与成员</p>
+              </div>
+              <div className="section-block block-third">
+                <h4>开发者(* N) / 成员(* N)</h4>
+                <p className="item"> - 不允许创建分组</p>
+                <p className="item"> - 不允许修改分组或项目信息</p>
+              </div>
+            </Card>
+          </Col>
+          <Col lg={17} xs={14} className="section-card manage-word">
+            <Icon type="team" className="icon" />
+            <h3 className="title">扁平化管理模式</h3>
+            <p className="desc">
+              接口管理的逻辑较为复杂，操作频率高，层层审批将严重拖慢生产效率，因此传统的金字塔管理模式并不适用。
+            </p>
+            <p className="desc">
+              YAPI
+              将扁平化管理模式的思想引入到产品的权限管理中，超级管理员拥有最高的权限，并将权限分配给若干组长，超级管理员只需管理组长即可，实际上管理YAPI各大分组与项目的是“组长”。组长对分组或项目负责，一般由BU负责人/项目负责人担任。
+            </p>
+          </Col>
+        </Row>
+      </div>
+    </div>
+  </div>
+);
+HomeGuest.propTypes = {
+  introList: PropTypes.array
+};
+
+@connect(
+  state => ({
+    login: state.user.isLogin
+  }),
+  {
+    changeMenuItem
+  }
+)
+@withRouter
+class Home extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  UNSAFE_componentWillMount() {
+    if (this.props.login) {
+      this.props.history.push('/group/261');
+    }
+  }
+
+  componentDidMount() {}
+  static propTypes = {
+    introList: PropTypes.array,
+    login: PropTypes.bool,
+    history: PropTypes.object,
+    changeMenuItem: PropTypes.func
+  };
+  toStart = () => {
+    this.props.changeMenuItem('/group');
+  };
+  render() {
+    return (
+      <div className="home-main">
+        <HomeGuest introList={this.props.introList} />
+        <div className="row-tip">
+          <div className="container">
+            <div className="tip-title">
+              <h3 className="title">准备好使用了吗？</h3>
+              <p className="desc">注册账号尽请使用吧，查看使用文档了解更多信息</p>
+            </div>
+            <div className="tip-btns">
+              <div className="btn-group">
+                <Link to="/login">
+                  <Button type="primary" className="btn-home btn-login">
+                    登录 / 注册
+                  </Button>
+                </Link>
+                <Button className="btn-home btn-home-normal">
+                  <a target="_blank" rel="noopener noreferrer" href="https://hellosean1025.github.io/yapi">
+                    使用文档
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+// Home.defaultProps={
+//   introList:[{
+//     title:"接口管理",
+//     des:"满足你的所有接口管理需求。不再需要为每个项目搭建独立的接口管理平台和编写离线的接口文档，其权限管理和项目日志让协作开发不再痛苦。",
+//     detail:[
+//       {title:"团队协作",des:"多成员协作，掌握项目进度",iconType:"team"},
+//       {title:"权限管理",des:"设置每个成员的操作权限",iconType:"usergroup-add"},
+//       {title:"项目日志",des:"推送项目情况，掌握更新动态",iconType:"schedule"}
+//     ],
+//     img:"./image/demo-img.jpg"
+//   },{
+//     title:"接口测试",
+//     des:"一键即可得到返回结果。根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口，这些接口会自动生成模拟数据。",
+//     detail:[
+//       {title:"编辑接口",des:"团队开发时任何人都可以在权限许可下创建、修改接口",iconType:"tags-o"},
+//       {title:"mock请求",des:"创建者可以自由构造需要的数据，支持复杂的生成逻辑",iconType:"fork"}
+//     ],
+//     img:"./image/demo-img.jpg"
+//   }
+//   ]
+// };
+
+export default Home;
--- a/client/containers/Home/Home.scss
+++ b/client/containers/Home/Home.scss
@@ -0,0 +1,528 @@
+@import '../../styles/mixin.scss';
+
+$color-white : #fff;
+$color-blue-lighter : #f1f5ff;
+$color-blue-grey-lighter : #f7fafc;
+$color-grey-lighter : #F7F7F7;
+$color-blue-light: #5dade2;
+$color-black-lighter: #404040;
+$color-text-dark: #2e2e5a;
+$color-text-light: #6d7c90;
+$color-bg-lightblue: #c6e2ff;
+.g-body {
+  position: relative;
+}
+.home-header {
+  font-size: 0;
+  .item {
+    text-decoration: none;
+    display: inline-block;
+    color: #fff;
+    font-size: .17rem;
+    padding: .16rem .24rem;
+    -webkit-font-smoothing: antialiased;
+    &:hover {
+      color: #27cdfd;
+    }
+  }
+}
+
+// 按钮组
+.btn-group {
+  padding: .3rem .24rem;
+  .btn-home {
+    font-size: .15rem;
+    font-weight: 200;
+    letter-spacing: 1px;
+    border: none;
+    line-height: .4rem;
+    height: .4rem;
+    padding: 0 .24rem;
+    margin-right: .24rem;
+    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+    transform: translateY(0);
+    transition: all .2s;
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
+    }
+    &:active {
+      transform: translateY(1px);
+    }
+  }
+  .btn-login {
+    background-color: #32325d;
+    &:hover {
+      background-color: #43459a;
+    }
+    &:active, &:focus {
+      color: #e6ebf1;
+      background-color: #32325d;
+    }
+  }
+  .btn-home-normal {
+    border-radius: 4px;
+    color: #43459a;
+    &:hover {
+      color: #7795f8;
+    }
+    &:hover, &:focus {
+      background-color: #f6f9fc;
+    }
+    background-color: #fff;
+    cursor: pointer;
+  }
+}
+
+.m-bg {
+  position: absolute;
+  left: 0;
+  top: -400px;
+  height: 1000px;
+  width: 100%;
+  transform: skewY(-11deg);
+  background-image: linear-gradient(-20deg, #21d4fd 0%, #b721ff 100%);
+  .m-bg-mask {
+    position: absolute;
+    height: 180px;
+  }
+  .m-bg-mask0 {
+    bottom: 0;
+    left: 0;
+    width: 30%;
+    background-image: linear-gradient(120deg, #6ab3fd 0%, #8ba3fd 102%);
+  }
+  .m-bg-mask1 {
+    bottom: 180px;
+    right: 0;
+    width: 36%;
+    background-image: linear-gradient(120deg, #28c5f5 0%, #6682fe 100%);
+  }
+  .m-bg-mask2 {
+    bottom: 540px;
+    left: 0;
+    width: 20%;
+    height: 240px;
+    background-image: linear-gradient(120deg, #8121ff 0%, #5e5ef7 100%);
+  }
+  .m-bg-mask3 {
+    bottom: 540px;
+    left: 20%;
+    width: 70%;
+    height: 240px;
+    background-image: linear-gradient(-225deg, #5f2bff 0%, #6088fe 48%, #22ccf6 100%);
+  }
+}
+.home-main {
+  background-color: #fff;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  .main-one{
+    height: 600px;
+    .home-des{
+      padding: 1rem 0 0;
+      color: #fff;
+      .title{
+        font-size: .6rem;
+      }
+      .detail{
+        font-size: .2rem;
+      }
+      .logo {
+        display: flex;
+        align-items: center;
+        padding: 0 .24rem;
+      }
+      .svg {
+        animation: spin 5s linear infinite;
+      }
+      .name {
+        vertical-align: middle;
+        font-size: .48rem;
+        margin-left: .24rem;
+        font-weight: 200;
+      }
+      .detail {
+        padding: .24rem;
+        font-size: .24rem;
+        font-weight: 200;
+      }
+      .desc {
+        font-size: .18rem;
+      }
+    }
+    .login-form{
+      color: $color-white;
+    }
+    .main-one-left{
+      padding-right: .15rem;
+      margin-top: .2rem;
+    }
+    .main-one-right{
+      padding-left: .5rem;
+      padding-top: .3rem;
+    }
+  }
+  .user-home{
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin: 1rem auto 0;
+    .user-des{
+      margin: 0 auto .5rem;
+      text-align: center;
+      .title{
+        font-size: .8rem;
+        margin-bottom: .2rem;
+      }
+      .des{
+        font-size: .25rem;
+        margin-bottom: .3rem;
+      }
+      .btn{
+        button{
+          font-size: .2rem;
+          line-height: .2rem;
+          height: .5rem;
+          padding: .15rem .5rem;
+        }
+      }
+    }
+  }
+  .main-part{
+    padding: 1.5rem 0;
+    height: 5.8rem;
+    &:nth-child(odd){
+      background-color: $color-blue-lighter;
+    }
+    &:nth-child(even){
+      background-color: $color-white;
+    }
+  }
+  .feat-part{
+    padding: 1.5rem 0;
+    background-color: $color-white;
+  }
+  .section-feature {
+    min-height: 6rem;
+  }
+  .container{
+    margin: 0 auto;
+    height:100%;
+    position: relative;
+    max-width: 12.2rem;
+  }
+  .feat-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    .feat-img {
+      height: 1.2rem;
+      width: 1.2rem;
+      border-radius: 100%;
+      margin-bottom: .2rem;
+      color: $color-white;
+      i {
+        line-height: 1.2rem;
+        font-size: .6rem;
+      }
+    }
+    .feat-title {
+      font-size: .16rem;
+      line-height: .3rem;
+    }
+    &:first-child {
+      .feat-img {
+        background-color: rgb(248, 88, 96);
+      }
+    }
+    &:nth-child(2) {
+      .feat-img {
+        background-color: #f9bb13;
+      }
+    }
+    &:nth-child(3) {
+      .feat-img {
+        background-color: #20ab8e;
+      }
+    }
+    &:nth-child(4) {
+      .feat-img {
+        background-color: rgb(66, 165, 245);
+      }
+    }
+  }
+  .img-container{
+    width: 100%;
+    position: absolute;
+    top: .74rem;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: right;
+    .img{
+      width: 7.12rem;
+      border-radius: 4px;
+      box-shadow : 0 30px 60px rgba(0,0,0,0.2);
+    }
+  }
+  .m-skew {
+    position: relative;
+    .skew-container {
+      padding: 0 1rem;
+    }
+    .m-skew-bg {
+      position: absolute;
+      left: 0;
+      top: 5%;
+      height: 600px;
+      width: 100%;
+      transform: skewY(-11deg);
+      background-image: linear-gradient(180deg, #93a5cf 0%, #e4efe9 100%);
+      .m-bg-mask {
+        position: absolute;
+        height: 200px;
+      }
+      .m-bg-mask0 {
+        bottom: 0;
+        left: 0;
+        width: 30%;
+        background-image: linear-gradient(120deg, #6ab3fd 0%, #c1cfde 102%);
+      }
+      .m-bg-mask1 {
+        bottom: 200px;
+        right: 0;
+        width: 36%;
+        background-image: linear-gradient(219deg, #84a1ce 0%, #e4efe9 100%);
+      }
+      .m-bg-mask2 {
+        top: 0;
+        left: 0;
+        width: 30%;
+        background-image: linear-gradient(219deg, #93a5cf 0%, #d7e3e5 100%);
+      }
+    }
+  }
+}
+
+.home-section {
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  .title {
+    color: $color-text-dark;
+    line-height: .32rem;
+    margin-bottom: .08rem;
+    font-size: .24rem;
+  }
+  .desc {
+    color: $color-text-light;
+    font-size: .16rem;
+  }
+  .section-item {
+    text-align: left;
+    padding: .24rem;
+    .img {
+      width: .48rem;
+      height: .48rem;
+      background-image: linear-gradient(-20deg, #21d4fd 0%, #b721ff 100%);
+      border-radius: 50%;
+      text-align: center;
+      line-height: .48rem;
+      font-size: .24rem;
+      color: #fff;
+      margin-bottom: .24rem;
+    }
+    .title {
+      color: $color-text-dark;
+      font-size: .2rem;
+    }
+    .desc {
+      color: $color-text-light;
+      font-size: .16rem;
+    }
+  }
+  .row-card {
+    margin-top: .48rem;
+    padding: 0 .24rem;
+  }
+  .section-card {
+    padding-bottom: 1rem;
+    .ant-card {
+      font-size: .17rem;
+      border-radius: .04rem;
+      box-shadow: 0 16px 35px rgba(50,50,93,.1), 0 5px 16px rgba(0,0,0,.07);
+      border: none;
+    }
+    .ant-card:not(.ant-card-no-hovering):hover {
+      box-shadow: 0 16px 35px rgba(50,50,93,.1), 0 5px 16px rgba(0,0,0,.07);
+    }
+    .ant-card-head {
+      background-color: $color-blue-grey-lighter;
+      border-top-left-radius: .04rem;
+      border-top-right-radius: .04rem;
+    }
+    .ant-card-head-title {
+      font-size: .17rem;
+      color: $color-text-dark;
+    }
+    .ant-card-body {
+      text-align: left;
+      padding: 0;
+    }
+    .mock-desc {
+      padding: .32rem;
+      min-height: 8em;
+    }
+    padding: .08rem;
+  }
+  .code {
+    color: $color-text-light;
+    background-color: $color-blue-grey-lighter;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    .orderNum {
+      background-color: $color-bg-lightblue;
+      display: inline-block;
+      text-align: center;
+      width: .4rem;
+      margin-right: .5em;
+      user-select: none;
+    }
+    .orderNum-first {
+      padding-top: .5em;
+    }
+    .orderNum-last {
+      border-bottom-left-radius: 4px;
+      padding-bottom: .5em;
+    }
+    .string {
+      color: #ff561b;
+    }
+    .number {
+      color: #57cf27;
+    }
+    .keyword {
+      color: #2359f1;
+    }
+    .item {
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .mock-after {
+    .ant-card-head {
+      background-color: $color-bg-lightblue;
+    }
+    .ant-card-head-title {
+      color: #4074af;
+    }
+  }
+}
+
+.section-manage {
+  .section-card{
+    padding-top: .24rem;
+    .ant-card {
+      border-radius: .04rem;
+    }
+    .ant-card-body {
+      padding: 0;
+    }
+  }
+  .section-block {
+    padding: .24rem;
+    .item {
+      font-size: .14rem;
+    }
+  }
+  .block-first {
+    background-color: #5f48fe;
+    border-top-left-radius: .04rem;
+    border-top-right-radius: .04rem;
+  }
+  .block-second {
+    background-color: #5f79fe;
+  }
+  .block-third {
+    background-color: #3ab1f9;
+    border-bottom-left-radius: .04rem;
+    border-bottom-right-radius: .04rem;
+  }
+  .ant-card-body, h4 {
+    color: #fff;
+  }
+  .manage-word {
+    text-align: left;
+    padding-left: .48rem;
+    .icon {
+      width: .72rem;
+      height: .72rem;
+      line-height: .72rem;
+      text-align: center;
+      background-color: #5f48fe;
+      border-radius: 50%;
+      font-size: .4rem;
+      color: #fff;
+      margin-bottom: .24rem;
+    }
+    .desc {
+      margin-bottom: .16rem;
+    }
+  }
+}
+
+.row-tip {
+  margin-top: .48rem;
+  padding-top: .48rem;
+  padding-bottom: .24rem;
+  background-color: #ececec;
+  .container {
+    display: flex;
+    align-items: center;
+    max-width: 12.2rem;
+    .tip-title {
+      flex: 2;
+    }
+    .tip-btns {
+      flex: 1;
+    }
+  }
+  .btn-group {
+    white-space: nowrap;
+  }
+  .title {
+    -webkit-font-smoothing: antialiased;
+    padding-left: .24rem;
+    color: #2e2e5a;
+    line-height: .32rem;
+    margin-bottom: .08rem;
+    font-size: .24rem;
+  }
+  .desc {
+    -webkit-font-smoothing: antialiased;
+    padding-left: .24rem;
+    color: #6d7c90;
+    font-size: .16rem;
+  }
+}
+
+// LOGO 旋转动画
+@keyframes spin
+{
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (max-width: 1200px) {
+  .home-header, .home-des {
+    text-align: center;
+  }
+  .home-main .main-one .home-des .logo {
+    justify-content: center;
+  }
+}
--- a/client/containers/Login/Login.js
+++ b/client/containers/Login/Login.js
@@ -0,0 +1,151 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Form, Button, Input, Icon, message, Radio } from 'antd';
+import { loginActions, loginLdapActions } from '../../reducer/modules/user';
+import { withRouter } from 'react-router';
+const FormItem = Form.Item;
+const RadioGroup = Radio.Group;
+
+import './Login.scss';
+
+const formItemStyle = {
+  marginBottom: '.16rem'
+};
+
+const changeHeight = {
+  height: '.42rem'
+};
+
+@connect(
+  state => {
+    return {
+      loginData: state.user,
+      isLDAP: state.user.isLDAP
+    };
+  },
+  {
+    loginActions,
+    loginLdapActions
+  }
+)
+@withRouter
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loginType: 'ldap'
+    };
+  }
+
+  static propTypes = {
+    form: PropTypes.object,
+    history: PropTypes.object,
+    loginActions: PropTypes.func,
+    loginLdapActions: PropTypes.func,
+    isLDAP: PropTypes.bool
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    const form = this.props.form;
+    form.validateFields((err, values) => {
+      if (!err) {
+        if (this.props.isLDAP && this.state.loginType === 'ldap') {
+          this.props.loginLdapActions(values).then(res => {
+            if (res.payload.data.errcode == 0) {
+              this.props.history.replace('/group');
+              message.success('登录成功! ');
+            }
+          });
+        } else {
+          this.props.loginActions(values).then(res => {
+            if (res.payload.data.errcode == 0) {
+              this.props.history.replace('/group');
+              message.success('登录成功! ');
+            }
+          });
+        }
+      }
+    });
+  };
+
+  componentDidMount() {
+    //Qsso.attach('qsso-login','/api/user/login_by_token')
+    console.log('isLDAP', this.props.isLDAP);
+  }
+  handleFormLayoutChange = e => {
+    this.setState({ loginType: e.target.value });
+  };
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+
+    const { isLDAP } = this.props;
+
+    const emailRule =
+      this.state.loginType === 'ldap'
+        ? {}
+        : {
+            required: true,
+            message: '请输入正确的email!',
+            pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$/
+          };
+    return (
+      <Form onSubmit={this.handleSubmit}>
+        {/* 登录类型 (普通登录／LDAP登录) */}
+        {isLDAP && (
+          <FormItem>
+            <RadioGroup defaultValue="ldap" onChange={this.handleFormLayoutChange}>
+              <Radio value="ldap">LDAP</Radio>
+              <Radio value="normal">普通登录</Radio>
+            </RadioGroup>
+          </FormItem>
+        )}
+        {/* 用户名 (Email) */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('email', { rules: [emailRule] })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="user" style={{ fontSize: 13 }} />}
+              placeholder="Email"
+            />
+          )}
+        </FormItem>
+
+        {/* 密码 */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('password', {
+            rules: [{ required: true, message: '请输入密码!' }]
+          })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
+              type="password"
+              placeholder="Password"
+            />
+          )}
+        </FormItem>
+
+        {/* 登录按钮 */}
+        <FormItem style={formItemStyle}>
+          <Button
+            style={changeHeight}
+            type="primary"
+            htmlType="submit"
+            className="login-form-button"
+          >
+            登录
+          </Button>
+        </FormItem>
+
+        {/* <div className="qsso-breakline">
+          <span className="qsso-breakword">或</span>
+        </div>
+        <Button style={changeHeight} id="qsso-login" type="primary" className="login-form-button" size="large" ghost>QSSO登录</Button> */}
+      </Form>
+    );
+  }
+}
+const LoginForm = Form.create()(Login);
+export default LoginForm;
--- a/client/containers/Login/Login.scss
+++ b/client/containers/Login/Login.scss
@@ -0,0 +1,64 @@
+@import '../../styles/common.scss';
+
+// .login-body {
+//   background-color: #fff;
+// }
+.login-container {
+  padding-bottom: .6rem;
+}
+
+.login-form-button {
+  background-image: linear-gradient(to right, #6d69fe 0%, #48a0fa 100%) !important;
+  border: none !important;
+  margin-top: .2rem;
+  width: 100%;
+}
+
+.ant-form-item {
+  margin-bottom: .1rem;
+}
+
+.qsso-breakline{
+  display: flex;
+  align-items: center;
+  color: #6d7c90;
+  margin: .2rem auto;
+  &:before, &:after{
+    content: "";
+    display: inline-block;
+    height: .02rem;
+    flex: 1;
+    border-top: .01rem solid #6d7c90;
+  }
+  .qsso-breakword{
+    padding: 0 .1rem;
+  }
+}
+
+.card-login {
+  margin-top: 1.6rem;
+  margin-bottom: 1.6rem;
+  border-radius: .04rem;
+  position: relative;
+  .login-logo {
+    font-size: 0;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    background-image: linear-gradient(-20deg, #21d4fd 0%, #b721ff 100%);
+    transform: translate(-50%, -50%);
+    padding: .16rem;
+    border-radius: 50%;
+    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+  }
+  .login-title {
+    text-align: center;
+    padding-top: .5rem;
+    font-size: .4rem;
+    font-weight: 200;
+    color: #2e2e5a;
+  }
+  .svg {
+    animation: spin 5s linear infinite;
+  }
+}
--- a/client/containers/Login/LoginContainer.js
+++ b/client/containers/Login/LoginContainer.js
@@ -0,0 +1,36 @@
+import React, { PureComponent as Component } from 'react';
+import Login from './LoginWrap';
+import { Row, Col, Card } from 'antd';
+import LogoSVG from '../../components/LogoSVG/index.js';
+
+class LoginContainer extends Component {
+  render() {
+    return (
+      <div className="g-body login-body">
+        <div className="m-bg">
+          <div className="m-bg-mask m-bg-mask0" />
+          <div className="m-bg-mask m-bg-mask1" />
+          <div className="m-bg-mask m-bg-mask2" />
+          <div className="m-bg-mask m-bg-mask3" />
+        </div>
+        <div className="main-one login-container">
+          <div className="container">
+            <Row type="flex" justify="center">
+              <Col xs={20} sm={16} md={12} lg={8} className="container-login">
+                <Card className="card-login">
+                  <h2 className="login-title">YAPI</h2>
+                  <div className="login-logo">
+                    <LogoSVG length="100px" />
+                  </div>
+                  <Login />
+                </Card>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LoginContainer;
--- a/client/containers/Login/LoginWrap.js
+++ b/client/containers/Login/LoginWrap.js
@@ -0,0 +1,43 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Tabs } from 'antd';
+import LoginForm from './Login';
+import RegForm from './Reg';
+import './Login.scss';
+const TabPane = Tabs.TabPane;
+
+@connect(state => ({
+  loginWrapActiveKey: state.user.loginWrapActiveKey,
+  canRegister: state.user.canRegister
+}))
+export default class LoginWrap extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    form: PropTypes.object,
+    loginWrapActiveKey: PropTypes.string,
+    canRegister: PropTypes.bool
+  };
+
+  render() {
+    const { loginWrapActiveKey, canRegister } = this.props;
+    {/** show only login when register is disabled */}
+    return (
+      <Tabs
+        defaultActiveKey={loginWrapActiveKey}
+        className="login-form"
+        tabBarStyle={{ border: 'none' }}
+      >
+        <TabPane tab="登录" key="1">
+          <LoginForm />
+        </TabPane>
+        <TabPane tab={"注册"} key="2">
+          {canRegister ? <RegForm /> : <div style={{minHeight: 200}}>管理员已禁止注册，请联系管理员</div>}
+        </TabPane>
+      </Tabs>
+    );
+  }
+}
--- a/client/containers/Login/Reg.js
+++ b/client/containers/Login/Reg.js
@@ -0,0 +1,169 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Form, Button, Input, Icon, message } from 'antd';
+import { regActions } from '../../reducer/modules/user';
+import { withRouter } from 'react-router';
+const FormItem = Form.Item;
+const formItemStyle = {
+  marginBottom: '.16rem'
+};
+
+const changeHeight = {
+  height: '.42rem'
+};
+
+@connect(
+  state => {
+    return {
+      loginData: state.user
+    };
+  },
+  {
+    regActions
+  }
+)
+@withRouter
+class Reg extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      confirmDirty: false
+    };
+  }
+
+  static propTypes = {
+    form: PropTypes.object,
+    history: PropTypes.object,
+    regActions: PropTypes.func
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    const form = this.props.form;
+    form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        this.props.regActions(values).then(res => {
+          if (res.payload.data.errcode == 0) {
+            this.props.history.replace('/group');
+            message.success('注册成功! ');
+          }
+        });
+      }
+    });
+  };
+
+  checkPassword = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value && value !== form.getFieldValue('password')) {
+      callback('两次输入的密码不一致啊!');
+    } else {
+      callback();
+    }
+  };
+
+  checkConfirm = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value && this.state.confirmDirty) {
+      form.validateFields(['confirm'], { force: true });
+    }
+    callback();
+  };
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form onSubmit={this.handleSubmit}>
+        {/* 用户名 */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('userName', {
+            rules: [{ required: true, message: '请输入用户名!' }]
+          })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="user" style={{ fontSize: 13 }} />}
+              placeholder="Username"
+            />
+          )}
+        </FormItem>
+
+        {/* Emaiil */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('email', {
+            rules: [
+              {
+                required: true,
+                message: '请输入email!',
+                pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$/
+              }
+            ]
+          })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="mail" style={{ fontSize: 13 }} />}
+              placeholder="Email"
+            />
+          )}
+        </FormItem>
+
+        {/* 密码 */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('password', {
+            rules: [
+              {
+                required: true,
+                message: '请输入密码!'
+              },
+              {
+                validator: this.checkConfirm
+              }
+            ]
+          })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
+              type="password"
+              placeholder="Password"
+            />
+          )}
+        </FormItem>
+
+        {/* 密码二次确认 */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('confirm', {
+            rules: [
+              {
+                required: true,
+                message: '请再次输入密码密码!'
+              },
+              {
+                validator: this.checkPassword
+              }
+            ]
+          })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
+              type="password"
+              placeholder="Confirm Password"
+            />
+          )}
+        </FormItem>
+
+        {/* 注册按钮 */}
+        <FormItem style={formItemStyle}>
+          <Button
+            style={changeHeight}
+            type="primary"
+            htmlType="submit"
+            className="login-form-button"
+          >
+            注册
+          </Button>
+        </FormItem>
+      </Form>
+    );
+  }
+}
+const RegForm = Form.create()(Reg);
+export default RegForm;
--- a/client/containers/News/News.js
+++ b/client/containers/News/News.js
@@ -0,0 +1,80 @@
+import './News.scss';
+import React, { PureComponent as Component } from 'react';
+import NewsTimeline from './NewsTimeline/NewsTimeline';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import Breadcrumb from '../../components/Breadcrumb/Breadcrumb';
+import { Button } from 'antd';
+import { getMockUrl } from '../../reducer/modules/news.js';
+import Subnav from '../../components/Subnav/Subnav.js';
+
+@connect(
+  state => {
+    return {
+      uid: state.user.uid + ''
+    };
+  },
+  {
+    getMockUrl: getMockUrl
+  }
+)
+class News extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      mockURL: ''
+    };
+  }
+  static propTypes = {
+    uid: PropTypes.string,
+    getMockUrl: PropTypes.func
+  };
+  UNSAFE_componentWillMount() {
+    //const that = this;
+    // this.props.getMockUrl(2724).then(function(data){
+    //   const { prd_host, basepath, protocol } = data.payload.data.data;
+    //   const mockURL = `${protocol}://${prd_host}${basepath}/{path}`;
+    //   that.setState({
+    //     mockURL: mockURL
+    //   })
+    // })
+  }
+  render() {
+    return (
+      <div>
+        <Subnav
+          default={'动态'}
+          data={[
+            {
+              name: '动态',
+              path: '/news'
+            },
+            {
+              name: '测试',
+              path: '/follow'
+            },
+            {
+              name: '设置',
+              path: '/follow'
+            }
+          ]}
+        />
+        <div className="g-row">
+          <section className="news-box m-panel">
+            <div className="logHead">
+              <Breadcrumb />
+              <div className="Mockurl">
+                <span>Mock地址：</span>
+                <p>{this.state.mockURL}</p>
+                <Button type="primary">下载Mock数据</Button>
+              </div>
+            </div>
+            <NewsTimeline />
+          </section>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default News;
--- a/client/containers/News/News.scss
+++ b/client/containers/News/News.scss
@@ -0,0 +1,101 @@
+@import '../../styles/mixin.scss';
+
+.news-box {
+  @include row-width-limit;
+
+  display: -webkit-box;
+  -webkit-box-flex: 1;
+  margin: 0px auto 0 auto;
+  font-size: 0.14rem;
+  background: #FFF;
+  display: block;
+
+  .news-timeline{
+    padding: 24px;
+    padding-left: 125px;
+    color: #6b6c6d;
+    .ant-timeline-item{
+      min-height: 60px;
+    }
+    .ant-timeline-item-head{
+      width: 30px;
+      height: 30px;
+      left: -8px;
+      top: -4px;
+      border-color:#e1e3e4;
+    }
+    .logusername{
+      color: #4eaef3;
+      padding: 0px 16px 0px 8px;
+      cursor: pointer;
+    }
+    .logtype{
+      padding-right: 16px;
+    }
+    .logtime{
+      padding-right: 16px;
+
+    }
+    .logcontent{
+      display: block;
+      padding-left: 8px;
+      line-height: 24px;
+    }
+    .logoTimeago{
+      position: absolute;
+      left: -80px;
+      top: 5px;
+      color: #c0c1c1;
+    }
+    .logbidden{
+      color: #c0c1c1;
+      cursor: default;
+      line-height: 30px;
+      padding-left: 30px;
+    }
+    .loggetMore{
+      line-height: 30px;
+      padding-left: 30px;
+      color: #4eaef3;
+    }
+  }
+  .logHead{
+    height: 80px;
+    width: 100%;
+    border-bottom: 1px solid #e9e9e9;
+    padding: 24px 0px;
+    overflow: hidden;
+    .breadcrumb-container{
+      float: left;
+      min-width:100px;
+    }
+    .Mockurl{
+      width: 500px;
+      float: right;
+      color: #7b7b7b;
+      >span{
+        float: left;
+        line-height: 30px;
+      }
+      p{
+        width: 60%;
+        display: inline-block;
+        position: relative;
+        padding: 4px 7px;
+        height: 28px;
+        cursor: text;
+        font-size: 13px;
+        color: rgba(0,0,0,.65);
+        background-color: #fff;
+        background-image: none;
+        border: 1px solid #d9d9d9;
+        -webkit-transition: all .3s;
+        transition: all .3s;
+        overflow-x:auto;
+      }
+      button{
+        float: right;
+      }
+    }
+  }
+}
--- a/client/containers/News/NewsList/NewsList.js
+++ b/client/containers/News/NewsList/NewsList.js
@@ -0,0 +1,80 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Menu } from 'antd';
+import { fetchNewsData } from '../../../reducer/modules/news.js';
+
+const logList = [
+  {
+    name: '用户'
+  },
+  {
+    name: '分组'
+  },
+  {
+    name: '接口'
+  },
+  {
+    name: '项目'
+  }
+];
+@connect(
+  state => {
+    // console.log(state);
+    return {
+      uid: state.user.uid + '',
+      newsData: state.news.newsData
+    };
+  },
+  {
+    fetchNewsData
+  }
+)
+class NewsList extends Component {
+  static propTypes = {
+    fetchNewsData: PropTypes.func,
+    setLoading: PropTypes.func,
+    uid: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedKeys: 0
+    };
+  }
+  getLogData(e) {
+    // page,size,logId
+    // console.log(e.key);
+    this.setState({
+      selectedKeys: +e.key
+    });
+    const that = this;
+    this.props.setLoading(true);
+    this.props.fetchNewsData(+this.props.uid, 0, 5).then(function() {
+      that.props.setLoading(false);
+    });
+  }
+  render() {
+    return (
+      <div className="logList">
+        <h3>日志类型</h3>
+        <Menu
+          mode="inline"
+          selectedKeys={[`${this.state.selectedKeys}`]}
+          onClick={this.getLogData.bind(this)}
+        >
+          {logList.map((item, i) => {
+            return (
+              <Menu.Item key={i} className="log-item">
+                {item.name}
+              </Menu.Item>
+            );
+          })}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default NewsList;
--- a/client/containers/News/NewsTimeline/NewsTimeline.js
+++ b/client/containers/News/NewsTimeline/NewsTimeline.js
@@ -0,0 +1,89 @@
+import React, { PureComponent as Component } from 'react';
+import { Timeline, Spin } from 'antd';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { formatTime } from '../../../common.js';
+import { fetchNewsData } from '../../../reducer/modules/news.js';
+import { timeago } from '../../../../common/utils';
+// timeago(new Date().getTime() - 40);
+
+@connect(
+  state => {
+    return {
+      newsData: state.news.newsData,
+      curpage: state.news.curpage
+    };
+  },
+  {
+    fetchNewsData: fetchNewsData
+  }
+)
+class NewsTimeline extends Component {
+  static propTypes = {
+    newsData: PropTypes.object,
+    fetchNewsData: PropTypes.func,
+
+    setLoading: PropTypes.func,
+    loading: PropTypes.bool,
+    curpage: PropTypes.number
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      bidden: '',
+      loading: false
+    };
+  }
+
+  getMore() {
+    const that = this;
+    this.setState({ loading: true });
+    this.props.fetchNewsData(21, 'project', this.props.curpage, 8).then(function() {
+      that.setState({ loading: false });
+      if (that.props.newsData.total + 1 === that.props.curpage) {
+        that.setState({ bidden: 'logbidden' });
+      }
+    });
+  }
+
+  UNSAFE_componentWillMount() {
+    this.props.fetchNewsData(21, 'project', this.props.curpage, 8);
+  }
+
+  render() {
+    let data = this.props.newsData ? this.props.newsData.list : [];
+    if (data && data.length) {
+      data = data.map(function(item, i) {
+        return (
+          <Timeline.Item key={i}>
+            <span className="logoTimeago">{timeago(item.add_time)}</span>
+            <span className="logusername">{item.username}</span>
+            <span className="logtype">{item.type}</span>
+            <span className="logtime">{formatTime(item.add_time)}</span>
+            <span className="logcontent">{item.content}</span>
+          </Timeline.Item>
+        );
+      });
+    } else {
+      data = '';
+    }
+    let pending = this.state.bidden ? (
+      <a className={this.state.bidden}>以上为全部内容</a>
+    ) : (
+      <a className="loggetMore" onClick={this.getMore.bind(this)}>
+        查看更多
+      </a>
+    );
+    if (this.state.loading) {
+      pending = <Spin />;
+    }
+    return (
+      <section className="news-timeline">
+        {data ? <Timeline pending={pending}>{data}</Timeline> : data}
+      </section>
+    );
+  }
+}
+
+export default NewsTimeline;
--- a/client/containers/Project/Activity/Activity.js
+++ b/client/containers/Project/Activity/Activity.js
@@ -0,0 +1,58 @@
+import './Activity.scss';
+import React, { PureComponent as Component } from 'react';
+import TimeTree from '../../../components/TimeLine/TimeLine';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Button } from 'antd';
+@connect(state => {
+  return {
+    uid: state.user.uid + '',
+    curdata: state.inter.curdata,
+    currProject: state.project.currProject
+  };
+})
+class Activity extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    uid: PropTypes.string,
+    getMockUrl: PropTypes.func,
+    match: PropTypes.object,
+    curdata: PropTypes.object,
+    currProject: PropTypes.object
+  };
+  render() {
+    let { currProject } = this.props;
+    return (
+      <div className="g-row">
+        <section className="news-box m-panel">
+          <div style={{ display: 'none' }} className="logHead">
+            {/*<Breadcrumb />*/}
+            <div className="projectDes">
+              <p>高效、易用、可部署的API管理平台</p>
+            </div>
+            <div className="Mockurl">
+              <span>Mock地址：</span>
+              <p>
+                {location.protocol +
+                  '//' +
+                  location.hostname +
+                  (location.port !== '' ? ':' + location.port : '') +
+                  `/mock/${currProject._id}${currProject.basepath}/yourPath`}
+              </p>
+              <Button type="primary">
+                <a href={`/api/project/download?project_id=${this.props.match.params.id}`}>
+                  下载Mock数据
+                </a>
+              </Button>
+            </div>
+          </div>
+          <TimeTree type={'project'} typeid={+this.props.match.params.id} />
+        </section>
+      </div>
+    );
+  }
+}
+
+export default Activity;
--- a/client/containers/Project/Activity/Activity.scss
+++ b/client/containers/Project/Activity/Activity.scss
@@ -0,0 +1 @@
+
--- a/client/containers/Project/Interface/Interface.js
+++ b/client/containers/Project/Interface/Interface.js
@@ -0,0 +1,141 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs, Layout } from 'antd';
+import { Route, Switch, matchPath } from 'react-router-dom';
+import { connect } from 'react-redux';
+const { Content, Sider } = Layout;
+
+import './interface.scss';
+
+import InterfaceMenu from './InterfaceList/InterfaceMenu.js';
+import InterfaceList from './InterfaceList/InterfaceList.js';
+import InterfaceContent from './InterfaceList/InterfaceContent.js';
+
+import InterfaceColMenu from './InterfaceCol/InterfaceColMenu.js';
+import InterfaceColContent from './InterfaceCol/InterfaceColContent.js';
+import InterfaceCaseContent from './InterfaceCol/InterfaceCaseContent.js';
+import { getProject } from '../../../reducer/modules/project';
+import { setColData } from '../../../reducer/modules/interfaceCol.js';
+const contentRouter = {
+  path: '/project/:id/interface/:action/:actionId',
+  exact: true
+};
+
+const InterfaceRoute = props => {
+  let C;
+  if (props.match.params.action === 'api') {
+    if (!props.match.params.actionId) {
+      C = InterfaceList;
+    } else if (!isNaN(props.match.params.actionId)) {
+      C = InterfaceContent;
+    } else if (props.match.params.actionId.indexOf('cat_') === 0) {
+      C = InterfaceList;
+    }
+  } else if (props.match.params.action === 'col') {
+    C = InterfaceColContent;
+  } else if (props.match.params.action === 'case') {
+    C = InterfaceCaseContent;
+  } else {
+    const params = props.match.params;
+    props.history.replace('/project/' + params.id + '/interface/api');
+    return null;
+  }
+  return <C {...props} />;
+};
+
+InterfaceRoute.propTypes = {
+  match: PropTypes.object,
+  history: PropTypes.object
+};
+
+@connect(
+  state => {
+    return {
+      isShowCol: state.interfaceCol.isShowCol
+    };
+  },
+  {
+    setColData,
+    getProject
+  }
+)
+class Interface extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    history: PropTypes.object,
+    location: PropTypes.object,
+    isShowCol: PropTypes.bool,
+    getProject: PropTypes.func,
+    setColData: PropTypes.func
+    // fetchInterfaceColList: PropTypes.func
+  };
+
+  constructor(props) {
+    super(props);
+    // this.state = {
+    //   curkey: this.props.match.params.action === 'api' ? 'api' : 'colOrCase'
+    // }
+  }
+
+  onChange = action => {
+    let params = this.props.match.params;
+    if (action === 'colOrCase') {
+      action = this.props.isShowCol ? 'col' : 'case';
+    }
+    this.props.history.push('/project/' + params.id + '/interface/' + action);
+  };
+  async UNSAFE_componentWillMount() {
+    this.props.setColData({
+      isShowCol: true
+    });
+    // await this.props.fetchInterfaceColList(this.props.match.params.id)
+  }
+  render() {
+    const { action } = this.props.match.params;
+    // const activeKey = this.state.curkey;
+    const activeKey = action === 'api' ? 'api' : 'colOrCase';
+
+    return (
+      <Layout style={{ minHeight: 'calc(100vh - 156px)', marginLeft: '24px', marginTop: '24px' }}>
+        <Sider style={{ height: '100%' }} width={450}>
+          <div className="left-menu">
+            <Tabs type="card" className="tabs-large" activeKey={activeKey} onChange={this.onChange}>
+              <Tabs.TabPane tab="接口列表" key="api" />
+              <Tabs.TabPane tab="测试集合" key="colOrCase" />
+            </Tabs>
+            {activeKey === 'api' ? (
+              <InterfaceMenu
+                router={matchPath(this.props.location.pathname, contentRouter)}
+                projectId={this.props.match.params.id}
+              />
+            ) : (
+              <InterfaceColMenu
+                router={matchPath(this.props.location.pathname, contentRouter)}
+                projectId={this.props.match.params.id}
+              />
+            )}
+          </div>
+        </Sider>
+        <Layout>
+          <Content
+            style={{
+              height: '100%',
+              margin: '0 24px 0 16px',
+              overflow: 'initial',
+              backgroundColor: '#fff'
+            }}
+          >
+            <div className="right-content">
+              <Switch>
+                <Route exact path="/project/:id/interface/:action" component={InterfaceRoute} />
+                <Route {...contentRouter} component={InterfaceRoute} />
+              </Switch>
+            </div>
+          </Content>
+        </Layout>
+      </Layout>
+    );
+  }
+}
+
+export default Interface;
--- a/client/containers/Project/Interface/InterfaceCol/CaseReport.js
+++ b/client/containers/Project/Interface/InterfaceCol/CaseReport.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, Tabs } from 'antd';
+const TabPane = Tabs.TabPane;
+function jsonFormat(json) {
+  // console.log('json',json)
+  if (json && typeof json === 'object') {
+    return JSON.stringify(json, null, '   ');
+  }
+  return json;
+}
+
+const CaseReport = function(props) {
+  let params = jsonFormat(props.data);
+  let headers = jsonFormat(props.headers, null, '   ');
+  let res_header = jsonFormat(props.res_header, null, '   ');
+  let res_body = jsonFormat(props.res_body);
+  let httpCode = props.status;
+  let validRes;
+  if (props.validRes && Array.isArray(props.validRes)) {
+    validRes = props.validRes.map((item, index) => {
+      return <div key={index}>{item.message}</div>;
+    });
+  }
+
+  return (
+    <div className="report">
+      <Tabs defaultActiveKey="request">
+        <TabPane className="case-report-pane" tab="Request" key="request">
+          <Row className="case-report">
+            <Col className="case-report-title" span="6">
+              Url
+            </Col>
+            <Col span="18">{props.url}</Col>
+          </Row>
+          {props.query ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                Query
+              </Col>
+              <Col span="18">{props.query}</Col>
+            </Row>
+          ) : null}
+
+          {props.headers ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                Headers
+              </Col>
+              <Col span="18">
+                <pre>{headers}</pre>
+              </Col>
+            </Row>
+          ) : null}
+
+          {params ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                Body
+              </Col>
+              <Col span="18">
+                <pre style={{ whiteSpace: 'pre-wrap' }}>{params}</pre>
+              </Col>
+            </Row>
+          ) : null}
+        </TabPane>
+        <TabPane className="case-report-pane" tab="Response" key="response">
+          <Row  className="case-report">
+            <Col className="case-report-title" span="6">
+              HttpCode
+            </Col>
+            <Col span="18">
+              <pre>{httpCode}</pre>
+            </Col>
+          </Row>
+          {props.res_header ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                Headers
+              </Col>
+              <Col span="18">
+                <pre>{res_header}</pre>
+              </Col>
+            </Row>
+          ) : null}
+          {props.res_body ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                Body
+              </Col>
+              <Col span="18">
+                <pre>{res_body}</pre>
+              </Col>
+            </Row>
+          ) : null}
+        </TabPane>
+        <TabPane className="case-report-pane" tab="验证结果" key="valid">
+          {props.validRes ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                验证结果
+              </Col>
+              <Col span="18"><pre>
+                {validRes}  
+              </pre></Col>
+            </Row>
+          ) : null}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+
+CaseReport.propTypes = {
+  url: PropTypes.string,
+  data: PropTypes.any,
+  headers: PropTypes.object,
+  res_header: PropTypes.object,
+  res_body: PropTypes.any,
+  query: PropTypes.string,
+  validRes: PropTypes.array,
+  status: PropTypes.number
+};
+
+export default CaseReport;
--- a/client/containers/Project/Interface/InterfaceCol/ImportInterface.js
+++ b/client/containers/Project/Interface/InterfaceCol/ImportInterface.js
@@ -0,0 +1,241 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { Table, Select, Tooltip, Icon } from 'antd';
+import variable from '../../../../constants/variable';
+import { connect } from 'react-redux';
+const Option = Select.Option;
+import { fetchInterfaceListMenu } from '../../../../reducer/modules/interface.js';
+
+@connect(
+  state => {
+    return {
+      projectList: state.project.projectList,
+      list: state.inter.list
+    };
+  },
+  {
+    fetchInterfaceListMenu
+  }
+)
+export default class ImportInterface extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    selectedRowKeys: [],
+    categoryCount: {},
+    project: this.props.currProjectId
+  };
+
+  static propTypes = {
+    list: PropTypes.array,
+    selectInterface: PropTypes.func,
+    projectList: PropTypes.array,
+    currProjectId: PropTypes.string,
+    fetchInterfaceListMenu: PropTypes.func
+  };
+
+  async componentDidMount() {
+    // console.log(this.props.currProjectId)
+    await this.props.fetchInterfaceListMenu(this.props.currProjectId);
+  }
+
+  // 切换项目
+  onChange = async val => {
+    this.setState({
+      project: val,
+      selectedRowKeys: [],
+      categoryCount: {}
+    });
+    await this.props.fetchInterfaceListMenu(val);
+  };
+
+  render() {
+    const { list, projectList } = this.props;
+
+    // const { selectedRowKeys } = this.state;
+    const data = list.map(item => {
+      return {
+        key: 'category_' + item._id,
+        title: item.name,
+        isCategory: true,
+        children: item.list
+          ? item.list.map(e => {
+              e.key = e._id;
+              e.categoryKey = 'category_' + item._id;
+              e.categoryLength = item.list.length;
+              return e;
+            })
+          : []
+      };
+    });
+    const self = this;
+    const rowSelection = {
+      // onChange: (selectedRowKeys) => {
+      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+      // if (selectedRows.isCategory) {
+      //   const selectedRowKeys = selectedRows.children.map(item => item._id)
+      //   this.setState({ selectedRowKeys })
+      // }
+      // this.props.onChange(selectedRowKeys.filter(id => ('' + id).indexOf('category') === -1));
+      // },
+      onSelect: (record, selected) => {
+        // console.log(record, selected, selectedRows);
+        const oldSelecteds = self.state.selectedRowKeys;
+        const categoryCount = self.state.categoryCount;
+        const categoryKey = record.categoryKey;
+        const categoryLength = record.categoryLength;
+        let selectedRowKeys = [];
+        if (record.isCategory) {
+          selectedRowKeys = record.children.map(item => item._id).concat(record.key);
+          if (selected) {
+            selectedRowKeys = selectedRowKeys
+              .filter(id => oldSelecteds.indexOf(id) === -1)
+              .concat(oldSelecteds);
+            categoryCount[categoryKey] = categoryLength;
+          } else {
+            selectedRowKeys = oldSelecteds.filter(id => selectedRowKeys.indexOf(id) === -1);
+            categoryCount[categoryKey] = 0;
+          }
+        } else {
+          if (selected) {
+            selectedRowKeys = oldSelecteds.concat(record._id);
+            if (categoryCount[categoryKey]) {
+              categoryCount[categoryKey] += 1;
+            } else {
+              categoryCount[categoryKey] = 1;
+            }
+            if (categoryCount[categoryKey] === record.categoryLength) {
+              selectedRowKeys.push(categoryKey);
+            }
+          } else {
+            selectedRowKeys = oldSelecteds.filter(id => id !== record._id);
+            if (categoryCount[categoryKey]) {
+              categoryCount[categoryKey] -= 1;
+            }
+            selectedRowKeys = selectedRowKeys.filter(id => id !== categoryKey);
+          }
+        }
+        self.setState({ selectedRowKeys, categoryCount });
+        self.props.selectInterface(
+          selectedRowKeys.filter(id => ('' + id).indexOf('category') === -1),
+          self.state.project
+        );
+      },
+      onSelectAll: selected => {
+        // console.log(selected, selectedRows, changeRows);
+        let selectedRowKeys = [];
+        let categoryCount = self.state.categoryCount;
+        if (selected) {
+          data.forEach(item => {
+            if (item.children) {
+              categoryCount['category_' + item._id] = item.children.length;
+              selectedRowKeys = selectedRowKeys.concat(item.children.map(item => item._id));
+            }
+          });
+          selectedRowKeys = selectedRowKeys.concat(data.map(item => item.key));
+        } else {
+          categoryCount = {};
+          selectedRowKeys = [];
+        }
+        self.setState({ selectedRowKeys, categoryCount });
+        self.props.selectInterface(
+          selectedRowKeys.filter(id => ('' + id).indexOf('category') === -1),
+          self.state.project
+        );
+      },
+      selectedRowKeys: self.state.selectedRowKeys
+    };
+
+    const columns = [
+      {
+        title: '接口名称',
+        dataIndex: 'title',
+        width: '30%'
+      },
+      {
+        title: '接口路径',
+        dataIndex: 'path',
+        width: '40%'
+      },
+      {
+        title: '请求方法',
+        dataIndex: 'method',
+        render: item => {
+          let methodColor = variable.METHOD_COLOR[item ? item.toLowerCase() : 'get'];
+          return (
+            <span
+              style={{
+                color: methodColor.color,
+                backgroundColor: methodColor.bac,
+                borderRadius: 4
+              }}
+              className="colValue"
+            >
+              {item}
+            </span>
+          );
+        }
+      },
+      {
+        title: (
+          <span>
+            状态{' '}
+            <Tooltip title="筛选满足条件的接口集合">
+              <Icon type="question-circle-o" />
+            </Tooltip>
+          </span>
+        ),
+        dataIndex: 'status',
+        render: text => {
+          return (
+            text &&
+            (text === 'done' ? (
+              <span className="tag-status done">已完成</span>
+            ) : (
+              <span className="tag-status undone">未完成</span>
+            ))
+          );
+        },
+        filters: [
+          {
+            text: '已完成',
+            value: 'done'
+          },
+          {
+            text: '未完成',
+            value: 'undone'
+          }
+        ],
+        onFilter: (value, record) => {
+          let arr = record.children.filter(item => {
+            return item.status.indexOf(value) === 0;
+          });
+          return arr.length > 0;
+          // record.status.indexOf(value) === 0
+        }
+      }
+    ];
+
+    return (
+      <div>
+        <div className="select-project">
+          <span>选择要导入的项目： </span>
+          <Select value={this.state.project} style={{ width: 200 }} onChange={this.onChange}>
+            {projectList.map(item => {
+              return item.projectname ? (
+                ''
+              ) : (
+                <Option value={`${item._id}`} key={item._id}>
+                  {item.name}
+                </Option>
+              );
+            })}
+          </Select>
+        </div>
+        <Table columns={columns} rowSelection={rowSelection} dataSource={data} pagination={false} />
+      </div>
+    );
+  }
+}
--- a/client/containers/Project/Interface/InterfaceCol/InterfaceCaseContent.js
+++ b/client/containers/Project/Interface/InterfaceCol/InterfaceCaseContent.js
@@ -0,0 +1,235 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import { message, Tooltip, Input } from 'antd';
+import { getEnv } from '../../../../reducer/modules/project';
+import {
+  fetchInterfaceColList,
+  setColData,
+  fetchCaseData,
+  fetchCaseList
+} from '../../../../reducer/modules/interfaceCol';
+import { Postman } from '../../../../components';
+
+import './InterfaceCaseContent.scss';
+
+@connect(
+  state => {
+    return {
+      interfaceColList: state.interfaceCol.interfaceColList,
+      currColId: state.interfaceCol.currColId,
+      currCaseId: state.interfaceCol.currCaseId,
+      currCase: state.interfaceCol.currCase,
+      isShowCol: state.interfaceCol.isShowCol,
+      currProject: state.project.currProject,
+      projectEnv: state.project.projectEnv,
+      curUid: state.user.uid
+    };
+  },
+  {
+    fetchInterfaceColList,
+    fetchCaseData,
+    setColData,
+    fetchCaseList,
+    getEnv
+  }
+)
+@withRouter
+export default class InterfaceCaseContent extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    interfaceColList: PropTypes.array,
+    fetchInterfaceColList: PropTypes.func,
+    fetchCaseData: PropTypes.func,
+    setColData: PropTypes.func,
+    fetchCaseList: PropTypes.func,
+    history: PropTypes.object,
+    currColId: PropTypes.number,
+    currCaseId: PropTypes.number,
+    currCase: PropTypes.object,
+    isShowCol: PropTypes.bool,
+    currProject: PropTypes.object,
+    getEnv: PropTypes.func,
+    projectEnv: PropTypes.object,
+    curUid: PropTypes.number
+  };
+
+  state = {
+    isEditingCasename: true,
+    editCasename: ''
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  getColId(colList, currCaseId) {
+    let currColId = 0;
+    colList.forEach(col => {
+      col.caseList.forEach(caseItem => {
+        if (+caseItem._id === +currCaseId) {
+          currColId = col._id;
+        }
+      });
+    });
+    return currColId;
+  }
+
+  async UNSAFE_componentWillMount() {
+    const result = await this.props.fetchInterfaceColList(this.props.match.params.id);
+    let { currCaseId } = this.props;
+    const params = this.props.match.params;
+    const { actionId } = params;
+    currCaseId = +actionId || +currCaseId || result.payload.data.data[0].caseList[0]._id;
+    let currColId = this.getColId(result.payload.data.data, currCaseId);
+    // this.props.history.push('/project/' + params.id + '/interface/case/' + currCaseId);
+    await this.props.fetchCaseData(currCaseId);
+    this.props.setColData({ currCaseId: +currCaseId, currColId, isShowCol: false });
+    // 获取当前case 下的环境变量
+    await this.props.getEnv(this.props.currCase.project_id);
+    // await this.getCurrEnv()
+
+    this.setState({ editCasename: this.props.currCase.casename });
+  }
+
+  async UNSAFE_componentWillReceiveProps(nextProps) {
+    const oldCaseId = this.props.match.params.actionId;
+    const newCaseId = nextProps.match.params.actionId;
+    const { interfaceColList } = nextProps;
+    let currColId = this.getColId(interfaceColList, newCaseId);
+    if (oldCaseId !== newCaseId) {
+      await this.props.fetchCaseData(newCaseId);
+      this.props.setColData({ currCaseId: +newCaseId, currColId, isShowCol: false });
+      await this.props.getEnv(this.props.currCase.project_id);
+      // await this.getCurrEnv()
+      this.setState({ editCasename: this.props.currCase.casename });
+    }
+  }
+
+  savePostmanRef = postman => {
+    this.postman = postman;
+  };
+
+  updateCase = async () => {
+    const {
+      case_env,
+      req_params,
+      req_query,
+      req_headers,
+      req_body_type,
+      req_body_form,
+      req_body_other,
+      test_script,
+      enable_script,
+      test_res_body,
+      test_res_header
+    } = this.postman.state;
+
+    const { editCasename: casename } = this.state;
+    const { _id: id } = this.props.currCase;
+    let params = {
+      id,
+      casename,
+      case_env,
+      req_params,
+      req_query,
+      req_headers,
+      req_body_type,
+      req_body_form,
+      req_body_other,
+      test_script,
+      enable_script,
+      test_res_body,
+      test_res_header
+    };
+
+    const res = await axios.post('/api/col/up_case', params);
+    if (this.props.currCase.casename !== casename) {
+      this.props.fetchInterfaceColList(this.props.match.params.id);
+    }
+    if (res.data.errcode) {
+      message.error(res.data.errmsg);
+    } else {
+      message.success('更新成功');
+      this.props.fetchCaseData(id);
+    }
+  };
+
+  triggerEditCasename = () => {
+    this.setState({
+      isEditingCasename: true,
+      editCasename: this.props.currCase.casename
+    });
+  };
+  cancelEditCasename = () => {
+    this.setState({
+      isEditingCasename: false,
+      editCasename: this.props.currCase.casename
+    });
+  };
+
+  render() {
+    const { currCase, currProject, projectEnv } = this.props;
+    const { isEditingCasename, editCasename } = this.state;
+
+    const data = Object.assign(
+      {},
+      currCase,
+      {
+        env: projectEnv.env,
+        pre_script: currProject.pre_script,
+        after_script: currProject.after_script
+      },
+      { _id: currCase._id }
+    );
+
+    return (
+      <div style={{ padding: '6px 0' }} className="case-content">
+        <div className="case-title">
+          {!isEditingCasename && (
+            <Tooltip title="点击编辑" placement="bottom">
+              <div className="case-name" onClick={this.triggerEditCasename}>
+                {currCase.casename}
+              </div>
+            </Tooltip>
+          )}
+
+          {isEditingCasename && (
+            <div className="edit-case-name">
+              <Input
+                value={editCasename}
+                onChange={e => this.setState({ editCasename: e.target.value })}
+                style={{ fontSize: 18 }}
+              />
+            </div>
+          )}
+          <span className="inter-link" style={{ margin: '0px 8px 0px 6px', fontSize: 12 }}>
+            <Link
+              className="text"
+              to={`/project/${currCase.project_id}/interface/api/${currCase.interface_id}`}
+            >
+              对应接口
+            </Link>
+          </span>
+        </div>
+        <div>
+          {Object.keys(currCase).length > 0 && (
+            <Postman
+              data={data}
+              type="case"
+              saveTip="更新保存修改"
+              save={this.updateCase}
+              ref={this.savePostmanRef}
+              interfaceId={currCase.interface_id}
+              projectId={currCase.project_id}
+              curUid={this.props.curUid}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
--- a/client/containers/Project/Interface/InterfaceCol/InterfaceCaseContent.scss
+++ b/client/containers/Project/Interface/InterfaceCol/InterfaceCaseContent.scss
@@ -0,0 +1,33 @@
+.case-content {
+  padding: 6px 0;
+  .case-title {
+    display: flex;
+    .case-name {
+      margin-left: 8px;
+      border-radius: 4px;
+      border: 1px solid transparent;
+      padding: 0 5px;
+      background-color: #eee;
+      font-size: 20px;
+      flex-grow: 1;
+      cursor: pointer;
+    }
+    .case-name:hover {
+      color: rgba(0,0,0,.65);
+      border: 1px solid #d9d9d9;
+    }
+    .edit-case-name {
+      margin-left: 8px;
+      display: flex;
+      flex-grow: 1;
+    }
+    .inter-link {
+      flex-basis: 50px;
+      position: relative;
+    }
+    .inter-link .text {
+      position: absolute;
+      bottom: 4px;
+    }
+  }
+}
--- a/client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js
+++ b/client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js
--- a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js
+++ b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js
@@ -0,0 +1,630 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import PropTypes from 'prop-types';
+import {
+  fetchInterfaceColList,
+  fetchInterfaceCaseList,
+  setColData,
+  fetchCaseList,
+  fetchCaseData
+} from '../../../../reducer/modules/interfaceCol';
+import { fetchProjectList } from '../../../../reducer/modules/project';
+import axios from 'axios';
+import ImportInterface from './ImportInterface';
+import { Input, Icon, Button, Modal, message, Tooltip, Tree, Form } from 'antd';
+import { arrayChangeIndex } from '../../../../common.js';
+import _ from 'underscore'
+
+const TreeNode = Tree.TreeNode;
+const FormItem = Form.Item;
+const confirm = Modal.confirm;
+const headHeight = 240; // menu顶部到网页顶部部分的高度
+
+import './InterfaceColMenu.scss';
+
+const ColModalForm = Form.create()(props => {
+  const { visible, onCancel, onCreate, form, title } = props;
+  const { getFieldDecorator } = form;
+  return (
+    <Modal visible={visible} title={title} onCancel={onCancel} onOk={onCreate}>
+      <Form layout="vertical">
+        <FormItem label="集合名">
+          {getFieldDecorator('colName', {
+            rules: [{ required: true, message: '请输入集合命名！' }]
+          })(<Input />)}
+        </FormItem>
+        <FormItem label="简介">{getFieldDecorator('colDesc')(<Input type="textarea" />)}</FormItem>
+      </Form>
+    </Modal>
+  );
+});
+
+@connect(
+  state => {
+    return {
+      interfaceColList: state.interfaceCol.interfaceColList,
+      currCase: state.interfaceCol.currCase,
+      isRander: state.interfaceCol.isRander,
+      currCaseId: state.interfaceCol.currCaseId,
+      // list: state.inter.list,
+      // 当前项目的信息
+      curProject: state.project.currProject
+      // projectList: state.project.projectList
+    };
+  },
+  {
+    fetchInterfaceColList,
+    fetchInterfaceCaseList,
+    fetchCaseData,
+    // fetchInterfaceListMenu,
+    fetchCaseList,
+    setColData,
+    fetchProjectList
+  }
+)
+@withRouter
+export default class InterfaceColMenu extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    interfaceColList: PropTypes.array,
+    fetchInterfaceColList: PropTypes.func,
+    fetchInterfaceCaseList: PropTypes.func,
+    // fetchInterfaceListMenu: PropTypes.func,
+    fetchCaseList: PropTypes.func,
+    fetchCaseData: PropTypes.func,
+    setColData: PropTypes.func,
+    currCaseId: PropTypes.number,
+    history: PropTypes.object,
+    isRander: PropTypes.bool,
+    // list: PropTypes.array,
+    router: PropTypes.object,
+    currCase: PropTypes.object,
+    curProject: PropTypes.object,
+    fetchProjectList: PropTypes.func
+    // projectList: PropTypes.array
+  };
+
+  state = {
+    colModalType: '',
+    colModalVisible: false,
+    editColId: 0,
+    filterValue: '',
+    importInterVisible: false,
+    importInterIds: [],
+    importColId: 0,
+    expands: null,
+    list: [],
+    delIcon: null,
+    selectedProject: null
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getList();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.interfaceColList !== nextProps.interfaceColList) {
+      this.setState({
+        list: nextProps.interfaceColList
+      });
+    }
+  }
+
+  async getList() {
+    let r = await this.props.fetchInterfaceColList(this.props.match.params.id);
+    this.setState({
+      list: r.payload.data.data
+    });
+    return r;
+  }
+
+  addorEditCol = async () => {
+    const { colName: name, colDesc: desc } = this.form.getFieldsValue();
+    const { colModalType, editColId: col_id } = this.state;
+    const project_id = this.props.match.params.id;
+    let res = {};
+    if (colModalType === 'add') {
+      res = await axios.post('/api/col/add_col', { name, desc, project_id });
+    } else if (colModalType === 'edit') {
+      res = await axios.post('/api/col/up_col', { name, desc, col_id });
+    }
+    if (!res.data.errcode) {
+      this.setState({
+        colModalVisible: false
+      });
+      message.success(colModalType === 'edit' ? '修改集合成功' : '添加集合成功');
+      // await this.props.fetchInterfaceColList(project_id);
+      this.getList();
+    } else {
+      message.error(res.data.errmsg);
+    }
+  };
+
+  onExpand = keys => {
+    this.setState({ expands: keys });
+  };
+
+  onSelect = _.debounce(keys => {
+    if (keys.length) {
+      const type = keys[0].split('_')[0];
+      const id = keys[0].split('_')[1];
+      const project_id = this.props.match.params.id;
+      if (type === 'col') {
+        this.props.setColData({
+          isRander: false
+        });
+        this.props.history.push('/project/' + project_id + '/interface/col/' + id);
+      } else {
+        this.props.setColData({
+          isRander: false
+        });
+        this.props.history.push('/project/' + project_id + '/interface/case/' + id);
+      }
+    }
+    this.setState({
+      expands: null
+    });
+  }, 500);
+
+  showDelColConfirm = colId => {
+    let that = this;
+    const params = this.props.match.params;
+    confirm({
+      title: '您确认删除此测试集合',
+      content: '温馨提示：该操作会删除该集合下所有测试用例，用例删除后无法恢复',
+      okText: '确认',
+      cancelText: '取消',
+      async onOk() {
+        const res = await axios.get('/api/col/del_col?col_id=' + colId);
+        if (!res.data.errcode) {
+          message.success('删除集合成功');
+          const result = await that.getList();
+          const nextColId = result.payload.data.data[0]._id;
+
+          that.props.history.push('/project/' + params.id + '/interface/col/' + nextColId);
+        } else {
+          message.error(res.data.errmsg);
+        }
+      }
+    });
+  };
+
+  // 复制测试集合
+  copyInterface = async item => {
+    if (this._copyInterfaceSign === true) {
+      return;
+    }
+    this._copyInterfaceSign = true;
+    const { desc, project_id, _id: col_id } = item;
+    let { name } = item;
+    name = `${name} copy`;
+
+    // 添加集合
+    const add_col_res = await axios.post('/api/col/add_col', { name, desc, project_id });
+
+    if (add_col_res.data.errcode) {
+      message.error(add_col_res.data.errmsg);
+      return;
+    }
+
+    const new_col_id = add_col_res.data.data._id;
+
+    // 克隆集合
+    const add_case_list_res = await axios.post('/api/col/clone_case_list', {
+      new_col_id,
+      col_id,
+      project_id
+    });
+    this._copyInterfaceSign = false;
+
+    if (add_case_list_res.data.errcode) {
+      message.error(add_case_list_res.data.errmsg);
+      return;
+    }
+
+    // 刷新接口列表
+    // await this.props.fetchInterfaceColList(project_id);
+    this.getList();
+    this.props.setColData({ isRander: true });
+    message.success('克隆测试集成功');
+  };
+
+  showNoDelColConfirm = () => {
+    confirm({
+      title: '此测试集合为最后一个集合',
+      content: '温馨提示：建议不要删除'
+    });
+  };
+  caseCopy = async caseId=> {
+    let that = this;
+    let caseData = await that.props.fetchCaseData(caseId);
+    let data = caseData.payload.data.data;
+    data = JSON.parse(JSON.stringify(data));
+    data.casename=`${data.casename}_copy`
+    delete data._id 
+    const res = await axios.post('/api/col/add_case',data);
+      if (!res.data.errcode) {
+        message.success('克隆用例成功');
+        let colId = res.data.data.col_id;
+        let projectId=res.data.data.project_id;
+        await this.getList();
+        this.props.history.push('/project/' + projectId + '/interface/col/' + colId);
+        this.setState({
+          visible: false
+        });
+      } else {
+        message.error(res.data.errmsg);
+      }
+  };
+  showDelCaseConfirm = caseId => {
+    let that = this;
+    const params = this.props.match.params;
+    confirm({
+      title: '您确认删除此测试用例',
+      content: '温馨提示：用例删除后无法恢复',
+      okText: '确认',
+      cancelText: '取消',
+      async onOk() {
+        const res = await axios.get('/api/col/del_case?caseid=' + caseId);
+        if (!res.data.errcode) {
+          message.success('删除用例成功');
+          that.getList();
+          // 如果删除当前选中 case，切换路由到集合
+          if (+caseId === +that.props.currCaseId) {
+            that.props.history.push('/project/' + params.id + '/interface/col/');
+          } else {
+            // that.props.fetchInterfaceColList(that.props.match.params.id);
+            that.props.setColData({ isRander: true });
+          }
+        } else {
+          message.error(res.data.errmsg);
+        }
+      }
+    });
+  };
+  showColModal = (type, col) => {
+    const editCol =
+      type === 'edit' ? { colName: col.name, colDesc: col.desc } : { colName: '', colDesc: '' };
+    this.setState({
+      colModalVisible: true,
+      colModalType: type || 'add',
+      editColId: col && col._id
+    });
+    this.form.setFieldsValue(editCol);
+  };
+  saveFormRef = form => {
+    this.form = form;
+  };
+
+  selectInterface = (importInterIds, selectedProject) => {
+    this.setState({ importInterIds, selectedProject });
+  };
+
+  showImportInterfaceModal = async colId => {
+    // const projectId = this.props.match.params.id;
+    // console.log('project', this.props.curProject)
+    const groupId = this.props.curProject.group_id;
+    await this.props.fetchProjectList(groupId);
+    // await this.props.fetchInterfaceListMenu(projectId)
+    this.setState({ importInterVisible: true, importColId: colId });
+  };
+
+  handleImportOk = async () => {
+    const project_id = this.state.selectedProject || this.props.match.params.id;
+    const { importColId, importInterIds } = this.state;
+    const res = await axios.post('/api/col/add_case_list', {
+      interface_list: importInterIds,
+      col_id: importColId,
+      project_id
+    });
+    if (!res.data.errcode) {
+      this.setState({ importInterVisible: false });
+      message.success('导入集合成功');
+      // await this.props.fetchInterfaceColList(project_id);
+      this.getList();
+
+      this.props.setColData({ isRander: true });
+    } else {
+      message.error(res.data.errmsg);
+    }
+  };
+  handleImportCancel = () => {
+    this.setState({ importInterVisible: false });
+  };
+
+  filterCol = e => {
+    const value = e.target.value;
+    // console.log('list', this.props.interfaceColList);
+    // const newList = produce(this.props.interfaceColList, draftList => {})
+    // console.log('newList',newList);
+    this.setState({
+      filterValue: value,
+      list: JSON.parse(JSON.stringify(this.props.interfaceColList))
+      // list: newList
+    });
+  };
+
+  onDrop = async e => {
+    // const projectId = this.props.match.params.id;
+    const { interfaceColList } = this.props;
+    const dropColIndex = e.node.props.pos.split('-')[1];
+    const dropColId = interfaceColList[dropColIndex]._id;
+    const id = e.dragNode.props.eventKey;
+    const dragColIndex = e.dragNode.props.pos.split('-')[1];
+    const dragColId = interfaceColList[dragColIndex]._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('col') === -1) {
+      if (dropColId === dragColId) {
+        // 同一个测试集合下的接口交换顺序
+        let caseList = interfaceColList[dropColIndex].caseList;
+        let changes = arrayChangeIndex(caseList, dragIndex, dropIndex);
+        axios.post('/api/col/up_case_index', changes).then();
+      }
+      await axios.post('/api/col/up_case', { id: id.split('_')[1], col_id: dropColId });
+      // this.props.fetchInterfaceColList(projectId);
+      this.getList();
+      this.props.setColData({ isRander: true });
+    } else {
+      let changes = arrayChangeIndex(interfaceColList, dragIndex, dropIndex);
+      axios.post('/api/col/up_col_index', changes).then();
+      this.getList();
+    }
+  };
+
+  enterItem = id => {
+    this.setState({ delIcon: id });
+  };
+
+  leaveItem = () => {
+    this.setState({ delIcon: null });
+  };
+
+  render() {
+    // const { currColId, currCaseId, isShowCol } = this.props;
+    const { colModalType, colModalVisible, importInterVisible } = this.state;
+    const currProjectId = this.props.match.params.id;
+    // const menu = (col) => {
+    //   return (
+    //     <Menu>
+    //       <Menu.Item>
+    //         <span onClick={() => this.showColModal('edit', col)}>修改集合</span>
+    //       </Menu.Item>
+    //       <Menu.Item>
+    //         <span onClick={() => {
+    //           this.showDelColConfirm(col._id)
+    //         }}>删除集合</span>
+    //       </Menu.Item>
+    //       <Menu.Item>
+    //         <span onClick={() => this.showImportInterface(col._id)}>导入接口</span>
+    //       </Menu.Item>
+    //     </Menu>
+    //   )
+    // };
+
+    const defaultExpandedKeys = () => {
+      const { router, currCase, interfaceColList } = this.props,
+        rNull = { expands: [], selects: [] };
+      if (interfaceColList.length === 0) {
+        return rNull;
+      }
+      if (router) {
+        if (router.params.action === 'case') {
+          if (!currCase || !currCase._id) {
+            return rNull;
+          }
+          return {
+            expands: this.state.expands ? this.state.expands : ['col_' + currCase.col_id],
+            selects: ['case_' + currCase._id + '']
+          };
+        } else {
+          let col_id = router.params.actionId;
+          return {
+            expands: this.state.expands ? this.state.expands : ['col_' + col_id],
+            selects: ['col_' + col_id]
+          };
+        }
+      } else {
+        return {
+          expands: this.state.expands ? this.state.expands : ['col_' + interfaceColList[0]._id],
+          selects: ['col_' + interfaceColList[0]._id]
+        };
+      }
+    };
+
+    const itemInterfaceColCreate = interfaceCase => {
+      return (
+        <TreeNode
+          style={{ width: '100%' }}
+          key={'case_' + interfaceCase._id}
+          title={
+            <div
+              className="menu-title"
+              onMouseEnter={() => this.enterItem(interfaceCase._id)}
+              onMouseLeave={this.leaveItem}
+              title={interfaceCase.casename}
+            >
+              <span className="casename">{interfaceCase.casename}</span>
+              <div className="btns">
+                <Tooltip title="删除用例">
+                  <Icon
+                    type="delete"
+                    className="interface-delete-icon"
+                    onClick={e => {
+                      e.stopPropagation();
+                      this.showDelCaseConfirm(interfaceCase._id);
+                    }}
+                    style={{ display: this.state.delIcon == interfaceCase._id ? 'block' : 'none' }}
+                  />
+                </Tooltip>
+                <Tooltip title="克隆用例">
+                  <Icon
+                    type="copy"
+                    className="interface-delete-icon"
+                    onClick={e => {
+                      e.stopPropagation();
+                      this.caseCopy(interfaceCase._id);
+                    }}
+                    style={{ display: this.state.delIcon == interfaceCase._id ? 'block' : 'none' }}
+                  />
+                </Tooltip>
+              </div>
+            </div>
+          }
+        />
+      );
+    };
+
+    let currentKes = defaultExpandedKeys();
+    // console.log('currentKey', currentKes)
+
+    let list = this.state.list;
+
+    if (this.state.filterValue) {
+      let arr = [];
+      list = list.filter(item => {
+
+        item.caseList = item.caseList.filter(inter => {
+          if (inter.casename.indexOf(this.state.filterValue) === -1 
+          && inter.path.indexOf(this.state.filterValue) === -1
+          ) {
+            return false;
+          }
+          return true;
+        });
+
+        arr.push('col_' + item._id);
+        return true;
+      });
+      // console.log('arr', arr);
+      if (arr.length > 0) {
+        currentKes.expands = arr;
+      }
+    }
+
+    // console.log('list', list);
+    // console.log('currentKey', currentKes)
+
+    return (
+      <div>
+        <div className="interface-filter">
+          <Input placeholder="搜索测试集合" onChange={this.filterCol} />
+          <Tooltip placement="bottom" title="添加集合">
+            <Button
+              type="primary"
+              style={{ marginLeft: '16px' }}
+              onClick={() => this.showColModal('add')}
+              className="btn-filter"
+            >
+              添加集合
+            </Button>
+          </Tooltip>
+        </div>
+        <div className="tree-wrapper" style={{ maxHeight: parseInt(document.body.clientHeight) - headHeight + 'px'}}>
+          <Tree
+            className="col-list-tree"
+            defaultExpandedKeys={currentKes.expands}
+            defaultSelectedKeys={currentKes.selects}
+            expandedKeys={currentKes.expands}
+            selectedKeys={currentKes.selects}
+            onSelect={this.onSelect}
+            autoExpandParent
+            draggable
+            onExpand={this.onExpand}
+            onDrop={this.onDrop}
+          >
+            {list.map(col => (
+              <TreeNode
+                key={'col_' + col._id}
+                title={
+                  <div className="menu-title">
+                    <span>
+                      <Icon type="folder-open" style={{ marginRight: 5 }} />
+                      <span>{col.name}</span>
+                    </span>
+                    <div className="btns">
+                      <Tooltip title="删除集合">
+                        <Icon
+                          type="delete"
+                          style={{ display: list.length > 1 ? '' : 'none' }}
+                          className="interface-delete-icon"
+                          onClick={() => {
+                            this.showDelColConfirm(col._id);
+                          }}
+                        />
+                      </Tooltip>
+                      <Tooltip title="编辑集合">
+                        <Icon
+                          type="edit"
+                          className="interface-delete-icon"
+                          onClick={e => {
+                            e.stopPropagation();
+                            this.showColModal('edit', col);
+                          }}
+                        />
+                      </Tooltip>
+                      <Tooltip title="导入接口">
+                        <Icon
+                          type="plus"
+                          className="interface-delete-icon"
+                          onClick={e => {
+                            e.stopPropagation();
+                            this.showImportInterfaceModal(col._id);
+                          }}
+                        />
+                      </Tooltip>
+                      <Tooltip title="克隆集合">
+                        <Icon
+                          type="copy"
+                          className="interface-delete-icon"
+                          onClick={e => {
+                            e.stopPropagation();
+                            this.copyInterface(col);
+                          }}
+                        />
+                      </Tooltip>
+                    </div>
+                    {/*<Dropdown overlay={menu(col)} trigger={['click']} onClick={e => e.stopPropagation()}>
+                      <Icon className="opts-icon" type='ellipsis'/>
+                    </Dropdown>*/}
+                  </div>
+                }
+              >
+                {col.caseList.map(itemInterfaceColCreate)}
+              </TreeNode>
+            ))}
+          </Tree>
+        </div>
+        <ColModalForm
+          ref={this.saveFormRef}
+          type={colModalType}
+          visible={colModalVisible}
+          onCancel={() => {
+            this.setState({ colModalVisible: false });
+          }}
+          onCreate={this.addorEditCol}
+        />
+
+        <Modal
+          title="导入接口到集合"
+          visible={importInterVisible}
+          onOk={this.handleImportOk}
+          onCancel={this.handleImportCancel}
+          className="import-case-modal"
+          width={800}
+        >
+          <ImportInterface currProjectId={currProjectId} selectInterface={this.selectInterface} />
+        </Modal>
+      </div>
+    );
+  }
+}
--- a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss
+++ b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss
@@ -0,0 +1,186 @@
+.col-list-tree {
+  line-height: 25px;
+  .ant-tree-node-content-wrapper {
+    width: calc(100% - 28px);
+  }
+  .opts-icon,
+  .case-delete-icon {
+    line-height: 25px;
+    width: 30px;
+    font-weight: bold;
+  }
+  .opts-icon:hover,
+  .case-delete-icon:hover {
+    color: #2395f1;
+  }
+  .menu-title {
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+    .casename {
+      overflow: hidden;
+    }
+    .case-delete-icon {
+      margin-left: 5px;
+      display: none;
+    }
+    .btns {
+      display: none;
+    }
+  }
+  .menu-title:hover {
+    .case-delete-icon {
+      display: block;
+    }
+    .btns {
+      display: block;
+    }
+  }
+}
+
+.container {
+  display: block;
+  width: 100%;
+  padding: 10px;
+}
+/*
+ * note that styling gu-mirror directly is a bad practice because it's too generic.
+ * you're better off giving the draggable elements a unique class and styling that directly!
+ */
+.gu-mirror {
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.2);
+  transition: opacity 0.4s ease-in-out;
+}
+.container div {
+  cursor: move;
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+  margin-bottom: 10px;
+}
+.container div:last-child {
+  margin-bottom: 0;
+}
+.gu-mirror {
+  cursor: grabbing;
+  cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+}
+.container .ex-moved {
+  background-color: #e74c3c;
+}
+.container.ex-over {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.handle {
+  padding: 0 5px;
+  margin-right: 5px;
+  background-color: rgba(0, 0, 0, 0.4);
+  cursor: move;
+}
+.report {
+  min-height: 500px;
+  .case-report-pane {
+    margin-top: 10px;
+  }
+  .url {
+    overflow: auto;
+  }
+  .case-report {
+    margin: 10px;
+
+    .case-report-title {
+      font-size: 14px;
+      font-weight: bold;
+      text-align: right;
+      padding-right: 20px;
+    }
+
+    pre {
+      white-space: pre-wrap;
+    }
+  }
+}
+
+.interface-col {
+  padding: 24px;
+  .interface-col-table-header {
+    background-color: rgb(238, 238, 238);
+    height: 50px;
+    line-height: 50px;
+    text-align: left;
+  }
+
+  .interface-col-table-body {
+    height: 50px;
+    line-height: 50px;
+  }
+
+  .interface-col-table-header th {
+    padding-left: 5px;
+  }
+
+  .interface-col-table-body td {
+    padding-left: 5px;
+  }
+
+  .interface-col-table-action button {
+    margin-right: 5px;
+    padding: 5px 10px;
+    max-width: 90px;
+  }
+  .component-label-wrapper {
+    margin-top: -10px;
+    margin-bottom: 15px;
+  }
+}
+
+.import-case-modal {
+  .ant-modal-body {
+    max-height: 800px;
+    overflow-y: scroll;
+  }
+
+  .select-project {
+    margin-bottom: 16px;
+  }
+}
+
+.autoTestsModal {
+  .autoTestUrl {
+    overflow: auto;
+    background-color: #f5f5f5;
+    border: 1px solid #f1f1f1ce;
+    padding: 16px;
+  }
+
+  .autoTestMsg {
+    padding: 8px 0 16px;
+    font-size: 12px;
+  }
+
+  .copy-btn {
+    margin-left: 16px;
+    height: 50px;
+    font-size: 14px;
+    width: 70px;
+  }
+
+  .ant-modal-body {
+    padding-top: 32px;
+  }
+
+  .row {
+    margin-bottom: 0.24rem;
+  }
+
+  .label {
+    text-align: left;
+  }
+}
+
+.tree-wrapper {
+  min-height: 500px;
+  overflow-y: scroll;
+}
--- a/client/containers/Project/Interface/InterfaceList/AddInterfaceCatForm.js
+++ b/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);
--- a/client/containers/Project/Interface/InterfaceList/AddInterfaceForm.js
+++ b/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);
--- a/client/containers/Project/Interface/InterfaceList/Edit.js
+++ b/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);
--- a/client/containers/Project/Interface/InterfaceList/Edit.scss
+++ b/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;
+}
+
--- a/client/containers/Project/Interface/InterfaceList/InterfaceContent.js
+++ b/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);
--- a/client/containers/Project/Interface/InterfaceList/InterfaceEditForm.js
+++ b/client/containers/Project/Interface/InterfaceList/InterfaceEditForm.js
--- a/client/containers/Project/Interface/InterfaceList/InterfaceList.js
+++ b/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;
--- a/client/containers/Project/Interface/InterfaceList/InterfaceMenu.js
+++ b/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);
--- a/client/containers/Project/Interface/InterfaceList/Run/AddColModal.js
+++ b/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>
+    );
+  }
+}
--- a/client/containers/Project/Interface/InterfaceList/Run/Run.js
+++ b/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>
+    );
+  }
+}
--- a/client/containers/Project/Interface/InterfaceList/Run/Run.scss
+++ b/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);
+    }
+  }
+}
--- a/client/containers/Project/Interface/InterfaceList/View.js
+++ b/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
--- a/Show More
+++ b/Show More