fork from bc4552c5a8

client/containers/AddProject/AddProject.js

@@ -0,0 +1,215 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Button, Form, Input, Icon, Tooltip, Select, message, Row, Col, Radio } from 'antd';
+import { addProject } from '../../reducer/modules/project.js';
+import { fetchGroupList } from '../../reducer/modules/group.js';
+import { autobind } from 'core-decorators';
+import { setBreadcrumb } from '../../reducer/modules/user';
+const { TextArea } = Input;
+const FormItem = Form.Item;
+const Option = Select.Option;
+const RadioGroup = Radio.Group;
+import { pickRandomProperty, handlePath, nameLengthLimit } from '../../common';
+import constants from '../../constants/variable.js';
+import { withRouter } from 'react-router';
+import './Addproject.scss';
+
+const formItemLayout = {
+  labelCol: {
+    lg: { span: 3 },
+    xs: { span: 24 },
+    sm: { span: 6 }
+  },
+  wrapperCol: {
+    lg: { span: 21 },
+    xs: { span: 24 },
+    sm: { span: 14 }
+  },
+  className: 'form-item'
+};
+
+@connect(
+  state => {
+    return {
+      groupList: state.group.groupList,
+      currGroup: state.group.currGroup
+    };
+  },
+  {
+    fetchGroupList,
+    addProject,
+    setBreadcrumb
+  }
+)
+@withRouter
+class ProjectList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      groupList: [],
+      currGroupId: null
+    };
+  }
+  static propTypes = {
+    groupList: PropTypes.array,
+    form: PropTypes.object,
+    currGroup: PropTypes.object,
+    addProject: PropTypes.func,
+    history: PropTypes.object,
+    setBreadcrumb: PropTypes.func,
+    fetchGroupList: PropTypes.func
+  };
+
+  handlePath = e => {
+    let val = e.target.value;
+    this.props.form.setFieldsValue({
+      basepath: handlePath(val)
+    });
+  };
+
+  // 确认添加项目
+  @autobind
+  handleOk(e) {
+    const { form, addProject } = this.props;
+    e.preventDefault();
+    form.validateFields((err, values) => {
+      if (!err) {
+        values.group_id = values.group;
+        values.icon = constants.PROJECT_ICON[0];
+        values.color = pickRandomProperty(constants.PROJECT_COLOR);
+        addProject(values).then(res => {
+          if (res.payload.data.errcode == 0) {
+            form.resetFields();
+            message.success('创建成功! ');
+            this.props.history.push('/project/' + res.payload.data.data._id + '/interface/api');
+          }
+        });
+      }
+    });
+  }
+
+  async UNSAFE_componentWillMount() {
+    this.props.setBreadcrumb([{ name: '新建项目' }]);
+    if (!this.props.currGroup._id) {
+      await this.props.fetchGroupList();
+    }
+    if (this.props.groupList.length === 0) {
+      return null;
+    }
+    this.setState({
+      currGroupId: this.props.currGroup._id ? this.props.currGroup._id : this.props.groupList[0]._id
+    });
+    this.setState({ groupList: this.props.groupList });
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <div className="g-row">
+        <div className="g-row m-container">
+          <Form>
+            <FormItem {...formItemLayout} label="项目名称">
+              {getFieldDecorator('name', {
+                rules: nameLengthLimit('项目')
+              })(<Input />)}
+            </FormItem>
+
+            <FormItem {...formItemLayout} label="所属分组">
+              {getFieldDecorator('group', {
+                initialValue: this.state.currGroupId + '',
+                rules: [
+                  {
+                    required: true,
+                    message: '请选择项目所属的分组!'
+                  }
+                ]
+              })(
+                <Select>
+                  {this.state.groupList.map((item, index) => (
+                    <Option
+                      disabled={
+                        !(item.role === 'dev' || item.role === 'owner' || item.role === 'admin')
+                      }
+                      value={item._id.toString()}
+                      key={index}
+                    >
+                      {item.group_name}
+                    </Option>
+                  ))}
+                </Select>
+              )}
+            </FormItem>
+
+            <hr className="breakline" />
+
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  基本路径&nbsp;
+                  <Tooltip title="接口基本路径，为空是根路径">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+            >
+              {getFieldDecorator('basepath', {
+                rules: [
+                  {
+                    required: false,
+                    message: '请输入项目基本路径'
+                  }
+                ]
+              })(<Input onBlur={this.handlePath} />)}
+            </FormItem>
+
+            <FormItem {...formItemLayout} label="描述">
+              {getFieldDecorator('desc', {
+                rules: [
+                  {
+                    required: false,
+                    message: '描述不超过144字!',
+                    max: 144
+                  }
+                ]
+              })(<TextArea rows={4} />)}
+            </FormItem>
+
+            <FormItem {...formItemLayout} label="权限">
+              {getFieldDecorator('project_type', {
+                rules: [
+                  {
+                    required: true
+                  }
+                ],
+                initialValue: 'private'
+              })(
+                <RadioGroup>
+                  <Radio value="private" className="radio">
+                    <Icon type="lock" />私有<br />
+                    <span className="radio-desc">只有组长和项目开发者可以索引并查看项目信息</span>
+                  </Radio>
+                  <br />
+                  {/* <Radio value="public" className="radio">
+                    <Icon type="unlock" />公开<br />
+                    <span className="radio-desc">任何人都可以索引并查看项目信息</span>
+                  </Radio> */}
+                </RadioGroup>
+              )}
+            </FormItem>
+          </Form>
+          <Row>
+            <Col sm={{ offset: 6 }} lg={{ offset: 3 }}>
+              <Button className="m-btn" icon="plus" type="primary" onClick={this.handleOk}>
+                创建项目
+              </Button>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Form.create()(ProjectList);

client/containers/AddProject/Addproject.scss

@@ -0,0 +1,31 @@
+@import '../../styles/common.scss';
+
+.m-container {
+  margin: .24rem auto !important;
+  padding: .24rem !important;
+  background-color: #fff;
+}
+
+.form-item {
+  margin-bottom: .16rem;
+}
+
+.breakline {
+  margin-top: .18rem;
+  margin-bottom: .18rem;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+}
+
+
+.radio {
+  font-weight: 600;
+}
+
+.radio-desc {
+  margin-left: .22rem;
+  position: relative;
+  font-weight: normal;
+  top: -.08rem;
+  color: #919191;
+}

client/containers/DevTools/DevTools.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+
+module.exports = createDevTools(
+  <DockMonitor
+    toggleVisibilityKey="ctrl-h"
+    changePositionKey="ctrl-q"
+    defaultIsVisible={false}
+  >
+    <LogMonitor />
+  </DockMonitor>
+);

client/containers/Follows/Follows.js

@@ -0,0 +1,88 @@
+import React, { PureComponent as Component } from 'react';
+import './Follows.scss';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Row, Col } from 'antd';
+import { getFollowList } from '../../reducer/modules/follow';
+import { setBreadcrumb } from '../../reducer/modules/user';
+import ProjectCard from '../../components/ProjectCard/ProjectCard.js';
+import ErrMsg from '../../components/ErrMsg/ErrMsg.js';
+
+@connect(
+  state => {
+    return {
+      data: state.follow.data,
+      uid: state.user.uid
+    };
+  },
+  {
+    getFollowList,
+    setBreadcrumb
+  }
+)
+class Follows extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: []
+    };
+  }
+  static propTypes = {
+    getFollowList: PropTypes.func,
+    setBreadcrumb: PropTypes.func,
+    uid: PropTypes.number
+  };
+
+  receiveRes = () => {
+    this.props.getFollowList(this.props.uid).then(res => {
+      if (res.payload.data.errcode === 0) {
+        this.setState({
+          data: res.payload.data.data.list
+        });
+      }
+    });
+  };
+
+  async UNSAFE_componentWillMount() {
+    this.props.setBreadcrumb([{ name: '我的关注' }]);
+    this.props.getFollowList(this.props.uid).then(res => {
+      if (res.payload.data.errcode === 0) {
+        this.setState({
+          data: res.payload.data.data.list
+        });
+      }
+    });
+  }
+
+  render() {
+    let data = this.state.data;
+    data = data.sort((a, b) => {
+      return b.up_time - a.up_time;
+    });
+    return (
+      <div>
+        <div className="g-row" style={{ paddingLeft: '32px', paddingRight: '32px' }}>
+          <Row gutter={16} className="follow-box pannel-without-tab">
+            {data.length ? (
+              data.map((item, index) => {
+                return (
+                  <Col xs={6} md={4} xl={3} key={index}>
+                    <ProjectCard
+                      projectData={item}
+                      inFollowPage={true}
+                      callbackResult={this.receiveRes}
+                    />
+                  </Col>
+                );
+              })
+            ) : (
+              <ErrMsg type="noFollow" />
+            )}
+          </Row>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Follows;

client/containers/Follows/Follows.scss

@@ -0,0 +1,9 @@
+@import '../../styles/common.scss';
+@import '../../styles/mixin.scss';
+
+
+.follow-box{
+  padding: 24px;
+  background-color: #fff;
+  margin-top: .24rem;
+}

client/containers/Group/Group.js

@@ -0,0 +1,123 @@
+import React, { PureComponent as Component } from 'react';
+import GroupList from './GroupList/GroupList.js';
+import ProjectList from './ProjectList/ProjectList.js';
+import MemberList from './MemberList/MemberList.js';
+import GroupLog from './GroupLog/GroupLog.js';
+import GroupSetting from './GroupSetting/GroupSetting.js';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Route, Switch, Redirect } from 'react-router-dom';
+import { Tabs, Layout, Spin } from 'antd';
+const { Content, Sider } = Layout;
+const TabPane = Tabs.TabPane;
+import { fetchNewsData } from '../../reducer/modules/news.js';
+import {
+  setCurrGroup
+} from '../../reducer/modules/group';
+import './Group.scss';
+import axios from 'axios'
+
+@connect(
+  state => {
+    return {
+      curGroupId: state.group.currGroup._id,
+      curUserRole: state.user.role,
+      curUserRoleInGroup: state.group.currGroup.role || state.group.role,
+      currGroup: state.group.currGroup
+    };
+  },
+  {
+    fetchNewsData: fetchNewsData,
+    setCurrGroup
+  }
+)
+export default class Group extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      groupId: -1
+    }
+  }
+
+  async componentDidMount(){
+    let r = await axios.get('/api/group/get_mygroup')
+    try{
+      let group = r.data.data;
+      this.setState({
+        groupId: group._id
+      })
+      this.props.setCurrGroup(group)
+    }catch(e){
+      console.error(e)
+    }
+  }
+
+  static propTypes = {
+    fetchNewsData: PropTypes.func,
+    curGroupId: PropTypes.number,
+    curUserRole: PropTypes.string,
+    currGroup: PropTypes.object,
+    curUserRoleInGroup: PropTypes.string,
+    setCurrGroup: PropTypes.func
+  };
+  // onTabClick=(key)=> {
+  //   // if (key == 3) {
+  //   //   this.props.fetchNewsData(this.props.curGroupId, "group", 1, 10)
+  //   // }
+  // }
+  render() {
+    if(this.state.groupId === -1)return <Spin />
+    const GroupContent = (
+      <Layout style={{ minHeight: 'calc(100vh - 100px)', marginLeft: '24px', marginTop: '24px' }}>
+        <Sider style={{ height: '100%' }} width={300}>
+          <div className="logo" />
+          <GroupList />
+        </Sider>
+        <Layout>
+          <Content
+            style={{
+              height: '100%',
+              margin: '0 24px 0 16px',
+              overflow: 'initial',
+              backgroundColor: '#fff'
+            }}
+          >
+            <Tabs type="card" className="m-tab tabs-large" style={{ height: '100%' }}>
+              <TabPane tab="项目列表" key="1">
+                <ProjectList />
+              </TabPane>
+              {this.props.currGroup.type === 'public' ? (
+                <TabPane tab="成员列表" key="2">
+                  <MemberList />
+                </TabPane>
+              ) : null}
+              {['admin', 'owner', 'guest', 'dev'].indexOf(this.props.curUserRoleInGroup) > -1 ||
+              this.props.curUserRole === 'admin' ? (
+                <TabPane tab="分组动态" key="3">
+                  <GroupLog />
+                </TabPane>
+              ) : (
+                ''
+              )}
+              {(this.props.curUserRole === 'admin' || this.props.curUserRoleInGroup === 'owner') &&
+              this.props.currGroup.type !== 'private' ? (
+                <TabPane tab="分组设置" key="4">
+                  <GroupSetting />
+                </TabPane>
+              ) : null}
+            </Tabs>
+          </Content>
+        </Layout>
+      </Layout>
+    );
+    return (
+      <div className="projectGround">
+        <Switch>
+          <Redirect exact from="/group" to={"/group/" + this.state.groupId} />
+          <Route path="/group/:groupId" render={() => GroupContent} />
+        </Switch>
+      </div>
+    );
+  }
+}

client/containers/Group/Group.scss

@@ -0,0 +1,10 @@
+@import '../../styles/mixin.scss';
+
+.g-doc {
+  @include row-width-limit;
+  margin: 0 auto .24rem;
+}
+.news-box .news-timeline .ant-timeline-item .ant-timeline-item-content{
+  min-width: 300px !important;
+  width: 75% !important;
+}

client/containers/Group/GroupList/GroupList.js

@@ -0,0 +1,319 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Icon, Modal, Input, message,Spin,  Row, Menu, Col, Popover, Tooltip } from 'antd';
+import { autobind } from 'core-decorators';
+import axios from 'axios';
+import { withRouter } from 'react-router-dom';
+const { TextArea } = Input;
+const Search = Input.Search;
+import UsernameAutoComplete from '../../../components/UsernameAutoComplete/UsernameAutoComplete.js';
+import GuideBtns from '../../../components/GuideBtns/GuideBtns.js';
+import { fetchNewsData } from '../../../reducer/modules/news.js';
+import {
+  fetchGroupList,
+  setCurrGroup,
+  setGroupList,
+  fetchGroupMsg
+} from '../../../reducer/modules/group.js';
+import _ from 'underscore';
+
+import './GroupList.scss';
+
+const tip = (
+  <div className="title-container">
+    <h3 className="title">欢迎使用 YApi ~</h3>
+    <p>
+      这里的 <b>“个人空间”</b>{' '}
+      是你自己才能看到的分组，你拥有这个分组的全部权限，可以在这个分组里探索 YApi 的功能。
+    </p>
+  </div>
+);
+
+@connect(
+  state => ({
+    groupList: state.group.groupList,
+    currGroup: state.group.currGroup,
+    curUserRole: state.user.role,
+    curUserRoleInGroup: state.group.currGroup.role || state.group.role,
+    studyTip: state.user.studyTip,
+    study: state.user.study
+  }),
+  {
+    fetchGroupList,
+    setCurrGroup,
+    setGroupList,
+    fetchNewsData,
+    fetchGroupMsg
+  }
+)
+@withRouter
+export default class GroupList extends Component {
+  static propTypes = {
+    groupList: PropTypes.array,
+    currGroup: PropTypes.object,
+    fetchGroupList: PropTypes.func,
+    setCurrGroup: PropTypes.func,
+    setGroupList: PropTypes.func,
+    match: PropTypes.object,
+    history: PropTypes.object,
+    curUserRole: PropTypes.string,
+    curUserRoleInGroup: PropTypes.string,
+    studyTip: PropTypes.number,
+    study: PropTypes.bool,
+    fetchNewsData: PropTypes.func,
+    fetchGroupMsg: PropTypes.func
+  };
+
+  state = {
+    addGroupModalVisible: false,
+    newGroupName: '',
+    newGroupDesc: '',
+    currGroupName: '',
+    currGroupDesc: '',
+    groupList: [],
+    owner_uids: []
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  async UNSAFE_componentWillMount() {
+    const groupId = !isNaN(this.props.match.params.groupId)
+      ? parseInt(this.props.match.params.groupId)
+      : 0;
+    await this.props.fetchGroupList();
+    let currGroup = false;
+    if (this.props.groupList.length && groupId) {
+      for (let i = 0; i < this.props.groupList.length; i++) {
+        if (this.props.groupList[i]._id === groupId) {
+          currGroup = this.props.groupList[i];
+        }
+      }
+    } else if (!groupId && this.props.groupList.length) {
+      this.props.history.push(`/group/${this.props.groupList[0]._id}`);
+    }
+    if (!currGroup) {
+      currGroup = this.props.groupList[0] || { group_name: '', group_desc: '' };
+      this.props.history.replace(`${currGroup._id}`);
+    }
+    this.setState({ groupList: this.props.groupList });
+    this.props.setCurrGroup(currGroup);
+  }
+
+  @autobind
+  showModal() {
+    this.setState({
+      addGroupModalVisible: true
+    });
+  }
+  @autobind
+  hideModal() {
+    this.setState({
+      newGroupName: '',
+      group_name: '',
+      owner_uids: [],
+      addGroupModalVisible: false
+    });
+  }
+  @autobind
+  async addGroup() {
+    const { newGroupName: group_name, newGroupDesc: group_desc, owner_uids } = this.state;
+    const res = await axios.post('/api/group/add', { group_name, group_desc, owner_uids });
+    if (!res.data.errcode) {
+      this.setState({
+        newGroupName: '',
+        group_name: '',
+        owner_uids: [],
+        addGroupModalVisible: false
+      });
+      await this.props.fetchGroupList();
+      this.setState({ groupList: this.props.groupList });
+      this.props.fetchGroupMsg(this.props.currGroup._id);
+      this.props.fetchNewsData(this.props.currGroup._id, 'group', 1, 10);
+    } else {
+      message.error(res.data.errmsg);
+    }
+  }
+  @autobind
+  async editGroup() {
+    const { currGroupName: group_name, currGroupDesc: group_desc } = this.state;
+    const id = this.props.currGroup._id;
+    const res = await axios.post('/api/group/up', { group_name, group_desc, id });
+    if (res.data.errcode) {
+      message.error(res.data.errmsg);
+    } else {
+      await this.props.fetchGroupList();
+
+      this.setState({ groupList: this.props.groupList });
+      const currGroup = _.find(this.props.groupList, group => {
+        return +group._id === +id;
+      });
+
+      this.props.setCurrGroup(currGroup);
+      // this.props.setCurrGroup({ group_name, group_desc, _id: id });
+      this.props.fetchGroupMsg(this.props.currGroup._id);
+      this.props.fetchNewsData(this.props.currGroup._id, 'group', 1, 10);
+    }
+  }
+  @autobind
+  inputNewGroupName(e) {
+    this.setState({ newGroupName: e.target.value });
+  }
+  @autobind
+  inputNewGroupDesc(e) {
+    this.setState({ newGroupDesc: e.target.value });
+  }
+
+  @autobind
+  selectGroup(e) {
+    const groupId = e.key;
+    //const currGroup = this.props.groupList.find((group) => { return +group._id === +groupId });
+    const currGroup = _.find(this.props.groupList, group => {
+      return +group._id === +groupId;
+    });
+    this.props.setCurrGroup(currGroup);
+    this.props.history.replace(`${currGroup._id}`);
+    this.props.fetchNewsData(groupId, 'group', 1, 10);
+  }
+
+  @autobind
+  onUserSelect(uids) {
+    this.setState({
+      owner_uids: uids
+    });
+  }
+
+  @autobind
+  searchGroup(e, value) {
+    const v = value || e.target.value;
+    const { groupList } = this.props;
+    if (v === '') {
+      this.setState({ groupList });
+    } else {
+      this.setState({
+        groupList: groupList.filter(group => new RegExp(v, 'i').test(group.group_name))
+      });
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // GroupSetting 组件设置的分组信息，通过redux同步到左侧分组菜单中
+    if (this.props.groupList !== nextProps.groupList) {
+      this.setState({
+        groupList: nextProps.groupList
+      });
+    }
+  }
+
+  render() {
+    const { currGroup } = this.props;
+    return (
+      <div className="m-group">
+        {!this.props.study ? <div className="study-mask" /> : null}
+        <div className="group-bar">
+          <div className="curr-group">
+            <div className="curr-group-name">
+              <span className="name">{currGroup.group_name}</span>
+              <Tooltip title="添加分组">
+                <a className="editSet">
+                  <Icon className="btn" type="folder-add" onClick={this.showModal} />
+                </a>
+              </Tooltip>
+            
+            </div>
+            <div className="curr-group-desc">简介: {currGroup.group_desc}</div>
+          </div>
+
+          <div className="group-operate">
+            <div className="search">
+              <Search
+                placeholder="搜索分类"
+                onChange={this.searchGroup}
+                onSearch={v => this.searchGroup(null, v)}
+              />
+            </div>
+          </div>
+          {this.state.groupList.length === 0 && <Spin style={{
+            marginTop: 20,
+            display: 'flex',
+            justifyContent: 'center'
+          }} />}
+          <Menu
+            className="group-list"
+            mode="inline"
+            onClick={this.selectGroup}
+            selectedKeys={[`${currGroup._id}`]}
+          >
+            {this.state.groupList.map(group => {
+              if (group.type === 'private') {
+                return (
+                  <Menu.Item
+                    key={`${group._id}`}
+                    className="group-item"
+                    style={{ zIndex: this.props.studyTip === 0 ? 3 : 1 }}
+                  >
+                    <Icon type="user" />
+                    <Popover
+                      overlayClassName="popover-index"
+                      content={<GuideBtns />}
+                      title={tip}
+                      placement="right"
+                      visible={this.props.studyTip === 0 && !this.props.study}
+                    >
+                      {group.group_name}
+                    </Popover>
+                  </Menu.Item>
+                );
+              } else {
+                return (
+                  <Menu.Item key={`${group._id}`} className="group-item">
+                    <Icon type="folder-open" />
+                    {group.group_name}
+                  </Menu.Item>
+                );
+              }
+            })}
+          </Menu>
+        </div>
+        {this.state.addGroupModalVisible ? (
+          <Modal
+            title="添加分组"
+            visible={this.state.addGroupModalVisible}
+            onOk={this.addGroup}
+            onCancel={this.hideModal}
+            className="add-group-modal"
+          >
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label">分组名：</div>
+              </Col>
+              <Col span="15">
+                <Input placeholder="请输入分组名称" onChange={this.inputNewGroupName} />
+              </Col>
+            </Row>
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label">简介：</div>
+              </Col>
+              <Col span="15">
+                <TextArea rows={3} placeholder="请输入分组描述" onChange={this.inputNewGroupDesc} />
+              </Col>
+            </Row>
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label">组长：</div>
+              </Col>
+              <Col span="15">
+                <UsernameAutoComplete callbackState={this.onUserSelect} />
+              </Col>
+            </Row>
+          </Modal>
+        ) : (
+          ''
+        )}
+      </div>
+    );
+  }
+}

client/containers/Group/GroupList/GroupList.scss

@@ -0,0 +1,147 @@
+@import '../../../styles/mixin.scss';
+
+.group-bar {
+  min-height: 5rem;
+  .curr-group {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+             "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+             SimSun, sans-serif;
+    background-color: $color-bg-dark;
+    color: $color-white;
+    padding: .24rem .24rem 0;
+    .curr-group-name {
+      color: $color-white;
+      font-size: .22rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .text {
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: 140px;
+        font-weight: 200;
+        vertical-align: bottom;
+      }
+      .name{
+        display: inline-block;
+        // width: 117px;
+        margin-right: 20px;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+      }
+      .editSet{
+        color: rgba(255, 255, 255, 0.85);
+        &:hover{
+          color: #2395f1;
+        }
+      }
+      .ant-dropdown-link{
+        float: right;
+        display: block;
+        color: rgba(255, 255, 255, 0.85);
+        &:hover{
+          color: #2395f1;
+        }
+      }
+      .operate {
+        font-size: 0;
+        width: 150px;
+        display: inline-block;
+        i{
+          margin-left: 4px;
+        }
+        ::-webkit-scrollbar {
+          width: 0px;
+        }
+      }
+    }
+    .curr-group-desc {
+      color: $color-white-secondary;
+      font-size: 13px;
+      max-height: 54px;
+      margin-top: .16rem;
+      text-overflow:ellipsis;
+      overflow:hidden;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+    }
+    .delete-group, .edit-group {
+      font-size: 14px;
+      margin-left: .08rem;
+      cursor: pointer;
+      border: 1px solid $color-white;
+      padding: 6px 12px;
+      border-radius: 4px;
+      transition: all .2s;
+    }
+    .delete-group:hover, .edit-group:hover {
+      background-color: $color-blue;
+      border: 1px solid $color-blue;
+    }
+  }
+  .group-operate {
+    padding: 16px 24px;
+    display: flex;
+    justify-content: space-around;
+    background-color: $color-bg-dark;
+    .search {
+      flex-grow: 1;
+    }
+    .ant-input {
+      color: $color-white;
+      background-color: $color-bg-dark;
+    }
+    .ant-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      color: $color-white-secondary;
+    }
+    .ant-input-suffix {
+      color: $color-white;
+    }
+  }
+  .group-list {
+    overflow-x: hidden;
+    border-bottom: 1px solid #e9e9e9;
+    padding-bottom: 24px;
+    border: none;
+    .group-item {
+      // height: 48px;
+      // line-height: 48px;
+      // padding: 0 24px;
+      font-size: 14px;
+    }
+    .group-item:hover {
+      // background: #34495E;
+      // color: $color-white;
+    }
+    .group-item.selected {
+      // background: #34495E;
+    }
+    .group-name {
+      float: left;
+    }
+    .group-edit {
+      float: right;
+      font-size: 18px;
+    }
+  }
+}
+.add-group-modal {
+  .modal-input {
+    margin: 24px;
+  }
+  .label {
+    text-align: right;
+    line-height: 28px;
+  }
+}
+.user-menu{
+  a{
+    &:hover{
+      color: #ccc;
+    }
+  }
+}

client/containers/Group/GroupLog/GroupLog.js

@@ -0,0 +1,32 @@
+import React, { PureComponent as Component } from 'react';
+import TimeTree from '../../../components/TimeLine/TimeLine';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+// import { Button } from 'antd'
+@connect(state => {
+  return {
+    uid: state.user.uid + '',
+    curGroupId: state.group.currGroup._id
+  };
+})
+class GroupLog extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    uid: PropTypes.string,
+    match: PropTypes.object,
+    curGroupId: PropTypes.number
+  };
+  render() {
+    return (
+      <div className="g-row">
+        <section className="news-box m-panel">
+          <TimeTree type={'group'} typeid={this.props.curGroupId} />
+        </section>
+      </div>
+    );
+  }
+}
+
+export default GroupLog;

client/containers/Group/GroupSetting/GroupSetting.js

