fork from bc4552c5a8

2024-03-01 20:28:14 +08:00
commit 076c21dc36
491 changed files with 84482 additions and 0 deletions
--- 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 };