Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

.gitignore

@@ -36,5 +36,5 @@ Thumbs.db
 node_modules/
 runtime/init.lock
 runtime/log
-./prd/
+prd/
 dev/

client/Application.js

@@ -5,6 +5,7 @@ import { Route, HashRouter } from 'react-router-dom'
 import { Home, ProjectGroups, Interface, News, AddInterface } from './containers/index'
 import User from './containers/User/User.js'
 import Header from './components/Header/Header'
+import Loading from './components/Loading/Loading'
 import { checkLoginState } from './actions/login'
 import { requireAuthentication } from './components/AuthenticatedComponent';
 
@@ -38,14 +39,16 @@ export default class App extends Component {
   route = (status) => {
     let r;
     if (status === LOADING_STATUS) {
-      return <span>loading...</span>
+      return <Loading visible/>
     } else {
       r = (
         <HashRouter>
           <div className="router-main">
             <Header />
             <Route path="/" component={Home} exact />
-            <Route path="/group/:groupName" component={requireAuthentication(ProjectGroups)} />
+            <Route path="/group" component={ requireAuthentication(ProjectGroups) } >
+              <Route  exact path="/group/:groupName" component={ ProjectGroups } />
+            </Route>
             <Route path="/Interface" component={requireAuthentication(Interface)} />
             <Route path="/user" component={requireAuthentication(User)} />
             <Route path="/News" component={requireAuthentication(News)} />

client/components/Header/Header.js

@@ -13,7 +13,7 @@ const { Header } = Layout;
 const MenuUser = (props) => (
   <Menu>
     <Menu.Item key="0">
-      <Link to={`/profile/${props.uid}`} onClick={props.relieveLink}><Icon type="user" />{ props.user }</Link>
+      <Link to={`/user/profile/${props.uid}`} onClick={props.relieveLink}><Icon type="user" />{ props.user }</Link>
     </Menu.Item>
     <Menu.Item key="1">
       <Link to="/news" onClick={props.relieveLink}><Icon type="mail" />{ props.msg }</Link>
@@ -129,7 +129,7 @@ class HeaderCom extends Component {
           <Header>
             <div className="content">
               <div className="logo">
-                YAPI
+                <Link to="/" onClick={this.relieveLink}>YAPI</Link>
               </div>
               <Menu
                 mode="horizontal"
@@ -139,17 +139,8 @@ class HeaderCom extends Component {
                 onClick={this.linkTo}
                 selectedKeys={[curKey]}
               >
-                <Menu.Item key="/">
-                  <Link to="/">首页</Link>
-                </Menu.Item>
-                <Menu.Item key="/ProjectGroups">
-                  <Link to="/ProjectGroups">分组</Link>
-                </Menu.Item>
-                <Menu.Item key="/Interface">
-                  <Link to="/Interface">接口</Link>
-                </Menu.Item>
-                <Menu.Item key="/doc">
-                  <a>文档</a>
+                <Menu.Item key="/group">
+                  <Link to="/group">项目广场</Link>
                 </Menu.Item>
               </Menu>
               <div className="user-toolbar">
@@ -187,4 +178,4 @@ export default connect(
     checkLoginState,
     changeMenuItem
   }
-)(HeaderCom)
+)(HeaderCom)

client/components/Intro/Intro.js

@@ -1,7 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Row, Col, Icon } from 'antd'
+import { Col, Icon } from 'antd'
 import "./Intro.scss"
+import { OverPack } from 'rc-scroll-anim'
+import TweenOne from 'rc-tween-one'
+import QueueAnim from 'rc-queue-anim';
 
 const IntroPart = (props) =>(
   <Col span={12} className="switch-content">
@@ -33,22 +36,42 @@ class Intro extends React.Component{
         title:PropTypes.string,
         des:PropTypes.string
       }))
-    })
+    }),
+    className : PropTypes.string
   }
   render(){
-    const { intro } = this.props;
+    const {  intro } = this.props;
+    const id = "motion";
+    const animType = {
+      queue: 'right',
+      one: { x: '-=30', opacity: 0, type: 'from' }
+    };
     return(
       <div className="intro-container">
-        <Row>
-          <Col span={12}>
-            <div>
-              <div className="img-container">
-                <img src={intro.img}/>
-              </div>
+        <OverPack
+          playScale="0.3"
+        >
+          <TweenOne
+            animation={animType.one}
+            key={`${id}-img`}
+            resetStyleBool
+            id={`${id}-imgWrapper`}
+            className="imgWrapper"
+          >
+            <div className="img-container" id={`${id}-img-container`}>
+              <img src={intro.img}/>
             </div>
-          </Col>
-          <Col span={12} className="des-container">
-            <div>
+          </TweenOne>
+
+          <QueueAnim
+            type={animType.queue}
+            key={`${id}-text`}
+            leaveReverse
+            ease={['easeOutCubic', 'easeInCubic']}
+            id={`${id}-textWrapper`}
+            className={`${id}-text des-container textWrapper`}
+          >
+            <div key={`${id}-des-content`}>
               <div className="des-title">
                 {intro.title}
               </div>
@@ -56,13 +79,13 @@ class Intro extends React.Component{
                 {intro.des}
               </div>
             </div>
-            <div className="des-switch">
+            <div className="des-switch" key={`${id}-des-switch`}>
               {intro.detail.map(function(item,i){
                 return(<IntroPart key={i} title={item.title} des={item.des}/>)
               })}
             </div>
-          </Col>
-        </Row>
+          </QueueAnim>
+        </OverPack>
       </div>
     )
   }

client/components/Intro/Intro.scss

@@ -4,6 +4,22 @@ $color-blue : #108ee9;
 $color-white: #fff;
 
 .intro-container{
+  .imgWrapper{
+    height: 100%;
+    width: 50%;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+  }
+  .textWrapper{
+    display: block;
+    width: 50%;
+    height: 150px;
+    vertical-align: top;
+    position: absolute;
+    margin: auto;
+    right: 0;
+  }
   .des-container{
     padding-left: .15rem;
     .des-title{

client/containers/Home/Home.js

@@ -2,13 +2,17 @@ import './Home.scss'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { Row, Col, Button } from 'antd'
+import { Row, Col, Button, Icon } from 'antd'
 import PropTypes from "prop-types"
 import Login from '../Login/LoginWrap'
 import Intro from '../../components/Intro/Intro'
-import Footer from "../../components/Footer/Footer";
 import { changeMenuItem } from '../../actions/menu'
+import { OverPack } from 'rc-scroll-anim'
+import TweenOne from 'rc-tween-one'
 
+
+const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };
+const queueAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad','delay':200 };
 const HomeGuest = (props) => (
   <div>
     <div className="main-one">
@@ -17,7 +21,7 @@ const HomeGuest = (props) => (
           <Col span={24}>
             <div className="home-des">
               <p className="title">YAPI</p>
-              <div className="detail">一个高效，易用，功能强大的api管理系统</div>
+              <div className="detail">一个高效，易用，可部署的Api管理系统</div>
             </div>
           </Col>
         </Row>
@@ -33,9 +37,55 @@ const HomeGuest = (props) => (
         </Row>
       </div>
     </div>
+    <div className="feat-part">
+      <div className="container">
+        <OverPack
+          playScale="0.3"
+        >
+          <TweenOne
+            key="h3"
+            animation={oneAnim}
+            component="h3"
+          >
+            <span>特性</span>
+          </TweenOne>
+          <TweenOne
+            animation={queueAnim}
+            reverseDelay={200}
+          >
+            <Row>
+              <Col span={8} className="feat-wrapper">
+                <div className="feat-img">
+                  <Icon type="api" />
+                </div>
+                <p className="feat-title">
+                  接口管理
+                </p>
+              </Col>
+              <Col span={8} className="feat-wrapper">
+                <div className="feat-img">
+                  <Icon type="link" />
+                </div>
+                <p className="feat-title">
+                  支持Mock
+                </p>
+              </Col>
+              <Col span={8} className="feat-wrapper">
+                <div className="feat-img">
+                  <Icon type="team" />
+                </div>
+                <p className="feat-title">
+                  团队协作
+                </p>
+              </Col>
+            </Row>
+          </TweenOne>
+        </OverPack>
+      </div>
+    </div>
     { props.introList.map(function(intro,i){
       return (
-        <div className="main-part" key={i}>
+        <div className="main-part" key={i} id={`main-part-${i}`}>
           <div className="container">
             <Intro intro={intro}/>
           </div>
@@ -88,7 +138,6 @@ class Home extends Component {
             </div>
           )
           : <HomeGuest introList={this.props.introList}/>}
-        <Footer/>
       </div>
     )
   }

client/containers/Home/Home.scss

@@ -2,18 +2,20 @@
 
 $color-white : #fff;
 $color-blue-lighter : #f1f5ff;
+$color-blue-grey-lighter : #f7fafc;
 $color-grey-lighter : #F7F7F7;
 $color-blue-light: #5dade2;
 $color-black-lighter: #404040;
 
 
 .home-main {
-  height:calc(100% - .64rem);
+  min-height:calc(100% - 2.23rem);
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  background: $color-grey-lighter;
+  background: $color-blue-grey-lighter;
   .main-one{
     padding: .5rem .5rem 0 .5rem;
+    //height: 7.16rem;
     //background: radial-gradient(ellipse at center,#45484d 0%,#000 100%);
     .home-des{
       padding: 0 .3rem .3rem 0;
@@ -45,9 +47,9 @@ $color-black-lighter: #404040;
   .user-home{
     display: flex;
     align-items: center;
-    height:calc(100% - 2rem);
+    height: 100%;
     max-width: 11rem;
-    margin: 0 auto;
+    margin: 1rem auto 0;
     .user-des{
       max-width: 11rem;
       margin: 0 auto .5rem;
@@ -72,6 +74,7 @@ $color-black-lighter: #404040;
   }
   .main-part{
     padding: .9rem .5rem;
+    height: 5.8rem;
     &:nth-child(odd){
       background-color: $color-blue-lighter;
     }
@@ -79,9 +82,73 @@ $color-black-lighter: #404040;
       background-color: $color-white;
     }
   }
+  .feat-part{
+    padding: .9rem .5rem;
+    background-color: $color-white;
+    h3{
+      display: flex;
+      height: .3rem;
+      align-items: center;
+      padding: 0 .1rem;
+      margin-bottom: .2rem;
+      color: #333;
+      &:before, &:after{
+        content: "";
+        display: inline-block;
+        height: .02rem;
+        flex: 1;
+        border-top: .01rem solid #e6e6e6;
+      }
+      span{
+        font-size: .24rem;
+        padding: 0 .1rem;
+        font-weight: normal;
+      }
+    }
+  }
   .container{
     max-width: 11rem;
     margin: 0 auto;
+    height:100%;
+    position: relative;
+  }
+  .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;
+      color: #333;
+    }
+    &: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;
+      }
+    }
   }
 }
 

client/containers/Login/Login.js

@@ -66,7 +66,11 @@ class Login extends Component {
         {/* 用户名 (Email) */}
         <FormItem style={formItemStyle}>
           {getFieldDecorator('email', {
-            rules: [{ required: true, message: '请输入email!' }]
+            rules: [{
+              required: true,
+              message: '请输入正确的email!',
+              pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
+            }]
           })(
             <Input style={changeHeight} prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
           )}

client/containers/Login/Reg.js

@@ -94,7 +94,11 @@ class Reg extends Component {
         {/* Emaiil */}
         <FormItem style={formItemStyle}>
           {getFieldDecorator('email', {
-            rules: [{ required: true, message: '请输入email!' }]
+            rules: [{
+              required: true,
+              message: '请输入email!',
+              pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
+            }]
           })(
             <Input style={changeHeight} prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Email" />
           )}

client/containers/ProjectGroups/GroupList/GroupList.js

@@ -68,6 +68,9 @@ export default class GroupList extends Component {
             this.props.history.replace(`${currGroup.group_name}`);
           }
         }
+        console.log(groupName);
+      }else if(!groupName && this.props.groupList.length){
+        this.props.history.push(`/group/${this.props.groupList[0].group_name}`);
       }
       console.log(currGroup);
       this.setState({groupList: this.props.groupList});

client/containers/User/LeftMenu.js

@@ -2,9 +2,18 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { Row, Col, Menu, AutoComplete, Input, Icon } from 'antd'
 import axios from 'axios'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
 
 const Option = AutoComplete.Option;
-
+@connect(
+  state => {
+    console.log(state);
+    return {
+      curUid: state.user.curUid
+    }
+  }
+)
 class LeftMenu extends Component {
   constructor(props) {
     super(props)
@@ -16,6 +25,9 @@ class LeftMenu extends Component {
     this.interval = null;
   }
 
+  static propTypes = {
+    curUid: PropTypes.string
+  }
 
   //延迟搜索
   handleSearch = (value) => {
@@ -51,7 +63,7 @@ class LeftMenu extends Component {
   render() {
     const menus = [{
       title: '个人资料',
-      path: "/user/profile/" + 107
+      path: `/user/profile/${this.props.curUid}`
     }, {
       title: '用户管理',
       path: '/user/list'

client/reducer/Login/login.js

@@ -29,13 +29,17 @@ export default (state = initialState, action) => {
       };
     }
     case LOGIN: {
-      return {
-        ...state,
-        isLogin: true,
-        loginState: MEMBER_STATUS,
-        uid: action.payload.data.data.uid,
-        userName: action.payload.data.data.username
-      };
+      if (action.payload.data.errcode === 0) {
+        return {
+          ...state,
+          isLogin: true,
+          loginState: MEMBER_STATUS,
+          uid: action.payload.data.data.uid,
+          userName: action.payload.data.data.username
+        };
+      } else {
+        return state;
+      }
     }
     case LOGIN_OUT: {
       return{

client/reducer/login/login.js

@@ -29,13 +29,17 @@ export default (state = initialState, action) => {
       };
     }
     case LOGIN: {
-      return {
-        ...state,
-        isLogin: true,
-        loginState: MEMBER_STATUS,
-        uid: action.payload.data.data.uid,
-        userName: action.payload.data.data.username
-      };
+      if (action.payload.data.errcode === 0) {
+        return {
+          ...state,
+          isLogin: true,
+          loginState: MEMBER_STATUS,
+          uid: action.payload.data.data.uid,
+          userName: action.payload.data.data.username
+        };
+      } else {
+        return state;
+      }
     }
     case LOGIN_OUT: {
       return{

client/reducer/menu/menu.js

@@ -3,7 +3,7 @@ import {
 } from '../../constants/action-types.js'
 
 const initialState = {
-  curKey: window.location.hash.split("#")[1] || '/'
+  curKey: window.location.hash.split("#")[1] || ''
 }
 
 export default (state = initialState, action) => {

client/routes.js

@@ -9,7 +9,10 @@ export default () => {
       <div className="router-main">
         <Header/>
         <Route path="/" component={ Home } exact />
-        <Route path="/group/:groupName" component={ ProjectGroups } />
+        
+        <Route path="/group" component={ ProjectGroups } >
+          <Route  exact={false} path="/group/:groupName" component={ ProjectGroups } />
+        </Route>
         <Route path="/Interface" component={ Interface } />
         <Route path="/user" component={User} />
         <Route path="/News" component={ News } />

package.json

@@ -43,6 +43,8 @@
     "node-sass-china": "^4.5.0",
     "nodemailer": "^4.0.1",
     "prop-types": "^15.5.10",
+    "rc-queue-anim": "^1.2.0",
+    "rc-scroll-anim": "^1.0.7",
     "react-monaco-editor": "^0.8.1",
     "redux": "^3.7.1",
     "redux-promise": "^0.5.3",

server/controllers/user.js

@@ -140,15 +140,15 @@ class userController extends baseController {
                 }
                 user = await userInst.save(data);
                 yapi.commons.sendMail({
-                    to: params.email,
-                    contents: `<h3>亲爱的用户：</h3><p>您好，感谢使用YApi,系统检测您是第一次用Qsso账号登录YApi服务,您的Email是： ${params.email} ，初始化密码为：${passsalt}</p>`
+                    to: email,
+                    contents: `<h3>亲爱的用户：</h3><p>您好，感谢使用YApi,系统检测您是第一次用Qsso账号登录YApi服务,您的Email是： ${email} ，初始化密码为：${passsalt}</p>`
                 })
             }
 
             this.setLoginCookie(user._id, user.passsalt)
             return true;
         } catch (e) {
-            console.error(e.message)
+            console.error("third_login:", e.message)
             return false;
         }
     }
@@ -279,7 +279,7 @@ class userController extends baseController {
                 role: 'member'
             });
             yapi.commons.sendMail({
-                to: params.email,
+                to: user.email,
                 contents: `<h3>亲爱的用户：</h3><p>您好，感谢使用YApi,您的账号 ${params.email} 已经注册成功</p>`
             })
         } catch (e) {

server_dist/controllers/user.js

@@ -322,8 +322,8 @@ var userController = function (_baseController) {
                                 user = _context4.sent;
 
                                 _yapi2.default.commons.sendMail({
-                                    to: params.email,
-                                    contents: '<h3>\u4EB2\u7231\u7684\u7528\u6237\uFF1A</h3><p>\u60A8\u597D\uFF0C\u611F\u8C22\u4F7F\u7528YApi,\u7CFB\u7EDF\u68C0\u6D4B\u60A8\u662F\u7B2C\u4E00\u6B21\u7528Qsso\u8D26\u53F7\u767B\u5F55YApi\u670D\u52A1,\u60A8\u7684Email\u662F\uFF1A ' + params.email + ' \uFF0C\u521D\u59CB\u5316\u5BC6\u7801\u4E3A\uFF1A' + passsalt + '</p>'
+                                    to: email,
+                                    contents: '<h3>\u4EB2\u7231\u7684\u7528\u6237\uFF1A</h3><p>\u60A8\u597D\uFF0C\u611F\u8C22\u4F7F\u7528YApi,\u7CFB\u7EDF\u68C0\u6D4B\u60A8\u662F\u7B2C\u4E00\u6B21\u7528Qsso\u8D26\u53F7\u767B\u5F55YApi\u670D\u52A1,\u60A8\u7684Email\u662F\uFF1A ' + email + ' \uFF0C\u521D\u59CB\u5316\u5BC6\u7801\u4E3A\uFF1A' + passsalt + '</p>'
                                 });
 
                             case 13:
@@ -335,7 +335,7 @@ var userController = function (_baseController) {
                                 _context4.prev = 17;
                                 _context4.t0 = _context4['catch'](2);
 
-                                console.error(_context4.t0.message);
+                                console.error("third_login:", _context4.t0.message);
                                 return _context4.abrupt('return', false);
 
                             case 21:
@@ -609,7 +609,7 @@ var userController = function (_baseController) {
                                     role: 'member'
                                 });
                                 _yapi2.default.commons.sendMail({
-                                    to: params.email,
+                                    to: user.email,
                                     contents: '<h3>\u4EB2\u7231\u7684\u7528\u6237\uFF1A</h3><p>\u60A8\u597D\uFF0C\u611F\u8C22\u4F7F\u7528YApi,\u60A8\u7684\u8D26\u53F7 ' + params.email + ' \u5DF2\u7ECF\u6CE8\u518C\u6210\u529F</p>'
                                 });
                                 _context8.next = 26;
@@ -860,16 +860,15 @@ var userController = function (_baseController) {
         key: 'update',
         value: function () {
             var _ref12 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee12(ctx) {
-                var _params, userInst, id, data, checkRepeat, result;
-
+                var params, userInst, id, data, checkRepeat, result;
                 return _regenerator2.default.wrap(function _callee12$(_context12) {
                     while (1) {
                         switch (_context12.prev = _context12.next) {
                             case 0:
                                 _context12.prev = 0;
-                                _params = ctx.request.body;
+                                params = ctx.request.body;
 
-                                if (!(this.getRole() !== 'admin' && _params.uid != this.getUid())) {
+                                if (!(this.getRole() !== 'admin' && params.uid != this.getUid())) {
                                     _context12.next = 4;
                                     break;
                                 }
@@ -878,7 +877,7 @@ var userController = function (_baseController) {
 
                             case 4:
                                 userInst = _yapi2.default.getInst(_user2.default);
-                                id = _params.uid;
+                                id = params.uid;
 
                                 if (id) {
                                     _context12.next = 8;
@@ -894,10 +893,10 @@ var userController = function (_baseController) {
                                 };
 
                                 if (this.getRole() === 'admin') {
-                                    _params.role && (data.role = _params.role);
+                                    params.role && (data.role = params.role);
                                 }
-                                _params.username && (data.username = _params.username);
-                                _params.email && (data.email = _params.email);
+                                params.username && (data.username = params.username);
+                                params.email && (data.email = params.email);
 
                                 if (!data.email) {
                                     _context12.next = 18;

static/prd/assets.js

@@ -1 +0,0 @@
-window.WEBPACK_ASSETS = {"index.js":{"js":"index.js","css":"index.css"}}

ykit.js

@@ -26,12 +26,9 @@ module.exports = {
 
         baseConfig.devtool = 'cheap-module-eval-source-map'
         baseConfig.context = path.resolve(__dirname, "client");
-
         baseConfig.output.prd.path = 'static/prd';
         baseConfig.output.prd.publicPath = '';
-        baseConfig.output.prd.filename = '[name][ext]'
-        baseConfig.plugins.push(assetsPluginInstance)
-
+        baseConfig.output.prd.filename = '[name]@[chunkhash][ext]'
         baseConfig.module.loaders.push({
           test: /\.(sass|scss)$/,
           loader: ykit.ExtractTextPlugin.extract(
@@ -41,11 +38,14 @@ module.exports = {
           )
         })
         baseConfig.module.preLoaders.push({
-            test: /\.(js|jsx)$/,
-            exclude: /node_modules/,
-            loader: "eslint-loader"
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          loader: "eslint-loader"
         });
 
+        if (this.env == 'prd') {
+          baseConfig.plugins.push(assetsPluginInstance)
+        }
         return baseConfig;
       }
     }