@@ -0,0 +1,306 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Input, Button, message, Icon, Card, Alert, Modal, Switch, Row, Col, Tooltip } from 'antd';
+import { fetchNewsData } from '../../../reducer/modules/news.js';
+import {
+  changeGroupMsg,
+  fetchGroupList,
+  setCurrGroup,
+  fetchGroupMsg,
+  updateGroupList,
+  deleteGroup
+} from '../../../reducer/modules/group.js';
+const { TextArea } = Input;
+import { trim } from '../../../common.js';
+import _ from 'underscore';
+import './GroupSetting.scss';
+const confirm = Modal.confirm;
+
+@connect(
+  state => {
+    return {
+      groupList: state.group.groupList,
+      currGroup: state.group.currGroup,
+      curUserRole: state.user.role
+    };
+  },
+  {
+    changeGroupMsg,
+    fetchGroupList,
+    setCurrGroup,
+    fetchGroupMsg,
+    fetchNewsData,
+    updateGroupList,
+    deleteGroup
+  }
+)
+class GroupSetting extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currGroupDesc: '',
+      currGroupName: '',
+      showDangerOptions: false,
+      custom_field1_name: '',
+      custom_field1_enable: false,
+      custom_field1_rule: false
+    };
+  }
+
+  static propTypes = {
+    currGroup: PropTypes.object,
+    curUserRole: PropTypes.string,
+    changeGroupMsg: PropTypes.func,
+    fetchGroupList: PropTypes.func,
+    setCurrGroup: PropTypes.func,
+    fetchGroupMsg: PropTypes.func,
+    fetchNewsData: PropTypes.func,
+    updateGroupList: PropTypes.func,
+    deleteGroup: PropTypes.func,
+    groupList: PropTypes.array
+  };
+
+  initState(props) {
+    this.setState({
+      currGroupName: props.currGroup.group_name,
+      currGroupDesc: props.currGroup.group_desc,
+      custom_field1_name: props.currGroup.custom_field1.name,
+      custom_field1_enable: props.currGroup.custom_field1.enable
+    });
+  }
+
+  // 修改分组名称
+  changeName = e => {
+    this.setState({
+      currGroupName: e.target.value
+    });
+  };
+  // 修改分组描述
+  changeDesc = e => {
+    this.setState({
+      currGroupDesc: e.target.value
+    });
+  };
+
+  // 修改自定义字段名称
+  changeCustomName = e => {
+    let custom_field1_rule = this.state.custom_field1_enable ? !e.target.value : false;
+    this.setState({
+      custom_field1_name: e.target.value,
+      custom_field1_rule
+    });
+  };
+
+  // 修改开启状态
+  changeCustomEnable = e => {
+    let custom_field1_rule = e ? !this.state.custom_field1_name : false;
+    this.setState({
+      custom_field1_enable: e,
+      custom_field1_rule
+    });
+  };
+
+  UNSAFE_componentWillMount() {
+    // console.log('custom_field1',this.props.currGroup.custom_field1)
+    this.initState(this.props);
+  }
+
+  // 点击“查看危险操作”按钮
+  toggleDangerOptions = () => {
+    // console.log(this.state.showDangerOptions);
+    this.setState({
+      showDangerOptions: !this.state.showDangerOptions
+    });
+  };
+
+  // 编辑分组信息
+  editGroup = async () => {
+    const id = this.props.currGroup._id;
+    if (this.state.custom_field1_rule) {
+      return;
+    }
+    const res = await this.props.changeGroupMsg({
+      group_name: this.state.currGroupName,
+      group_desc: this.state.currGroupDesc,
+      custom_field1: {
+        name: this.state.custom_field1_name,
+        enable: this.state.custom_field1_enable
+      },
+      id: this.props.currGroup._id
+    });
+
+    if (!res.payload.data.errcode) {
+      message.success('修改成功！');
+      await this.props.fetchGroupList(this.props.groupList);
+      this.props.updateGroupList(this.props.groupList);
+      const currGroup = _.find(this.props.groupList, group => {
+        return +group._id === +id;
+      });
+      this.props.setCurrGroup(currGroup);
+      this.props.fetchGroupMsg(this.props.currGroup._id);
+      this.props.fetchNewsData(this.props.currGroup._id, 'group', 1, 10);
+    }
+  };
+
+  // 删除分组
+
+  deleteGroup = async () => {
+    const that = this;
+    const { currGroup } = that.props;
+    const res = await this.props.deleteGroup({ id: currGroup._id });
+    if (!res.payload.data.errcode) {
+      message.success('删除成功');
+      await that.props.fetchGroupList();
+      const currGroup = that.props.groupList[0] || { group_name: '', group_desc: '' };
+      that.setState({ groupList: that.props.groupList });
+      that.props.setCurrGroup(currGroup);
+    }
+  };
+
+  // 删除分组的二次确认
+  showConfirm = () => {
+    const that = this;
+    confirm({
+      title: '确认删除 ' + that.props.currGroup.group_name + ' 分组吗？',
+      content: (
+        <div style={{ marginTop: '10px', fontSize: '13px', lineHeight: '25px' }}>
+          <Alert
+            message="警告：此操作非常危险,会删除该分组下面所有项目和接口，并且无法恢复!"
+            type="warning"
+          />
+          <div style={{ marginTop: '16px' }}>
+            <p>
+              <b>请输入分组名称确认此操作:</b>
+            </p>
+            <Input id="group_name" />
+          </div>
+        </div>
+      ),
+      onOk() {
+        const groupName = trim(document.getElementById('group_name').value);
+        if (that.props.currGroup.group_name !== groupName) {
+          message.error('分组名称有误');
+          return new Promise((resolve, reject) => {
+            reject('error');
+          });
+        } else {
+          that.deleteGroup();
+        }
+      },
+      iconType: 'delete',
+      onCancel() {}
+    });
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // 切换分组时，更新分组信息并关闭删除分组操作
+    if (this.props.currGroup._id !== nextProps.currGroup._id) {
+      this.initState(nextProps);
+      this.setState({
+        showDangerOptions: false
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div className="m-panel card-panel card-panel-s panel-group">
+        <Row type="flex" justify="space-around" className="row" align="middle">
+          <Col span={4} className="label">
+            分组名：
+          </Col>
+          <Col span={20}>
+            <Input
+              size="large"
+              placeholder="请输入分组名称"
+              value={this.state.currGroupName}
+              onChange={this.changeName}
+            />
+          </Col>
+        </Row>
+        <Row type="flex" justify="space-around" className="row" align="middle">
+          <Col span={4} className="label">
+            简介：
+          </Col>
+          <Col span={20}>
+            <TextArea
+              size="large"
+              rows={3}
+              placeholder="请输入分组描述"
+              value={this.state.currGroupDesc}
+              onChange={this.changeDesc}
+            />
+          </Col>
+        </Row>
+        <Row type="flex" justify="space-around" className="row" align="middle">
+          <Col span={4} className="label">
+            接口自定义字段&nbsp;
+            <Tooltip title={'可以在接口中添加 额外字段 数据'}>
+              <Icon type="question-circle-o" style={{ width: '10px' }} />
+            </Tooltip> ：
+          </Col>
+          <Col span={12} style={{ position: 'relative' }}>
+            <Input
+              placeholder="请输入自定义字段名称"
+              style={{ borderColor: this.state.custom_field1_rule ? '#f5222d' : '' }}
+              value={this.state.custom_field1_name}
+              onChange={this.changeCustomName}
+            />
+            <div
+              className="custom-field-rule"
+              style={{ display: this.state.custom_field1_rule ? 'block' : 'none' }}
+            >
+              自定义字段名称不能为空
+            </div>
+          </Col>
+          <Col span={2} className="label">
+            开启：
+          </Col>
+          <Col span={6}>
+            <Switch
+              checked={this.state.custom_field1_enable}
+              checkedChildren="开"
+              unCheckedChildren="关"
+              onChange={this.changeCustomEnable}
+            />
+          </Col>
+        </Row>
+        <Row type="flex" justify="center" className="row save">
+          <Col span={4} className="save-button">
+            <Button className="m-btn btn-save" icon="save" type="primary" onClick={this.editGroup}>
+              保 存
+            </Button>
+          </Col>
+        </Row>
+        {/* 只有超级管理员能删除分组 */}
+        {this.props.curUserRole === 'admin' ? (
+          <Row type="flex" justify="center" className="danger-container">
+            <Col span={24} className="title">
+              <h2 className="content">
+                <Icon type="exclamation-circle-o" /> 危险操作
+              </h2>
+              <Button onClick={this.toggleDangerOptions}>
+                查 看<Icon type={this.state.showDangerOptions ? 'up' : 'down'} />
+              </Button>
+            </Col>
+            {this.state.showDangerOptions ? (
+              <Card hoverable={true} className="card-danger" style={{ width: '100%' }}>
+                <div className="card-danger-content">
+                  <h3>删除分组</h3>
+                  <p>分组一旦删除，将无法恢复数据，请慎重操作！</p>
+                  <p>只有超级管理员有权限删除分组。</p>
+                </div>
+                <Button type="danger" ghost className="card-danger-btn" onClick={this.showConfirm}>
+                  删除
+                </Button>
+              </Card>
+            ) : null}
+          </Row>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default GroupSetting;

client/containers/Group/GroupSetting/GroupSetting.scss

@@ -0,0 +1,29 @@
+.panel-group {
+  .row {
+    // display: flex;
+    // align-items: center;
+    margin-bottom: .24rem;
+  }
+  .save {
+    margin-top: .48rem
+  }
+  .left {
+    flex: 100px 0 1;
+    text-align: right;
+  }
+  .right {
+    flex: 830px 0 1;
+  }
+  .label {
+    text-align: right;
+  }
+  .save-button{
+    text-align: center;
+  }
+
+  .custom-field-rule{
+    padding-top: 4px;
+    position: absolute;
+    color: #f5222d ;
+  }
+}

client/containers/Group/MemberList/MemberList.js

@@ -0,0 +1,326 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Table, Select, Button, Modal, Row, Col, message, Popconfirm } from 'antd';
+import { Link } from 'react-router-dom';
+import './MemberList.scss';
+import { autobind } from 'core-decorators';
+import {
+  fetchGroupMemberList,
+  fetchGroupMsg,
+  addMember,
+  delMember,
+  changeMemberRole
+} from '../../../reducer/modules/group.js';
+import ErrMsg from '../../../components/ErrMsg/ErrMsg.js';
+import UsernameAutoComplete from '../../../components/UsernameAutoComplete/UsernameAutoComplete.js';
+const Option = Select.Option;
+
+function arrayAddKey(arr) {
+  return arr.map((item, index) => {
+    return {
+      ...item,
+      key: index
+    };
+  });
+}
+
+@connect(
+  state => {
+    return {
+      currGroup: state.group.currGroup,
+      uid: state.user.uid,
+      role: state.group.role
+    };
+  },
+  {
+    fetchGroupMemberList,
+    fetchGroupMsg,
+    addMember,
+    delMember,
+    changeMemberRole
+  }
+)
+class MemberList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userInfo: [],
+      role: '',
+      visible: false,
+      dataSource: [],
+      inputUids: [],
+      inputRole: 'dev'
+    };
+  }
+  static propTypes = {
+    currGroup: PropTypes.object,
+    uid: PropTypes.number,
+    fetchGroupMemberList: PropTypes.func,
+    fetchGroupMsg: PropTypes.func,
+    addMember: PropTypes.func,
+    delMember: PropTypes.func,
+    changeMemberRole: PropTypes.func,
+    role: PropTypes.string
+  };
+
+  showAddMemberModal = () => {
+    this.setState({
+      visible: true
+    });
+  };
+
+  // 重新获取列表
+  reFetchList = () => {
+    this.props.fetchGroupMemberList(this.props.currGroup._id).then(res => {
+      this.setState({
+        userInfo: arrayAddKey(res.payload.data.data),
+        visible: false
+      });
+    });
+  };
+
+  // 增 - 添加成员
+
+  handleOk = () => {
+    this.props
+      .addMember({
+        id: this.props.currGroup._id,
+        member_uids: this.state.inputUids,
+        role: this.state.inputRole
+      })
+      .then(res => {
+        if (!res.payload.data.errcode) {
+          const { add_members, exist_members } = res.payload.data.data;
+          const addLength = add_members.length;
+          const existLength = exist_members.length;
+          this.setState({
+            inputRole: 'dev',
+            inputUids: []
+          });
+          message.success(`添加成功! 已成功添加 ${addLength} 人，其中 ${existLength} 人已存在`);
+          this.reFetchList(); // 添加成功后重新获取分组成员列表
+        }
+      });
+  };
+  // 添加成员时 选择新增成员权限
+
+  changeNewMemberRole = value => {
+    this.setState({
+      inputRole: value
+    });
+  };
+
+  // 删 - 删除分组成员
+
+  deleteConfirm = member_uid => {
+    return () => {
+      const id = this.props.currGroup._id;
+      this.props.delMember({ id, member_uid }).then(res => {
+        if (!res.payload.data.errcode) {
+          message.success(res.payload.data.errmsg);
+          this.reFetchList(); // 添加成功后重新获取分组成员列表
+        }
+      });
+    };
+  };
+
+  // 改 - 修改成员权限
+  changeUserRole = e => {
+    const id = this.props.currGroup._id;
+    const role = e.split('-')[0];
+    const member_uid = e.split('-')[1];
+    this.props.changeMemberRole({ id, member_uid, role }).then(res => {
+      if (!res.payload.data.errcode) {
+        message.success(res.payload.data.errmsg);
+        this.reFetchList(); // 添加成功后重新获取分组成员列表
+      }
+    });
+  };
+
+  // 关闭模态框
+
+  handleCancel = () => {
+    this.setState({
+      visible: false
+    });
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this._groupId !== this._groupId) {
+      return null;
+    }
+    if (this.props.currGroup._id !== nextProps.currGroup._id) {
+      this.props.fetchGroupMemberList(nextProps.currGroup._id).then(res => {
+        this.setState({
+          userInfo: arrayAddKey(res.payload.data.data)
+        });
+      });
+      this.props.fetchGroupMsg(nextProps.currGroup._id).then(res => {
+        this.setState({
+          role: res.payload.data.data.role
+        });
+      });
+    }
+  }
+
+  componentDidMount() {
+    const currGroupId = (this._groupId = this.props.currGroup._id);
+    this.props.fetchGroupMsg(currGroupId).then(res => {
+      this.setState({
+        role: res.payload.data.data.role
+      });
+    });
+    this.props.fetchGroupMemberList(currGroupId).then(res => {
+      this.setState({
+        userInfo: arrayAddKey(res.payload.data.data)
+      });
+    });
+  }
+
+  @autobind
+  onUserSelect(uids) {
+    this.setState({
+      inputUids: uids
+    });
+  }
+
+  render() {
+    const columns = [
+      {
+        title:
+          this.props.currGroup.group_name + ' 分组成员 (' + this.state.userInfo.length + ') 人',
+        dataIndex: 'username',
+        key: 'username',
+        render: (text, record) => {
+          return (
+            <div className="m-user">
+              <Link to={`/user/profile/${record.uid}`}>
+                <img
+                  src={
+                    location.protocol + '//' + location.host + '/api/user/avatar?uid=' + record.uid
+                  }
+                  className="m-user-img"
+                />
+              </Link>
+              <Link to={`/user/profile/${record.uid}`}>
+                <p className="m-user-name">{text}</p>
+              </Link>
+            </div>
+          );
+        }
+      },
+      {
+        title:
+          this.state.role === 'owner' || this.state.role === 'admin' ? (
+            <div className="btn-container">
+              <Button className="btn" type="primary" onClick={this.showAddMemberModal}>
+                添加成员
+              </Button>
+            </div>
+          ) : (
+            ''
+          ),
+        key: 'action',
+        className: 'member-opration',
+        render: (text, record) => {
+          if (this.state.role === 'owner' || this.state.role === 'admin') {
+            return (
+              <div>
+                <Select
+                  value={record.role + '-' + record.uid}
+                  className="select"
+                  onChange={this.changeUserRole}
+                >
+                  <Option value={'owner-' + record.uid}>组长</Option>
+                  <Option value={'dev-' + record.uid}>开发者</Option>
+                  <Option value={'guest-' + record.uid}>访客</Option>
+                </Select>
+                <Popconfirm
+                  placement="topRight"
+                  title="你确定要删除吗? "
+                  onConfirm={this.deleteConfirm(record.uid)}
+                  okText="确定"
+                  cancelText=""
+                >
+                  <Button type="danger" icon="delete" className="btn-danger" />
+                  {/* <Icon type="delete" className="btn-danger"/> */}
+                </Popconfirm>
+              </div>
+            );
+          } else {
+            // 非管理员可以看到权限 但无法修改
+            if (record.role === 'owner') {
+              return '组长';
+            } else if (record.role === 'dev') {
+              return '开发者';
+            } else if (record.role === 'guest') {
+              return '访客';
+            } else {
+              return '';
+            }
+          }
+        }
+      }
+    ];
+    let userinfo = this.state.userInfo;
+    let ownerinfo = [];
+    let devinfo = [];
+    let guestinfo = [];
+    for (let i = 0; i < userinfo.length; i++) {
+      if (userinfo[i].role === 'owner') {
+        ownerinfo.push(userinfo[i]);
+      }
+      if (userinfo[i].role === 'dev') {
+        devinfo.push(userinfo[i]);
+      }
+      if (userinfo[i].role === 'guest') {
+        guestinfo.push(userinfo[i]);
+      }
+    }
+    userinfo = [...ownerinfo, ...devinfo, ...guestinfo];
+    return (
+      <div className="m-panel">
+        {this.state.visible ? (
+          <Modal
+            title="添加成员"
+            visible={this.state.visible}
+            onOk={this.handleOk}
+            onCancel={this.handleCancel}
+          >
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label usernamelabel">用户名: </div>
+              </Col>
+              <Col span="15">
+                <UsernameAutoComplete callbackState={this.onUserSelect} />
+              </Col>
+            </Row>
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label usernameauth">权限: </div>
+              </Col>
+              <Col span="15">
+                <Select defaultValue="dev" className="select" onChange={this.changeNewMemberRole}>
+                  <Option value="owner">组长</Option>
+                  <Option value="dev">开发者</Option>
+                  <Option value="guest">访客</Option>
+                </Select>
+              </Col>
+            </Row>
+          </Modal>
+        ) : (
+          ''
+        )}
+        <Table
+          columns={columns}
+          dataSource={userinfo}
+          pagination={false}
+          locale={{ emptyText: <ErrMsg type="noMemberInGroup" /> }}
+        />
+      </div>
+    );
+  }
+}
+
+export default MemberList;

client/containers/Group/MemberList/MemberList.scss

@@ -0,0 +1,58 @@
+@import '../../../styles/mixin.scss';
+
+.m-panel{
+  background-color: #fff;
+  padding: 24px;
+  min-height: 4.68rem;
+  margin-top: 0;
+  // box-shadow: $box-shadow-panel;
+}
+
+.m-tab {
+  overflow: inherit !important;
+}
+
+.btn-container {
+  text-align: right;
+}
+
+.modal-input {
+  display: flex;
+  align-items: center;
+  margin-bottom: .24rem;
+  .label {
+    text-align: right;
+  }
+  .select {
+    width: 1.2rem;
+  }
+}
+
+.member-opration {
+  text-align: right;
+  .select {
+    width: 1.2rem;
+  }
+  .btn-danger {
+    margin-left: .08rem;
+    // background-color: transparent;
+    border-color: transparent;
+  }
+}
+
+.m-user {
+  display: flex;
+  align-items: center;
+  .m-user-img {
+    width: .32rem;
+    height: .32rem;
+    border-radius: .04rem;
+  }
+  .m-user-name {
+    margin-left: 8px;
+  }
+  
+}
+.usernamelabel,.usernameauth{
+  line-height: 36px;
+}

client/containers/Group/ProjectList/ProjectList.js

@@ -0,0 +1,217 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Row, Col, Button, Tooltip } from 'antd';
+import { Link } from 'react-router-dom';
+import {
+  addProject,
+  fetchProjectList,
+  delProject,
+  changeUpdateModal
+} from '../../../reducer/modules/project';
+import ProjectCard from '../../../components/ProjectCard/ProjectCard.js';
+import ErrMsg from '../../../components/ErrMsg/ErrMsg.js';
+import { autobind } from 'core-decorators';
+import { setBreadcrumb } from '../../../reducer/modules/user';
+
+import './ProjectList.scss';
+
+@connect(
+  state => {
+    return {
+      projectList: state.project.projectList,
+      userInfo: state.project.userInfo,
+      tableLoading: state.project.tableLoading,
+      currGroup: state.group.currGroup,
+      currPage: state.project.currPage
+    };
+  },
+  {
+    fetchProjectList,
+    addProject,
+    delProject,
+    changeUpdateModal,
+    setBreadcrumb
+  }
+)
+class ProjectList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      protocol: 'http://',
+      projectData: []
+    };
+  }
+  static propTypes = {
+    form: PropTypes.object,
+    fetchProjectList: PropTypes.func,
+    addProject: PropTypes.func,
+    delProject: PropTypes.func,
+    changeUpdateModal: PropTypes.func,
+    projectList: PropTypes.array,
+    userInfo: PropTypes.object,
+    tableLoading: PropTypes.bool,
+    currGroup: PropTypes.object,
+    setBreadcrumb: PropTypes.func,
+    currPage: PropTypes.number,
+    studyTip: PropTypes.number,
+    study: PropTypes.bool
+  };
+
+  // 取消修改
+  @autobind
+  handleCancel() {
+    this.props.form.resetFields();
+    this.setState({
+      visible: false
+    });
+  }
+
+  // 修改线上域名的协议类型 (http/https)
+  @autobind
+  protocolChange(value) {
+    this.setState({
+      protocol: value
+    });
+  }
+
+  // 获取 ProjectCard 组件的关注事件回调，收到后更新数据
+
+  receiveRes = () => {
+    this.props.fetchProjectList(this.props.currGroup._id, this.props.currPage);
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.props.setBreadcrumb([{ name: '' + (nextProps.currGroup.group_name || '') }]);
+
+    // 切换分组
+    if (this.props.currGroup !== nextProps.currGroup && nextProps.currGroup._id) {
+      this.props.fetchProjectList(nextProps.currGroup._id, this.props.currPage);
+    }
+
+    // 切换项目列表
+    if (this.props.projectList !== nextProps.projectList) {
+      // console.log(nextProps.projectList);
+      const data = nextProps.projectList.map((item, index) => {
+        item.key = index;
+        return item;
+      });
+      this.setState({
+        projectData: data
+      });
+    }
+  }
+
+  render() {
+    let projectData = this.state.projectData;
+    let noFollow = [];
+    let followProject = [];
+    for (var i in projectData) {
+      if (projectData[i].follow) {
+        followProject.push(projectData[i]);
+      } else {
+        noFollow.push(projectData[i]);
+      }
+    }
+    followProject = followProject.sort((a, b) => {
+      return b.up_time - a.up_time;
+    });
+    noFollow = noFollow.sort((a, b) => {
+      return b.up_time - a.up_time;
+    });
+    projectData = [...followProject, ...noFollow];
+
+    const isShow = /(admin)|(owner)|(dev)/.test(this.props.currGroup.role);
+
+    const Follow = () => {
+      return followProject.length ? (
+        <Row>
+          <h3 className="owner-type">我的关注</h3>
+          {followProject.map((item, index) => {
+            return (
+              <Col xs={8} lg={6} xxl={4} key={index}>
+                <ProjectCard projectData={item} callbackResult={this.receiveRes} />
+              </Col>
+            );
+          })}
+        </Row>
+      ) : null;
+    };
+    const NoFollow = () => {
+      return noFollow.length ? (
+        <Row style={{ borderBottom: '1px solid #eee', marginBottom: '15px' }}>
+          <h3 className="owner-type">我的项目</h3>
+          {noFollow.map((item, index) => {
+            return (
+              <Col xs={8} lg={6} xxl={4} key={index}>
+                <ProjectCard projectData={item} callbackResult={this.receiveRes} isShow={isShow} />
+              </Col>
+            );
+          })}
+        </Row>
+      ) : null;
+    };
+
+    const OwnerSpace = () => {
+      return projectData.length ? (
+        <div>
+          <NoFollow />
+          <Follow />
+        </div>
+      ) : (
+        <ErrMsg type="noProject" />
+      );
+    };
+
+    return (
+      <div style={{ paddingTop: '24px' }} className="m-panel card-panel card-panel-s project-list">
+        <Row className="project-list-header">
+          <Col span={16} style={{ textAlign: 'left' }}>
+            {this.props.currGroup.group_name} 分组共 ({projectData.length}) 个项目
+          </Col>
+          <Col span={8}>
+            {isShow ? (
+              <Link to="/add-project">
+                <Button type="primary">添加项目</Button>
+              </Link>
+            ) : (
+              <Tooltip title="您没有权限,请联系该分组组长或管理员">
+                <Button type="primary" disabled>
+                  添加项目
+                </Button>
+              </Tooltip>
+            )}
+          </Col>
+        </Row>
+        <Row>
+          {/* {projectData.length ? projectData.map((item, index) => {
+            return (
+              <Col xs={8} md={6} xl={4} key={index}>
+                <ProjectCard projectData={item} callbackResult={this.receiveRes} />
+              </Col>);
+          }) : <ErrMsg type="noProject" />} */}
+          {this.props.currGroup.type === 'private' ? (
+            <OwnerSpace />
+          ) : projectData.length ? (
+            projectData.map((item, index) => {
+              return (
+                <Col xs={8} lg={6} xxl={4} key={index}>
+                  <ProjectCard
+                    projectData={item}
+                    callbackResult={this.receiveRes}
+                    isShow={isShow}
+                  />
+                </Col>
+              );
+            })
+          ) : (
+            <ErrMsg type="noProject" />
+          )}
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default ProjectList;

client/containers/Group/ProjectList/ProjectList.scss

@@ -0,0 +1,62 @@
+.ant-tabs-bar {
+  border-bottom: 1px solid transparent;
+  margin-bottom: 0;
+}
+
+
+.m-panel{
+  background-color: #fff;
+  padding: 24px;
+  min-height: 4.68rem;
+  margin-top: 0;
+}
+
+.project-list{
+  .project-list-header{
+    background: #eee;
+    height: 64px;
+    line-height: 40px;
+    border-radius: 4px;
+    text-align: right;
+    padding: 0 10px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    color: rgba(39, 56, 72, 0.85);
+    font-weight: 500;
+  }
+  .owner-type{
+    // padding: 10px;
+    font-size: 15px;
+    // background-color: #eee;
+    // border-radius: 4px;
+    // margin-bottom: 15px;
+    font-weight: 400;
+    margin-bottom: 0.16rem;
+    border-left: 3px solid #2395f1;
+    padding-left: 8px;
+  }
+}
+
+
+
+.ant-input-group-wrapper {
+  width: 100%;
+}
+
+.dynamic-delete-button {
+  cursor: pointer;
+  position: relative;
+  top: 4px;
+  font-size: 24px;
+  color: #999;
+  transition: all .3s;
+}
+.dynamic-delete-button:hover {
+  color: #777;
+}
+.dynamic-delete-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

client/containers/Group/ProjectList/UpDateModal.js

@@ -0,0 +1,387 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Modal, Form, Input, Icon, Tooltip, Select, message, Button, Row, Col } from 'antd';
+import {
+  updateProject,
+  fetchProjectList,
+  delProject,
+  changeUpdateModal,
+  changeTableLoading
+} from '../../../reducer/modules/project';
+const { TextArea } = Input;
+const FormItem = Form.Item;
+const Option = Select.Option;
+
+import './ProjectList.scss';
+
+// layout
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 6 }
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 14 }
+  }
+};
+const formItemLayoutWithOutLabel = {
+  wrapperCol: {
+    xs: { span: 24, offset: 0 },
+    sm: { span: 20, offset: 6 }
+  }
+};
+let uuid = 0;
+
+@connect(
+  state => {
+    return {
+      projectList: state.project.projectList,
+      isUpdateModalShow: state.project.isUpdateModalShow,
+      handleUpdateIndex: state.project.handleUpdateIndex,
+      tableLoading: state.project.tableLoading,
+      currGroup: state.group.currGroup
+    };
+  },
+  {
+    fetchProjectList,
+    updateProject,
+    delProject,
+    changeUpdateModal,
+    changeTableLoading
+  }
+)
+class UpDateModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      protocol: 'http://',
+      envProtocolChange: 'http://'
+    };
+  }
+  static propTypes = {
+    form: PropTypes.object,
+    fetchProjectList: PropTypes.func,
+    updateProject: PropTypes.func,
+    delProject: PropTypes.func,
+    changeUpdateModal: PropTypes.func,
+    changeTableLoading: PropTypes.func,
+    projectList: PropTypes.array,
+    currGroup: PropTypes.object,
+    isUpdateModalShow: PropTypes.bool,
+    handleUpdateIndex: PropTypes.number
+  };
+
+  // 修改线上域名的协议类型 (http/https)
+  protocolChange = value => {
+    this.setState({
+      protocol: value
+    });
+  };
+
+  handleCancel = () => {
+    this.props.form.resetFields();
+    this.props.changeUpdateModal(false, -1);
+  };
+
+  // 确认修改
+  handleOk = e => {
+    e.preventDefault();
+    const {
+      form,
+      updateProject,
+      changeUpdateModal,
+      currGroup,
+      projectList,
+      handleUpdateIndex,
+      fetchProjectList,
+      changeTableLoading
+    } = this.props;
+    form.validateFields((err, values) => {
+      if (!err) {
+        // console.log(projectList[handleUpdateIndex]);
+        let assignValue = Object.assign(projectList[handleUpdateIndex], values);
+        values.protocol = this.state.protocol.split(':')[0];
+        assignValue.env = assignValue.envs.map((item, index) => {
+          return {
+            name: values['envs-name-' + index],
+            domain: values['envs-protocol-' + index] + values['envs-domain-' + index]
+          };
+        });
+        // console.log(assignValue);
+
+        changeTableLoading(true);
+        updateProject(assignValue)
+          .then(res => {
+            if (res.payload.data.errcode == 0) {
+              changeUpdateModal(false, -1);
+              message.success('修改成功! ');
+              fetchProjectList(currGroup._id).then(() => {
+                changeTableLoading(false);
+              });
+            } else {
+              changeTableLoading(false);
+              message.error(res.payload.data.errmsg);
+            }
+          })
+          .catch(() => {
+            changeTableLoading(false);
+          });
+        form.resetFields();
+      }
+    });
+  };
+
+  // 项目的修改操作 - 删除一项环境配置
+  remove = id => {
+    const { form } = this.props;
+    // can use data-binding to get
+    const envs = form.getFieldValue('envs');
+    // We need at least one passenger
+    if (envs.length === 0) {
+      return;
+    }
+
+    // can use data-binding to set
+    form.setFieldsValue({
+      envs: envs.filter(key => {
+        const realKey = key._id ? key._id : key;
+        return realKey !== id;
+      })
+    });
+  };
+
+  // 项目的修改操作 - 添加一项环境配置
+  add = () => {
+    uuid++;
+    const { form } = this.props;
+    // can use data-binding to get
+    const envs = form.getFieldValue('envs');
+    const nextKeys = envs.concat(uuid);
+    // can use data-binding to set
+    // important! notify form to detect changes
+    form.setFieldsValue({
+      envs: nextKeys
+    });
+  };
+
+  render() {
+    const { getFieldDecorator, getFieldValue } = this.props.form;
+    // const that = this;
+    const { isUpdateModalShow, projectList, handleUpdateIndex } = this.props;
+    let initFormValues = {};
+    let envMessage = [];
+    // 如果列表存在且用户点击修改按钮时，设置表单默认值
+    if (projectList.length !== 0 && handleUpdateIndex !== -1) {
+      // console.log(projectList[handleUpdateIndex]);
+      const { name, basepath, desc, env } = projectList[handleUpdateIndex];
+      initFormValues = { name, basepath, desc, env };
+      if (env.length !== 0) {
+        envMessage = env;
+      }
+      initFormValues.prd_host = projectList[handleUpdateIndex].prd_host;
+      initFormValues.prd_protocol = projectList[handleUpdateIndex].protocol + '://';
+    }
+
+    getFieldDecorator('envs', { initialValue: envMessage });
+    const envs = getFieldValue('envs');
+    const formItems = envs.map((k, index) => {
+      const secondIndex = 'next' + index; // 为保证key的唯一性
+      return (
+        <Row key={index} type="flex" justify="space-between" align={index === 0 ? 'middle' : 'top'}>
+          <Col span={10} offset={2}>
+            <FormItem label={index === 0 ? <span>环境名称</span> : ''} required={false} key={index}>
+              {getFieldDecorator(`envs-name-${index}`, {
+                validateTrigger: ['onChange', 'onBlur'],
+                initialValue: envMessage.length !== 0 ? k.name : '',
+                rules: [
+                  {
+                    required: false,
+                    whitespace: true,
+                    validator(rule, value, callback) {
+                      if (value) {
+                        if (value.length === 0) {
+                          callback('请输入环境域名');
+                        } else if (!/\S/.test(value)) {
+                          callback('请输入环境域名');
+                        } else if (/prd/.test(value)) {
+                          callback('环境域名不能是"prd"');
+                        } else {
+                          return callback();
+                        }
+                      } else {
+                        callback('请输入环境域名');
+                      }
+                    }
+                  }
+                ]
+              })(<Input placeholder="请输入环境名称" style={{ width: '90%', marginRight: 8 }} />)}
+            </FormItem>
+          </Col>
+          <Col span={10}>
+            <FormItem
+              label={index === 0 ? <span>环境域名</span> : ''}
+              required={false}
+              key={secondIndex}
+            >
+              {getFieldDecorator(`envs-domain-${index}`, {
+                validateTrigger: ['onChange', 'onBlur'],
+                initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('//')[1] : '',
+                rules: [
+                  {
+                    required: false,
+                    whitespace: true,
+                    message: '请输入环境域名',
+                    validator(rule, value, callback) {
+                      if (value) {
+                        if (value.length === 0) {
+                          callback('请输入环境域名');
+                        } else if (!/\S/.test(value)) {
+                          callback('请输入环境域名');
+                        } else {
+                          return callback();
+                        }
+                      } else {
+                        callback('请输入环境域名');
+                      }
+                    }
+                  }
+                ]
+              })(
+                <Input
+                  placeholder="请输入环境域名"
+                  style={{ width: '90%', marginRight: 8 }}
+                  addonBefore={getFieldDecorator(`envs-protocol-${index}`, {
+                    initialValue:
+                      envMessage.length !== 0 && k.domain
+                        ? k.domain.split('//')[0] + '//'
+                        : 'http://',
+                    rules: [
+                      {
+                        required: true
+                      }
+                    ]
+                  })(
+                    <Select>
+                      <Option value="http://">{'http://'}</Option>
+                      <Option value="https://">{'https://'}</Option>
+                    </Select>
+                  )}
+                />
+              )}
+            </FormItem>
+          </Col>
+          <Col span={2}>
+            {/* 新增的项中，只有最后一项有删除按钮 */}
+            {(envs.length > 0 && k._id) || envs.length == index + 1 ? (
+              <Icon
+                className="dynamic-delete-button"
+                type="minus-circle-o"
+                onClick={() => {
+                  return this.remove(k._id ? k._id : k);
+                }}
+              />
+            ) : null}
+          </Col>
+        </Row>
+      );
+    });
+    return (
+      <Modal
+        title="修改项目"
+        visible={isUpdateModalShow}
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}
+      >
+        <Form>
+          <FormItem {...formItemLayout} label="项目名称">
+            {getFieldDecorator('name', {
+              initialValue: initFormValues.name,
+              rules: [
+                {
+                  required: true,
+                  message: '请输入项目名称!'
+                }
+              ]
+            })(<Input />)}
+          </FormItem>
+
+          <FormItem
+            {...formItemLayout}
+            label={
+              <span>
+                线上域名&nbsp;
+                <Tooltip title="将根据配置的线上域名访问mock数据">
+                  <Icon type="question-circle-o" />
+                </Tooltip>
+              </span>
+            }
+          >
+            {getFieldDecorator('prd_host', {
+              initialValue: initFormValues.prd_host,
+              rules: [
+                {
+                  required: true,
+                  message: '请输入项目线上域名!'
+                }
+              ]
+            })(
+              <Input
+                addonBefore={
+                  <Select defaultValue={initFormValues.prd_protocol} onChange={this.protocolChange}>
+                    <Option value="http://">{'http://'}</Option>
+                    <Option value="https://">{'https://'}</Option>
+                  </Select>
+                }
+              />
+            )}
+          </FormItem>
+
+          <FormItem
+            {...formItemLayout}
+            label={
+              <span>
+                基本路径&nbsp;
+                <Tooltip title="基本路径为空表示根路径">
+                  <Icon type="question-circle-o" />
+                </Tooltip>
+              </span>
+            }
+          >
+            {getFieldDecorator('basepath', {
+              initialValue: initFormValues.basepath,
+              rules: [
+                {
+                  required: false,
+                  message: '请输入项目基本路径! '
+                }
+              ]
+            })(<Input />)}
+          </FormItem>
+
+          <FormItem {...formItemLayout} label="描述">
+            {getFieldDecorator('desc', {
+              initialValue: initFormValues.desc,
+              rules: [
+                {
+                  required: false,
+                  message: '请输入描述!'
+                }
+              ]
+            })(<TextArea rows={4} />)}
+          </FormItem>
+
+          {formItems}
+          <FormItem {...formItemLayoutWithOutLabel}>
+            <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
+              <Icon type="plus" /> 添加环境配置
+            </Button>
+          </FormItem>
+        </Form>
+      </Modal>
+    );
+  }
+}
+
+export default Form.create()(UpDateModal);

client/containers/Home/Home.js

@@ -0,0 +1,409 @@
+import './Home.scss';
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { Row, Col, Button, Icon, Card } from 'antd';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import LogoSVG from '../../components/LogoSVG/index.js';
+import { changeMenuItem } from '../../reducer/modules/menu';
+const plugin = require('client/plugin.js');
+
+const ThirdLogin = plugin.emitHook('third_login');
+const HomeGuest = () => (
+  <div className="g-body">
+    <div className="m-bg">
+      <div className="m-bg-mask m-bg-mask0" />
+      <div className="m-bg-mask m-bg-mask1" />
+      <div className="m-bg-mask m-bg-mask2" />
+      <div className="m-bg-mask m-bg-mask3" />
+    </div>
+    <div className="main-one">
+      <div className="container">
+        <Row>
+          <Col span={24}>
+            <div className="home-header">
+              <a href="#" className="item">
+                YAPI
+              </a>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://hellosean1025.github.io/yapi"
+                className="item"
+              >
+                使用文档
+              </a>
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col lg={9} xs={24}>
+            <div className="home-des">
+              <div className="logo">
+                <LogoSVG length="72px" />
+                <span className="name">YAPI</span>
+              </div>
+              <div className="detail">
+                高效、易用、功能强大的API管理平台<br />
+                <span className="desc">旨在为开发、产品、测试人员提供更优雅的接口管理服务</span>
+              </div>
+              <div className="btn-group">
+                <Link to="/login">
+                  <Button type="primary" className="btn-home btn-login">
+                    登录 / 注册
+                  </Button>
+                </Link>
+                {ThirdLogin != null ? <ThirdLogin /> : null}
+              </div>
+            </div>
+          </Col>
+          <Col lg={15} xs={0} className="col-img">
+            <div className="img-container">
+              
+            </div>
+          </Col>
+        </Row>
+      </div>
+    </div>
+    <div className="feat-part section-feature">
+      <div className="container home-section">
+        <h3 className="title">为API开发者设计的管理平台</h3>
+        <span className="desc">
+          YApi让接口开发更简单高效，让接口的管理更具可读性、可维护性，让团队协作更合理。
+        </span>
+        <Row key="feat-motion-row">
+          <Col span={8} className="section-item" key="feat-wrapper-1">
+            <Icon type="appstore-o" className="img" />
+            <h4 className="title">项目管理</h4>
+            <span className="desc">提供基本的项目分组，项目管理，接口管理功能</span>
+          </Col>
+          <Col span={8} className="section-item" key="feat-wrapper-2">
+            <Icon type="api" className="img" />
+            <h4 className="title">接口管理</h4>
+            <span className="desc">
+              友好的接口文档，基于websocket的多人协作接口编辑功能和类postman测试工具，让多人协作成倍提升开发效率
+            </span>
+          </Col>
+          <Col span={8} className="section-item" key="feat-wrapper-3">
+            <Icon type="database" className="img" />
+            <h4 className="title">MockServer</h4>
+            <span className="desc">基于Mockjs，使用简单功能强大</span>
+          </Col>
+        </Row>
+      </div>
+    </div>
+    <div className="feat-part m-mock m-skew home-section">
+      <div className="m-skew-bg">
+        <div className="m-bg-mask m-bg-mask0" />
+        <div className="m-bg-mask m-bg-mask1" />
+        <div className="m-bg-mask m-bg-mask2" />
+      </div>
+      <div className="container skew-container">
+        <h3 className="title">功能强大的 Mock 服务</h3>
+        <span className="desc">你想要的 Mock 服务都在这里</span>
+        <Row className="row-card">
+          <Col lg={12} xs={24} className="section-card">
+            <Card title="Mock 规则">
+              <p className="mock-desc">
+                通过学习一些简单的 Mock
+                模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼:
+                所有的数据都可以实时随机生成。
+              </p>
+              <div className="code">
+                <ol start="1">
+                  <li className="item">
+                    <span className="orderNum orderNum-first">1</span>
+                    <span>
+                      <span>&#123;&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">2</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">
+                        &quot;errcode|200-500&quot;
+                      </span>
+                      <span>
+                        :&ensp;<span className="number">200</span>,&ensp;&ensp;
+                      </span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">3</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">&quot;errmsg|4-8&quot;</span>
+                      <span>:&ensp;</span>
+                      <span className="string">&quot;@string&quot;</span>
+                      <span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">4</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">&quot;data&quot;</span>
+                      <span>:&ensp;&#123;&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">5</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">
+                        &quot;boolean|1&quot;
+                      </span>
+                      <span>:&ensp;</span>
+                      <span className="keyword">true</span>
+                      <span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">6</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">
+                        &quot;array|2&quot;
+                      </span>
+                      <span>
+                        :&ensp;&#91;<span className="string">&quot;Bob&quot;</span>,&ensp;<span className="string">
+                          &quot;Jim&quot;
+                        </span>&#93;,&ensp;&ensp;
+                      </span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">7</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">
+                        &quot;combine&quot;
+                      </span>
+                      <span>:&ensp;</span>
+                      <span className="string">&quot;@boolean&ensp;&amp;&ensp;@array&quot;</span>
+                      <span>&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum">8</span>
+                    <span>&ensp;&ensp;&ensp;&ensp;&#125;&ensp;&ensp;</span>
+                  </li>
+                  <li className="item">
+                    <span className="orderNum orderNum-last">9</span>
+                    <span>&#125;&ensp;&ensp;</span>
+                  </li>
+                </ol>
+              </div>
+            </Card>
+          </Col>
+          <Col lg={12} xs={24} className="section-card mock-after">
+            <Card title="生成的 Mock 数据">
+              <p className="mock-desc">
+                生成的 Mock 数据可以直接用 ajax
+                请求使用，也可以通过服务器代理使用（不需要修改项目一行代码）
+              </p>
+              <div className="code">
+                <ol start="1">
+                  <li className="alt">
+                    <span className="orderNum orderNum-first">1</span>
+                    <span>
+                      <span>&#123;&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="">
+                    <span className="orderNum">2</span>
+                    <span>
+                      &ensp;&ensp;<span className="string">&quot;errcode&quot;</span>
+                      <span>:&ensp;</span>
+                      <span className="number">304</span>
+                      <span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="alt">
+                    <span className="orderNum">3</span>
+                    <span>
+                      &ensp;&ensp;<span className="string">&quot;errmsg&quot;</span>
+                      <span>:&ensp;</span>
+                      <span className="string">&quot;JtkMIoRu)N#ie^h%Z77[F)&quot;</span>
+                      <span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="">
+                    <span className="orderNum">4</span>
+                    <span>
+                      &ensp;&ensp;<span className="string">&quot;data&quot;</span>
+                      <span>:&ensp;&#123;&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="alt">
+                    <span className="orderNum">5</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">&quot;boolean&quot;</span>
+                      <span>:&ensp;</span>
+                      <span className="keyword">true</span>
+                      <span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="">
+                    <span className="orderNum">6</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">&quot;array&quot;</span>
+                      <span>
+                        :&ensp;
+                      </span>&#91;<span className="string">&quot;Bob&quot;</span>,&ensp;<span className="string">
+                        &quot;Jim&quot;
+                      </span>,&ensp;<span className="string">&quot;Bob&quot;</span>,&ensp;<span className="string">
+                        &quot;Jim&quot;
+                      </span>&#93;<span>,&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="alt">
+                    <span className="orderNum">7</span>
+                    <span>
+                      &ensp;&ensp;&ensp;&ensp;<span className="string">&quot;combine&quot;</span>
+                      <span>:&ensp;</span>
+                      <span className="string">
+                        &quot;true & Bob,&ensp;Jim,&ensp;Bob,&ensp;Jim&quot;
+                      </span>
+                      <span>&ensp;&ensp;</span>
+                    </span>
+                  </li>
+                  <li className="">
+                    <span className="orderNum">8</span>
+                    <span>&ensp;&ensp;&#125;&ensp;&ensp;</span>
+                  </li>
+                  <li className="alt">
+                    <span className="orderNum orderNum-last">9</span>
+                    <span>&#125;&ensp;&ensp;</span>
+                  </li>
+                </ol>
+              </div>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    </div>
+    <div className="home-section section-manage">
+      <div className="container">
+        <Row className="row-card" style={{ marginBottom: '.48rem' }}>
+          <Col lg={7} xs={10} className="section-card">
+            <Card>
+              <div className="section-block block-first">
+                <h4>超级管理员(* N)</h4>
+                <p className="item"> - 创建分组</p>
+                <p className="item"> - 分配组长</p>
+                <p className="item"> - 管理所有成员信息</p>
+              </div>
+              <div className="section-block block-second">
+                <h4>组长(* N)</h4>
+                <p className="item"> - 创建项目</p>
+                <p className="item"> - 管理分组或项目的信息</p>
+                <p className="item"> - 管理开发者与成员</p>
+              </div>
+              <div className="section-block block-third">
+                <h4>开发者(* N) / 成员(* N)</h4>
+                <p className="item"> - 不允许创建分组</p>
+                <p className="item"> - 不允许修改分组或项目信息</p>
+              </div>
+            </Card>
+          </Col>
+          <Col lg={17} xs={14} className="section-card manage-word">
+            <Icon type="team" className="icon" />
+            <h3 className="title">扁平化管理模式</h3>
+            <p className="desc">
+              接口管理的逻辑较为复杂，操作频率高，层层审批将严重拖慢生产效率，因此传统的金字塔管理模式并不适用。
+            </p>
+            <p className="desc">
+              YAPI
+              将扁平化管理模式的思想引入到产品的权限管理中，超级管理员拥有最高的权限，并将权限分配给若干组长，超级管理员只需管理组长即可，实际上管理YAPI各大分组与项目的是“组长”。组长对分组或项目负责，一般由BU负责人/项目负责人担任。
+            </p>
+          </Col>
+        </Row>
+      </div>
+    </div>
+  </div>
+);
+HomeGuest.propTypes = {
+  introList: PropTypes.array
+};
+
+@connect(
+  state => ({
+    login: state.user.isLogin
+  }),
+  {
+    changeMenuItem
+  }
+)
+@withRouter
+class Home extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  UNSAFE_componentWillMount() {
+    if (this.props.login) {
+      this.props.history.push('/group/261');
+    }
+  }
+
+  componentDidMount() {}
+  static propTypes = {
+    introList: PropTypes.array,
+    login: PropTypes.bool,
+    history: PropTypes.object,
+    changeMenuItem: PropTypes.func
+  };
+  toStart = () => {
+    this.props.changeMenuItem('/group');
+  };
+  render() {
+    return (
+      <div className="home-main">
+        <HomeGuest introList={this.props.introList} />
+        <div className="row-tip">
+          <div className="container">
+            <div className="tip-title">
+              <h3 className="title">准备好使用了吗？</h3>
+              <p className="desc">注册账号尽请使用吧，查看使用文档了解更多信息</p>
+            </div>
+            <div className="tip-btns">
+              <div className="btn-group">
+                <Link to="/login">
+                  <Button type="primary" className="btn-home btn-login">
+                    登录 / 注册
+                  </Button>
+                </Link>
+                <Button className="btn-home btn-home-normal">
+                  <a target="_blank" rel="noopener noreferrer" href="https://hellosean1025.github.io/yapi">
+                    使用文档
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+// Home.defaultProps={
+//   introList:[{
+//     title:"接口管理",
+//     des:"满足你的所有接口管理需求。不再需要为每个项目搭建独立的接口管理平台和编写离线的接口文档，其权限管理和项目日志让协作开发不再痛苦。",
+//     detail:[
+//       {title:"团队协作",des:"多成员协作，掌握项目进度",iconType:"team"},
+//       {title:"权限管理",des:"设置每个成员的操作权限",iconType:"usergroup-add"},
+//       {title:"项目日志",des:"推送项目情况，掌握更新动态",iconType:"schedule"}
+//     ],
+//     img:"./image/demo-img.jpg"
+//   },{
+//     title:"接口测试",
+//     des:"一键即可得到返回结果。根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口，这些接口会自动生成模拟数据。",
+//     detail:[
+//       {title:"编辑接口",des:"团队开发时任何人都可以在权限许可下创建、修改接口",iconType:"tags-o"},
+//       {title:"mock请求",des:"创建者可以自由构造需要的数据，支持复杂的生成逻辑",iconType:"fork"}
+//     ],
+//     img:"./image/demo-img.jpg"
+//   }
+//   ]
+// };
+
+export default Home;

client/containers/Home/Home.scss

@@ -0,0 +1,528 @@
+@import '../../styles/mixin.scss';
+
+$color-white : #fff;
+$color-blue-lighter : #f1f5ff;
+$color-blue-grey-lighter : #f7fafc;
+$color-grey-lighter : #F7F7F7;
+$color-blue-light: #5dade2;
+$color-black-lighter: #404040;
+$color-text-dark: #2e2e5a;
+$color-text-light: #6d7c90;
+$color-bg-lightblue: #c6e2ff;
+.g-body {
+  position: relative;
+}
+.home-header {
+  font-size: 0;
+  .item {
+    text-decoration: none;
+    display: inline-block;
+    color: #fff;
+    font-size: .17rem;
+    padding: .16rem .24rem;
+    -webkit-font-smoothing: antialiased;
+    &:hover {
+      color: #27cdfd;
+    }
+  }
+}
+
+// 按钮组
+.btn-group {
+  padding: .3rem .24rem;
+  .btn-home {
+    font-size: .15rem;
+    font-weight: 200;
+    letter-spacing: 1px;
+    border: none;
+    line-height: .4rem;
+    height: .4rem;
+    padding: 0 .24rem;
+    margin-right: .24rem;
+    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+    transform: translateY(0);
+    transition: all .2s;
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
+    }
+    &:active {
+      transform: translateY(1px);
+    }
+  }
+  .btn-login {
+    background-color: #32325d;
+    &:hover {
+      background-color: #43459a;
+    }
+    &:active, &:focus {
+      color: #e6ebf1;
+      background-color: #32325d;
+    }
+  }
+  .btn-home-normal {
+    border-radius: 4px;
+    color: #43459a;
+    &:hover {
+      color: #7795f8;
+    }
+    &:hover, &:focus {
+      background-color: #f6f9fc;
+    }
+    background-color: #fff;
+    cursor: pointer;
+  }
+}
+
+.m-bg {
+  position: absolute;
+  left: 0;
+  top: -400px;
+  height: 1000px;
+  width: 100%;
+  transform: skewY(-11deg);
+  background-image: linear-gradient(-20deg, #21d4fd 0%, #b721ff 100%);
+  .m-bg-mask {
+    position: absolute;
+    height: 180px;
+  }
+  .m-bg-mask0 {
+    bottom: 0;
+    left: 0;
+    width: 30%;
+    background-image: linear-gradient(120deg, #6ab3fd 0%, #8ba3fd 102%);
+  }
+  .m-bg-mask1 {
+    bottom: 180px;
+    right: 0;
+    width: 36%;
+    background-image: linear-gradient(120deg, #28c5f5 0%, #6682fe 100%);
+  }
+  .m-bg-mask2 {
+    bottom: 540px;
+    left: 0;
+    width: 20%;
+    height: 240px;
+    background-image: linear-gradient(120deg, #8121ff 0%, #5e5ef7 100%);
+  }
+  .m-bg-mask3 {
+    bottom: 540px;
+    left: 20%;
+    width: 70%;
+    height: 240px;
+    background-image: linear-gradient(-225deg, #5f2bff 0%, #6088fe 48%, #22ccf6 100%);
+  }
+}
+.home-main {
+  background-color: #fff;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  .main-one{
+    height: 600px;
+    .home-des{
+      padding: 1rem 0 0;
+      color: #fff;
+      .title{
+        font-size: .6rem;
+      }
+      .detail{
+        font-size: .2rem;
+      }
+      .logo {
+        display: flex;
+        align-items: center;
+        padding: 0 .24rem;
+      }
+      .svg {
+        animation: spin 5s linear infinite;
+      }
+      .name {
+        vertical-align: middle;
+        font-size: .48rem;
+        margin-left: .24rem;
+        font-weight: 200;
+      }
+      .detail {
+        padding: .24rem;
+        font-size: .24rem;
+        font-weight: 200;
+      }
+      .desc {
+        font-size: .18rem;
+      }
+    }
+    .login-form{
+      color: $color-white;
+    }
+    .main-one-left{
+      padding-right: .15rem;
+      margin-top: .2rem;
+    }
+    .main-one-right{
+      padding-left: .5rem;
+      padding-top: .3rem;
+    }
+  }
+  .user-home{
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin: 1rem auto 0;
+    .user-des{
+      margin: 0 auto .5rem;
+      text-align: center;
+      .title{
+        font-size: .8rem;
+        margin-bottom: .2rem;
+      }
+      .des{
+        font-size: .25rem;
+        margin-bottom: .3rem;
+      }
+      .btn{
+        button{
+          font-size: .2rem;
+          line-height: .2rem;
+          height: .5rem;
+          padding: .15rem .5rem;
+        }
+      }
+    }
+  }
+  .main-part{
+    padding: 1.5rem 0;
+    height: 5.8rem;
+    &:nth-child(odd){
+      background-color: $color-blue-lighter;
+    }
+    &:nth-child(even){
+      background-color: $color-white;
+    }
+  }
+  .feat-part{
+    padding: 1.5rem 0;
+    background-color: $color-white;
+  }
+  .section-feature {
+    min-height: 6rem;
+  }
+  .container{
+    margin: 0 auto;
+    height:100%;
+    position: relative;
+    max-width: 12.2rem;
+  }
+  .feat-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    .feat-img {
+      height: 1.2rem;
+      width: 1.2rem;
+      border-radius: 100%;
+      margin-bottom: .2rem;
+      color: $color-white;
+      i {
+        line-height: 1.2rem;
+        font-size: .6rem;
+      }
+    }
+    .feat-title {
+      font-size: .16rem;
+      line-height: .3rem;
+    }
+    &:first-child {
+      .feat-img {
+        background-color: rgb(248, 88, 96);
+      }
+    }
+    &:nth-child(2) {
+      .feat-img {
+        background-color: #f9bb13;
+      }
+    }
+    &:nth-child(3) {
+      .feat-img {
+        background-color: #20ab8e;
+      }
+    }
+    &:nth-child(4) {
+      .feat-img {
+        background-color: rgb(66, 165, 245);
+      }
+    }
+  }
+  .img-container{
+    width: 100%;
+    position: absolute;
+    top: .74rem;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: right;
+    .img{
+      width: 7.12rem;
+      border-radius: 4px;
+      box-shadow : 0 30px 60px rgba(0,0,0,0.2);
+    }
+  }
+  .m-skew {
+    position: relative;
+    .skew-container {
+      padding: 0 1rem;
+    }
+    .m-skew-bg {
+      position: absolute;
+      left: 0;
+      top: 5%;
+      height: 600px;
+      width: 100%;
+      transform: skewY(-11deg);
+      background-image: linear-gradient(180deg, #93a5cf 0%, #e4efe9 100%);
+      .m-bg-mask {
+        position: absolute;
+        height: 200px;
+      }
+      .m-bg-mask0 {
+        bottom: 0;
+        left: 0;
+        width: 30%;
+        background-image: linear-gradient(120deg, #6ab3fd 0%, #c1cfde 102%);
+      }
+      .m-bg-mask1 {
+        bottom: 200px;
+        right: 0;
+        width: 36%;
+        background-image: linear-gradient(219deg, #84a1ce 0%, #e4efe9 100%);
+      }
+      .m-bg-mask2 {
+        top: 0;
+        left: 0;
+        width: 30%;
+        background-image: linear-gradient(219deg, #93a5cf 0%, #d7e3e5 100%);
+      }
+    }
+  }
+}
+
+.home-section {
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  .title {
+    color: $color-text-dark;
+    line-height: .32rem;
+    margin-bottom: .08rem;
+    font-size: .24rem;
+  }
+  .desc {
+    color: $color-text-light;
+    font-size: .16rem;
+  }
+  .section-item {
+    text-align: left;
+    padding: .24rem;
+    .img {
+      width: .48rem;
+      height: .48rem;
+      background-image: linear-gradient(-20deg, #21d4fd 0%, #b721ff 100%);
+      border-radius: 50%;
+      text-align: center;
+      line-height: .48rem;
+      font-size: .24rem;
+      color: #fff;
+      margin-bottom: .24rem;
+    }
+    .title {
+      color: $color-text-dark;
+      font-size: .2rem;
+    }
+    .desc {
+      color: $color-text-light;
+      font-size: .16rem;
+    }
+  }
+  .row-card {
+    margin-top: .48rem;
+    padding: 0 .24rem;
+  }
+  .section-card {
+    padding-bottom: 1rem;
+    .ant-card {
+      font-size: .17rem;
+      border-radius: .04rem;
+      box-shadow: 0 16px 35px rgba(50,50,93,.1), 0 5px 16px rgba(0,0,0,.07);
+      border: none;
+    }
+    .ant-card:not(.ant-card-no-hovering):hover {
+      box-shadow: 0 16px 35px rgba(50,50,93,.1), 0 5px 16px rgba(0,0,0,.07);
+    }
+    .ant-card-head {
+      background-color: $color-blue-grey-lighter;
+      border-top-left-radius: .04rem;
+      border-top-right-radius: .04rem;
+    }
+    .ant-card-head-title {
+      font-size: .17rem;
+      color: $color-text-dark;
+    }
+    .ant-card-body {
+      text-align: left;
+      padding: 0;
+    }
+    .mock-desc {
+      padding: .32rem;
+      min-height: 8em;
+    }
+    padding: .08rem;
+  }
+  .code {
+    color: $color-text-light;
+    background-color: $color-blue-grey-lighter;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    .orderNum {
+      background-color: $color-bg-lightblue;
+      display: inline-block;
+      text-align: center;
+      width: .4rem;
+      margin-right: .5em;
+      user-select: none;
+    }
+    .orderNum-first {
+      padding-top: .5em;
+    }
+    .orderNum-last {
+      border-bottom-left-radius: 4px;
+      padding-bottom: .5em;
+    }
+    .string {
+      color: #ff561b;
+    }
+    .number {
+      color: #57cf27;
+    }
+    .keyword {
+      color: #2359f1;
+    }
+    .item {
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .mock-after {
+    .ant-card-head {
+      background-color: $color-bg-lightblue;
+    }
+    .ant-card-head-title {
+      color: #4074af;
+    }
+  }
+}
+
+.section-manage {
+  .section-card{
+    padding-top: .24rem;
+    .ant-card {
+      border-radius: .04rem;
+    }
+    .ant-card-body {
+      padding: 0;
+    }
+  }
+  .section-block {
+    padding: .24rem;
+    .item {
+      font-size: .14rem;
+    }
+  }
+  .block-first {
+    background-color: #5f48fe;
+    border-top-left-radius: .04rem;
+    border-top-right-radius: .04rem;
+  }
+  .block-second {
+    background-color: #5f79fe;
+  }
+  .block-third {
+    background-color: #3ab1f9;
+    border-bottom-left-radius: .04rem;
+    border-bottom-right-radius: .04rem;
+  }
+  .ant-card-body, h4 {
+    color: #fff;
+  }
+  .manage-word {
+    text-align: left;
+    padding-left: .48rem;
+    .icon {
+      width: .72rem;
+      height: .72rem;
+      line-height: .72rem;
+      text-align: center;
+      background-color: #5f48fe;
+      border-radius: 50%;
+      font-size: .4rem;
+      color: #fff;
+      margin-bottom: .24rem;
+    }
+    .desc {
+      margin-bottom: .16rem;
+    }
+  }
+}
+
+.row-tip {
+  margin-top: .48rem;
+  padding-top: .48rem;
+  padding-bottom: .24rem;
+  background-color: #ececec;
+  .container {
+    display: flex;
+    align-items: center;
+    max-width: 12.2rem;
+    .tip-title {
+      flex: 2;
+    }
+    .tip-btns {
+      flex: 1;
+    }
+  }
+  .btn-group {
+    white-space: nowrap;
+  }
+  .title {
+    -webkit-font-smoothing: antialiased;
+    padding-left: .24rem;
+    color: #2e2e5a;
+    line-height: .32rem;
+    margin-bottom: .08rem;
+    font-size: .24rem;
+  }
+  .desc {
+    -webkit-font-smoothing: antialiased;
+    padding-left: .24rem;
+    color: #6d7c90;
+    font-size: .16rem;
+  }
+}
+
+// LOGO 旋转动画
+@keyframes spin
+{
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (max-width: 1200px) {
+  .home-header, .home-des {
+    text-align: center;
+  }
+  .home-main .main-one .home-des .logo {
+    justify-content: center;
+  }
+}

client/containers/Login/Login.js

@@ -0,0 +1,151 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Form, Button, Input, Icon, message, Radio } from 'antd';
+import { loginActions, loginLdapActions } from '../../reducer/modules/user';
+import { withRouter } from 'react-router';
+const FormItem = Form.Item;
+const RadioGroup = Radio.Group;
+
+import './Login.scss';
+
+const formItemStyle = {
+  marginBottom: '.16rem'
+};
+
+const changeHeight = {
+  height: '.42rem'
+};
+
+@connect(
+  state => {
+    return {
+      loginData: state.user,
+      isLDAP: state.user.isLDAP
+    };
+  },
+  {
+    loginActions,
+    loginLdapActions
+  }
+)
+@withRouter
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loginType: 'ldap'
+    };
+  }
+
+  static propTypes = {
+    form: PropTypes.object,
+    history: PropTypes.object,
+    loginActions: PropTypes.func,
+    loginLdapActions: PropTypes.func,
+    isLDAP: PropTypes.bool
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    const form = this.props.form;
+    form.validateFields((err, values) => {
+      if (!err) {
+        if (this.props.isLDAP && this.state.loginType === 'ldap') {
+          this.props.loginLdapActions(values).then(res => {
+            if (res.payload.data.errcode == 0) {
+              this.props.history.replace('/group');
+              message.success('登录成功! ');
+            }
+          });
+        } else {
+          this.props.loginActions(values).then(res => {
+            if (res.payload.data.errcode == 0) {
+              this.props.history.replace('/group');
+              message.success('登录成功! ');
+            }
+          });
+        }
+      }
+    });
+  };
+
+  componentDidMount() {
+    //Qsso.attach('qsso-login','/api/user/login_by_token')
+    console.log('isLDAP', this.props.isLDAP);
+  }
+  handleFormLayoutChange = e => {
+    this.setState({ loginType: e.target.value });
+  };
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+
+    const { isLDAP } = this.props;
+
+    const emailRule =
+      this.state.loginType === 'ldap'
+        ? {}
+        : {
+            required: true,
+            message: '请输入正确的email!',
+            pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$/
+          };
+    return (
+      <Form onSubmit={this.handleSubmit}>
+        {/* 登录类型 (普通登录／LDAP登录) */}
+        {isLDAP && (
+          <FormItem>
+            <RadioGroup defaultValue="ldap" onChange={this.handleFormLayoutChange}>
+              <Radio value="ldap">LDAP</Radio>
+              <Radio value="normal">普通登录</Radio>
+            </RadioGroup>
+          </FormItem>
+        )}
+        {/* 用户名 (Email) */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('email', { rules: [emailRule] })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="user" style={{ fontSize: 13 }} />}
+              placeholder="Email"
+            />
+          )}
+        </FormItem>
+
+        {/* 密码 */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('password', {
+            rules: [{ required: true, message: '请输入密码!' }]
+          })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
+              type="password"
+              placeholder="Password"
+            />
+          )}
+        </FormItem>
+
+        {/* 登录按钮 */}
+        <FormItem style={formItemStyle}>
+          <Button
+            style={changeHeight}
+            type="primary"
+            htmlType="submit"
+            className="login-form-button"
+          >
+            登录
+          </Button>
+        </FormItem>
+
+        {/* <div className="qsso-breakline">
+          <span className="qsso-breakword">或</span>
+        </div>
+        <Button style={changeHeight} id="qsso-login" type="primary" className="login-form-button" size="large" ghost>QSSO登录</Button> */}
+      </Form>
+    );
+  }
+}
+const LoginForm = Form.create()(Login);
+export default LoginForm;

client/containers/Login/Login.scss

@@ -0,0 +1,64 @@
+@import '../../styles/common.scss';
+
+// .login-body {
+//   background-color: #fff;
+// }
+.login-container {
+  padding-bottom: .6rem;
+}
+
+.login-form-button {
+  background-image: linear-gradient(to right, #6d69fe 0%, #48a0fa 100%) !important;
+  border: none !important;
+  margin-top: .2rem;
+  width: 100%;
+}
+
+.ant-form-item {
+  margin-bottom: .1rem;
+}
+
+.qsso-breakline{
+  display: flex;
+  align-items: center;
+  color: #6d7c90;
+  margin: .2rem auto;
+  &:before, &:after{
+    content: "";
+    display: inline-block;
+    height: .02rem;
+    flex: 1;
+    border-top: .01rem solid #6d7c90;
+  }
+  .qsso-breakword{
+    padding: 0 .1rem;
+  }
+}
+
+.card-login {
+  margin-top: 1.6rem;
+  margin-bottom: 1.6rem;
+  border-radius: .04rem;
+  position: relative;
+  .login-logo {
+    font-size: 0;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    background-image: linear-gradient(-20deg, #21d4fd 0%, #b721ff 100%);
+    transform: translate(-50%, -50%);
+    padding: .16rem;
+    border-radius: 50%;
+    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+  }
+  .login-title {
+    text-align: center;
+    padding-top: .5rem;
+    font-size: .4rem;
+    font-weight: 200;
+    color: #2e2e5a;
+  }
+  .svg {
+    animation: spin 5s linear infinite;
+  }
+}

client/containers/Login/LoginContainer.js

@@ -0,0 +1,36 @@
+import React, { PureComponent as Component } from 'react';
+import Login from './LoginWrap';
+import { Row, Col, Card } from 'antd';
+import LogoSVG from '../../components/LogoSVG/index.js';
+
+class LoginContainer extends Component {
+  render() {
+    return (
+      <div className="g-body login-body">
+        <div className="m-bg">
+          <div className="m-bg-mask m-bg-mask0" />
+          <div className="m-bg-mask m-bg-mask1" />
+          <div className="m-bg-mask m-bg-mask2" />
+          <div className="m-bg-mask m-bg-mask3" />
+        </div>
+        <div className="main-one login-container">
+          <div className="container">
+            <Row type="flex" justify="center">
+              <Col xs={20} sm={16} md={12} lg={8} className="container-login">
+                <Card className="card-login">
+                  <h2 className="login-title">YAPI</h2>
+                  <div className="login-logo">
+                    <LogoSVG length="100px" />
+                  </div>
+                  <Login />
+                </Card>
+              </Col>
+            </Row>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LoginContainer;

client/containers/Login/LoginWrap.js

@@ -0,0 +1,43 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Tabs } from 'antd';
+import LoginForm from './Login';
+import RegForm from './Reg';
+import './Login.scss';
+const TabPane = Tabs.TabPane;
+
+@connect(state => ({
+  loginWrapActiveKey: state.user.loginWrapActiveKey,
+  canRegister: state.user.canRegister
+}))
+export default class LoginWrap extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    form: PropTypes.object,
+    loginWrapActiveKey: PropTypes.string,
+    canRegister: PropTypes.bool
+  };
+
+  render() {
+    const { loginWrapActiveKey, canRegister } = this.props;
+    {/** show only login when register is disabled */}
+    return (
+      <Tabs
+        defaultActiveKey={loginWrapActiveKey}
+        className="login-form"
+        tabBarStyle={{ border: 'none' }}
+      >
+        <TabPane tab="登录" key="1">
+          <LoginForm />
+        </TabPane>
+        <TabPane tab={"注册"} key="2">
+          {canRegister ? <RegForm /> : <div style={{minHeight: 200}}>管理员已禁止注册，请联系管理员</div>}
+        </TabPane>
+      </Tabs>
+    );
+  }
+}

client/containers/Login/Reg.js

@@ -0,0 +1,169 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Form, Button, Input, Icon, message } from 'antd';
+import { regActions } from '../../reducer/modules/user';
+import { withRouter } from 'react-router';
+const FormItem = Form.Item;
+const formItemStyle = {
+  marginBottom: '.16rem'
+};
+
+const changeHeight = {
+  height: '.42rem'
+};
+
+@connect(
+  state => {
+    return {
+      loginData: state.user
+    };
+  },
+  {
+    regActions
+  }
+)
+@withRouter
+class Reg extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      confirmDirty: false
+    };
+  }
+
+  static propTypes = {
+    form: PropTypes.object,
+    history: PropTypes.object,
+    regActions: PropTypes.func
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    const form = this.props.form;
+    form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        this.props.regActions(values).then(res => {
+          if (res.payload.data.errcode == 0) {
+            this.props.history.replace('/group');
+            message.success('注册成功! ');
+          }
+        });
+      }
+    });
+  };
+
+  checkPassword = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value && value !== form.getFieldValue('password')) {
+      callback('两次输入的密码不一致啊!');
+    } else {
+      callback();
+    }
+  };
+
+  checkConfirm = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value && this.state.confirmDirty) {
+      form.validateFields(['confirm'], { force: true });
+    }
+    callback();
+  };
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form onSubmit={this.handleSubmit}>
+        {/* 用户名 */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('userName', {
+            rules: [{ required: true, message: '请输入用户名!' }]
+          })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="user" style={{ fontSize: 13 }} />}
+              placeholder="Username"
+            />
+          )}
+        </FormItem>
+
+        {/* Emaiil */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('email', {
+            rules: [
+              {
+                required: true,
+                message: '请输入email!',
+                pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$/
+              }
+            ]
+          })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="mail" style={{ fontSize: 13 }} />}
+              placeholder="Email"
+            />
+          )}
+        </FormItem>
+
+        {/* 密码 */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('password', {
+            rules: [
+              {
+                required: true,
+                message: '请输入密码!'
+              },
+              {
+                validator: this.checkConfirm
+              }
+            ]
+          })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
+              type="password"
+              placeholder="Password"
+            />
+          )}
+        </FormItem>
+
+        {/* 密码二次确认 */}
+        <FormItem style={formItemStyle}>
+          {getFieldDecorator('confirm', {
+            rules: [
+              {
+                required: true,
+                message: '请再次输入密码密码!'
+              },
+              {
+                validator: this.checkPassword
+              }
+            ]
+          })(
+            <Input
+              style={changeHeight}
+              prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
+              type="password"
+              placeholder="Confirm Password"
+            />
+          )}
+        </FormItem>
+
+        {/* 注册按钮 */}
+        <FormItem style={formItemStyle}>
+          <Button
+            style={changeHeight}
+            type="primary"
+            htmlType="submit"
+            className="login-form-button"
+          >
+            注册
+          </Button>
+        </FormItem>
+      </Form>
+    );
+  }
+}
+const RegForm = Form.create()(Reg);
+export default RegForm;

client/containers/News/News.js

@@ -0,0 +1,80 @@
+import './News.scss';
+import React, { PureComponent as Component } from 'react';
+import NewsTimeline from './NewsTimeline/NewsTimeline';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import Breadcrumb from '../../components/Breadcrumb/Breadcrumb';
+import { Button } from 'antd';
+import { getMockUrl } from '../../reducer/modules/news.js';
+import Subnav from '../../components/Subnav/Subnav.js';
+
+@connect(
+  state => {
+    return {
+      uid: state.user.uid + ''
+    };
+  },
+  {
+    getMockUrl: getMockUrl
+  }
+)
+class News extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      mockURL: ''
+    };
+  }
+  static propTypes = {
+    uid: PropTypes.string,
+    getMockUrl: PropTypes.func
+  };
+  UNSAFE_componentWillMount() {
+    //const that = this;
+    // this.props.getMockUrl(2724).then(function(data){
+    //   const { prd_host, basepath, protocol } = data.payload.data.data;
+    //   const mockURL = `${protocol}://${prd_host}${basepath}/{path}`;
+    //   that.setState({
+    //     mockURL: mockURL
+    //   })
+    // })
+  }
+  render() {
+    return (
+      <div>
+        <Subnav
+          default={'动态'}
+          data={[
+            {
+              name: '动态',
+              path: '/news'
+            },
+            {
+              name: '测试',
+              path: '/follow'
+            },
+            {
+              name: '设置',
+              path: '/follow'
+            }
+          ]}
+        />
+        <div className="g-row">
+          <section className="news-box m-panel">
+            <div className="logHead">
+              <Breadcrumb />
+              <div className="Mockurl">
+                <span>Mock地址：</span>
+                <p>{this.state.mockURL}</p>
+                <Button type="primary">下载Mock数据</Button>
+              </div>
+            </div>
+            <NewsTimeline />
+          </section>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default News;

client/containers/News/News.scss

@@ -0,0 +1,101 @@
+@import '../../styles/mixin.scss';
+
+.news-box {
+  @include row-width-limit;
+
+  display: -webkit-box;
+  -webkit-box-flex: 1;
+  margin: 0px auto 0 auto;
+  font-size: 0.14rem;
+  background: #FFF;
+  display: block;
+
+  .news-timeline{
+    padding: 24px;
+    padding-left: 125px;
+    color: #6b6c6d;
+    .ant-timeline-item{
+      min-height: 60px;
+    }
+    .ant-timeline-item-head{
+      width: 30px;
+      height: 30px;
+      left: -8px;
+      top: -4px;
+      border-color:#e1e3e4;
+    }
+    .logusername{
+      color: #4eaef3;
+      padding: 0px 16px 0px 8px;
+      cursor: pointer;
+    }
+    .logtype{
+      padding-right: 16px;
+    }
+    .logtime{
+      padding-right: 16px;
+
+    }
+    .logcontent{
+      display: block;
+      padding-left: 8px;
+      line-height: 24px;
+    }
+    .logoTimeago{
+      position: absolute;
+      left: -80px;
+      top: 5px;
+      color: #c0c1c1;
+    }
+    .logbidden{
+      color: #c0c1c1;
+      cursor: default;
+      line-height: 30px;
+      padding-left: 30px;
+    }
+    .loggetMore{
+      line-height: 30px;
+      padding-left: 30px;
+      color: #4eaef3;
+    }
+  }
+  .logHead{
+    height: 80px;
+    width: 100%;
+    border-bottom: 1px solid #e9e9e9;
+    padding: 24px 0px;
+    overflow: hidden;
+    .breadcrumb-container{
+      float: left;
+      min-width:100px;
+    }
+    .Mockurl{
+      width: 500px;
+      float: right;
+      color: #7b7b7b;
+      >span{
+        float: left;
+        line-height: 30px;
+      }
+      p{
+        width: 60%;
+        display: inline-block;
+        position: relative;
+        padding: 4px 7px;
+        height: 28px;
+        cursor: text;
+        font-size: 13px;
+        color: rgba(0,0,0,.65);
+        background-color: #fff;
+        background-image: none;
+        border: 1px solid #d9d9d9;
+        -webkit-transition: all .3s;
+        transition: all .3s;
+        overflow-x:auto;
+      }
+      button{
+        float: right;
+      }
+    }
+  }
+}

client/containers/News/NewsList/NewsList.js

@@ -0,0 +1,80 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Menu } from 'antd';
+import { fetchNewsData } from '../../../reducer/modules/news.js';
+
+const logList = [
+  {
+    name: '用户'
+  },
+  {
+    name: '分组'
+  },
+  {
+    name: '接口'
+  },
+  {
+    name: '项目'
+  }
+];
+@connect(
+  state => {
+    // console.log(state);
+    return {
+      uid: state.user.uid + '',
+      newsData: state.news.newsData
+    };
+  },
+  {
+    fetchNewsData
+  }
+)
+class NewsList extends Component {
+  static propTypes = {
+    fetchNewsData: PropTypes.func,
+    setLoading: PropTypes.func,
+    uid: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedKeys: 0
+    };
+  }
+  getLogData(e) {
+    // page,size,logId
+    // console.log(e.key);
+    this.setState({
+      selectedKeys: +e.key
+    });
+    const that = this;
+    this.props.setLoading(true);
+    this.props.fetchNewsData(+this.props.uid, 0, 5).then(function() {
+      that.props.setLoading(false);
+    });
+  }
+  render() {
+    return (
+      <div className="logList">
+        <h3>日志类型</h3>
+        <Menu
+          mode="inline"
+          selectedKeys={[`${this.state.selectedKeys}`]}
+          onClick={this.getLogData.bind(this)}
+        >
+          {logList.map((item, i) => {
+            return (
+              <Menu.Item key={i} className="log-item">
+                {item.name}
+              </Menu.Item>
+            );
+          })}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default NewsList;

client/containers/News/NewsTimeline/NewsTimeline.js

@@ -0,0 +1,89 @@
+import React, { PureComponent as Component } from 'react';
+import { Timeline, Spin } from 'antd';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { formatTime } from '../../../common.js';
+import { fetchNewsData } from '../../../reducer/modules/news.js';
+import { timeago } from '../../../../common/utils';
+// timeago(new Date().getTime() - 40);
+
+@connect(
+  state => {
+    return {
+      newsData: state.news.newsData,
+      curpage: state.news.curpage
+    };
+  },
+  {
+    fetchNewsData: fetchNewsData
+  }
+)
+class NewsTimeline extends Component {
+  static propTypes = {
+    newsData: PropTypes.object,
+    fetchNewsData: PropTypes.func,
+
+    setLoading: PropTypes.func,
+    loading: PropTypes.bool,
+    curpage: PropTypes.number
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      bidden: '',
+      loading: false
+    };
+  }
+
+  getMore() {
+    const that = this;
+    this.setState({ loading: true });
+    this.props.fetchNewsData(21, 'project', this.props.curpage, 8).then(function() {
+      that.setState({ loading: false });
+      if (that.props.newsData.total + 1 === that.props.curpage) {
+        that.setState({ bidden: 'logbidden' });
+      }
+    });
+  }
+
+  UNSAFE_componentWillMount() {
+    this.props.fetchNewsData(21, 'project', this.props.curpage, 8);
+  }
+
+  render() {
+    let data = this.props.newsData ? this.props.newsData.list : [];
+    if (data && data.length) {
+      data = data.map(function(item, i) {
+        return (
+          <Timeline.Item key={i}>
+            <span className="logoTimeago">{timeago(item.add_time)}</span>
+            <span className="logusername">{item.username}</span>
+            <span className="logtype">{item.type}</span>
+            <span className="logtime">{formatTime(item.add_time)}</span>
+            <span className="logcontent">{item.content}</span>
+          </Timeline.Item>
+        );
+      });
+    } else {
+      data = '';
+    }
+    let pending = this.state.bidden ? (
+      <a className={this.state.bidden}>以上为全部内容</a>
+    ) : (
+      <a className="loggetMore" onClick={this.getMore.bind(this)}>
+        查看更多
+      </a>
+    );
+    if (this.state.loading) {
+      pending = <Spin />;
+    }
+    return (
+      <section className="news-timeline">
+        {data ? <Timeline pending={pending}>{data}</Timeline> : data}
+      </section>
+    );
+  }
+}
+
+export default NewsTimeline;

client/containers/Project/Activity/Activity.js

@@ -0,0 +1,58 @@
+import './Activity.scss';
+import React, { PureComponent as Component } from 'react';
+import TimeTree from '../../../components/TimeLine/TimeLine';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Button } from 'antd';
+@connect(state => {
+  return {
+    uid: state.user.uid + '',
+    curdata: state.inter.curdata,
+    currProject: state.project.currProject
+  };
+})
+class Activity extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    uid: PropTypes.string,
+    getMockUrl: PropTypes.func,
+    match: PropTypes.object,
+    curdata: PropTypes.object,
+    currProject: PropTypes.object
+  };
+  render() {
+    let { currProject } = this.props;
+    return (
+      <div className="g-row">
+        <section className="news-box m-panel">
+          <div style={{ display: 'none' }} className="logHead">
+            {/*<Breadcrumb />*/}
+            <div className="projectDes">
+              <p>高效、易用、可部署的API管理平台</p>
+            </div>
+            <div className="Mockurl">
+              <span>Mock地址：</span>
+              <p>
+                {location.protocol +
+                  '//' +
+                  location.hostname +
+                  (location.port !== '' ? ':' + location.port : '') +
+                  `/mock/${currProject._id}${currProject.basepath}/yourPath`}
+              </p>
+              <Button type="primary">
+                <a href={`/api/project/download?project_id=${this.props.match.params.id}`}>
+                  下载Mock数据
+                </a>
+              </Button>
+            </div>
+          </div>
+          <TimeTree type={'project'} typeid={+this.props.match.params.id} />
+        </section>
+      </div>
+    );
+  }
+}
+
+export default Activity;

client/containers/Project/Activity/Activity.scss

@@ -0,0 +1 @@
+

client/containers/Project/Interface/Interface.js

@@ -0,0 +1,141 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs, Layout } from 'antd';
+import { Route, Switch, matchPath } from 'react-router-dom';
+import { connect } from 'react-redux';
+const { Content, Sider } = Layout;
+
+import './interface.scss';
+
+import InterfaceMenu from './InterfaceList/InterfaceMenu.js';
+import InterfaceList from './InterfaceList/InterfaceList.js';
+import InterfaceContent from './InterfaceList/InterfaceContent.js';
+
+import InterfaceColMenu from './InterfaceCol/InterfaceColMenu.js';
+import InterfaceColContent from './InterfaceCol/InterfaceColContent.js';
+import InterfaceCaseContent from './InterfaceCol/InterfaceCaseContent.js';
+import { getProject } from '../../../reducer/modules/project';
+import { setColData } from '../../../reducer/modules/interfaceCol.js';
+const contentRouter = {
+  path: '/project/:id/interface/:action/:actionId',
+  exact: true
+};
+
+const InterfaceRoute = props => {
+  let C;
+  if (props.match.params.action === 'api') {
+    if (!props.match.params.actionId) {
+      C = InterfaceList;
+    } else if (!isNaN(props.match.params.actionId)) {
+      C = InterfaceContent;
+    } else if (props.match.params.actionId.indexOf('cat_') === 0) {
+      C = InterfaceList;
+    }
+  } else if (props.match.params.action === 'col') {
+    C = InterfaceColContent;
+  } else if (props.match.params.action === 'case') {
+    C = InterfaceCaseContent;
+  } else {
+    const params = props.match.params;
+    props.history.replace('/project/' + params.id + '/interface/api');
+    return null;
+  }
+  return <C {...props} />;
+};
+
+InterfaceRoute.propTypes = {
+  match: PropTypes.object,
+  history: PropTypes.object
+};
+
+@connect(
+  state => {
+    return {
+      isShowCol: state.interfaceCol.isShowCol
+    };
+  },
+  {
+    setColData,
+    getProject
+  }
+)
+class Interface extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    history: PropTypes.object,
+    location: PropTypes.object,
+    isShowCol: PropTypes.bool,
+    getProject: PropTypes.func,
+    setColData: PropTypes.func
+    // fetchInterfaceColList: PropTypes.func
+  };
+
+  constructor(props) {
+    super(props);
+    // this.state = {
+    //   curkey: this.props.match.params.action === 'api' ? 'api' : 'colOrCase'
+    // }
+  }
+
+  onChange = action => {
+    let params = this.props.match.params;
+    if (action === 'colOrCase') {
+      action = this.props.isShowCol ? 'col' : 'case';
+    }
+    this.props.history.push('/project/' + params.id + '/interface/' + action);
+  };
+  async UNSAFE_componentWillMount() {
+    this.props.setColData({
+      isShowCol: true
+    });
+    // await this.props.fetchInterfaceColList(this.props.match.params.id)
+  }
+  render() {
+    const { action } = this.props.match.params;
+    // const activeKey = this.state.curkey;
+    const activeKey = action === 'api' ? 'api' : 'colOrCase';
+
+    return (
+      <Layout style={{ minHeight: 'calc(100vh - 156px)', marginLeft: '24px', marginTop: '24px' }}>
+        <Sider style={{ height: '100%' }} width={450}>
+          <div className="left-menu">
+            <Tabs type="card" className="tabs-large" activeKey={activeKey} onChange={this.onChange}>
+              <Tabs.TabPane tab="接口列表" key="api" />
+              <Tabs.TabPane tab="测试集合" key="colOrCase" />
+            </Tabs>
+            {activeKey === 'api' ? (
+              <InterfaceMenu
+                router={matchPath(this.props.location.pathname, contentRouter)}
+                projectId={this.props.match.params.id}
+              />
+            ) : (
+              <InterfaceColMenu
+                router={matchPath(this.props.location.pathname, contentRouter)}
+                projectId={this.props.match.params.id}
+              />
+            )}
+          </div>
+        </Sider>
+        <Layout>
+          <Content
+            style={{
+              height: '100%',
+              margin: '0 24px 0 16px',
+              overflow: 'initial',
+              backgroundColor: '#fff'
+            }}
+          >
+            <div className="right-content">
+              <Switch>
+                <Route exact path="/project/:id/interface/:action" component={InterfaceRoute} />
+                <Route {...contentRouter} component={InterfaceRoute} />
+              </Switch>
+            </div>
+          </Content>
+        </Layout>
+      </Layout>
+    );
+  }
+}
+
+export default Interface;

client/containers/Project/Interface/InterfaceCol/CaseReport.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, Tabs } from 'antd';
+const TabPane = Tabs.TabPane;
+function jsonFormat(json) {
+  // console.log('json',json)
+  if (json && typeof json === 'object') {
+    return JSON.stringify(json, null, '   ');
+  }
+  return json;
+}
+
+const CaseReport = function(props) {
+  let params = jsonFormat(props.data);
+  let headers = jsonFormat(props.headers, null, '   ');
+  let res_header = jsonFormat(props.res_header, null, '   ');
+  let res_body = jsonFormat(props.res_body);
+  let httpCode = props.status;
+  let validRes;
+  if (props.validRes && Array.isArray(props.validRes)) {
+    validRes = props.validRes.map((item, index) => {
+      return <div key={index}>{item.message}</div>;
+    });
+  }
+
+  return (
+    <div className="report">
+      <Tabs defaultActiveKey="request">
+        <TabPane className="case-report-pane" tab="Request" key="request">
+          <Row className="case-report">
+            <Col className="case-report-title" span="6">
+              Url
+            </Col>
+            <Col span="18">{props.url}</Col>
+          </Row>
+          {props.query ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                Query
+              </Col>
+              <Col span="18">{props.query}</Col>
+            </Row>
+          ) : null}
+
+          {props.headers ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                Headers
+              </Col>
+              <Col span="18">
+                <pre>{headers}</pre>
+              </Col>
+            </Row>
+          ) : null}
+
+          {params ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                Body
+              </Col>
+              <Col span="18">
+                <pre style={{ whiteSpace: 'pre-wrap' }}>{params}</pre>
+              </Col>
+            </Row>
+          ) : null}
+        </TabPane>
+        <TabPane className="case-report-pane" tab="Response" key="response">
+          <Row  className="case-report">
+            <Col className="case-report-title" span="6">
+              HttpCode
+            </Col>
+            <Col span="18">
+              <pre>{httpCode}</pre>
+            </Col>
+          </Row>
+          {props.res_header ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                Headers
+              </Col>
+              <Col span="18">
+                <pre>{res_header}</pre>
+              </Col>
+            </Row>
+          ) : null}
+          {props.res_body ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                Body
+              </Col>
+              <Col span="18">
+                <pre>{res_body}</pre>
+              </Col>
+            </Row>
+          ) : null}
+        </TabPane>
+        <TabPane className="case-report-pane" tab="验证结果" key="valid">
+          {props.validRes ? (
+            <Row className="case-report">
+              <Col className="case-report-title" span="6">
+                验证结果
+              </Col>
+              <Col span="18"><pre>
+                {validRes}  
+              </pre></Col>
+            </Row>
+          ) : null}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+
+CaseReport.propTypes = {
+  url: PropTypes.string,
+  data: PropTypes.any,
+  headers: PropTypes.object,
+  res_header: PropTypes.object,
+  res_body: PropTypes.any,
+  query: PropTypes.string,
+  validRes: PropTypes.array,
+  status: PropTypes.number
+};
+
+export default CaseReport;

client/containers/Project/Interface/InterfaceCol/ImportInterface.js

@@ -0,0 +1,241 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { Table, Select, Tooltip, Icon } from 'antd';
+import variable from '../../../../constants/variable';
+import { connect } from 'react-redux';
+const Option = Select.Option;
+import { fetchInterfaceListMenu } from '../../../../reducer/modules/interface.js';
+
+@connect(
+  state => {
+    return {
+      projectList: state.project.projectList,
+      list: state.inter.list
+    };
+  },
+  {
+    fetchInterfaceListMenu
+  }
+)
+export default class ImportInterface extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    selectedRowKeys: [],
+    categoryCount: {},
+    project: this.props.currProjectId
+  };
+
+  static propTypes = {
+    list: PropTypes.array,
+    selectInterface: PropTypes.func,
+    projectList: PropTypes.array,
+    currProjectId: PropTypes.string,
+    fetchInterfaceListMenu: PropTypes.func
+  };
+
+  async componentDidMount() {
+    // console.log(this.props.currProjectId)
+    await this.props.fetchInterfaceListMenu(this.props.currProjectId);
+  }
+
+  // 切换项目
+  onChange = async val => {
+    this.setState({
+      project: val,
+      selectedRowKeys: [],
+      categoryCount: {}
+    });
+    await this.props.fetchInterfaceListMenu(val);
+  };
+
+  render() {
+    const { list, projectList } = this.props;
+
+    // const { selectedRowKeys } = this.state;
+    const data = list.map(item => {
+      return {
+        key: 'category_' + item._id,
+        title: item.name,
+        isCategory: true,
+        children: item.list
+          ? item.list.map(e => {
+              e.key = e._id;
+              e.categoryKey = 'category_' + item._id;
+              e.categoryLength = item.list.length;
+              return e;
+            })
+          : []
+      };
+    });
+    const self = this;
+    const rowSelection = {
+      // onChange: (selectedRowKeys) => {
+      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+      // if (selectedRows.isCategory) {
+      //   const selectedRowKeys = selectedRows.children.map(item => item._id)
+      //   this.setState({ selectedRowKeys })
+      // }
+      // this.props.onChange(selectedRowKeys.filter(id => ('' + id).indexOf('category') === -1));
+      // },
+      onSelect: (record, selected) => {
+        // console.log(record, selected, selectedRows);
+        const oldSelecteds = self.state.selectedRowKeys;
+        const categoryCount = self.state.categoryCount;
+        const categoryKey = record.categoryKey;
+        const categoryLength = record.categoryLength;
+        let selectedRowKeys = [];
+        if (record.isCategory) {
+          selectedRowKeys = record.children.map(item => item._id).concat(record.key);
+          if (selected) {
+            selectedRowKeys = selectedRowKeys
+              .filter(id => oldSelecteds.indexOf(id) === -1)
+              .concat(oldSelecteds);
+            categoryCount[categoryKey] = categoryLength;
+          } else {
+            selectedRowKeys = oldSelecteds.filter(id => selectedRowKeys.indexOf(id) === -1);
+            categoryCount[categoryKey] = 0;
+          }
+        } else {
+          if (selected) {
+            selectedRowKeys = oldSelecteds.concat(record._id);
+            if (categoryCount[categoryKey]) {
+              categoryCount[categoryKey] += 1;
+            } else {
+              categoryCount[categoryKey] = 1;
+            }
+            if (categoryCount[categoryKey] === record.categoryLength) {
+              selectedRowKeys.push(categoryKey);
+            }
+          } else {
+            selectedRowKeys = oldSelecteds.filter(id => id !== record._id);
+            if (categoryCount[categoryKey]) {
+              categoryCount[categoryKey] -= 1;
+            }
+            selectedRowKeys = selectedRowKeys.filter(id => id !== categoryKey);
+          }
+        }
+        self.setState({ selectedRowKeys, categoryCount });
+        self.props.selectInterface(
+          selectedRowKeys.filter(id => ('' + id).indexOf('category') === -1),
+          self.state.project
+        );
+      },
+      onSelectAll: selected => {
+        // console.log(selected, selectedRows, changeRows);
+        let selectedRowKeys = [];
+        let categoryCount = self.state.categoryCount;
+        if (selected) {
+          data.forEach(item => {
+            if (item.children) {
+              categoryCount['category_' + item._id] = item.children.length;
+              selectedRowKeys = selectedRowKeys.concat(item.children.map(item => item._id));
+            }
+          });
+          selectedRowKeys = selectedRowKeys.concat(data.map(item => item.key));
+        } else {
+          categoryCount = {};
+          selectedRowKeys = [];
+        }
+        self.setState({ selectedRowKeys, categoryCount });
+        self.props.selectInterface(
+          selectedRowKeys.filter(id => ('' + id).indexOf('category') === -1),
+          self.state.project
+        );
+      },
+      selectedRowKeys: self.state.selectedRowKeys
+    };
+
+    const columns = [
+      {
+        title: '接口名称',
+        dataIndex: 'title',
+        width: '30%'
+      },
+      {
+        title: '接口路径',
+        dataIndex: 'path',
+        width: '40%'
+      },
+      {
+        title: '请求方法',
+        dataIndex: 'method',
+        render: item => {
+          let methodColor = variable.METHOD_COLOR[item ? item.toLowerCase() : 'get'];
+          return (
+            <span
+              style={{
+                color: methodColor.color,
+                backgroundColor: methodColor.bac,
+                borderRadius: 4
+              }}
+              className="colValue"
+            >
+              {item}
+            </span>
+          );
+        }
+      },
+      {
+        title: (
+          <span>
+            状态{' '}
+            <Tooltip title="筛选满足条件的接口集合">
+              <Icon type="question-circle-o" />
+            </Tooltip>
+          </span>
+        ),
+        dataIndex: 'status',
+        render: text => {
+          return (
+            text &&
+            (text === 'done' ? (
+              <span className="tag-status done">已完成</span>
+            ) : (
+              <span className="tag-status undone">未完成</span>
+            ))
+          );
+        },
+        filters: [
+          {
+            text: '已完成',
+            value: 'done'
+          },
+          {
+            text: '未完成',
+            value: 'undone'
+          }
+        ],
+        onFilter: (value, record) => {
+          let arr = record.children.filter(item => {
+            return item.status.indexOf(value) === 0;
+          });
+          return arr.length > 0;
+          // record.status.indexOf(value) === 0
+        }
+      }
+    ];
+
+    return (
+      <div>
+        <div className="select-project">
+          <span>选择要导入的项目： </span>
+          <Select value={this.state.project} style={{ width: 200 }} onChange={this.onChange}>
+            {projectList.map(item => {
+              return item.projectname ? (
+                ''
+              ) : (
+                <Option value={`${item._id}`} key={item._id}>
+                  {item.name}
+                </Option>
+              );
+            })}
+          </Select>
+        </div>
+        <Table columns={columns} rowSelection={rowSelection} dataSource={data} pagination={false} />
+      </div>
+    );
+  }
+}

client/containers/Project/Interface/InterfaceCol/InterfaceCaseContent.js

@@ -0,0 +1,235 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import { message, Tooltip, Input } from 'antd';
+import { getEnv } from '../../../../reducer/modules/project';
+import {
+  fetchInterfaceColList,
+  setColData,
+  fetchCaseData,
+  fetchCaseList
+} from '../../../../reducer/modules/interfaceCol';
+import { Postman } from '../../../../components';
+
+import './InterfaceCaseContent.scss';
+
+@connect(
+  state => {
+    return {
+      interfaceColList: state.interfaceCol.interfaceColList,
+      currColId: state.interfaceCol.currColId,
+      currCaseId: state.interfaceCol.currCaseId,
+      currCase: state.interfaceCol.currCase,
+      isShowCol: state.interfaceCol.isShowCol,
+      currProject: state.project.currProject,
+      projectEnv: state.project.projectEnv,
+      curUid: state.user.uid
+    };
+  },
+  {
+    fetchInterfaceColList,
+    fetchCaseData,
+    setColData,
+    fetchCaseList,
+    getEnv
+  }
+)
+@withRouter
+export default class InterfaceCaseContent extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    interfaceColList: PropTypes.array,
+    fetchInterfaceColList: PropTypes.func,
+    fetchCaseData: PropTypes.func,
+    setColData: PropTypes.func,
+    fetchCaseList: PropTypes.func,
+    history: PropTypes.object,
+    currColId: PropTypes.number,
+    currCaseId: PropTypes.number,
+    currCase: PropTypes.object,
+    isShowCol: PropTypes.bool,
+    currProject: PropTypes.object,
+    getEnv: PropTypes.func,
+    projectEnv: PropTypes.object,
+    curUid: PropTypes.number
+  };
+
+  state = {
+    isEditingCasename: true,
+    editCasename: ''
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  getColId(colList, currCaseId) {
+    let currColId = 0;
+    colList.forEach(col => {
+      col.caseList.forEach(caseItem => {
+        if (+caseItem._id === +currCaseId) {
+          currColId = col._id;
+        }
+      });
+    });
+    return currColId;
+  }
+
+  async UNSAFE_componentWillMount() {
+    const result = await this.props.fetchInterfaceColList(this.props.match.params.id);
+    let { currCaseId } = this.props;
+    const params = this.props.match.params;
+    const { actionId } = params;
+    currCaseId = +actionId || +currCaseId || result.payload.data.data[0].caseList[0]._id;
+    let currColId = this.getColId(result.payload.data.data, currCaseId);
+    // this.props.history.push('/project/' + params.id + '/interface/case/' + currCaseId);
+    await this.props.fetchCaseData(currCaseId);
+    this.props.setColData({ currCaseId: +currCaseId, currColId, isShowCol: false });
+    // 获取当前case 下的环境变量
+    await this.props.getEnv(this.props.currCase.project_id);
+    // await this.getCurrEnv()
+
+    this.setState({ editCasename: this.props.currCase.casename });
+  }
+
+  async UNSAFE_componentWillReceiveProps(nextProps) {
+    const oldCaseId = this.props.match.params.actionId;
+    const newCaseId = nextProps.match.params.actionId;
+    const { interfaceColList } = nextProps;
+    let currColId = this.getColId(interfaceColList, newCaseId);
+    if (oldCaseId !== newCaseId) {
+      await this.props.fetchCaseData(newCaseId);
+      this.props.setColData({ currCaseId: +newCaseId, currColId, isShowCol: false });
+      await this.props.getEnv(this.props.currCase.project_id);
+      // await this.getCurrEnv()
+      this.setState({ editCasename: this.props.currCase.casename });
+    }
+  }
+
+  savePostmanRef = postman => {
+    this.postman = postman;
+  };
+
+  updateCase = async () => {
+    const {
+      case_env,
+      req_params,
+      req_query,
+      req_headers,
+      req_body_type,
+      req_body_form,
+      req_body_other,
+      test_script,
+      enable_script,
+      test_res_body,
+      test_res_header
+    } = this.postman.state;
+
+    const { editCasename: casename } = this.state;
+    const { _id: id } = this.props.currCase;
+    let params = {
+      id,
+      casename,
+      case_env,
+      req_params,
+      req_query,
+      req_headers,
+      req_body_type,
+      req_body_form,
+      req_body_other,
+      test_script,
+      enable_script,
+      test_res_body,
+      test_res_header
+    };
+
+    const res = await axios.post('/api/col/up_case', params);
+    if (this.props.currCase.casename !== casename) {
+      this.props.fetchInterfaceColList(this.props.match.params.id);
+    }
+    if (res.data.errcode) {
+      message.error(res.data.errmsg);
+    } else {
+      message.success('更新成功');
+      this.props.fetchCaseData(id);
+    }
+  };
+
+  triggerEditCasename = () => {
+    this.setState({
+      isEditingCasename: true,
+      editCasename: this.props.currCase.casename
+    });
+  };
+  cancelEditCasename = () => {
+    this.setState({
+      isEditingCasename: false,
+      editCasename: this.props.currCase.casename
+    });
+  };
+
+  render() {
+    const { currCase, currProject, projectEnv } = this.props;
+    const { isEditingCasename, editCasename } = this.state;
+
+    const data = Object.assign(
+      {},
+      currCase,
+      {
+        env: projectEnv.env,
+        pre_script: currProject.pre_script,
+        after_script: currProject.after_script
+      },
+      { _id: currCase._id }
+    );
+
+    return (
+      <div style={{ padding: '6px 0' }} className="case-content">
+        <div className="case-title">
+          {!isEditingCasename && (
+            <Tooltip title="点击编辑" placement="bottom">
+              <div className="case-name" onClick={this.triggerEditCasename}>
+                {currCase.casename}
+              </div>
+            </Tooltip>
+          )}
+
+          {isEditingCasename && (
+            <div className="edit-case-name">
+              <Input
+                value={editCasename}
+                onChange={e => this.setState({ editCasename: e.target.value })}
+                style={{ fontSize: 18 }}
+              />
+            </div>
+          )}
+          <span className="inter-link" style={{ margin: '0px 8px 0px 6px', fontSize: 12 }}>
+            <Link
+              className="text"
+              to={`/project/${currCase.project_id}/interface/api/${currCase.interface_id}`}
+            >
+              对应接口
+            </Link>
+          </span>
+        </div>
+        <div>
+          {Object.keys(currCase).length > 0 && (
+            <Postman
+              data={data}
+              type="case"
+              saveTip="更新保存修改"
+              save={this.updateCase}
+              ref={this.savePostmanRef}
+              interfaceId={currCase.interface_id}
+              projectId={currCase.project_id}
+              curUid={this.props.curUid}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}

client/containers/Project/Interface/InterfaceCol/InterfaceCaseContent.scss

@@ -0,0 +1,33 @@
+.case-content {
+  padding: 6px 0;
+  .case-title {
+    display: flex;
+    .case-name {
+      margin-left: 8px;
+      border-radius: 4px;
+      border: 1px solid transparent;
+      padding: 0 5px;
+      background-color: #eee;
+      font-size: 20px;
+      flex-grow: 1;
+      cursor: pointer;
+    }
+    .case-name:hover {
+      color: rgba(0,0,0,.65);
+      border: 1px solid #d9d9d9;
+    }
+    .edit-case-name {
+      margin-left: 8px;
+      display: flex;
+      flex-grow: 1;
+    }
+    .inter-link {
+      flex-basis: 50px;
+      position: relative;
+    }
+    .inter-link .text {
+      position: absolute;
+      bottom: 4px;
+    }
+  }
+}

client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js

@@ -0,0 +1,630 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import PropTypes from 'prop-types';
+import {
+  fetchInterfaceColList,
+  fetchInterfaceCaseList,
+  setColData,
+  fetchCaseList,
+  fetchCaseData
+} from '../../../../reducer/modules/interfaceCol';
+import { fetchProjectList } from '../../../../reducer/modules/project';
+import axios from 'axios';
+import ImportInterface from './ImportInterface';
+import { Input, Icon, Button, Modal, message, Tooltip, Tree, Form } from 'antd';
+import { arrayChangeIndex } from '../../../../common.js';
+import _ from 'underscore'
+
+const TreeNode = Tree.TreeNode;
+const FormItem = Form.Item;
+const confirm = Modal.confirm;
+const headHeight = 240; // menu顶部到网页顶部部分的高度
+
+import './InterfaceColMenu.scss';
+
+const ColModalForm = Form.create()(props => {
+  const { visible, onCancel, onCreate, form, title } = props;
+  const { getFieldDecorator } = form;
+  return (
+    <Modal visible={visible} title={title} onCancel={onCancel} onOk={onCreate}>
+      <Form layout="vertical">
+        <FormItem label="集合名">
+          {getFieldDecorator('colName', {
+            rules: [{ required: true, message: '请输入集合命名！' }]
+          })(<Input />)}
+        </FormItem>
+        <FormItem label="简介">{getFieldDecorator('colDesc')(<Input type="textarea" />)}</FormItem>
+      </Form>
+    </Modal>
+  );
+});
+
+@connect(
+  state => {
+    return {
+      interfaceColList: state.interfaceCol.interfaceColList,
+      currCase: state.interfaceCol.currCase,
+      isRander: state.interfaceCol.isRander,
+      currCaseId: state.interfaceCol.currCaseId,
+      // list: state.inter.list,
+      // 当前项目的信息
+      curProject: state.project.currProject
+      // projectList: state.project.projectList
+    };
+  },
+  {
+    fetchInterfaceColList,
+    fetchInterfaceCaseList,
+    fetchCaseData,
+    // fetchInterfaceListMenu,
+    fetchCaseList,
+    setColData,
+    fetchProjectList
+  }
+)
+@withRouter
+export default class InterfaceColMenu extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    interfaceColList: PropTypes.array,
+    fetchInterfaceColList: PropTypes.func,
+    fetchInterfaceCaseList: PropTypes.func,
+    // fetchInterfaceListMenu: PropTypes.func,
+    fetchCaseList: PropTypes.func,
+    fetchCaseData: PropTypes.func,
+    setColData: PropTypes.func,
+    currCaseId: PropTypes.number,
+    history: PropTypes.object,
+    isRander: PropTypes.bool,
+    // list: PropTypes.array,
+    router: PropTypes.object,
+    currCase: PropTypes.object,
+    curProject: PropTypes.object,
+    fetchProjectList: PropTypes.func
+    // projectList: PropTypes.array
+  };
+
+  state = {
+    colModalType: '',
+    colModalVisible: false,
+    editColId: 0,
+    filterValue: '',
+    importInterVisible: false,
+    importInterIds: [],
+    importColId: 0,
+    expands: null,
+    list: [],
+    delIcon: null,
+    selectedProject: null
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getList();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.interfaceColList !== nextProps.interfaceColList) {
+      this.setState({
+        list: nextProps.interfaceColList
+      });
+    }
+  }
+
+  async getList() {
+    let r = await this.props.fetchInterfaceColList(this.props.match.params.id);
+    this.setState({
+      list: r.payload.data.data
+    });
+    return r;
+  }
+
+  addorEditCol = async () => {
+    const { colName: name, colDesc: desc } = this.form.getFieldsValue();
+    const { colModalType, editColId: col_id } = this.state;
+    const project_id = this.props.match.params.id;
+    let res = {};
+    if (colModalType === 'add') {
+      res = await axios.post('/api/col/add_col', { name, desc, project_id });
+    } else if (colModalType === 'edit') {
+      res = await axios.post('/api/col/up_col', { name, desc, col_id });
+    }
+    if (!res.data.errcode) {
+      this.setState({
+        colModalVisible: false
+      });
+      message.success(colModalType === 'edit' ? '修改集合成功' : '添加集合成功');
+      // await this.props.fetchInterfaceColList(project_id);
+      this.getList();
+    } else {
+      message.error(res.data.errmsg);
+    }
+  };
+
+  onExpand = keys => {
+    this.setState({ expands: keys });
+  };
+
+  onSelect = _.debounce(keys => {
+    if (keys.length) {
+      const type = keys[0].split('_')[0];
+      const id = keys[0].split('_')[1];
+      const project_id = this.props.match.params.id;
+      if (type === 'col') {
+        this.props.setColData({
+          isRander: false
+        });
+        this.props.history.push('/project/' + project_id + '/interface/col/' + id);
+      } else {
+        this.props.setColData({
+          isRander: false
+        });
+        this.props.history.push('/project/' + project_id + '/interface/case/' + id);
+      }
+    }
+    this.setState({
+      expands: null
+    });
+  }, 500);
+
+  showDelColConfirm = colId => {
+    let that = this;
+    const params = this.props.match.params;
+    confirm({
+      title: '您确认删除此测试集合',
+      content: '温馨提示：该操作会删除该集合下所有测试用例，用例删除后无法恢复',
+      okText: '确认',
+      cancelText: '取消',
+      async onOk() {
+        const res = await axios.get('/api/col/del_col?col_id=' + colId);
+        if (!res.data.errcode) {
+          message.success('删除集合成功');
+          const result = await that.getList();
+          const nextColId = result.payload.data.data[0]._id;
+
+          that.props.history.push('/project/' + params.id + '/interface/col/' + nextColId);
+        } else {
+          message.error(res.data.errmsg);
+        }
+      }
+    });
+  };
+
+  // 复制测试集合
+  copyInterface = async item => {
+    if (this._copyInterfaceSign === true) {
+      return;
+    }
+    this._copyInterfaceSign = true;
+    const { desc, project_id, _id: col_id } = item;
+    let { name } = item;
+    name = `${name} copy`;
+
+    // 添加集合
+    const add_col_res = await axios.post('/api/col/add_col', { name, desc, project_id });
+
+    if (add_col_res.data.errcode) {
+      message.error(add_col_res.data.errmsg);
+      return;
+    }
+
+    const new_col_id = add_col_res.data.data._id;
+
+    // 克隆集合
+    const add_case_list_res = await axios.post('/api/col/clone_case_list', {
+      new_col_id,
+      col_id,
+      project_id
+    });
+    this._copyInterfaceSign = false;
+
+    if (add_case_list_res.data.errcode) {
+      message.error(add_case_list_res.data.errmsg);
+      return;
+    }
+
+    // 刷新接口列表
+    // await this.props.fetchInterfaceColList(project_id);
+    this.getList();
+    this.props.setColData({ isRander: true });
+    message.success('克隆测试集成功');
+  };
+
+  showNoDelColConfirm = () => {
+    confirm({
+      title: '此测试集合为最后一个集合',
+      content: '温馨提示：建议不要删除'
+    });
+  };
+  caseCopy = async caseId=> {
+    let that = this;
+    let caseData = await that.props.fetchCaseData(caseId);
+    let data = caseData.payload.data.data;
+    data = JSON.parse(JSON.stringify(data));
+    data.casename=`${data.casename}_copy`
+    delete data._id 
+    const res = await axios.post('/api/col/add_case',data);
+      if (!res.data.errcode) {
+        message.success('克隆用例成功');
+        let colId = res.data.data.col_id;
+        let projectId=res.data.data.project_id;
+        await this.getList();
+        this.props.history.push('/project/' + projectId + '/interface/col/' + colId);
+        this.setState({
+          visible: false
+        });
+      } else {
+        message.error(res.data.errmsg);
+      }
+  };
+  showDelCaseConfirm = caseId => {
+    let that = this;
+    const params = this.props.match.params;
+    confirm({
+      title: '您确认删除此测试用例',
+      content: '温馨提示：用例删除后无法恢复',
+      okText: '确认',
+      cancelText: '取消',
+      async onOk() {
+        const res = await axios.get('/api/col/del_case?caseid=' + caseId);
+        if (!res.data.errcode) {
+          message.success('删除用例成功');
+          that.getList();
+          // 如果删除当前选中 case，切换路由到集合
+          if (+caseId === +that.props.currCaseId) {
+            that.props.history.push('/project/' + params.id + '/interface/col/');
+          } else {
+            // that.props.fetchInterfaceColList(that.props.match.params.id);
+            that.props.setColData({ isRander: true });
+          }
+        } else {
+          message.error(res.data.errmsg);
+        }
+      }
+    });
+  };
+  showColModal = (type, col) => {
+    const editCol =
+      type === 'edit' ? { colName: col.name, colDesc: col.desc } : { colName: '', colDesc: '' };
+    this.setState({
+      colModalVisible: true,
+      colModalType: type || 'add',
+      editColId: col && col._id
+    });
+    this.form.setFieldsValue(editCol);
+  };
+  saveFormRef = form => {
+    this.form = form;
+  };
+
+  selectInterface = (importInterIds, selectedProject) => {
+    this.setState({ importInterIds, selectedProject });
+  };
+
+  showImportInterfaceModal = async colId => {
+    // const projectId = this.props.match.params.id;
+    // console.log('project', this.props.curProject)
+    const groupId = this.props.curProject.group_id;
+    await this.props.fetchProjectList(groupId);
+    // await this.props.fetchInterfaceListMenu(projectId)
+    this.setState({ importInterVisible: true, importColId: colId });
+  };
+
+  handleImportOk = async () => {
+    const project_id = this.state.selectedProject || this.props.match.params.id;
+    const { importColId, importInterIds } = this.state;
+    const res = await axios.post('/api/col/add_case_list', {
+      interface_list: importInterIds,
+      col_id: importColId,
+      project_id
+    });
+    if (!res.data.errcode) {
+      this.setState({ importInterVisible: false });
+      message.success('导入集合成功');
+      // await this.props.fetchInterfaceColList(project_id);
+      this.getList();
+
+      this.props.setColData({ isRander: true });
+    } else {
+      message.error(res.data.errmsg);
+    }
+  };
+  handleImportCancel = () => {
+    this.setState({ importInterVisible: false });
+  };
+
+  filterCol = e => {
+    const value = e.target.value;
+    // console.log('list', this.props.interfaceColList);
+    // const newList = produce(this.props.interfaceColList, draftList => {})
+    // console.log('newList',newList);
+    this.setState({
+      filterValue: value,
+      list: JSON.parse(JSON.stringify(this.props.interfaceColList))
+      // list: newList
+    });
+  };
+
+  onDrop = async e => {
+    // const projectId = this.props.match.params.id;
+    const { interfaceColList } = this.props;
+    const dropColIndex = e.node.props.pos.split('-')[1];
+    const dropColId = interfaceColList[dropColIndex]._id;
+    const id = e.dragNode.props.eventKey;
+    const dragColIndex = e.dragNode.props.pos.split('-')[1];
+    const dragColId = interfaceColList[dragColIndex]._id;
+
+    const dropPos = e.node.props.pos.split('-');
+    const dropIndex = Number(dropPos[dropPos.length - 1]);
+    const dragPos = e.dragNode.props.pos.split('-');
+    const dragIndex = Number(dragPos[dragPos.length - 1]);
+
+    if (id.indexOf('col') === -1) {
+      if (dropColId === dragColId) {
+        // 同一个测试集合下的接口交换顺序
+        let caseList = interfaceColList[dropColIndex].caseList;
+        let changes = arrayChangeIndex(caseList, dragIndex, dropIndex);
+        axios.post('/api/col/up_case_index', changes).then();
+      }
+      await axios.post('/api/col/up_case', { id: id.split('_')[1], col_id: dropColId });
+      // this.props.fetchInterfaceColList(projectId);
+      this.getList();
+      this.props.setColData({ isRander: true });
+    } else {
+      let changes = arrayChangeIndex(interfaceColList, dragIndex, dropIndex);
+      axios.post('/api/col/up_col_index', changes).then();
+      this.getList();
+    }
+  };
+
+  enterItem = id => {
+    this.setState({ delIcon: id });
+  };
+
+  leaveItem = () => {
+    this.setState({ delIcon: null });
+  };
+
+  render() {
+    // const { currColId, currCaseId, isShowCol } = this.props;
+    const { colModalType, colModalVisible, importInterVisible } = this.state;
+    const currProjectId = this.props.match.params.id;
+    // const menu = (col) => {
+    //   return (
+    //     <Menu>
+    //       <Menu.Item>
+    //         <span onClick={() => this.showColModal('edit', col)}>修改集合</span>
+    //       </Menu.Item>
+    //       <Menu.Item>
+    //         <span onClick={() => {
+    //           this.showDelColConfirm(col._id)
+    //         }}>删除集合</span>
+    //       </Menu.Item>
+    //       <Menu.Item>
+    //         <span onClick={() => this.showImportInterface(col._id)}>导入接口</span>
+    //       </Menu.Item>
+    //     </Menu>
+    //   )
+    // };
+
+    const defaultExpandedKeys = () => {
+      const { router, currCase, interfaceColList } = this.props,
+        rNull = { expands: [], selects: [] };
+      if (interfaceColList.length === 0) {
+        return rNull;
+      }
+      if (router) {
+        if (router.params.action === 'case') {
+          if (!currCase || !currCase._id) {
+            return rNull;
+          }
+          return {
+            expands: this.state.expands ? this.state.expands : ['col_' + currCase.col_id],
+            selects: ['case_' + currCase._id + '']
+          };
+        } else {
+          let col_id = router.params.actionId;
+          return {
+            expands: this.state.expands ? this.state.expands : ['col_' + col_id],
+            selects: ['col_' + col_id]
+          };
+        }
+      } else {
+        return {
+          expands: this.state.expands ? this.state.expands : ['col_' + interfaceColList[0]._id],
+          selects: ['col_' + interfaceColList[0]._id]
+        };
+      }
+    };
+
+    const itemInterfaceColCreate = interfaceCase => {
+      return (
+        <TreeNode
+          style={{ width: '100%' }}
+          key={'case_' + interfaceCase._id}
+          title={
+            <div
+              className="menu-title"
+              onMouseEnter={() => this.enterItem(interfaceCase._id)}
+              onMouseLeave={this.leaveItem}
+              title={interfaceCase.casename}
+            >
+              <span className="casename">{interfaceCase.casename}</span>
+              <div className="btns">
+                <Tooltip title="删除用例">
+                  <Icon
+                    type="delete"
+                    className="interface-delete-icon"
+                    onClick={e => {
+                      e.stopPropagation();
+                      this.showDelCaseConfirm(interfaceCase._id);
+                    }}
+                    style={{ display: this.state.delIcon == interfaceCase._id ? 'block' : 'none' }}
+                  />
+                </Tooltip>
+                <Tooltip title="克隆用例">
+                  <Icon
+                    type="copy"
+                    className="interface-delete-icon"
+                    onClick={e => {
+                      e.stopPropagation();
+                      this.caseCopy(interfaceCase._id);
+                    }}
+                    style={{ display: this.state.delIcon == interfaceCase._id ? 'block' : 'none' }}
+                  />
+                </Tooltip>
+              </div>
+            </div>
+          }
+        />
+      );
+    };
+
+    let currentKes = defaultExpandedKeys();
+    // console.log('currentKey', currentKes)
+
+    let list = this.state.list;
+
+    if (this.state.filterValue) {
+      let arr = [];
+      list = list.filter(item => {
+
+        item.caseList = item.caseList.filter(inter => {
+          if (inter.casename.indexOf(this.state.filterValue) === -1 
+          && inter.path.indexOf(this.state.filterValue) === -1
+          ) {
+            return false;
+          }
+          return true;
+        });
+
+        arr.push('col_' + item._id);
+        return true;
+      });
+      // console.log('arr', arr);
+      if (arr.length > 0) {
+        currentKes.expands = arr;
+      }
+    }
+
+    // console.log('list', list);
+    // console.log('currentKey', currentKes)
+
+    return (
+      <div>
+        <div className="interface-filter">
+          <Input placeholder="搜索测试集合" onChange={this.filterCol} />
+          <Tooltip placement="bottom" title="添加集合">
+            <Button
+              type="primary"
+              style={{ marginLeft: '16px' }}
+              onClick={() => this.showColModal('add')}
+              className="btn-filter"
+            >
+              添加集合
+            </Button>
+          </Tooltip>
+        </div>
+        <div className="tree-wrapper" style={{ maxHeight: parseInt(document.body.clientHeight) - headHeight + 'px'}}>
+          <Tree
+            className="col-list-tree"
+            defaultExpandedKeys={currentKes.expands}
+            defaultSelectedKeys={currentKes.selects}
+            expandedKeys={currentKes.expands}
+            selectedKeys={currentKes.selects}
+            onSelect={this.onSelect}
+            autoExpandParent
+            draggable
+            onExpand={this.onExpand}
+            onDrop={this.onDrop}
+          >
+            {list.map(col => (
+              <TreeNode
+                key={'col_' + col._id}
+                title={
+                  <div className="menu-title">
+                    <span>
+                      <Icon type="folder-open" style={{ marginRight: 5 }} />
+                      <span>{col.name}</span>
+                    </span>
+                    <div className="btns">
+                      <Tooltip title="删除集合">
+                        <Icon
+                          type="delete"
+                          style={{ display: list.length > 1 ? '' : 'none' }}
+                          className="interface-delete-icon"
+                          onClick={() => {
+                            this.showDelColConfirm(col._id);
+                          }}
+                        />
+                      </Tooltip>
+                      <Tooltip title="编辑集合">
+                        <Icon
+                          type="edit"
+                          className="interface-delete-icon"
+                          onClick={e => {
+                            e.stopPropagation();
+                            this.showColModal('edit', col);
+                          }}
+                        />
+                      </Tooltip>
+                      <Tooltip title="导入接口">
+                        <Icon
+                          type="plus"
+                          className="interface-delete-icon"
+                          onClick={e => {
+                            e.stopPropagation();
+                            this.showImportInterfaceModal(col._id);
+                          }}
+                        />
+                      </Tooltip>
+                      <Tooltip title="克隆集合">
+                        <Icon
+                          type="copy"
+                          className="interface-delete-icon"
+                          onClick={e => {
+                            e.stopPropagation();
+                            this.copyInterface(col);
+                          }}
+                        />
+                      </Tooltip>
+                    </div>
+                    {/*<Dropdown overlay={menu(col)} trigger={['click']} onClick={e => e.stopPropagation()}>
+                      <Icon className="opts-icon" type='ellipsis'/>
+                    </Dropdown>*/}
+                  </div>
+                }
+              >
+                {col.caseList.map(itemInterfaceColCreate)}
+              </TreeNode>
+            ))}
+          </Tree>
+        </div>
+        <ColModalForm
+          ref={this.saveFormRef}
+          type={colModalType}
+          visible={colModalVisible}
+          onCancel={() => {
+            this.setState({ colModalVisible: false });
+          }}
+          onCreate={this.addorEditCol}
+        />
+
+        <Modal
+          title="导入接口到集合"
+          visible={importInterVisible}
+          onOk={this.handleImportOk}
+          onCancel={this.handleImportCancel}
+          className="import-case-modal"
+          width={800}
+        >
+          <ImportInterface currProjectId={currProjectId} selectInterface={this.selectInterface} />
+        </Modal>
+      </div>
+    );
+  }
+}

client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.scss

@@ -0,0 +1,186 @@
+.col-list-tree {
+  line-height: 25px;
+  .ant-tree-node-content-wrapper {
+    width: calc(100% - 28px);
+  }
+  .opts-icon,
+  .case-delete-icon {
+    line-height: 25px;
+    width: 30px;
+    font-weight: bold;
+  }
+  .opts-icon:hover,
+  .case-delete-icon:hover {
+    color: #2395f1;
+  }
+  .menu-title {
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+    .casename {
+      overflow: hidden;
+    }
+    .case-delete-icon {
+      margin-left: 5px;
+      display: none;
+    }
+    .btns {
+      display: none;
+    }
+  }
+  .menu-title:hover {
+    .case-delete-icon {
+      display: block;
+    }
+    .btns {
+      display: block;
+    }
+  }
+}
+
+.container {
+  display: block;
+  width: 100%;
+  padding: 10px;
+}
+/*
+ * note that styling gu-mirror directly is a bad practice because it's too generic.
+ * you're better off giving the draggable elements a unique class and styling that directly!
+ */
+.gu-mirror {
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.2);
+  transition: opacity 0.4s ease-in-out;
+}
+.container div {
+  cursor: move;
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+  margin-bottom: 10px;
+}
+.container div:last-child {
+  margin-bottom: 0;
+}
+.gu-mirror {
+  cursor: grabbing;
+  cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+}
+.container .ex-moved {
+  background-color: #e74c3c;
+}
+.container.ex-over {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.handle {
+  padding: 0 5px;
+  margin-right: 5px;
+  background-color: rgba(0, 0, 0, 0.4);
+  cursor: move;
+}
+.report {
+  min-height: 500px;
+  .case-report-pane {
+    margin-top: 10px;
+  }
+  .url {
+    overflow: auto;
+  }
+  .case-report {
+    margin: 10px;
+
+    .case-report-title {
+      font-size: 14px;
+      font-weight: bold;
+      text-align: right;
+      padding-right: 20px;
+    }
+
+    pre {
+      white-space: pre-wrap;
+    }
+  }
+}
+
+.interface-col {
+  padding: 24px;
+  .interface-col-table-header {
+    background-color: rgb(238, 238, 238);
+    height: 50px;
+    line-height: 50px;
+    text-align: left;
+  }
+
+  .interface-col-table-body {
+    height: 50px;
+    line-height: 50px;
+  }
+
+  .interface-col-table-header th {
+    padding-left: 5px;
+  }
+
+  .interface-col-table-body td {
+    padding-left: 5px;
+  }
+
+  .interface-col-table-action button {
+    margin-right: 5px;
+    padding: 5px 10px;
+    max-width: 90px;
+  }
+  .component-label-wrapper {
+    margin-top: -10px;
+    margin-bottom: 15px;
+  }
+}
+
+.import-case-modal {
+  .ant-modal-body {
+    max-height: 800px;
+    overflow-y: scroll;
+  }
+
+  .select-project {
+    margin-bottom: 16px;
+  }
+}
+
+.autoTestsModal {
+  .autoTestUrl {
+    overflow: auto;
+    background-color: #f5f5f5;
+    border: 1px solid #f1f1f1ce;
+    padding: 16px;
+  }
+
+  .autoTestMsg {
+    padding: 8px 0 16px;
+    font-size: 12px;
+  }
+
+  .copy-btn {
+    margin-left: 16px;
+    height: 50px;
+    font-size: 14px;
+    width: 70px;
+  }
+
+  .ant-modal-body {
+    padding-top: 32px;
+  }
+
+  .row {
+    margin-bottom: 0.24rem;
+  }
+
+  .label {
+    text-align: left;
+  }
+}
+
+.tree-wrapper {
+  min-height: 500px;
+  overflow-y: scroll;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

client/containers/Project/Interface/interface.scss

@@ -0,0 +1,298 @@
+@import '../../../styles/mixin.scss';
+
+.left-menu {
+  min-height: 5rem;
+  // background: #FFF;
+  // .item-all-interface {
+  //   background-color: red;
+  // }
+  // .ant-tabs-bar{
+  //     border-bottom: none;
+  //     margin-bottom: 0
+  // }
+  .ant-tag {
+    margin-right: 0.16rem;
+  }
+  .ant-tabs-nav {
+    width: 100%;
+    background-color: $color-bg-gray;
+  }
+  .ant-tabs-tab {
+    min-width: 49.4%;
+  }
+  .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+    height: 39px;
+    background: #fff;
+    border-bottom: 0;
+    border-radius: 0;
+  }
+  .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:nth-of-type(2) {
+    border-left: 0;
+  }
+  // .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:last-of-type {
+  //     border-right: 0;
+  // }
+  .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+    height: 40px;
+    background-color: #ddd;
+    // color: $color-white;
+  }
+
+  .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container {
+    height: 40px;
+  }
+
+  .ant-tabs.ant-tabs-card > .ant-tabs-bar {
+    text-align: center;
+    // background: #ececec;
+  }
+
+  .ant-tabs-nav-wrap {
+    height: 40px;
+    line-height: 31px;
+    // border-bottom: 1px solid #d9d9d9;
+  }
+  .ant-input {
+    width: 100%;
+  }
+  .interface-filter {
+    padding: 12px 16px;
+    padding-right: 110px;
+    line-height: 32px;
+    background-color: #ddd;
+    position: relative;
+  }
+  .btn-filter {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .ant-tree li .ant-tree-node-content-wrapper {
+    width: calc(100% - 28px);
+    position: relative;
+    .container-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .btns {
+      background-color: #eef7fe;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-60%);
+      transition: all 0.2s;
+    }
+  }
+  .ant-tree li .ant-tree-node-selected {
+    .btns {
+      background-color: #d5ebfc;
+      transition: all 0.2s;
+    }
+  }
+
+  .interface-delete-icon {
+    position: relative;
+    right: 0;
+    float: right;
+    line-height: 25px;
+    width: 24px;
+    font-weight: bold;
+  }
+  .anticon-ellipsis {
+    transform: rotate(90deg);
+  }
+  .interface-delete-icon:hover {
+    color: #2395f1;
+  }
+
+  .interface-list {
+    //max-height: 600px;
+    //overflow-y: scroll;
+    .cat_switch_hidden {
+      .ant-tree-switcher {
+        visibility: hidden;
+      }
+    }
+
+    a {
+      color: rgba(13, 27, 62, 0.65);
+    }
+
+    .btn-http {
+      height: 23px;
+      font-size: 10px;
+      margin-right: 7px;
+      padding: 0 5px;
+      width: auto !important;
+    }
+    .interface-item {
+      display: inline-block;
+      overflow: hidden;
+      top: 0px;
+    }
+    .interface-item-nav {
+      line-height: 25px;
+    }
+    .interface-list {
+      .cat_switch_hidden {
+        .ant-tree-switcher {
+          visibility: hidden;
+        }
+      }
+
+      .btn-http {
+        height: 23px;
+        font-size: 10px;
+        margin-right: 7px;
+        padding: 0 5px;
+        width: auto !important;
+      }
+      .interface-item {
+        display: inline-block;
+        overflow: hidden;
+        top: 0px;
+        line-height: 100%;
+        text-decoration: none;
+      }
+      .interface-item-nav {
+        line-height: 25px;
+      }
+    }
+  }
+}
+
+.right-content {
+  min-height: 5rem;
+  background: #fff;
+  .caseContainer {
+    table {
+      border-radius: 4px;
+      // border-collapse: collapse;
+    }
+    .ant-table-small .ant-table-thead > tr > th {
+      text-align: left;
+      background-color: #f8f8f8;
+    }
+    tr:nth-child(even) {
+      background: #f8f8f8;
+    }
+  }
+  .interface-content {
+    .ant-tabs-nav {
+      width: 100%;
+      // background-color: #ddd;
+      // color: $color-white;
+    }
+    .ant-tabs-nav-wrap {
+      text-align: left;
+    }
+  }
+  .interface-title {
+    clear: both;
+    font-weight: normal;
+    margin-top: 0.48rem;
+    margin-bottom: 0.16rem;
+    border-left: 3px solid #2395f1;
+    padding-left: 8px;
+    .tooltip {
+      font-size: 13px;
+      font-weight: normal;
+    }
+  }
+  .container-radiogroup {
+    text-align: center;
+    margin-bottom: 0.16rem;
+  }
+  .panel-sub {
+    background: rgba(236, 238, 241, 0.67);
+    padding: 0.1rem;
+    .bulk-import {
+      color: #2395f1;
+      text-align: right;
+      margin-right: 16px;
+      cursor: pointer;
+    }
+  }
+  .ant-radio-button-wrapper-checked {
+    color: #fff;
+    background-color: #2395f1;
+    &:hover {
+      color: #ddd;
+    }
+  }
+  .href {
+    color: #2395f1;
+    cursor: pointer;
+  }
+  .remark-editor {
+    background-color: #fff;
+  }
+  .remark {
+    table {
+      border-collapse: collapse;
+    }
+    th {
+      text-align: left;
+      font-weight: normal;
+      background-color: #f8f8f8;
+      text-indent: 0.4em;
+    }
+    tr {
+      text-indent: 0.4em;
+    }
+    th,
+    td {
+      border: 1px solid #e9e9e9;
+    }
+    tr:nth-child(odd) {
+      background: #f8f8f8;
+    }
+    tr:nth-child(even) {
+      background: #fff;
+    }
+  }
+}
+.addcatmodal {
+  .ant-modal-body {
+    padding: 10px 0px;
+    .ant-form-item {
+      margin-bottom: 10px;
+    }
+    .catModalfoot {
+      border-top: 1px solid #e9e9e9;
+      margin-bottom: 0px;
+      padding-top: 10px;
+      margin-top: 0px;
+      .ant-form-item-control-wrapper {
+        margin-left: 0px;
+      }
+      .ant-form-item-control {
+        float: right;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.common-setting-modal{
+  
+  .setting-item{
+    margin: 10px;
+    line-height: 35px;
+    .col-item{
+      padding:5px;
+    }
+  }
+
+  .case-script{
+    min-height: 200px;
+    margin: 10px;
+    width: 98%;
+  }
+
+  .insert-code{
+    padding-top: 45px;
+  }
+}

client/containers/Project/Project.js

@@ -0,0 +1,175 @@
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Route, Switch, Redirect, matchPath } from 'react-router-dom';
+import { Subnav } from '../../components/index';
+import { fetchGroupMsg } from '../../reducer/modules/group';
+import { setBreadcrumb } from '../../reducer/modules/user';
+import { getProject } from '../../reducer/modules/project';
+import Interface from './Interface/Interface.js';
+import Activity from './Activity/Activity.js';
+import Setting from './Setting/Setting.js';
+import Loading from '../../components/Loading/Loading';
+import ProjectMember from './Setting/ProjectMember/ProjectMember.js';
+import ProjectData from './Setting/ProjectData/ProjectData.js';
+const plugin = require('client/plugin.js');
+@connect(
+  state => {
+    return {
+      curProject: state.project.currProject,
+      currGroup: state.group.currGroup
+    };
+  },
+  {
+    getProject,
+    fetchGroupMsg,
+    setBreadcrumb
+  }
+)
+export default class Project extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    curProject: PropTypes.object,
+    getProject: PropTypes.func,
+    location: PropTypes.object,
+    fetchGroupMsg: PropTypes.func,
+    setBreadcrumb: PropTypes.func,
+    currGroup: PropTypes.object
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  async UNSAFE_componentWillMount() {
+    await this.props.getProject(this.props.match.params.id);
+    await this.props.fetchGroupMsg(this.props.curProject.group_id);
+
+    this.props.setBreadcrumb([
+      {
+        name: this.props.currGroup.group_name,
+        href: '/group/' + this.props.currGroup._id
+      },
+      {
+        name: this.props.curProject.name
+      }
+    ]);
+  }
+
+  async UNSAFE_componentWillReceiveProps(nextProps) {
+    const currProjectId = this.props.match.params.id;
+    const nextProjectId = nextProps.match.params.id;
+    if (currProjectId !== nextProjectId) {
+      await this.props.getProject(nextProjectId);
+      await this.props.fetchGroupMsg(this.props.curProject.group_id);
+      this.props.setBreadcrumb([
+        {
+          name: this.props.currGroup.group_name,
+          href: '/group/' + this.props.currGroup._id
+        },
+        {
+          name: this.props.curProject.name
+        }
+      ]);
+    }
+  }
+
+  render() {
+    const { match, location } = this.props;
+    let routers = {
+      interface: { name: '接口', path: '/project/:id/interface/:action', component: Interface },
+      activity: { name: '动态', path: '/project/:id/activity', component: Activity },
+      data: { name: '数据管理', path: '/project/:id/data', component: ProjectData },
+      members: { name: '成员管理', path: '/project/:id/members', component: ProjectMember },
+      setting: { name: '设置', path: '/project/:id/setting', component: Setting }
+    };
+
+    plugin.emitHook('sub_nav', routers);
+
+    let key, defaultName;
+    for (key in routers) {
+      if (
+        matchPath(location.pathname, {
+          path: routers[key].path
+        }) !== null
+      ) {
+        defaultName = routers[key].name;
+        break;
+      }
+    }
+
+    // let subnavData = [{
+    //   name: routers.interface.name,
+    //   path: `/project/${match.params.id}/interface/api`
+    // }, {
+    //   name: routers.activity.name,
+    //   path: `/project/${match.params.id}/activity`
+    // }, {
+    //   name: routers.data.name,
+    //   path: `/project/${match.params.id}/data`
+    // }, {
+    //   name: routers.members.name,
+    //   path: `/project/${match.params.id}/members`
+    // }, {
+    //   name: routers.setting.name,
+    //   path: `/project/${match.params.id}/setting`
+    // }];
+
+    let subnavData = [];
+    Object.keys(routers).forEach(key => {
+      let item = routers[key];
+      let value = {};
+      if (key === 'interface') {
+        value = {
+          name: item.name,
+          path: `/project/${match.params.id}/interface/api`
+        };
+      } else {
+        value = {
+          name: item.name,
+          path: item.path.replace(/\:id/gi, match.params.id)
+        };
+      }
+      subnavData.push(value);
+    });
+
+    if (this.props.currGroup.type === 'private') {
+      subnavData = subnavData.filter(item => {
+        return item.name != '成员管理';
+      });
+    }
+
+    if (this.props.curProject == null || Object.keys(this.props.curProject).length === 0) {
+      return <Loading visible />;
+    }
+
+    return (
+      <div>
+        <Subnav default={defaultName} data={subnavData} />
+        <Switch>
+          <Redirect exact from="/project/:id" to={`/project/${match.params.id}/interface/api`} />
+          {/* <Route path={routers.activity.path} component={Activity} />
+          
+          <Route path={routers.setting.path} component={Setting} />
+          {this.props.currGroup.type !== 'private' ?
+            <Route path={routers.members.path} component={routers.members.component}/>
+            : null
+          }
+
+          <Route path={routers.data.path} component={ProjectData} /> */}
+          {Object.keys(routers).map(key => {
+            let item = routers[key];
+
+            return key === 'members' ? (
+              this.props.currGroup.type !== 'private' ? (
+                <Route path={item.path} component={item.component} key={key} />
+              ) : null
+            ) : (
+              <Route path={item.path} component={item.component} key={key} />
+            );
+          })}
+        </Switch>
+      </div>
+    );
+  }
+}

client/containers/Project/Setting/ProjectData/ProjectData.js

@@ -0,0 +1,524 @@
+import React, { PureComponent as Component } from 'react';
+import {
+  Upload,
+  Icon,
+  message,
+  Select,
+  Tooltip,
+  Button,
+  Spin,
+  Switch,
+  Modal,
+  Radio,
+  Input,
+  Checkbox
+} from 'antd';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import './ProjectData.scss';
+import axios from 'axios';
+
+import URL from 'url';
+
+const Dragger = Upload.Dragger;
+import { saveImportData } from '../../../../reducer/modules/interface';
+import { fetchUpdateLogData } from '../../../../reducer/modules/news.js';
+import { handleSwaggerUrlData } from '../../../../reducer/modules/project';
+const Option = Select.Option;
+const confirm = Modal.confirm;
+const plugin = require('client/plugin.js');
+const RadioGroup = Radio.Group;
+const importDataModule = {};
+const exportDataModule = {};
+const HandleImportData = require('common/HandleImportData');
+function handleExportRouteParams(url, status, isWiki) {
+  if (!url) {
+    return;
+  }
+  let urlObj = URL.parse(url, true),
+    query = {};
+  query = Object.assign(query, urlObj.query, { status, isWiki });
+  return URL.format({
+    pathname: urlObj.pathname,
+    query
+  });
+}
+
+// exportDataModule.pdf = {
+//   name: 'Pdf',
+//   route: '/api/interface/download_crx',
+//   desc: '导出项目接口文档为 pdf 文件'
+// }
+@connect(
+  state => {
+    return {
+      curCatid: -(-state.inter.curdata.catid),
+      basePath: state.project.currProject.basepath,
+      updateLogList: state.news.updateLogList,
+      swaggerUrlData: state.project.swaggerUrlData
+    };
+  },
+  {
+    saveImportData,
+    fetchUpdateLogData,
+    handleSwaggerUrlData
+  }
+)
+class ProjectData extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectCatid: '',
+      menuList: [],
+      curImportType: 'swagger',
+      curExportType: null,
+      showLoading: false,
+      dataSync: 'merge',
+      exportContent: 'all',
+      isSwaggerUrl: false,
+      swaggerUrl: '',
+      isWiki: false
+    };
+  }
+  static propTypes = {
+    match: PropTypes.object,
+    curCatid: PropTypes.number,
+    basePath: PropTypes.string,
+    saveImportData: PropTypes.func,
+    fetchUpdateLogData: PropTypes.func,
+    updateLogList: PropTypes.array,
+    handleSwaggerUrlData: PropTypes.func,
+    swaggerUrlData: PropTypes.string
+  };
+
+  UNSAFE_componentWillMount() {
+    axios.get(`/api/interface/getCatMenu?project_id=${this.props.match.params.id}`).then(data => {
+      if (data.data.errcode === 0) {
+        let menuList = data.data.data;
+        this.setState({
+          menuList: menuList,
+          selectCatid: menuList[0]._id
+        });
+      }
+    });
+    plugin.emitHook('import_data', importDataModule);
+    plugin.emitHook('export_data', exportDataModule, this.props.match.params.id);
+  }
+
+  selectChange(value) {
+    this.setState({
+      selectCatid: +value
+    });
+  }
+
+  uploadChange = info => {
+    const status = info.file.status;
+    if (status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (status === 'done') {
+      message.success(`${info.file.name} 文件上传成功`);
+    } else if (status === 'error') {
+      message.error(`${info.file.name} 文件上传失败`);
+    }
+  };
+
+  handleAddInterface = async res => {
+    return await HandleImportData(
+      res,
+      this.props.match.params.id,
+      this.state.selectCatid,
+      this.state.menuList,
+      this.props.basePath,
+      this.state.dataSync,
+      message.error,
+      message.success,
+      () => this.setState({ showLoading: false })
+    );
+  };
+
+  // 本地文件上传
+  handleFile = info => {
+    if (!this.state.curImportType) {
+      return message.error('请选择导入数据的方式');
+    }
+    if (this.state.selectCatid) {
+      this.setState({ showLoading: true });
+      let reader = new FileReader();
+      reader.readAsText(info.file);
+      reader.onload = async res => {
+        res = await importDataModule[this.state.curImportType].run(res.target.result);
+        if (this.state.dataSync === 'merge') {
+          // 开启同步
+          this.showConfirm(res);
+        } else {
+          // 未开启同步
+          await this.handleAddInterface(res);
+        }
+      };
+    } else {
+      message.error('请选择上传的默认分类');
+    }
+  };
+
+  showConfirm = async res => {
+    let that = this;
+    let typeid = this.props.match.params.id;
+    let apiCollections = res.apis.map(item => {
+      return {
+        method: item.method,
+        path: item.path
+      };
+    });
+    let result = await this.props.fetchUpdateLogData({
+      type: 'project',
+      typeid,
+      apis: apiCollections
+    });
+    let domainData = result.payload.data.data;
+    const ref = confirm({
+      title: '您确认要进行数据同步????',
+      width: 600,
+      okType: 'danger',
+      iconType: 'exclamation-circle',
+      className: 'dataImport-confirm',
+      okText: '确认',
+      cancelText: '取消',
+      content: (
+        <div className="postman-dataImport-modal">
+          <div className="postman-dataImport-modal-content">
+            {domainData.map((item, index) => {
+              return (
+                <div key={index} className="postman-dataImport-show-diff">
+                  <span className="logcontent" dangerouslySetInnerHTML={{ __html: item.content }} />
+                </div>
+              );
+            })}
+          </div>
+          <p className="info">温馨提示： 数据同步后，可能会造成原本的修改数据丢失</p>
+        </div>
+      ),
+      async onOk() {
+        await that.handleAddInterface(res);
+      },
+      onCancel() {
+        that.setState({ showLoading: false, dataSync: 'normal' });
+        ref.destroy();
+      }
+    });
+  };
+
+  handleImportType = val => {
+    this.setState({
+      curImportType: val,
+      isSwaggerUrl: false
+    });
+  };
+
+  handleExportType = val => {
+    this.setState({
+      curExportType: val,
+      isWiki: false
+    });
+  };
+
+  // 处理导入信息同步
+  onChange = checked => {
+    this.setState({
+      dataSync: checked
+    });
+  };
+
+  // 处理swagger URL 导入
+  handleUrlChange = checked => {
+    this.setState({
+      isSwaggerUrl: checked
+    });
+  };
+
+  // 记录输入的url
+  swaggerUrlInput = url => {
+    this.setState({
+      swaggerUrl: url
+    });
+  };
+
+  // url导入上传
+  onUrlUpload = async () => {
+    if (!this.state.curImportType) {
+      return message.error('请选择导入数据的方式');
+    }
+
+    if (!this.state.swaggerUrl) {
+      return message.error('url 不能为空');
+    }
+    if (this.state.selectCatid) {
+      this.setState({ showLoading: true });
+      try {
+        // 处理swagger url 导入
+        await this.props.handleSwaggerUrlData(this.state.swaggerUrl);
+        // let result = json5_parse(this.props.swaggerUrlData)
+        let res = await importDataModule[this.state.curImportType].run(this.props.swaggerUrlData);
+        if (this.state.dataSync === 'merge') {
+          // merge
+          this.showConfirm(res);
+        } else {
+          // 未开启同步
+          await this.handleAddInterface(res);
+        }
+      } catch (e) {
+        this.setState({ showLoading: false });
+        message.error(e.message);
+      }
+    } else {
+      message.error('请选择上传的默认分类');
+    }
+  };
+
+  // 处理导出接口是全部还是公开
+  handleChange = e => {
+    this.setState({ exportContent: e.target.value });
+  };
+
+  //  处理是否开启wiki导出
+  handleWikiChange = e => {
+    this.setState({
+      isWiki: e.target.checked
+    });
+  };
+
+  /**
+   *
+   *
+   * @returns
+   * @memberof ProjectData
+   */
+  render() {
+    const uploadMess = {
+      name: 'interfaceData',
+      multiple: true,
+      showUploadList: false,
+      action: '/api/interface/interUpload',
+      customRequest: this.handleFile,
+      onChange: this.uploadChange
+    };
+
+    let exportUrl =
+      this.state.curExportType &&
+      exportDataModule[this.state.curExportType] &&
+      exportDataModule[this.state.curExportType].route;
+    let exportHref = handleExportRouteParams(
+      exportUrl,
+      this.state.exportContent,
+      this.state.isWiki
+    );
+
+    // console.log('inter', this.state.exportContent);
+    return (
+      <div className="g-row">
+        <div className="m-panel">
+          <div className="postman-dataImport">
+            <div className="dataImportCon">
+              <div>
+                <h3>
+                  数据导入&nbsp;
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href="https://hellosean1025.github.io/yapi/documents/data.html"
+                  >
+                    <Tooltip title="点击查看文档">
+                      <Icon type="question-circle-o" />
+                    </Tooltip>
+                  </a>
+                </h3>
+              </div>
+              <div className="dataImportTile">
+                <Select
+                  placeholder="请选择导入数据的方式"
+                  value={this.state.curImportType}
+                  onChange={this.handleImportType}
+                >
+                  {Object.keys(importDataModule).map(name => {
+                    return (
+                      <Option key={name} value={name}>
+                        {importDataModule[name].name}
+                      </Option>
+                    );
+                  })}
+                </Select>
+              </div>
+              <div className="catidSelect">
+                <Select
+                  value={this.state.selectCatid + ''}
+                  showSearch
+                  style={{ width: '100%' }}
+                  placeholder="请选择数据导入的默认分类"
+                  optionFilterProp="children"
+                  onChange={this.selectChange.bind(this)}
+                  filterOption={(input, option) =>
+                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }
+                >
+                  {this.state.menuList.map((item, key) => {
+                    return (
+                      <Option key={key} value={item._id + ''}>
+                        {item.name}
+                      </Option>
+                    );
+                  })}
+                </Select>
+              </div>
+              <div className="dataSync">
+                <span className="label">
+                  数据同步&nbsp;
+                  <Tooltip
+                    title={
+                      <div>
+                        <h3 style={{ color: 'white' }}>普通模式</h3>
+                        <p>不导入已存在的接口</p>
+                        <br />
+                        <h3 style={{ color: 'white' }}>智能合并</h3>
+                        <p>
+                          已存在的接口，将合并返回数据的 response，适用于导入了 swagger
+                          数据，保留对数据结构的改动
+                        </p>
+                        <br />
+                        <h3 style={{ color: 'white' }}>完全覆盖</h3>
+                        <p>不保留旧数据，完全使用新数据，适用于接口定义完全交给后端定义</p>
+                      </div>
+                    }
+                  >
+                    <Icon type="question-circle-o" />
+                  </Tooltip>{' '}
+                </span>
+                <Select value={this.state.dataSync} onChange={this.onChange}>
+                  <Option value="normal">普通模式</Option>
+                  <Option value="good">智能合并</Option>
+                  <Option value="merge">完全覆盖</Option>
+                </Select>
+
+                {/* <Switch checked={this.state.dataSync} onChange={this.onChange} /> */}
+              </div>
+              {this.state.curImportType === 'swagger' && (
+                <div className="dataSync">
+                  <span className="label">
+                    开启url导入&nbsp;
+                    <Tooltip title="swagger url 导入">
+                      <Icon type="question-circle-o" />
+                    </Tooltip>{' '}
+                    &nbsp;&nbsp;
+                  </span>
+
+                  <Switch checked={this.state.isSwaggerUrl} onChange={this.handleUrlChange} />
+                </div>
+              )}
+              {this.state.isSwaggerUrl ? (
+                <div className="import-content url-import-content">
+                  <Input
+                    placeholder="http://demo.swagger.io/v2/swagger.json"
+                    onChange={e => this.swaggerUrlInput(e.target.value)}
+                  />
+                  <Button
+                    type="primary"
+                    className="url-btn"
+                    onClick={this.onUrlUpload}
+                    loading={this.state.showLoading}
+                  >
+                    上传
+                  </Button>
+                </div>
+              ) : (
+                <div className="import-content">
+                  <Spin spinning={this.state.showLoading} tip="上传中...">
+                    <Dragger {...uploadMess}>
+                      <p className="ant-upload-drag-icon">
+                        <Icon type="inbox" />
+                      </p>
+                      <p className="ant-upload-text">点击或者拖拽文件到上传区域</p>
+                      <p
+                        className="ant-upload-hint"
+                        onClick={e => {
+                          e.stopPropagation();
+                        }}
+                        dangerouslySetInnerHTML={{
+                          __html: this.state.curImportType
+                            ? importDataModule[this.state.curImportType].desc
+                            : null
+                        }}
+                      />
+                    </Dragger>
+                  </Spin>
+                </div>
+              )}
+            </div>
+
+            <div
+              className="dataImportCon"
+              style={{
+                marginLeft: '20px',
+                display: Object.keys(exportDataModule).length > 0 ? '' : 'none'
+              }}
+            >
+              <div>
+                <h3>数据导出</h3>
+              </div>
+              <div className="dataImportTile">
+                <Select placeholder="请选择导出数据的方式" onChange={this.handleExportType}>
+                  {Object.keys(exportDataModule).map(name => {
+                    return (
+                      <Option key={name} value={name}>
+                        {exportDataModule[name].name}
+                      </Option>
+                    );
+                  })}
+                </Select>
+              </div>
+
+              <div className="dataExport">
+                <RadioGroup defaultValue="all" onChange={this.handleChange}>
+                  <Radio value="all">全部接口</Radio>
+                  <Radio value="open">公开接口</Radio>
+                </RadioGroup>
+              </div>
+              <div className="export-content">
+                {this.state.curExportType ? (
+                  <div>
+                    <p className="export-desc">{exportDataModule[this.state.curExportType].desc}</p>
+                    <a 
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href={exportHref}>
+                      <Button className="export-button" type="primary" size="large">
+                        {' '}
+                        导出{' '}
+                      </Button>
+                    </a>
+                    <Checkbox
+                      checked={this.state.isWiki}
+                      onChange={this.handleWikiChange}
+                      className="wiki-btn"
+                      disabled={this.state.curExportType === 'json'}
+                    >
+                      添加wiki&nbsp;
+                      <Tooltip title="开启后 html 和 markdown 数据导出会带上wiki数据">
+                        <Icon type="question-circle-o" />
+                      </Tooltip>{' '}
+                    </Checkbox>
+                  </div>
+                ) : (
+                  <Button disabled className="export-button" type="primary" size="large">
+                    {' '}
+                    导出{' '}
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ProjectData;

client/containers/Project/Setting/ProjectData/ProjectData.scss

@@ -0,0 +1,103 @@
+.postman-dataImport{
+    display: flex;
+    .dataImportCon{
+        min-width: 304px;
+        background-color: #ececec;
+        padding: 16px;
+        border-radius: 4px;
+
+        .ant-upload-drag{
+            padding: 16px;
+            background-color: white;
+        }
+        .dataImportTile{
+            color: #2395f1;
+            padding: 16px 0px;
+            font-weight: 500;
+            width: 100%;
+            .ant-select{
+                width: 100%;
+            }
+        }
+
+        .dataExport{
+          padding-bottom: 16px;
+          font-weight: 500;
+          width: 100%;
+        }
+
+        .dataSync{
+          padding-top: 16px;
+          font-weight: 500;
+          width: 100%;
+          .label{
+            padding-right: 8px;
+            width: 150px;
+            display: inline-block;
+          }
+          .label:after {
+            content: ":";
+            margin: 0 8px 0 2px;
+            position: relative;
+            top: -.5px;
+          }
+        }
+
+        .import-content {
+          margin-top: 16px;
+          height: 180px;
+        }
+
+        .url-import-content {
+          text-align: center;
+          .url-btn{ 
+            margin-top: 16px;
+          }
+        }
+
+        .export-content{
+            text-align: center;
+        }
+        .export-desc{
+            padding-bottom: 15px;
+        }
+        .export-button{
+            width: 100px;
+            height:35px;
+        }
+
+        .wiki-btn {
+          margin-left: 8px;
+        }
+    }
+}
+
+.postman-dataImport-modal{
+  
+  .postman-dataImport-modal-content{
+    max-height: 600px;
+    min-width: 534px;
+    overflow-y: scroll;
+    padding-top: 8px;
+
+  }
+  .postman-dataImport-show-diff{
+    padding:  4px 0;
+  
+  }
+
+  .info{
+    font-weight: 400;
+    font-size: 16px;
+    padding-top: 24px;
+  }
+  
+}
+
+.dataImport-confirm{
+  .ant-modal-content .ant-confirm-btns{
+    margin-top: 10px;
+  }
+}
+
+

client/containers/Project/Setting/ProjectEnv/ProjectEnvContent.js

@@ -0,0 +1,382 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './index.scss';
+import { Icon, Row, Col, Form, Input, Select, Button, AutoComplete, Tooltip } from 'antd';
+const FormItem = Form.Item;
+const Option = Select.Option;
+import constants from 'client/constants/variable.js';
+
+const initMap = {
+  header: [
+    {
+      name: '',
+      value: ''
+    }
+  ],
+  cookie: [
+    {
+      name: '',
+      value: ''
+    }
+  ],
+  global: [
+    {
+      name: '',
+      value: ''
+    }
+  ]
+};
+
+class ProjectEnvContent extends Component {
+  static propTypes = {
+    projectMsg: PropTypes.object,
+    form: PropTypes.object,
+    onSubmit: PropTypes.func,
+    handleEnvInput: PropTypes.func
+  };
+
+  initState(curdata) {
+    let header = [
+      {
+        name: '',
+        value: ''
+      }
+    ];
+    let cookie = [
+      {
+        name: '',
+        value: ''
+      }
+    ];
+
+    let global = [
+      {
+        name: '',
+        value: ''
+      }
+    ];
+
+    const curheader = curdata.header;
+    const curGlobal = curdata.global;
+
+    if (curheader && curheader.length !== 0) {
+      curheader.forEach(item => {
+        if (item.name === 'Cookie') {
+          let cookieStr = item.value;
+          if (cookieStr) {
+            cookieStr = cookieStr.split(';').forEach(c => {
+              if (c) {
+                c = c.split('=');
+                cookie.unshift({
+                  name: c[0] ? c[0].trim() : '',
+                  value: c[1] ? c[1].trim() : ''
+                });
+              }
+            });
+          }
+        } else {
+          header.unshift(item);
+        }
+      });
+    }
+
+    if (curGlobal && curGlobal.length !== 0) {
+      curGlobal.forEach(item => {
+        global.unshift(item);
+      });
+    }
+    return { header, cookie, global };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = Object.assign({}, initMap);
+  }
+  addHeader = (value, index, name) => {
+    let nextHeader = this.state[name][index + 1];
+    if (nextHeader && typeof nextHeader === 'object') {
+      return;
+    }
+    let newValue = {};
+    let data = { name: '', value: '' };
+    newValue[name] = [].concat(this.state[name], data);
+    this.setState(newValue);
+  };
+
+  delHeader = (key, name) => {
+    let curValue = this.props.form.getFieldValue(name);
+    let newValue = {};
+    newValue[name] = curValue.filter((val, index) => {
+      return index !== key;
+    });
+    this.props.form.setFieldsValue(newValue);
+    this.setState(newValue);
+  };
+
+  handleInit(data) {
+    this.props.form.resetFields();
+    let newValue = this.initState(data);
+    this.setState({ ...newValue });
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    let curEnvName = this.props.projectMsg.name;
+    let nextEnvName = nextProps.projectMsg.name;
+    if (curEnvName !== nextEnvName) {
+      this.handleInit(nextProps.projectMsg);
+    }
+  }
+
+  handleOk = e => {
+    e.preventDefault();
+    const { form, onSubmit, projectMsg } = this.props;
+    form.validateFields((err, values) => {
+      if (!err) {
+        let header = values.header.filter(val => {
+          return val.name !== '';
+        });
+        let cookie = values.cookie.filter(val => {
+          return val.name !== '';
+        });
+        let global = values.global.filter(val => {
+          return val.name !== '';
+        });
+        if (cookie.length > 0) {
+          header.push({
+            name: 'Cookie',
+            value: cookie.map(item => item.name + '=' + item.value).join(';')
+          });
+        }
+        let assignValue = {};
+        assignValue.env = Object.assign(
+          { _id: projectMsg._id },
+          {
+            name: values.env.name,
+            domain: values.env.protocol + values.env.domain,
+            header: header,
+            global
+          }
+        );
+        onSubmit(assignValue);
+      }
+    });
+  };
+
+  render() {
+    const { projectMsg } = this.props;
+    const { getFieldDecorator } = this.props.form;
+    const headerTpl = (item, index) => {
+      const headerLength = this.state.header.length - 1;
+      return (
+        <Row gutter={2} key={index}>
+          <Col span={10}>
+            <FormItem>
+              {getFieldDecorator('header[' + index + '].name', {
+                validateTrigger: ['onChange', 'onBlur'],
+                initialValue: item.name || ''
+              })(
+                <AutoComplete
+                  style={{ width: '200px' }}
+                  allowClear={true}
+                  dataSource={constants.HTTP_REQUEST_HEADER}
+                  placeholder="请输入header名称"
+                  onChange={() => this.addHeader(item, index, 'header')}
+                  filterOption={(inputValue, option) =>
+                    option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+                  }
+                />
+              )}
+            </FormItem>
+          </Col>
+          <Col span={12}>
+            <FormItem>
+              {getFieldDecorator('header[' + index + '].value', {
+                validateTrigger: ['onChange', 'onBlur'],
+                initialValue: item.value || ''
+              })(<Input placeholder="请输入参数内容" style={{ width: '90%', marginRight: 8 }} />)}
+            </FormItem>
+          </Col>
+          <Col span={2} className={index === headerLength ? ' env-last-row' : null}>
+            {/* 新增的项中，只有最后一项没有有删除按钮 */}
+            <Icon
+              className="dynamic-delete-button delete"
+              type="delete"
+              onClick={e => {
+                e.stopPropagation();
+                this.delHeader(index, 'header');
+              }}
+            />
+          </Col>
+        </Row>
+      );
+    };
+
+    const commonTpl = (item, index, name) => {
+      const length = this.state[name].length - 1;
+      return (
+        <Row gutter={2} key={index}>
+          <Col span={10}>
+            <FormItem>
+              {getFieldDecorator(`${name}[${index}].name`, {
+                validateTrigger: ['onChange', 'onBlur'],
+                initialValue: item.name || ''
+              })(
+                <Input
+                  placeholder={`请输入 ${name} Name`}
+                  style={{ width: '200px' }}
+                  onChange={() => this.addHeader(item, index, name)}
+                />
+              )}
+            </FormItem>
+          </Col>
+          <Col span={12}>
+            <FormItem>
+              {getFieldDecorator(`${name}[${index}].value`, {
+                validateTrigger: ['onChange', 'onBlur'],
+                initialValue: item.value || ''
+              })(<Input placeholder="请输入参数内容" style={{ width: '90%', marginRight: 8 }} />)}
+            </FormItem>
+          </Col>
+          <Col span={2} className={index === length ? ' env-last-row' : null}>
+            {/* 新增的项中，只有最后一项没有有删除按钮 */}
+            <Icon
+              className="dynamic-delete-button delete"
+              type="delete"
+              onClick={e => {
+                e.stopPropagation();
+                this.delHeader(index, name);
+              }}
+            />
+          </Col>
+        </Row>
+      );
+    };
+
+    const envTpl = data => {
+      return (
+        <div>
+          <h3 className="env-label">环境名称</h3>
+          <FormItem required={false}>
+            {getFieldDecorator('env.name', {
+              validateTrigger: ['onChange', 'onBlur'],
+              initialValue: data.name === '新环境' ? '' : data.name || '',
+              rules: [
+                {
+                  required: false,
+                  whitespace: true,
+                  validator(rule, value, callback) {
+                    if (value) {
+                      if (value.length === 0) {
+                        callback('请输入环境名称');
+                      } else if (!/\S/.test(value)) {
+                        callback('请输入环境名称');
+                      } else {
+                        return callback();
+                      }
+                    } else {
+                      callback('请输入环境名称');
+                    }
+                  }
+                }
+              ]
+            })(
+              <Input
+                onChange={e => this.props.handleEnvInput(e.target.value)}
+                placeholder="请输入环境名称"
+                style={{ width: '90%', marginRight: 8 }}
+              />
+            )}
+          </FormItem>
+          <h3 className="env-label">环境域名</h3>
+          <FormItem required={false}>
+            {getFieldDecorator('env.domain', {
+              validateTrigger: ['onChange', 'onBlur'],
+              initialValue: data.domain ? data.domain.split('//')[1] : '',
+              rules: [
+                {
+                  required: false,
+                  whitespace: true,
+                  validator(rule, value, callback) {
+                    if (value) {
+                      if (value.length === 0) {
+                        callback('请输入环境域名!');
+                      } else if (/\s/.test(value)) {
+                        callback('环境域名不允许出现空格!');
+                      } else {
+                        return callback();
+                      }
+                    } else {
+                      callback('请输入环境域名!');
+                    }
+                  }
+                }
+              ]
+            })(
+              <Input
+                placeholder="请输入环境域名"
+                style={{ width: '90%', marginRight: 8 }}
+                addonBefore={getFieldDecorator('env.protocol', {
+                  initialValue: data.domain ? data.domain.split('//')[0] + '//' : 'http://',
+                  rules: [
+                    {
+                      required: true
+                    }
+                  ]
+                })(
+                  <Select>
+                    <Option value="http://">{'http://'}</Option>
+                    <Option value="https://">{'https://'}</Option>
+                  </Select>
+                )}
+              />
+            )}
+          </FormItem>
+          <h3 className="env-label">Header</h3>
+          {this.state.header.map((item, index) => {
+            return headerTpl(item, index);
+          })}
+
+          <h3 className="env-label">Cookie</h3>
+          {this.state.cookie.map((item, index) => {
+            return commonTpl(item, index, 'cookie');
+          })}
+
+          <h3 className="env-label">
+            global
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://hellosean1025.github.io/yapi/documents/project.html#%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83"
+              style={{ marginLeft: 8 }}
+            >
+              <Tooltip title="点击查看文档">
+                <Icon type="question-circle-o" style={{fontSize: '13px'}}/>
+              </Tooltip>
+            </a>
+          </h3>
+          {this.state.global.map((item, index) => {
+            return commonTpl(item, index, 'global');
+          })}
+        </div>
+      );
+    };
+
+    return (
+      <div>
+        {envTpl(projectMsg)}
+        <div className="btnwrap-changeproject">
+          <Button
+            className="m-btn btn-save"
+            icon="save"
+            type="primary"
+            size="large"
+            onClick={this.handleOk}
+          >
+            保 存
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+export default Form.create()(ProjectEnvContent);

client/containers/Project/Setting/ProjectEnv/index.js

@@ -0,0 +1,228 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './index.scss';
+import { Icon, Layout, Tooltip, message, Row, Popconfirm } from 'antd';
+const { Content, Sider } = Layout;
+import ProjectEnvContent from './ProjectEnvContent.js';
+import { connect } from 'react-redux';
+import { updateEnv, getProject, getEnv } from '../../../../reducer/modules/project';
+import EasyDragSort from '../../../../components/EasyDragSort/EasyDragSort.js';
+
+@connect(
+  state => {
+    return {
+      projectMsg: state.project.currProject
+    };
+  },
+  {
+    updateEnv,
+    getProject,
+    getEnv
+  }
+)
+class ProjectEnv extends Component {
+  static propTypes = {
+    projectId: PropTypes.number,
+    updateEnv: PropTypes.func,
+    getProject: PropTypes.func,
+    projectMsg: PropTypes.object,
+    onOk: PropTypes.func,
+    getEnv: PropTypes.func
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      env: [],
+      _id: null,
+      currentEnvMsg: {},
+      delIcon: null,
+      currentKey: -2
+    };
+  }
+
+  initState(curdata, id) {
+    let newValue = {};
+    newValue['env'] = [].concat(curdata);
+    newValue['_id'] = id;
+    this.setState({
+      ...this.state,
+      ...newValue
+    });
+  }
+
+  async UNSAFE_componentWillMount() {
+    this._isMounted = true;
+    await this.props.getProject(this.props.projectId);
+    const { env, _id } = this.props.projectMsg;
+    this.initState(env, _id);
+    this.handleClick(0, env[0]);
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  handleClick = (key, data) => {
+    this.setState({
+      currentEnvMsg: data,
+      currentKey: key
+    });
+  };
+
+  // 增加环境变量项
+  addParams = (name, data) => {
+    let newValue = {};
+    data = { name: '新环境', domain: '', header: [] };
+    newValue[name] = [].concat(data, this.state[name]);
+    this.setState(newValue);
+    this.handleClick(0, data);
+  };
+
+  // 删除提示信息
+  showConfirm(key, name) {
+    let assignValue = this.delParams(key, name);
+    this.onSave(assignValue);
+  }
+
+  // 删除环境变量项
+  delParams = (key, name) => {
+    let curValue = this.state.env;
+    let newValue = {};
+    newValue[name] = curValue.filter((val, index) => {
+      return index !== key;
+    });
+    this.setState(newValue);
+    this.handleClick(0, newValue[name][0]);
+    newValue['_id'] = this.state._id;
+    return newValue;
+  };
+
+  enterItem = key => {
+    this.setState({ delIcon: key });
+  };
+
+  // 保存设置
+  async onSave(assignValue) {
+    await this.props
+      .updateEnv(assignValue)
+      .then(res => {
+        if (res.payload.data.errcode == 0) {
+          this.props.getProject(this.props.projectId);
+          this.props.getEnv(this.props.projectId);
+          message.success('修改成功! ');
+          if(this._isMounted) {
+            this.setState({ ...assignValue });
+          }
+        }
+      })
+      .catch(() => {
+        message.error('环境设置不成功 ');
+      });
+  }
+
+  //  提交保存信息
+  onSubmit = (value, index) => {
+    let assignValue = {};
+    assignValue['env'] = [].concat(this.state.env);
+    assignValue['env'].splice(index, 1, value['env']);
+    assignValue['_id'] = this.state._id;
+    this.onSave(assignValue);
+    this.props.onOk && this.props.onOk(assignValue['env'], index);
+  };
+
+  // 动态修改环境名称
+  handleInputChange = (value, currentKey) => {
+    let newValue = [].concat(this.state.env);
+    newValue[currentKey].name = value || '新环境';
+    this.setState({ env: newValue });
+  };
+
+  // 侧边栏拖拽
+  handleDragMove = name => {
+    return (data, from, to) => {
+      let newValue = {
+        [name]: data
+      };
+      this.setState(newValue);
+      newValue['_id'] = this.state._id;
+      this.handleClick(to, newValue[name][to]);
+      this.onSave(newValue);
+    };
+  };
+
+  render() {
+    const { env, currentKey } = this.state;
+
+    const envSettingItems = env.map((item, index) => {
+      return (
+        <Row
+          key={index}
+          className={'menu-item ' + (index === currentKey ? 'menu-item-checked' : '')}
+          onClick={() => this.handleClick(index, item)}
+          onMouseEnter={() => this.enterItem(index)}
+        >
+          <span className="env-icon-style">
+            <span className="env-name" style={{ color: item.name === '新环境' && '#2395f1' }}>
+              {item.name}
+            </span>
+            <Popconfirm
+              title="您确认删除此环境变量?"
+              onConfirm={e => {
+                e.stopPropagation();
+                this.showConfirm(index, 'env');
+              }}
+              okText="确定"
+              cancelText="取消"
+            >
+              <Icon
+                type="delete"
+                className="interface-delete-icon"
+                style={{
+                  display: this.state.delIcon == index && env.length - 1 !== 0 ? 'block' : 'none'
+                }}
+              />
+            </Popconfirm>
+          </span>
+        </Row>
+      );
+    });
+
+    return (
+      <div className="m-env-panel">
+        <Layout className="project-env">
+          <Sider width={195} style={{ background: '#fff' }}>
+            <div style={{ height: '100%', borderRight: 0 }}>
+              <Row className="first-menu-item menu-item">
+                <div className="env-icon-style">
+                  <h3>
+                    环境列表&nbsp;<Tooltip placement="top" title="在这里添加项目的环境配置">
+                      <Icon type="question-circle-o" />
+                    </Tooltip>
+                  </h3>
+                  <Tooltip title="添加环境变量">
+                    <Icon type="plus" onClick={() => this.addParams('env')} />
+                  </Tooltip>
+                </div>
+              </Row>
+              <EasyDragSort data={() => env} onChange={this.handleDragMove('env')}>
+                {envSettingItems}
+              </EasyDragSort>
+            </div>
+          </Sider>
+          <Layout className="env-content">
+            <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
+              <ProjectEnvContent
+                projectMsg={this.state.currentEnvMsg}
+                onSubmit={e => this.onSubmit(e, currentKey)}
+                handleEnvInput={e => this.handleInputChange(e, currentKey)}
+              />
+            </Content>
+          </Layout>
+        </Layout>
+      </div>
+    );
+  }
+}
+
+export default ProjectEnv;

client/containers/Project/Setting/ProjectEnv/index.scss

@@ -0,0 +1,93 @@
+.m-env-panel {
+  // padding-top: 8px;
+  min-height: 4.68rem;
+  margin-top: 0;
+  background-color: #fff;
+}
+
+.project-env{
+  min-height: 4.68rem;
+  .env-icon-style{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .anticon{
+      font-size: 15px;
+    }
+  }
+
+  .menu-item{
+    padding: 0 16px;
+    font-size: 13px;
+    line-height: 42px;
+    height: 42px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+
+  }
+
+  .menu-item-checked{
+    background-color: #eef7fe;
+    color: #2395f1;
+    font-size: 14px;
+    margin-right: -1px;
+    border-right: 2px solid #2395f1;
+  }
+
+  .first-menu-item{
+    background-color: #eceef1;
+  }
+
+  .delete{
+    font-size: 20px;
+    top: 8px;
+  }
+
+  .env-content{
+    border-left: 1px solid #ccc;
+  }
+
+  .ant-menu-item-disabled{
+    cursor: pointer;
+  }
+
+  .m-empty-prompt{
+    display: flex;
+    height: 400px;
+    span{
+      margin: auto;
+      font-size: 16px;
+      .anticon {
+        padding-right: 16px;
+        font-size: 24px;
+      }
+    }
+  }
+
+  .env-label{
+    padding-bottom: 8px;
+    a {
+      color: #636363;
+    }
+  }
+
+  .env-last-row {
+    display: none;
+  }
+
+  .env-name{
+    width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .btnwrap-changeproject {
+    text-align: center;
+    padding: .16rem 0;
+    background: #fff;
+    background-color: #fff;
+    margin: 0 -.4rem;
+    background-size: 4px 4px;
+}
+  
+}

client/containers/Project/Setting/ProjectMember/ProjectMember.js

@@ -0,0 +1,444 @@
+import React, { PureComponent as Component } from 'react';
+import {
+  Table,
+  Card,
+  Badge,
+  Select,
+  Button,
+  Modal,
+  Row,
+  Col,
+  message,
+  Popconfirm,
+  Switch,
+  Tooltip
+} from 'antd';
+import PropTypes from 'prop-types';
+import { fetchGroupMsg } from '../../../../reducer/modules/group';
+import { connect } from 'react-redux';
+import ErrMsg from '../../../../components/ErrMsg/ErrMsg.js';
+import { fetchGroupMemberList } from '../../../../reducer/modules/group.js';
+import {
+  fetchProjectList,
+  getProjectMemberList,
+  getProject,
+  addMember,
+  delMember,
+  changeMemberRole,
+  changeMemberEmailNotice
+} from '../../../../reducer/modules/project.js';
+import UsernameAutoComplete from '../../../../components/UsernameAutoComplete/UsernameAutoComplete.js';
+import '../Setting.scss';
+
+const Option = Select.Option;
+
+const arrayAddKey = arr => {
+  return arr.map((item, index) => {
+    return {
+      ...item,
+      key: index
+    };
+  });
+};
+
+@connect(
+  state => {
+    return {
+      projectMsg: state.project.currProject,
+      uid: state.user.uid,
+      projectList: state.project.projectList
+    };
+  },
+  {
+    fetchGroupMemberList,
+    getProjectMemberList,
+    addMember,
+    delMember,
+    fetchGroupMsg,
+    changeMemberRole,
+    getProject,
+    fetchProjectList,
+    changeMemberEmailNotice
+  }
+)
+class ProjectMember extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      groupMemberList: [],
+      projectMemberList: [],
+      groupName: '',
+      role: '',
+      visible: false,
+      dataSource: [],
+      inputUids: [],
+      inputRole: 'dev',
+      modalVisible: false,
+      selectProjectId: 0
+    };
+  }
+  static propTypes = {
+    match: PropTypes.object,
+    projectId: PropTypes.number,
+    projectMsg: PropTypes.object,
+    uid: PropTypes.number,
+    addMember: PropTypes.func,
+    delMember: PropTypes.func,
+    changeMemberRole: PropTypes.func,
+    getProject: PropTypes.func,
+    fetchGroupMemberList: PropTypes.func,
+    fetchGroupMsg: PropTypes.func,
+    getProjectMemberList: PropTypes.func,
+    fetchProjectList: PropTypes.func,
+    projectList: PropTypes.array,
+    changeMemberEmailNotice: PropTypes.func
+  };
+
+  showAddMemberModal = () => {
+    this.setState({
+      visible: true
+    });
+  };
+
+  showImportMemberModal = async () => {
+    await this.props.fetchProjectList(this.props.projectMsg.group_id);
+    this.setState({
+      modalVisible: true
+    });
+  };
+
+  // 重新获取列表
+
+  reFetchList = () => {
+    this.props.getProjectMemberList(this.props.match.params.id).then(res => {
+      this.setState({
+        projectMemberList: arrayAddKey(res.payload.data.data),
+        visible: false,
+        modalVisible: false
+      });
+    });
+  };
+
+  handleOk = () => {
+    this.addMembers(this.state.inputUids);
+  };
+
+  // 增 - 添加成员
+  addMembers = memberUids => {
+    this.props
+      .addMember({
+        id: this.props.match.params.id,
+        member_uids: memberUids,
+        role: this.state.inputRole
+      })
+      .then(res => {
+        if (!res.payload.data.errcode) {
+          const { add_members, exist_members } = res.payload.data.data;
+          const addLength = add_members.length;
+          const existLength = exist_members.length;
+          this.setState({
+            inputRole: 'dev',
+            inputUids: []
+          });
+          message.success(`添加成功! 已成功添加 ${addLength} 人，其中 ${existLength} 人已存在`);
+          this.reFetchList(); // 添加成功后重新获取分组成员列表
+        }
+      });
+  };
+  // 添加成员时 选择新增成员权限
+  changeNewMemberRole = value => {
+    this.setState({
+      inputRole: value
+    });
+  };
+
+  // 删 - 删除分组成员
+  deleteConfirm = member_uid => {
+    return () => {
+      const id = this.props.match.params.id;
+      this.props.delMember({ id, member_uid }).then(res => {
+        if (!res.payload.data.errcode) {
+          message.success(res.payload.data.errmsg);
+          this.reFetchList(); // 添加成功后重新获取分组成员列表
+        }
+      });
+    };
+  };
+
+  // 改 - 修改成员权限
+  changeUserRole = e => {
+    const id = this.props.match.params.id;
+    const role = e.split('-')[0];
+    const member_uid = e.split('-')[1];
+    this.props.changeMemberRole({ id, member_uid, role }).then(res => {
+      if (!res.payload.data.errcode) {
+        message.success(res.payload.data.errmsg);
+        this.reFetchList(); // 添加成功后重新获取分组成员列表
+      }
+    });
+  };
+
+  // 修改用户是否接收消息通知
+  changeEmailNotice = async (notice, member_uid) => {
+    const id = this.props.match.params.id;
+    await this.props.changeMemberEmailNotice({ id, member_uid, notice });
+    this.reFetchList(); // 添加成功后重新获取项目成员列表
+  };
+
+  // 关闭模态框
+  handleCancel = () => {
+    this.setState({
+      visible: false
+    });
+  };
+  // 关闭批量导入模态框
+  handleModalCancel = () => {
+    this.setState({
+      modalVisible: false
+    });
+  };
+
+  // 处理选择项目
+  handleChange = key => {
+    this.setState({
+      selectProjectId: key
+    });
+  };
+
+  // 确定批量导入模态框
+  handleModalOk = async () => {
+    // 获取项目中的成员列表
+    const menberList = await this.props.getProjectMemberList(this.state.selectProjectId);
+    const memberUidList = menberList.payload.data.data.map(item => {
+      return item.uid;
+    });
+    this.addMembers(memberUidList);
+  };
+
+  onUserSelect = uids => {
+    this.setState({
+      inputUids: uids
+    });
+  };
+
+  async UNSAFE_componentWillMount() {
+    const groupMemberList = await this.props.fetchGroupMemberList(this.props.projectMsg.group_id);
+    const groupMsg = await this.props.fetchGroupMsg(this.props.projectMsg.group_id);
+    const projectMemberList = await this.props.getProjectMemberList(this.props.match.params.id);
+    this.setState({
+      groupMemberList: groupMemberList.payload.data.data,
+      groupName: groupMsg.payload.data.data.group_name,
+      projectMemberList: arrayAddKey(projectMemberList.payload.data.data),
+      role: this.props.projectMsg.role
+    });
+  }
+
+  render() {
+    const isEmailChangeEable = this.state.role === 'owner' || this.state.role === 'admin';
+    const columns = [
+      {
+        title:
+          this.props.projectMsg.name + ' 项目成员 (' + this.state.projectMemberList.length + ') 人',
+        dataIndex: 'username',
+        key: 'username',
+        render: (text, record) => {
+          return (
+            <div className="m-user">
+              <img src={'/api/user/avatar?uid=' + record.uid} className="m-user-img" />
+              <p className="m-user-name">{text}</p>
+              <Tooltip placement="top" title="消息通知">
+                <span>
+                  <Switch
+                    size="small"
+                    checkedChildren="开"
+                    unCheckedChildren="关"
+                    checked={record.email_notice}
+                    disabled={!(isEmailChangeEable || record.uid === this.props.uid)}
+                    onChange={e => this.changeEmailNotice(e, record.uid)}
+                  />
+                </span>
+              </Tooltip>
+            </div>
+          );
+        }
+      },
+      {
+        title:
+          this.state.role === 'owner' || this.state.role === 'admin' ? (
+            <div className="btn-container">
+              <Button className="btn" type="primary" icon="plus" onClick={this.showAddMemberModal}>
+                添加成员
+              </Button>
+              <Button className="btn" icon="plus" onClick={this.showImportMemberModal}>
+                批量导入成员
+              </Button>
+            </div>
+          ) : (
+            ''
+          ),
+        key: 'action',
+        className: 'member-opration',
+        render: (text, record) => {
+          if (this.state.role === 'owner' || this.state.role === 'admin') {
+            return (
+              <div>
+                <Select
+                  value={record.role + '-' + record.uid}
+                  className="select"
+                  onChange={this.changeUserRole}
+                >
+                  <Option value={'owner-' + record.uid}>组长</Option>
+                  <Option value={'dev-' + record.uid}>开发者</Option>
+                  <Option value={'guest-' + record.uid}>访客</Option>
+                </Select>
+                <Popconfirm
+                  placement="topRight"
+                  title="你确定要删除吗? "
+                  onConfirm={this.deleteConfirm(record.uid)}
+                  okText="确定"
+                  cancelText=""
+                >
+                  <Button type="danger" icon="delete" className="btn-danger" />
+                </Popconfirm>
+              </div>
+            );
+          } else {
+            // 非管理员可以看到权限 但无法修改
+            if (record.role === 'owner') {
+              return '组长';
+            } else if (record.role === 'dev') {
+              return '开发者';
+            } else if (record.role === 'guest') {
+              return '访客';
+            } else {
+              return '';
+            }
+          }
+        }
+      }
+    ];
+    // 获取当前分组下的所有项目名称
+    const children = this.props.projectList.map((item, index) => (
+      <Option key={index} value={'' + item._id}>
+        {item.name}
+      </Option>
+    ));
+
+    return (
+      <div className="g-row">
+        <div className="m-panel">
+          {this.state.visible ? (
+            <Modal
+              title="添加成员"
+              visible={this.state.visible}
+              onOk={this.handleOk}
+              onCancel={this.handleCancel}
+            >
+              <Row gutter={6} className="modal-input">
+                <Col span="5">
+                  <div className="label usernamelabel">用户名: </div>
+                </Col>
+                <Col span="15">
+                  <UsernameAutoComplete callbackState={this.onUserSelect} />
+                </Col>
+              </Row>
+              <Row gutter={6} className="modal-input">
+                <Col span="5">
+                  <div className="label usernamelabel">权限: </div>
+                </Col>
+                <Col span="15">
+                  <Select defaultValue="dev" className="select" onChange={this.changeNewMemberRole}>
+                    <Option value="owner">组长</Option>
+                    <Option value="dev">开发者</Option>
+                    <Option value="guest">访客</Option>
+                  </Select>
+                </Col>
+              </Row>
+            </Modal>
+          ) : (
+            ''
+          )}
+          <Modal
+            title="批量导入成员"
+            visible={this.state.modalVisible}
+            onOk={this.handleModalOk}
+            onCancel={this.handleModalCancel}
+          >
+            <Row gutter={6} className="modal-input">
+              <Col span="5">
+                <div className="label usernamelabel">项目名: </div>
+              </Col>
+              <Col span="15">
+                <Select
+                  showSearch
+                  style={{ width: 200 }}
+                  placeholder="请选择项目名称"
+                  optionFilterProp="children"
+                  onChange={this.handleChange}
+                >
+                  {children}
+                </Select>
+              </Col>
+            </Row>
+          </Modal>
+
+          <Table
+            columns={columns}
+            dataSource={this.state.projectMemberList}
+            pagination={false}
+            locale={{ emptyText: <ErrMsg type="noMemberInProject" /> }}
+            className="setting-project-member"
+          />
+          <Card
+            bordered={false}
+            title={
+              this.state.groupName + ' 分组成员 ' + '(' + this.state.groupMemberList.length + ') 人'
+            }
+            hoverable={true}
+            className="setting-group"
+          >
+            {this.state.groupMemberList.length ? (
+              this.state.groupMemberList.map((item, index) => {
+                return (
+                  <div key={index} className="card-item">
+                    <img
+                      src={
+                        location.protocol +
+                        '//' +
+                        location.host +
+                        '/api/user/avatar?uid=' +
+                        item.uid
+                      }
+                      className="item-img"
+                    />
+                    <p className="item-name">
+                      {item.username}
+                      {item.uid === this.props.uid ? (
+                        <Badge
+                          count={'我'}
+                          style={{
+                            backgroundColor: '#689bd0',
+                            fontSize: '13px',
+                            marginLeft: '8px',
+                            borderRadius: '4px'
+                          }}
+                        />
+                      ) : null}
+                    </p>
+                    {item.role === 'owner' ? <p className="item-role">组长</p> : null}
+                    {item.role === 'dev' ? <p className="item-role">开发者</p> : null}
+                    {item.role === 'guest' ? <p className="item-role">访客</p> : null}
+                  </div>
+                );
+              })
+            ) : (
+              <ErrMsg type="noMemberInGroup" />
+            )}
+          </Card>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ProjectMember;

client/containers/Project/Setting/ProjectMessage/ProjectMessage.js

@@ -0,0 +1,520 @@
+import React, { PureComponent as Component } from 'react';
+import {
+  Form,
+  Input,
+  Switch,
+  Select,
+  Icon,
+  Tooltip,
+  Button,
+  Row,
+  Col,
+  message,
+  Card,
+  Radio,
+  Alert,
+  Modal,
+  Popover
+} from 'antd';
+import PropTypes from 'prop-types';
+import {
+  updateProject,
+  delProject,
+  getProject,
+  upsetProject
+} from '../../../../reducer/modules/project';
+import { fetchGroupMsg } from '../../../../reducer/modules/group';
+import { fetchGroupList } from '../../../../reducer/modules/group.js';
+import { setBreadcrumb } from '../../../../reducer/modules/user';
+import { connect } from 'react-redux';
+const { TextArea } = Input;
+import { withRouter } from 'react-router';
+const FormItem = Form.Item;
+const RadioGroup = Radio.Group;
+const RadioButton = Radio.Button;
+import constants from '../../../../constants/variable.js';
+const confirm = Modal.confirm;
+import { nameLengthLimit, entries, trim, htmlFilter } from '../../../../common';
+import '../Setting.scss';
+import _ from 'underscore';
+import ProjectTag from './ProjectTag.js';
+// layout
+const formItemLayout = {
+  labelCol: {
+    lg: { offset: 1, span: 3 },
+    xs: { span: 24 },
+    sm: { span: 6 }
+  },
+  wrapperCol: {
+    lg: { span: 19 },
+    xs: { span: 24 },
+    sm: { span: 14 }
+  },
+  className: 'form-item'
+};
+
+const Option = Select.Option;
+
+@connect(
+  state => {
+    return {
+      projectList: state.project.projectList,
+      groupList: state.group.groupList,
+      projectMsg: state.project.currProject,
+      currGroup: state.group.currGroup
+    };
+  },
+  {
+    updateProject,
+    delProject,
+    getProject,
+    fetchGroupMsg,
+    upsetProject,
+    fetchGroupList,
+    setBreadcrumb
+  }
+)
+@withRouter
+class ProjectMessage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      protocol: 'http://',
+      projectMsg: {},
+      showDangerOptions: false
+    };
+  }
+  static propTypes = {
+    projectId: PropTypes.number,
+    form: PropTypes.object,
+    updateProject: PropTypes.func,
+    delProject: PropTypes.func,
+    getProject: PropTypes.func,
+    history: PropTypes.object,
+    fetchGroupMsg: PropTypes.func,
+    upsetProject: PropTypes.func,
+    groupList: PropTypes.array,
+    projectList: PropTypes.array,
+    projectMsg: PropTypes.object,
+    fetchGroupList: PropTypes.func,
+    currGroup: PropTypes.object,
+    setBreadcrumb: PropTypes.func
+  };
+
+  // 确认修改
+  handleOk = e => {
+    e.preventDefault();
+    const { form, updateProject, projectMsg, groupList } = this.props;
+    form.validateFields((err, values) => {
+      if (!err) {
+        let { tag } = this.tag.state;
+        // let tag = this.refs.tag;
+        tag = tag.filter(val => {
+          return val.name !== '';
+        });
+        let assignValue = Object.assign(projectMsg, values, { tag });
+
+        values.protocol = this.state.protocol.split(':')[0];
+        const group_id = assignValue.group_id;
+        const selectGroup = _.find(groupList, item => {
+          return item._id == group_id;
+        });
+
+        updateProject(assignValue)
+          .then(res => {
+            if (res.payload.data.errcode == 0) {
+              this.props.getProject(this.props.projectId);
+              message.success('修改成功! ');
+
+              // 如果如果项目所在的分组位置发生改变
+              this.props.fetchGroupMsg(group_id);
+              // this.props.history.push('/group');
+              let projectName = htmlFilter(assignValue.name);
+              this.props.setBreadcrumb([
+                {
+                  name: selectGroup.group_name,
+                  href: '/group/' + group_id
+                },
+                {
+                  name: projectName
+                }
+              ]);
+            }
+          })
+          .catch(() => {});
+        form.resetFields();
+      }
+    });
+  };
+
+  tagSubmit = tag => {
+    this.tag = tag;
+  };
+
+  showConfirm = () => {
+    let that = this;
+    confirm({
+      title: '确认删除 ' + that.props.projectMsg.name + ' 项目吗？',
+      content: (
+        <div style={{ marginTop: '10px', fontSize: '13px', lineHeight: '25px' }}>
+          <Alert
+            message="警告：此操作非常危险,会删除该项目下面所有接口，并且无法恢复!"
+            type="warning"
+            banner
+          />
+          <div style={{ marginTop: '16px' }}>
+            <p style={{ marginBottom: '8px' }}>
+              <b>请输入项目名称确认此操作:</b>
+            </p>
+            <Input id="project_name" size="large" />
+          </div>
+        </div>
+      ),
+      onOk() {
+        let groupName = trim(document.getElementById('project_name').value);
+        if (that.props.projectMsg.name !== groupName) {
+          message.error('项目名称有误');
+          return new Promise((resolve, reject) => {
+            reject('error');
+          });
+        } else {
+          that.props.delProject(that.props.projectId).then(res => {
+            if (res.payload.data.errcode == 0) {
+              message.success('删除成功!');
+              that.props.history.push('/group/' + that.props.projectMsg.group_id);
+            }
+          });
+        }
+      },
+      iconType: 'delete',
+      onCancel() {}
+    });
+  };
+
+  // 修改项目头像的背景颜色
+  changeProjectColor = e => {
+    const { _id, color, icon } = this.props.projectMsg;
+    this.props.upsetProject({ id: _id, color: e.target.value || color, icon }).then(res => {
+      if (res.payload.data.errcode === 0) {
+        this.props.getProject(this.props.projectId);
+      }
+    });
+  };
+  // 修改项目头像的图标
+  changeProjectIcon = e => {
+    const { _id, color, icon } = this.props.projectMsg;
+    this.props.upsetProject({ id: _id, color, icon: e.target.value || icon }).then(res => {
+      if (res.payload.data.errcode === 0) {
+        this.props.getProject(this.props.projectId);
+      }
+    });
+  };
+
+  // 点击“查看危险操作”按钮
+  toggleDangerOptions = () => {
+    // console.log(this.state.showDangerOptions);
+    this.setState({
+      showDangerOptions: !this.state.showDangerOptions
+    });
+  };
+
+  async UNSAFE_componentWillMount() {
+    await this.props.fetchGroupList();
+    await this.props.fetchGroupMsg(this.props.projectMsg.group_id);
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    const { projectMsg, currGroup } = this.props;
+    const mockUrl =
+      location.protocol +
+      '//' +
+      location.hostname +
+      (location.port !== '' ? ':' + location.port : '') +
+      `/mock/${projectMsg._id}${projectMsg.basepath}+$接口请求路径`;
+    let initFormValues = {};
+    const {
+      name,
+      basepath,
+      desc,
+      project_type,
+      group_id,
+      switch_notice,
+      strice,
+      is_json5,
+      tag
+    } = projectMsg;
+    initFormValues = {
+      name,
+      basepath,
+      desc,
+      project_type,
+      group_id,
+      switch_notice,
+      strice,
+      is_json5,
+      tag
+    };
+
+    const colorArr = entries(constants.PROJECT_COLOR);
+    const colorSelector = (
+      <RadioGroup onChange={this.changeProjectColor} value={projectMsg.color} className="color">
+        {colorArr.map((item, index) => {
+          return (
+            <RadioButton
+              key={index}
+              value={item[0]}
+              style={{ backgroundColor: item[1], color: '#fff', fontWeight: 'bold' }}
+            >
+              {item[0] === projectMsg.color ? <Icon type="check" /> : null}
+            </RadioButton>
+          );
+        })}
+      </RadioGroup>
+    );
+    const iconSelector = (
+      <RadioGroup onChange={this.changeProjectIcon} value={projectMsg.icon} className="icon">
+        {constants.PROJECT_ICON.map(item => {
+          return (
+            <RadioButton key={item} value={item} style={{ fontWeight: 'bold' }}>
+              <Icon type={item} />
+            </RadioButton>
+          );
+        })}
+      </RadioGroup>
+    );
+    const selectDisbaled = projectMsg.role === 'owner' || projectMsg.role === 'admin';
+    return (
+      <div>
+        <div className="m-panel">
+          <Row className="project-setting">
+            <Col xs={6} lg={{ offset: 1, span: 3 }} className="setting-logo">
+              <Popover
+                placement="bottom"
+                title={colorSelector}
+                content={iconSelector}
+                trigger="click"
+                overlayClassName="change-project-container"
+              >
+                <Icon
+                  type={projectMsg.icon || 'star-o'}
+                  className="ui-logo"
+                  style={{
+                    backgroundColor:
+                      constants.PROJECT_COLOR[projectMsg.color] || constants.PROJECT_COLOR.blue
+                  }}
+                />
+              </Popover>
+            </Col>
+            <Col xs={18} sm={15} lg={19} className="setting-intro">
+              <h2 className="ui-title">
+                {(currGroup.group_name || '') + ' / ' + (projectMsg.name || '')}
+              </h2>
+              {/* <p className="ui-desc">{projectMsg.desc}</p> */}
+            </Col>
+          </Row>
+          <hr className="breakline" />
+          <Form>
+            <FormItem {...formItemLayout} label="项目ID">
+              <span>{this.props.projectMsg._id}</span>
+            </FormItem>
+            <FormItem {...formItemLayout} label="项目名称">
+              {getFieldDecorator('name', {
+                initialValue: initFormValues.name,
+                rules: nameLengthLimit('项目')
+              })(<Input />)}
+            </FormItem>
+            <FormItem {...formItemLayout} label="所属分组">
+              {getFieldDecorator('group_id', {
+                initialValue: initFormValues.group_id + '',
+                rules: [
+                  {
+                    required: true,
+                    message: '请选择项目所属的分组!'
+                  }
+                ]
+              })(
+                <Select disabled={!selectDisbaled}>
+                  {this.props.groupList.map((item, index) => (
+                    <Option value={item._id.toString()} key={index}>
+                      {item.group_name}
+                    </Option>
+                  ))}
+                </Select>
+              )}
+            </FormItem>
+
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  接口基本路径&nbsp;
+                  <Tooltip title="基本路径为空表示根路径">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+            >
+              {getFieldDecorator('basepath', {
+                initialValue: initFormValues.basepath,
+                rules: [
+                  {
+                    required: false,
+                    message: '请输入基本路径! '
+                  }
+                ]
+              })(<Input />)}
+            </FormItem>
+
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  MOCK地址&nbsp;
+                  <Tooltip title="具体使用方法请查看文档">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+            >
+              <Input disabled value={mockUrl} onChange={() => {}} />
+            </FormItem>
+
+            <FormItem {...formItemLayout} label="描述">
+              {getFieldDecorator('desc', {
+                initialValue: initFormValues.desc,
+                rules: [
+                  {
+                    required: false
+                  }
+                ]
+              })(<TextArea rows={8} />)}
+            </FormItem>
+
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  tag 信息&nbsp;
+                  <Tooltip title="定义 tag 信息，过滤接口">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+            >
+              <ProjectTag tagMsg={tag} ref={this.tagSubmit} />
+              {/* <Tag tagMsg={tag} ref={this.tagSubmit} /> */}
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  mock严格模式&nbsp;
+                  <Tooltip title="开启后 mock 请求会对 query，body form 的必须字段和 json schema 进行校验">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+            >
+              {getFieldDecorator('strice', {
+                valuePropName: 'checked',
+                initialValue: initFormValues.strice
+              })(<Switch checkedChildren="开" unCheckedChildren="关" />)}
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label={
+                <span>
+                  开启json5&nbsp;
+                  <Tooltip title="开启后可在接口 body 和返回值中写 json 字段">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+            >
+              {getFieldDecorator('is_json5', {
+                valuePropName: 'checked',
+                initialValue: initFormValues.is_json5
+              })(<Switch checkedChildren="开" unCheckedChildren="关" />)}
+            </FormItem>
+            <FormItem {...formItemLayout} label="默认开启消息通知">
+              {getFieldDecorator('switch_notice', {
+                valuePropName: 'checked',
+                initialValue: initFormValues.switch_notice
+              })(<Switch checkedChildren="开" unCheckedChildren="关" />)}
+            </FormItem>
+
+            <FormItem {...formItemLayout} label="权限">
+              {getFieldDecorator('project_type', {
+                rules: [
+                  {
+                    required: true
+                  }
+                ],
+                initialValue: initFormValues.project_type
+              })(
+                <RadioGroup>
+                  <Radio value="private" className="radio">
+                    <Icon type="lock" />私有<br />
+                    <span className="radio-desc">只有组长和项目开发者可以索引并查看项目信息</span>
+                  </Radio>
+                  <br />
+                  {projectMsg.role === 'admin' && <Radio value="public" className="radio">
+                    <Icon type="unlock" />公开<br />
+                    <span className="radio-desc">任何人都可以索引并查看项目信息</span>
+                  </Radio>}
+                  
+                </RadioGroup>
+              )}
+            </FormItem>
+          </Form>
+
+          <div className="btnwrap-changeproject">
+            <Button
+              className="m-btn btn-save"
+              icon="save"
+              type="primary"
+              size="large"
+              onClick={this.handleOk}
+            >
+              保 存
+            </Button>
+          </div>
+
+          {/* 只有组长和管理员有权限删除项目 */}
+          {projectMsg.role === 'owner' || projectMsg.role === 'admin' ? (
+            <div className="danger-container">
+              <div className="title">
+                <h2 className="content">
+                  <Icon type="exclamation-circle-o" /> 危险操作
+                </h2>
+                <Button onClick={this.toggleDangerOptions}>
+                  查 看<Icon type={this.state.showDangerOptions ? 'up' : 'down'} />
+                </Button>
+              </div>
+              {this.state.showDangerOptions ? (
+                <Card hoverable={true} className="card-danger">
+                  <div className="card-danger-content">
+                    <h3>删除项目</h3>
+                    <p>项目一旦删除，将无法恢复数据，请慎重操作！</p>
+                    <p>只有组长和管理员有权限删除项目。</p>
+                  </div>
+                  <Button
+                    type="danger"
+                    ghost
+                    className="card-danger-btn"
+                    onClick={this.showConfirm}
+                  >
+                    删除
+                  </Button>
+                </Card>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Form.create()(ProjectMessage);

client/containers/Project/Setting/ProjectMessage/ProjectTag.js

@@ -0,0 +1,116 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon, Row, Col, Input } from 'antd';
+import './ProjectTag.scss';
+
+
+class ProjectTag extends Component {
+  static propTypes = {
+    tagMsg: PropTypes.array,
+    tagSubmit: PropTypes.func
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      tag: [{ name: '', desc: '' }]
+    };
+  }
+
+  initState(curdata) {
+    let tag = [
+      {
+        name: '',
+        desc: ''
+      }
+    ];
+    if (curdata && curdata.length !== 0) {
+      curdata.forEach(item => {
+        tag.unshift(item);
+      });
+    }
+
+    return { tag };
+  }
+  componentDidMount() {
+    this.handleInit(this.props.tagMsg);
+  }
+
+  handleInit(data) {
+    let newValue = this.initState(data);
+    this.setState({ ...newValue });
+  }
+
+  addHeader = (val, index, name, label) => {
+    let newValue = {};
+    newValue[name] = [].concat(this.state[name]);
+    newValue[name][index][label] = val;
+    let nextData = this.state[name][index + 1];
+    if (!(nextData && typeof nextData === 'object')) {
+      let data = { name: '', desc: '' };
+      newValue[name] = [].concat(this.state[name], data);
+    }
+    this.setState(newValue);
+  };
+
+  delHeader = (key, name) => {
+    let curValue = this.state[name];
+    let newValue = {};
+    newValue[name] = curValue.filter((val, index) => {
+      return index !== key;
+    });
+    this.setState(newValue);
+  };
+
+  handleChange = (val, index, name, label) => {
+    let newValue = this.state;
+    newValue[name][index][label] = val;
+    this.setState(newValue);
+  };
+
+  render() {
+    const commonTpl = (item, index, name) => {
+      const length = this.state[name].length - 1;
+      return (
+        <Row key={index} className="tag-item">
+          <Col span={6} className="item-name">
+            <Input
+              placeholder={`请输入 ${name} 名称`}
+              // style={{ width: '200px' }}
+              value={item.name || ''}
+              onChange={e => this.addHeader(e.target.value, index, name, 'name')}
+            />
+          </Col>
+          <Col span={12}>
+            <Input
+              placeholder="请输入tag 描述信息"
+              style={{ width: '90%', marginRight: 8 }}
+              onChange={e => this.handleChange(e.target.value, index, name, 'desc')}
+              value={item.desc || ''}
+            />
+          </Col>
+          <Col span={2} className={index === length ? ' tag-last-row' : null}>
+            {/* 新增的项中，只有最后一项没有有删除按钮 */}
+            <Icon
+              className="dynamic-delete-button delete"
+              type="delete"
+              onClick={e => {
+                e.stopPropagation();
+                this.delHeader(index, name);
+              }}
+            />
+          </Col>
+        </Row>
+      );
+    };
+
+    return (
+      <div className="project-tag">
+        {this.state.tag.map((item, index) => {
+          return commonTpl(item, index, 'tag');
+        })}
+      </div>
+    );
+  }
+}
+
+export default ProjectTag;

client/containers/Project/Setting/ProjectMessage/ProjectTag.scss

@@ -0,0 +1,18 @@
+
+.project-tag {
+  .item-name {
+    margin-right: 16px;
+  }
+
+  .delete {
+    font-size: 16px;
+  }
+
+  .tag-item {
+    margin-bottom: 8px;
+  }
+
+  .tag-last-row {
+    display: none;
+  }
+}

client/containers/Project/Setting/ProjectMock/index.js

@@ -0,0 +1,136 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Form, Switch, Button, Icon, Tooltip, message } from 'antd';
+import AceEditor from '../../../../components/AceEditor/AceEditor';
+const FormItem = Form.Item;
+import { updateProjectMock, getProject } from '../../../../reducer/modules/project';
+
+const formItemLayout = {
+  labelCol: {
+    sm: { span: 4 }
+  },
+  wrapperCol: {
+    sm: { span: 16 }
+  }
+};
+const tailFormItemLayout = {
+  wrapperCol: {
+    sm: {
+      span: 16,
+      offset: 11
+    }
+  }
+};
+
+@connect(
+  state => {
+    return {
+      projectMsg: state.project.currProject
+    };
+  },
+  {
+    updateProjectMock,
+    getProject
+  }
+)
+@Form.create()
+export default class ProjectMock extends Component {
+  static propTypes = {
+    form: PropTypes.object,
+    match: PropTypes.object,
+    projectId: PropTypes.number,
+    updateProjectMock: PropTypes.func,
+    projectMsg: PropTypes.object,
+    getProject: PropTypes.func
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      is_mock_open: false,
+      project_mock_script: ''
+    };
+  }
+
+  handleSubmit = async () => {
+    let params = {
+      id: this.props.projectId,
+      project_mock_script: this.state.project_mock_script,
+      is_mock_open: this.state.is_mock_open
+    };
+
+    let result = await this.props.updateProjectMock(params);
+
+    if (result.payload.data.errcode === 0) {
+      message.success('保存成功');
+      await this.props.getProject(this.props.projectId);
+    } else {
+      message.success('保存失败, ' + result.payload.data.errmsg);
+    }
+  };
+
+  UNSAFE_componentWillMount() {
+    this.setState({
+      is_mock_open: this.props.projectMsg.is_mock_open,
+      project_mock_script: this.props.projectMsg.project_mock_script
+    });
+  }
+
+  // 是否开启
+  onChange = v => {
+    this.setState({
+      is_mock_open: v
+    });
+  };
+
+  handleMockJsInput = e => {
+    this.setState({
+      project_mock_script: e.text
+    });
+  };
+
+  render() {
+    return (
+      <div className="m-panel">
+        <Form>
+          <FormItem
+            label={
+              <span>
+                是否开启&nbsp;<a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://hellosean1025.github.io/yapi/documents/project.html#%E5%85%A8%E5%B1%80mock"
+                >
+                  <Tooltip title="点击查看文档">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </a>
+              </span>
+            }
+            {...formItemLayout}
+          >
+            <Switch
+              checked={this.state.is_mock_open}
+              onChange={this.onChange}
+              checkedChildren="开"
+              unCheckedChildren="关"
+            />
+          </FormItem>
+          <FormItem label="Mock脚本" {...formItemLayout}>
+            <AceEditor
+              data={this.state.project_mock_script}
+              onChange={this.handleMockJsInput}
+              style={{ minHeight: '500px' }}
+            />
+          </FormItem>
+          <FormItem {...tailFormItemLayout}>
+            <Button type="primary" htmlType="submit" onClick={this.handleSubmit}>
+              保存
+            </Button>
+          </FormItem>
+        </Form>
+      </div>
+    );
+  }
+}

client/containers/Project/Setting/ProjectRequest/ProjectRequest.js

@@ -0,0 +1,106 @@
+import React, { PureComponent as Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Form, Button, message } from 'antd';
+const FormItem = Form.Item;
+import './project-request.scss';
+import AceEditor from 'client/components/AceEditor/AceEditor';
+import { updateProjectScript, getProject } from '../../../../reducer/modules/project';
+
+@connect(
+  state => {
+    return {
+      projectMsg: state.project.currProject
+    };
+  },
+  {
+    updateProjectScript,
+    getProject
+  }
+)
+@Form.create()
+export default class ProjectRequest extends Component {
+  static propTypes = {
+    projectMsg: PropTypes.object,
+    updateProjectScript: PropTypes.func,
+    getProject: PropTypes.func,
+    projectId: PropTypes.number
+  };
+
+  UNSAFE_componentWillMount() {
+    this.setState({
+      pre_script: this.props.projectMsg.pre_script,
+      after_script: this.props.projectMsg.after_script
+    });
+  }
+
+  handleSubmit = async () => {
+    let result = await this.props.updateProjectScript({
+      id: this.props.projectId,
+      pre_script: this.state.pre_script,
+      after_script: this.state.after_script
+    });
+    if (result.payload.data.errcode === 0) {
+      message.success('保存成功');
+      await this.props.getProject(this.props.projectId);
+    } else {
+      message.success('保存失败, ' + result.payload.data.errmsg);
+    }
+  };
+
+  render() {
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      }
+    };
+
+    const tailFormItemLayout = {
+      wrapperCol: {
+        xs: {
+          span: 24,
+          offset: 0
+        },
+        sm: {
+          span: 16,
+          offset: 8
+        }
+      }
+    };
+
+    const { pre_script, after_script } = this.state;
+
+    return (
+      <div className="project-request">
+        <Form onSubmit={this.handleSubmit}>
+          <FormItem {...formItemLayout} label="Pre-request Script(请求参数处理脚本)">
+            <AceEditor
+              data={pre_script}
+              onChange={editor => this.setState({ pre_script: editor.text })}
+              fullScreen={true}
+              className="request-editor"
+            />
+          </FormItem>
+          <FormItem {...formItemLayout} label="Pre-response Script(响应数据处理脚本)">
+            <AceEditor
+              data={after_script}
+              onChange={editor => this.setState({ after_script: editor.text })}
+              fullScreen={true}
+              className="request-editor"
+            />
+          </FormItem>
+          <FormItem {...tailFormItemLayout}>
+            <Button onClick={this.handleSubmit} type="primary">
+              保存
+            </Button>
+          </FormItem>
+        </Form>
+      </div>
+    );
+  }
+}

client/containers/Project/Setting/ProjectRequest/project-request.scss

@@ -0,0 +1,10 @@
+.project-request{
+  background: #fff;
+  padding: 15px;
+
+  .request-editor{
+    min-height: 300px;
+    margin-top: 10px;
+    background-color: #eee;
+  }
+}

client/containers/Project/Setting/ProjectToken/ProjectToken.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './ProjectToken.scss';
+import { getToken, updateToken } from '../../../../reducer/modules/project';
+import { connect } from 'react-redux';
+import { Icon, Tooltip, message, Modal } from 'antd';
+import copy from 'copy-to-clipboard';
+const confirm = Modal.confirm;
+
+@connect(
+  state => {
+    return {
+      token: state.project.token
+    };
+  },
+  {
+    getToken,
+    updateToken
+  }
+)
+class ProjectToken extends Component {
+  static propTypes = {
+    projectId: PropTypes.number,
+    getToken: PropTypes.func,
+    token: PropTypes.string,
+    updateToken: PropTypes.func,
+    curProjectRole: PropTypes.string
+  };
+
+  async componentDidMount() {
+    await this.props.getToken(this.props.projectId);
+  }
+
+  copyToken = () => {
+    copy(this.props.token);
+    message.success('已经成功复制到剪切板');
+  };
+
+  updateToken = () => {
+    let that = this;
+    confirm({
+      title: '重新生成key',
+      content: '重新生成之后，之前的key将无法使用，确认重新生成吗？',
+      okText: '确认',
+      cancelText: '取消',
+      async onOk() {
+        await that.props.updateToken(that.props.projectId);
+        message.success('更新成功');
+      },
+      onCancel() {}
+    });
+  };
+
+  render() {
+    return (
+      <div className="project-token">
+        <h2 className="token-title">工具标识</h2>
+        <div className="message">
+          每个项目都有唯一的标识token，用户可以使用这个token值来请求项目 openapi.
+        </div>
+        <div className="token">
+          <span>
+            token: <span className="token-message">{this.props.token}</span>
+          </span>
+          <Tooltip title="复制">
+            <Icon className="token-btn" type="copy" onClick={this.copyToken} />
+          </Tooltip>
+          {this.props.curProjectRole === 'admin' || this.props.curProjectRole === 'owner' ? (
+            <Tooltip title="刷新">
+              <Icon className="token-btn" type="reload" onClick={this.updateToken} />
+            </Tooltip>
+          ) : null}
+        </div>
+        <div className="blockquote">
+          为确保项目内数据的安全性和私密性，请勿轻易将该token暴露给项目组外用户。
+        </div>
+        <br />
+        <h2  className="token-title">open接口：</h2>
+        <p><a target="_blank" rel="noopener noreferrer"   href="https://hellosean1025.github.io/yapi/openapi.html">详细接口文档</a></p>
+        <div>
+          <ul className="open-api">
+            <li>/api/open/run_auto_test [运行自动化测试]</li>
+            <li>/api/open/import_data [导入数据]</li>
+            <li>/api/interface/add [新增接口]</li>
+            <li>/api/interface/save [保存接口]</li>
+            <li>/api/interface/up [更新接口]</li>
+            <li>/api/interface/get [获取接口]</li>
+            <li>/api/interface/list [获取接口列表]</li>
+            <li>/api/interface/list_menu [获取接口菜单]</li>
+            <li>/api/interface/add_cat [新增接口分类]</li>
+            <li>/api/interface/getCatMenu [获取所有分类]</li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ProjectToken;

client/containers/Project/Setting/ProjectToken/ProjectToken.scss

@@ -0,0 +1,70 @@
+.project-token {
+  background: #fff;
+  padding: 15px;
+  min-height: 4.68rem;
+
+  .token{
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 500;
+
+  }
+
+  .token-message{
+    padding: 8px; 
+    margin-right: 8px;
+    background-color: #f5f5f5;
+
+  }
+
+  .open-api{
+    margin-top: 10px;
+    margin-left: 20px;
+    li{
+      margin-bottom: 10px;
+    }
+  }
+
+  .message{
+    padding: 16px 0 0 16px;
+    font-size: 14px;
+  }
+
+  .token-title{
+    font-size: 16px;
+    // background-color: #eee;
+    // border-radius: 4px;
+    // margin-bottom: 15px;
+    font-weight: 400;
+    margin-bottom: 0.16rem;
+    border-left: 3px solid #2395f1;
+    padding-left: 8px;
+  }
+
+  .blockquote{
+    border-left: 4px solid #ff561b;
+    // background-color: #f8f8f8;
+    padding: .12rem .24rem;
+    position: relative;
+    margin-left: 16px;
+  }
+
+  .blockquote:before {
+    content: '!';
+    display: block;
+    position: absolute;
+    left: -.12rem;
+    top: .12rem;
+    width: 20px;
+    height: 20px;
+    background-color: #ff561b;
+    color: #fff;
+    border-radius: 50%;
+    text-align: center;
+    font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+}
+
+  .token-btn{
+    margin-right: 8px;
+  }
+}

client/containers/Project/Setting/Setting.js

@@ -0,0 +1,62 @@
+import React, { PureComponent as Component } from 'react';
+import { Tabs } from 'antd';
+import PropTypes from 'prop-types';
+import ProjectMessage from './ProjectMessage/ProjectMessage.js';
+import ProjectEnv from './ProjectEnv/index.js';
+import ProjectRequest from './ProjectRequest/ProjectRequest';
+import ProjectToken from './ProjectToken/ProjectToken';
+import ProjectMock from './ProjectMock/index.js';
+import { connect } from 'react-redux';
+const TabPane = Tabs.TabPane;
+const plugin = require('client/plugin.js');
+
+const routers = {}
+
+import './Setting.scss';
+
+@connect(state => {
+  return {
+    curProjectRole: state.project.currProject.role
+  };
+})
+class Setting extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    curProjectRole: PropTypes.string
+  };
+  render() {
+    const id = this.props.match.params.id;
+    plugin.emitHook('sub_setting_nav', routers);
+    return (
+      <div className="g-row">
+        <Tabs type="card" className="has-affix-footer tabs-large">
+          <TabPane tab="项目配置" key="1">
+            <ProjectMessage projectId={+id} />
+          </TabPane>
+          <TabPane tab="环境配置" key="2">
+            <ProjectEnv projectId={+id} />
+          </TabPane>
+          <TabPane tab="请求配置" key="3">
+            <ProjectRequest projectId={+id} />
+          </TabPane>
+          {this.props.curProjectRole !== 'guest' ? (
+            <TabPane tab="token配置" key="4">
+              <ProjectToken projectId={+id} curProjectRole={this.props.curProjectRole} />
+            </TabPane>
+          ) : null}
+          <TabPane tab="全局mock脚本" key="5">
+            <ProjectMock projectId={+id} />
+          </TabPane>
+          {Object.keys(routers).map(key=>{
+            const C = routers[key].component;
+            return <TabPane tab={routers[key].name} key={routers[key].name}>
+              <C projectId={+id} />
+            </TabPane>
+          })}
+        </Tabs>
+      </div>
+    );
+  }
+}
+
+export default Setting;

client/containers/Project/Setting/Setting.scss

@@ -0,0 +1,227 @@
+
+.form-item {
+  margin-bottom: .16rem;
+}
+.breakline {
+  margin-top: .18rem;
+  margin-bottom: .18rem;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+}
+.card-danger {
+  border-color: #ff561b;
+  border-radius: 4px;
+  .ant-card-body {
+    display: flex;
+    align-items: center;
+    padding: .24rem !important;
+  }
+  .card-danger-content {
+    flex: 1;
+  }
+  .card-danger-btn {
+    flex-grow: 0;
+    flex-shrink: 1;
+  }
+}
+
+.setting-project-member {
+  .btn{
+    margin-left: 8px;
+  }
+  .m-user-name {
+    padding-right: 16px;
+  }
+
+}
+
+.setting-group {
+  margin-top: .48rem;
+  border-radius: 2px;
+  border-bottom: 1px solid #eee;
+  .ant-card-head {
+    background-color: #eee;
+    padding: 0 .08rem !important;
+  }
+  .ant-card-head-title {
+    font-size: .12rem;
+    float: inherit;
+  }
+  .ant-card-body {
+    padding: 0 !important;
+  }
+  .card-item {
+    padding: .1rem .15rem;
+    position: relative;
+    .item-img {
+      width: .2rem;
+      height: .2rem;
+      margin-right: .08rem;
+      vertical-align: middle;
+    }
+    .item-name {
+      position: absolute;
+      left: .43rem;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .item-role {
+      position: absolute;
+      right: .15rem;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  .card-item + .card-item {
+    border-top: 1px solid #eee;
+  }
+}
+
+.project-setting {
+  .setting-logo {
+    text-align: right;
+    padding: .24rem;
+    cursor: pointer;
+  }
+  .setting-intro {
+    padding: .24rem;
+    height: 1.48rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .ui-title {
+      font-size: .32rem;
+      font-weight: normal;
+      width: 100%;
+    }
+    .ui-desc {
+      font-size: .16rem;
+    }
+  }
+  .ui-logo {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    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);
+    position: relative;
+    &:after {
+      opacity: 0;
+      content: '点击修改';
+      display: block;
+      transition: all .4s;
+      position: absolute;
+      left: 0;
+      top: 0;
+      border-radius: 50%;
+      font-size: .14rem;
+      color: #fff;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0,0,0, .25);
+    }
+    &:hover:after {
+      opacity: 1;
+    }
+  }
+}
+
+.change-project-container {
+  max-width: 320px;
+  .ant-popover-inner {
+    text-align: center;
+  }
+  .ant-popover-title {
+    padding: 8px .16rem;
+    height: auto;
+  }
+  .ant-radio-button-wrapper {
+    font-size: 16px;
+    border: none;
+    &:first-child {
+      border: none;
+    }
+    &:not(:first-child)::before {
+      display: none !important;
+    }
+  }
+  .ant-radio-button-wrapper-checked {
+    box-shadow: none;
+    color: #fff;
+    background-color: #2395f1;
+    border-radius: 4px;
+  }
+  .color {
+    // .ant-radio-button-wrapper {
+    //   &:first-child {
+    //     border: none;
+    //   }
+    // }
+    .ant-radio-button-wrapper-checked {
+      border-radius: 0;
+      &:hover {
+        border: none;
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.danger-container {
+  margin-top: .48rem;
+}
+.btnwrap-changeproject {
+  text-align: center;
+  padding: .16rem 0;
+  background: #fff;
+  background-color: #fff;
+  margin: 0 -.4rem;
+  // background-image: linear-gradient(45deg, #d9d9d9 25%, transparent 0),linear-gradient(45deg, transparent 75%, #d9d9d9 0);
+  background-size: 4px 4px;
+  .btn-save {
+    font-size: .15rem;
+    font-weight: 200;
+    letter-spacing: 1px;
+    border: none;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+    transform: translateY(0);
+    transition: all .2s;
+    &:hover {
+      transform: translateY(-1px);
+    }
+    &:active {
+      transform: translateY(1px);
+    }
+  }
+}
+
+
+
+
+.project-env{
+  // 环境配置中首个item的删除按钮定位调整
+  .ant-row-flex {
+    display: flex;
+    flex-flow: row wrap;
+    height: 60px;
+  }
+}
+
+// 危险操作
+.danger-container {
+  .title {
+    margin-bottom: .48rem;
+    text-align: center;
+    .content {
+      color: rgba(39, 56, 72, 0.65);
+      margin-bottom: .16rem;
+    }
+  }
+}
+
+.radio.ant-radio-wrapper{
+  line-height: unset
+}

client/containers/User/List.js

@@ -0,0 +1,231 @@
+import React, { PureComponent as Component } from 'react';
+import { formatTime } from '../../common.js';
+import { Link } from 'react-router-dom';
+import { setBreadcrumb } from '../../reducer/modules/user';
+//import PropTypes from 'prop-types'
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Table, Popconfirm, message, Input } from 'antd';
+import axios from 'axios';
+
+const Search = Input.Search;
+const limit = 20;
+@connect(
+  state => {
+    return {
+      curUserRole: state.user.role
+    };
+  },
+  {
+    setBreadcrumb
+  }
+)
+class List extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: [],
+      total: null,
+      current: 1,
+      backups: [],
+      isSearch: false
+    };
+  }
+  static propTypes = {
+    setBreadcrumb: PropTypes.func,
+    curUserRole: PropTypes.string
+  };
+  changePage = current => {
+    this.setState(
+      {
+        current: current
+      },
+      this.getUserList
+    );
+  };
+
+  getUserList() {
+    axios.get('/api/user/list?page=' + this.state.current + '&limit=' + limit).then(res => {
+      let result = res.data;
+
+      if (result.errcode === 0) {
+        let list = result.data.list;
+        let total = result.data.count;
+        list.map((item, index) => {
+          item.key = index;
+          item.up_time = formatTime(item.up_time);
+        });
+        this.setState({
+          data: list,
+          total: total,
+          backups: list
+        });
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.getUserList();
+  }
+
+  confirm = uid => {
+    axios
+      .post('/api/user/del', {
+        id: uid
+      })
+      .then(
+        res => {
+          if (res.data.errcode === 0) {
+            message.success('已删除此用户');
+            let userlist = this.state.data;
+            userlist = userlist.filter(item => {
+              return item._id != uid;
+            });
+            this.setState({
+              data: userlist
+            });
+          } else {
+            message.error(res.data.errmsg);
+          }
+        },
+        err => {
+          message.error(err.message);
+        }
+      );
+  };
+
+  async UNSAFE_componentWillMount() {
+    this.props.setBreadcrumb([{ name: '用户管理' }]);
+  }
+
+  handleSearch = value => {
+    let params = { q: value };
+    if (params.q !== '') {
+      axios.get('/api/user/search', { params }).then(data => {
+        let userList = [];
+
+        data = data.data.data;
+        if (data) {
+          data.forEach(v =>
+            userList.push({
+              ...v,
+              _id: v.uid
+            })
+          );
+        }
+
+        this.setState({
+          data: userList,
+          isSearch: true
+        });
+      });
+    } else {
+      this.setState({
+        data: this.state.backups,
+        isSearch: false
+      });
+    }
+  };
+
+  render() {
+    const role = this.props.curUserRole;
+    let data = [];
+    if (role === 'admin') {
+      data = this.state.data;
+    }
+    let columns = [
+      {
+        title: '用户名',
+        dataIndex: 'username',
+        key: 'username',
+        width: 180,
+        render: (username, item) => {
+          return <Link to={'/user/profile/' + item._id}>{item.username}</Link>;
+        }
+      },
+      {
+        title: 'Email',
+        dataIndex: 'email',
+        key: 'email'
+      },
+      {
+        title: '用户角色',
+        dataIndex: 'role',
+        key: 'role',
+        width: 150
+      },
+      {
+        title: '更新日期',
+        dataIndex: 'up_time',
+        key: 'up_time',
+        width: 160
+      },
+      {
+        title: '功能',
+        key: 'action',
+        width: '90px',
+        render: item => {
+          return (
+            <span>
+              {/* <span className="ant-divider" /> */}
+              <Popconfirm
+                title="确认删除此用户?"
+                onConfirm={() => {
+                  this.confirm(item._id);
+                }}
+                okText="确定"
+                cancelText="取消"
+              >
+                <a style={{ display: 'block', textAlign: 'center' }} href="#">
+                  删除
+                </a>
+              </Popconfirm>
+            </span>
+          );
+        }
+      }
+    ];
+
+    columns = columns.filter(item => {
+      if (item.key === 'action' && role !== 'admin') {
+        return false;
+      }
+      return true;
+    });
+
+    const pageConfig = {
+      total: this.state.total,
+      pageSize: limit,
+      current: this.state.current,
+      onChange: this.changePage
+    };
+
+    const defaultPageConfig = {
+      total: this.state.data.length,
+      pageSize: limit,
+      current: 1
+    };
+
+    return (
+      <section className="user-table">
+        <div className="user-search-wrapper">
+          <h2 style={{ marginBottom: '10px' }}>用户总数：{this.state.total}位</h2>
+          <Search
+            onChange={e => this.handleSearch(e.target.value)}
+            onSearch={this.handleSearch}
+            placeholder="请输入用户名"
+          />
+        </div>
+        <Table
+          bordered={true}
+          rowKey={record => record._id}
+          columns={columns}
+          pagination={this.state.isSearch ? defaultPageConfig : pageConfig}
+          dataSource={data}
+        />
+      </section>
+    );
+  }
+}
+
+export default List;

client/containers/User/Profile.js

@@ -0,0 +1,556 @@
+import React, { PureComponent as Component } from 'react';
+import { Row, Col, Input, Button, Select, message, Upload, Tooltip } from 'antd';
+import axios from 'axios';
+import { formatTime } from '../../common.js';
+import PropTypes from 'prop-types';
+import { setBreadcrumb, setImageUrl } from '../../reducer/modules/user';
+import { connect } from 'react-redux';
+
+const EditButton = props => {
+  const { isAdmin, isOwner, onClick, name, admin } = props;
+  if (isOwner) {
+    // 本人
+    if (admin) {
+      return null;
+    }
+    return (
+      <Button
+        icon="edit"
+        onClick={() => {
+          onClick(name, true);
+        }}
+      >
+        修改
+      </Button>
+    );
+  } else if (isAdmin) {
+    // 管理员
+    return (
+      <Button
+        icon="edit"
+        onClick={() => {
+          onClick(name, true);
+        }}
+      >
+        修改
+      </Button>
+    );
+  } else {
+    return null;
+  }
+};
+EditButton.propTypes = {
+  isAdmin: PropTypes.bool,
+  isOwner: PropTypes.bool,
+  onClick: PropTypes.func,
+  name: PropTypes.string,
+  admin: PropTypes.bool
+};
+
+@connect(
+  state => {
+    return {
+      curUid: state.user.uid,
+      userType: state.user.type,
+      curRole: state.user.role
+    };
+  },
+  {
+    setBreadcrumb
+  }
+)
+class Profile extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    curUid: PropTypes.number,
+    userType: PropTypes.string,
+    setBreadcrumb: PropTypes.func,
+    curRole: PropTypes.string,
+    upload: PropTypes.bool
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      usernameEdit: false,
+      emailEdit: false,
+      secureEdit: false,
+      roleEdit: false,
+      userinfo: {}
+    };
+  }
+
+  componentDidMount() {
+    this._uid = this.props.match.params.uid;
+    this.handleUserinfo(this.props);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!nextProps.match.params.uid) {
+      return;
+    }
+    if (this._uid !== nextProps.match.params.uid) {
+      this.handleUserinfo(nextProps);
+    }
+  }
+
+  handleUserinfo(props) {
+    const uid = props.match.params.uid;
+    this.getUserInfo(uid);
+  }
+
+  handleEdit = (key, val) => {
+    var s = {};
+    s[key] = val;
+    this.setState(s);
+  };
+
+  getUserInfo = id => {
+    var _this = this;
+    const { curUid } = this.props;
+
+    axios.get('/api/user/find?id=' + id).then(res => {
+      _this.setState({
+        userinfo: res.data.data,
+        _userinfo: res.data.data
+      });
+      if (curUid === +id) {
+        this.props.setBreadcrumb([{ name: res.data.data.username }]);
+      } else {
+        this.props.setBreadcrumb([{ name: '管理: ' + res.data.data.username }]);
+      }
+    });
+  };
+
+  updateUserinfo = name => {
+    var state = this.state;
+    let value = this.state._userinfo[name];
+    let params = { uid: state.userinfo.uid };
+    params[name] = value;
+
+    axios.post('/api/user/update', params).then(
+      res => {
+        let data = res.data;
+        if (data.errcode === 0) {
+          let userinfo = this.state.userinfo;
+          userinfo[name] = value;
+          this.setState({
+            userinfo: userinfo
+          });
+
+          this.handleEdit(name + 'Edit', false);
+          message.success('更新用户信息成功');
+        } else {
+          message.error(data.errmsg);
+        }
+      },
+      err => {
+        message.error(err.message);
+      }
+    );
+  };
+
+  changeUserinfo = e => {
+    let dom = e.target;
+    let name = dom.getAttribute('name');
+    let value = dom.value;
+
+    this.setState({
+      _userinfo: {
+        ...this.state._userinfo,
+        [name]: value
+      }
+    });
+  };
+
+  changeRole = val => {
+    let userinfo = this.state.userinfo;
+    userinfo.role = val;
+    this.setState({
+      _userinfo: userinfo
+    });
+    this.updateUserinfo('role');
+  };
+
+  updatePassword = () => {
+    let old_password = document.getElementById('old_password').value;
+    let password = document.getElementById('password').value;
+    let verify_pass = document.getElementById('verify_pass').value;
+    if (password != verify_pass) {
+      return message.error('两次输入的密码不一样');
+    }
+    let params = {
+      uid: this.state.userinfo.uid,
+      password: password,
+      old_password: old_password
+    };
+
+    axios.post('/api/user/change_password', params).then(
+      res => {
+        let data = res.data;
+        if (data.errcode === 0) {
+          this.handleEdit('secureEdit', false);
+          message.success('修改密码成功');
+          if (this.props.curUid === this.state.userinfo.uid) {
+            location.reload();
+          }
+        } else {
+          message.error(data.errmsg);
+        }
+      },
+      err => {
+        message.error(err.message);
+      }
+    );
+  };
+
+  render() {
+    let ButtonGroup = Button.Group;
+    let userNameEditHtml, emailEditHtml, secureEditHtml, roleEditHtml;
+    const Option = Select.Option;
+    let userinfo = this.state.userinfo;
+    let _userinfo = this.state._userinfo;
+    let roles = { admin: '管理员', member: '会员' };
+    let userType = '';
+    if (this.props.userType === 'third') {
+      userType = false;
+    } else if (this.props.userType === 'site') {
+      userType = true;
+    } else {
+      userType = false;
+    }
+
+    // 用户名信息修改
+    if (this.state.usernameEdit === false) {
+      userNameEditHtml = (
+        <div>
+          <span className="text">{userinfo.username}</span>&nbsp;&nbsp;
+          {/*<span className="text-button"  onClick={() => { this.handleEdit('usernameEdit', true) }}><Icon type="edit" />修改</span>*/}
+          {/* {btn} */}
+          {/* 站点登陆才能编辑 */}
+          {userType && (
+            <EditButton
+              userType={userType}
+              isOwner={userinfo.uid === this.props.curUid}
+              isAdmin={this.props.curRole === 'admin'}
+              onClick={this.handleEdit}
+              name="usernameEdit"
+            />
+          )}
+        </div>
+      );
+    } else {
+      userNameEditHtml = (
+        <div>
+          <Input
+            value={_userinfo.username}
+            name="username"
+            onChange={this.changeUserinfo}
+            placeholder="用户名"
+          />
+          <ButtonGroup className="edit-buttons">
+            <Button
+              className="edit-button"
+              onClick={() => {
+                this.handleEdit('usernameEdit', false);
+              }}
+            >
+              取消
+            </Button>
+            <Button
+              className="edit-button"
+              onClick={() => {
+                this.updateUserinfo('username');
+              }}
+              type="primary"
+            >
+              确定
+            </Button>
+          </ButtonGroup>
+        </div>
+      );
+    }
+    // 邮箱信息修改
+    if (this.state.emailEdit === false) {
+      emailEditHtml = (
+        <div>
+          <span className="text">{userinfo.email}</span>&nbsp;&nbsp;
+          {/*<span className="text-button" onClick={() => { this.handleEdit('emailEdit', true) }} ><Icon type="edit" />修改</span>*/}
+          {/* {btn} */}
+          {/* 站点登陆才能编辑 */}
+          {userType && (
+            <EditButton
+              admin={userinfo.role === 'admin'}
+              isOwner={userinfo.uid === this.props.curUid}
+              isAdmin={this.props.curRole === 'admin'}
+              onClick={this.handleEdit}
+              name="emailEdit"
+            />
+          )}
+        </div>
+      );
+    } else {
+      emailEditHtml = (
+        <div>
+          <Input
+            placeholder="Email"
+            value={_userinfo.email}
+            name="email"
+            onChange={this.changeUserinfo}
+          />
+          <ButtonGroup className="edit-buttons">
+            <Button
+              className="edit-button"
+              onClick={() => {
+                this.handleEdit('emailEdit', false);
+              }}
+            >
+              取消
+            </Button>
+            <Button
+              className="edit-button"
+              type="primary"
+              onClick={() => {
+                this.updateUserinfo('email');
+              }}
+            >
+              确定
+            </Button>
+          </ButtonGroup>
+        </div>
+      );
+    }
+
+    if (this.state.roleEdit === false) {
+      roleEditHtml = (
+        <div>
+          <span className="text">{roles[userinfo.role]}</span>&nbsp;&nbsp;
+        </div>
+      );
+    } else {
+      roleEditHtml = (
+        <Select defaultValue={_userinfo.role} onChange={this.changeRole} style={{ width: 150 }}>
+          <Option value="admin">管理员</Option>
+          <Option value="member">会员</Option>
+        </Select>
+      );
+    }
+
+    if (this.state.secureEdit === false) {
+      let btn = '';
+      if (userType) {
+        btn = (
+          <Button
+            icon="edit"
+            onClick={() => {
+              this.handleEdit('secureEdit', true);
+            }}
+          >
+            修改
+          </Button>
+        );
+      }
+      secureEditHtml = btn;
+    } else {
+      secureEditHtml = (
+        <div>
+          <Input
+            style={{
+              display: this.props.curRole === 'admin' && userinfo.role != 'admin' ? 'none' : ''
+            }}
+            placeholder="旧的密码"
+            type="password"
+            name="old_password"
+            id="old_password"
+          />
+          <Input placeholder="新的密码" type="password" name="password" id="password" />
+          <Input placeholder="确认密码" type="password" name="verify_pass" id="verify_pass" />
+          <ButtonGroup className="edit-buttons">
+            <Button
+              className="edit-button"
+              onClick={() => {
+                this.handleEdit('secureEdit', false);
+              }}
+            >
+              取消
+            </Button>
+            <Button className="edit-button" onClick={this.updatePassword} type="primary">
+              确定
+            </Button>
+          </ButtonGroup>
+        </div>
+      );
+    }
+    return (
+      <div className="user-profile">
+        <div className="user-item-body">
+          {userinfo.uid === this.props.curUid ? (
+            <h3>个人设置</h3>
+          ) : (
+            <h3>{userinfo.username} 资料设置</h3>
+          )}
+
+          <Row className="avatarCon" type="flex" justify="start">
+            <Col span={24}>
+              {userinfo.uid === this.props.curUid ? (
+                <AvatarUpload uid={userinfo.uid}>点击上传头像</AvatarUpload>
+              ) : (
+                <div className="avatarImg">
+                  <img src={`/api/user/avatar?uid=${userinfo.uid}`} />
+                </div>
+              )}
+            </Col>
+          </Row>
+          <Row className="user-item" type="flex" justify="start">
+            <div className="maoboli" />
+            <Col span={4}>用户id</Col>
+            <Col span={12}>{userinfo.uid}</Col>
+          </Row>
+          <Row className="user-item" type="flex" justify="start">
+            <div className="maoboli" />
+            <Col span={4}>用户名</Col>
+            <Col span={12}>{userNameEditHtml}</Col>
+          </Row>
+          <Row className="user-item" type="flex" justify="start">
+            <div className="maoboli" />
+            <Col span={4}>Email</Col>
+            <Col span={12}>{emailEditHtml}</Col>
+          </Row>
+          <Row
+            className="user-item"
+            style={{ display: this.props.curRole === 'admin' ? '' : 'none' }}
+            type="flex"
+            justify="start"
+          >
+            <div className="maoboli" />
+            <Col span={4}>角色</Col>
+            <Col span={12}>{roleEditHtml}</Col>
+          </Row>
+          <Row
+            className="user-item"
+            style={{ display: this.props.curRole === 'admin' ? '' : 'none' }}
+            type="flex"
+            justify="start"
+          >
+            <div className="maoboli" />
+            <Col span={4}>登陆方式</Col>
+            <Col span={12}>{userinfo.type === 'site' ? '站点登陆' : '第三方登陆'}</Col>
+          </Row>
+          <Row className="user-item" type="flex" justify="start">
+            <div className="maoboli" />
+            <Col span={4}>创建账号时间</Col>
+            <Col span={12}>{formatTime(userinfo.add_time)}</Col>
+          </Row>
+          <Row className="user-item" type="flex" justify="start">
+            <div className="maoboli" />
+            <Col span={4}>更新账号时间</Col>
+            <Col span={12}>{formatTime(userinfo.up_time)}</Col>
+          </Row>
+
+          {userType ? (
+            <Row className="user-item" type="flex" justify="start">
+              <div className="maoboli" />
+              <Col span={4}>密码</Col>
+              <Col span={12}>{secureEditHtml}</Col>
+            </Row>
+          ) : (
+            ''
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+@connect(
+  state => {
+    return {
+      url: state.user.imageUrl
+    };
+  },
+  {
+    setImageUrl
+  }
+)
+class AvatarUpload extends Component {
+  constructor(props) {
+    super(props);
+  }
+  static propTypes = {
+    uid: PropTypes.number,
+    setImageUrl: PropTypes.func,
+    url: PropTypes.any
+  };
+  uploadAvatar(basecode) {
+    axios
+      .post('/api/user/upload_avatar', { basecode: basecode })
+      .then(() => {
+        // this.setState({ imageUrl: basecode });
+        this.props.setImageUrl(basecode);
+      })
+      .catch(e => {
+        console.log(e);
+      });
+  }
+  handleChange(info) {
+    if (info.file.status === 'done') {
+      // Get this url from response in real world.
+      getBase64(info.file.originFileObj, basecode => {
+        this.uploadAvatar(basecode);
+      });
+    }
+  }
+  render() {
+    const { url } = this.props;
+    let imageUrl = url ? url : `/api/user/avatar?uid=${this.props.uid}`;
+    // let imageUrl = this.state.imageUrl ? this.state.imageUrl : `/api/user/avatar?uid=${this.props.uid}`;
+    // console.log(this.props.uid);
+    return (
+      <div className="avatar-box">
+        <Tooltip
+          placement="right"
+          title={<div>点击头像更换 (只支持jpg、png格式且大小不超过200kb的图片)</div>}
+        >
+          <div>
+            <Upload
+              className="avatar-uploader"
+              name="basecode"
+              showUploadList={false}
+              action="/api/user/upload_avatar"
+              beforeUpload={beforeUpload}
+              onChange={this.handleChange.bind(this)}
+            >
+              {/*<Avatar size="large" src={imageUrl}  />*/}
+              <div style={{ width: 100, height: 100 }}>
+                <img className="avatar" src={imageUrl} />
+              </div>
+            </Upload>
+          </div>
+        </Tooltip>
+        <span className="avatarChange" />
+      </div>
+    );
+  }
+}
+
+function beforeUpload(file) {
+  const isJPG = file.type === 'image/jpeg';
+  const isPNG = file.type === 'image/png';
+  if (!isJPG && !isPNG) {
+    message.error('图片的格式只能为 jpg、png！');
+  }
+  const isLt2M = file.size / 1024 / 1024 < 0.2;
+  if (!isLt2M) {
+    message.error('图片必须小于 200kb!');
+  }
+
+  return (isPNG || isJPG) && isLt2M;
+}
+
+function getBase64(img, callback) {
+  const reader = new FileReader();
+  reader.addEventListener('load', () => callback(reader.result));
+  reader.readAsDataURL(img);
+}
+
+export default Profile;

client/containers/User/User.js

@@ -0,0 +1,45 @@
+import './index.scss';
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import { Route } from 'react-router-dom';
+import List from './List.js';
+import PropTypes from 'prop-types';
+import Profile from './Profile.js';
+import { Row } from 'antd';
+@connect(
+  state => {
+    return {
+      curUid: state.user.uid,
+      userType: state.user.type,
+      role: state.user.role
+    };
+  },
+  {}
+)
+class User extends Component {
+  static propTypes = {
+    match: PropTypes.object,
+    curUid: PropTypes.number,
+    userType: PropTypes.string,
+    role: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="g-doc">
+          <Row className="user-box">
+            <Route path={this.props.match.path + '/list'} component={List} />
+            <Route path={this.props.match.path + '/profile/:uid'} component={Profile} />
+          </Row>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default User;

client/containers/User/index.scss

@@ -0,0 +1,241 @@
+@import '../../styles/mixin.scss';
+
+.g-doc {
+  margin: 0 auto 0.24rem;
+}
+
+/* .user-box.css */
+.user-box {
+  @include row-width-limit;
+  padding: 0;
+  display: -webkit-box;
+  -webkit-box-flex: 1;
+  margin: 0 auto;
+  margin-top: 24px;
+  .user-list {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+    background: #fff;
+    border-radius: 4px;
+    min-height: 5rem;
+    .search {
+      padding: 5px;
+      background-color: #eee;
+    }
+    ul {
+      border: none;
+    }
+    .ant-menu-item {
+      font-size: 18px;
+    }
+  }
+  .user-name {
+    padding: 0.24rem;
+    background-color: #34495e;
+    color: white;
+    font-size: 18px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    span {
+      margin-right: 5px;
+    }
+  }
+  .router-content {
+    min-height: calc(100% - 2.47rem);
+  }
+  .user-table {
+    -webkit-box-flex: 1;
+    padding: 24px;
+    background: #fff;
+    min-height: 5rem;
+    .ant-table-wrapper table {
+      // font-size: .14rem;
+
+      a {
+        // font-size: 13px;
+      }
+    }
+    .user-search-wrapper {
+      position: relative;
+      .ant-input-search {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 250px;
+      }
+    }
+  }
+
+  .user-profile {
+    -webkit-box-flex: 1;
+    background: #fff;
+    min-height: 5rem;
+    position: relative;
+
+    .edit-buttons {
+      .edit-button {
+        text-align: center;
+        margin-right: 10px;
+      }
+    }
+
+    .bacToPer {
+      position: absolute;
+      right: 8px;
+      top: 8px;
+      z-index: 3;
+    }
+    .user-item-body {
+      width: 95%;
+      margin: 0px auto;
+      padding: 32px;
+      position: relative;
+      // box-shadow: 0 4px 6px rgba(50, 50, 93, 0.3), 0 1px 3px rgba(0, 0, 0, 0.01);
+      h3 {
+        font-size: 20px;
+        font-weight: 500;
+        margin-bottom: 16px;
+      }
+      .user-item-mask-top {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 100%;
+        width: 100%;
+        background: black;
+        z-index: 2;
+        opacity: 0.7;
+      }
+      .user-item-mask {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 0px;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background-color: rgba(0, 0, 0, 0.7);
+      }
+      .user-item {
+        position: relative;
+        z-index: 3;
+        padding: 8px 0px;
+
+        .maoboli {
+          // background-color: rgba(225,225,225,0.16);
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0px;
+          top: 0px;
+        }
+      }
+    }
+    .user-item {
+      min-height: 35px;
+      line-height: 35px;
+      margin: 5px;
+      margin-left: 0px;
+      font-size: 14px;
+      #old_password,
+      #password,
+      #verify_pass {
+        margin-top: 20px;
+      }
+      #old_password {
+        margin-top: 0px;
+      }
+      .ant-col-12 {
+        .ant-input {
+          width: 60%;
+          margin-right: 16px;
+        }
+      }
+      .ant-col-4 {
+        color: rgba(71, 86, 99, 0.8);
+        font-weight: 500;
+        padding: 0px 16px;
+        text-indent: 0.7em;
+        margin-right: 30px;
+        white-space: nowrap;
+        text-align: right;
+        width: 130px;
+      }
+      .text {
+        padding-right: 16px;
+      }
+      .text-button {
+        color: #657289;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .user-nav {
+    border-bottom-left-radius: 0.04rem;
+    border-bottom-right-radius: 0.04rem;
+  }
+  .avatar-uploader {
+    border: none;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.31), 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+  .avatar-uploader,
+  .avatar-uploader-trigger {
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+    border-radius: 50px;
+  }
+  .avatar {
+    width: 100px;
+    min-height: 100px;
+  }
+  .avatarImg {
+    width: 100px;
+    border-radius: 50px;
+    overflow: hidden;
+    height: 100px;
+    background-color: white;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.31), 0 1px 3px rgba(0, 0, 0, 0.08);
+    margin-left: 60px;
+    img {
+      width: 100%;
+    }
+  }
+  .avatar-uploader {
+    display: block;
+    cursor: pointer;
+    height: 100px;
+  }
+  .ant-upload-list {
+    display: none;
+  }
+  .avatar-box {
+    width: 100px;
+    position: relative;
+    margin-left: 60px;
+  }
+  .avatarCon {
+    // background: gray;
+    padding: 16px 0px;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .avatar-uploader-trigger {
+    display: table-cell;
+    vertical-align: middle;
+    font-size: 28px;
+    color: #999;
+  }
+  .avatarChange {
+    display: block;
+    width: 300px;
+    text-align: center;
+    padding: 8px;
+    margin-left: -100px;
+    color: #ececec;
+    position: absolute;
+    top: 0px;
+  }
+}

client/containers/index.js

@@ -0,0 +1,9 @@
+import Header from '../components/Header/Header.js';
+import Home from './Home/Home.js';
+import Login from './Login/LoginContainer.js';
+import Group from './Group/Group.js';
+import Project from './Project/Project.js';
+import Follows from './Follows/Follows.js';
+import AddProject from './AddProject/AddProject.js';
+
+export { Header, Home, Login, Group, Project, Follows, AddProject };