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

client/Application.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
-import { Route, HashRouter } from 'react-router-dom'
+import { Route, HashRouter, Redirect, Switch } 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 Footer from './components/Footer/Footer'
 import Loading from './components/Loading/Loading'
 import { checkLoginState } from './actions/login'
 import { requireAuthentication } from './components/AuthenticatedComponent';
@@ -46,13 +47,16 @@ export default class App extends Component {
           <div className="router-main">
             <Header />
             <Route path="/" component={Home} exact />
-            <Route path="/group" component={ requireAuthentication(ProjectGroups) } >
-              <Route  exact path="/group/:groupName" component={ ProjectGroups } />
-            </Route>
+            {/*<Route exact path="/group" component={ requireAuthentication(ProjectGroups) } ></Route>*/}
+            <Switch>
+              <Redirect exact from='/group' to='/group/1' />
+              <Route exact path="/group/:groupName" component={ requireAuthentication(ProjectGroups) } />
+            </Switch>
             <Route path="/Interface" component={requireAuthentication(Interface)} />
             <Route path="/user" component={requireAuthentication(User)} />
             <Route path="/News" component={requireAuthentication(News)} />
             <Route path="/AddInterface" component={ requireAuthentication(AddInterface) } />
+            <Footer/>
           </div>
         </HashRouter>
       )

client/components/Header/Header.js

@@ -16,9 +16,6 @@ const MenuUser = (props) => (
       <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>
-    </Menu.Item>
-    <Menu.Item key="2">
       <a onClick={props.logout}>退出</a>
     </Menu.Item>
   </Menu>
@@ -122,7 +119,6 @@ class HeaderCom extends Component {
   }
   render () {
     const { login, user, msg, uid, curKey } = this.props;
-    console.log(curKey);
     return (
       <acticle className="header-box">
         <Layout className="layout">

client/components/Intro/Intro.js

@@ -9,7 +9,7 @@ import QueueAnim from 'rc-queue-anim';
 const IntroPart = (props) =>(
   <Col span={12} className="switch-content">
     <div className="icon-switch">
-      <Icon type="smile-o" />
+      <Icon type={props.iconType} />
     </div>
     <div>
       <p><b>{props.title}</b></p>
@@ -20,7 +20,8 @@ const IntroPart = (props) =>(
 
 IntroPart.propTypes = {
   title : PropTypes.string,
-  des : PropTypes.string
+  des : PropTypes.string,
+  iconType : PropTypes.string
 }
 
 class Intro extends React.Component{
@@ -81,7 +82,7 @@ class Intro extends React.Component{
             </div>
             <div className="des-switch" key={`${id}-des-switch`}>
               {intro.detail.map(function(item,i){
-                return(<IntroPart key={i} title={item.title} des={item.des}/>)
+                return(<IntroPart key={i} title={item.title} des={item.des} iconType={item.iconType}/>)
               })}
             </div>
           </QueueAnim>

client/containers/Home/Home.js

@@ -9,10 +9,10 @@ import Intro from '../../components/Intro/Intro'
 import { changeMenuItem } from '../../actions/menu'
 import { OverPack } from 'rc-scroll-anim'
 import TweenOne from 'rc-tween-one'
+import QueueAnim from 'rc-queue-anim';
 
 
 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">
@@ -43,18 +43,22 @@ const HomeGuest = (props) => (
           playScale="0.3"
         >
           <TweenOne
-            key="h3"
+            key="feat-motion-one"
             animation={oneAnim}
             component="h3"
           >
             <span>特性</span>
           </TweenOne>
-          <TweenOne
-            animation={queueAnim}
-            reverseDelay={200}
-          >
-            <Row>
-              <Col span={8} className="feat-wrapper">
+          <Row key="feat-motion-row">
+            <QueueAnim
+              delay = {200}
+              interval ={100}
+              type = "bottom"
+              ease = 'easeOutQuad'
+              animConfig ={{ opacity:[1,0],y: '+=30' }}
+              key="feat-motion-queue"
+            >
+              <Col span={8} className="feat-wrapper" key="feat-wrapper-1">
                 <div className="feat-img">
                   <Icon type="api" />
                 </div>
@@ -62,7 +66,7 @@ const HomeGuest = (props) => (
                   接口管理
                 </p>
               </Col>
-              <Col span={8} className="feat-wrapper">
+              <Col span={8} className="feat-wrapper" key="feat-wrapper-2">
                 <div className="feat-img">
                   <Icon type="link" />
                 </div>
@@ -70,7 +74,7 @@ const HomeGuest = (props) => (
                   支持Mock
                 </p>
               </Col>
-              <Col span={8} className="feat-wrapper">
+              <Col span={8} className="feat-wrapper" key="feat-wrapper-3">
                 <div className="feat-img">
                   <Icon type="team" />
                 </div>
@@ -78,8 +82,8 @@ const HomeGuest = (props) => (
                   团队协作
                 </p>
               </Col>
-            </Row>
-          </TweenOne>
+            </QueueAnim>
+          </Row>
         </OverPack>
       </div>
     </div>
@@ -117,7 +121,7 @@ class Home extends Component {
     changeMenuItem : PropTypes.func
   }
   toStart = () =>{
-    this.props.changeMenuItem('/ProjectGroups');
+    this.props.changeMenuItem('/group');
   }
   render () {
     const { login } = this.props;
@@ -131,7 +135,7 @@ class Home extends Component {
                 <p className="des">一个高效，易用，功能强大的api管理系统</p>
                 <div className="btn">
                   <Button type="primary" size="large">
-                    <Link to="/ProjectGroups" onClick={this.toStart}>开始</Link>
+                    <Link to="/group" onClick={this.toStart}>开始</Link>
                   </Button>
                 </div>
               </div>
@@ -148,17 +152,17 @@ Home.defaultProps={
     title:"接口管理",
     des:"yapi将满足你的所有接口管理需求。不再需要 为每个项目搭建独立的接口管理平台和编写离线的接口文档",
     detail:[
-      {title:"接口管理",des:"强大的接口文档"},
-      {title:"接口管理",des:"强大的接口文档"},
-      {title:"接口管理",des:"强大的接口文档"}
+      {title:"接口管理",des:"强大的接口文档",iconType:"smile-o"},
+      {title:"接口管理",des:"强大的接口文档",iconType:"smile-o"},
+      {title:"接口管理",des:"强大的接口文档",iconType:"smile-o"}
     ],
     img:"./image/demo-img.png"
   },{
     title:"接口管理",
     des:"yapi将满足你的所有接口管理需求。不再需要 为每个项目搭建独立的接口管理平台和编写离线的接口文档",
     detail:[
-      {title:"接口管理",des:"强大的接口文档"},
-      {title:"接口管理",des:"强大的接口文档"}
+      {title:"接口管理",des:"强大的接口文档",iconType:"smile-o"},
+      {title:"接口管理",des:"强大的接口文档",iconType:"smile-o"}
     ],
     img:"./image/demo-img.png"
   }

client/containers/Home/Home.scss

@@ -9,16 +9,14 @@ $color-black-lighter: #404040;
 
 
 .home-main {
-  min-height:calc(100% - 2.23rem);
+  min-height:calc(100% - 2.47rem);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   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;
       .title{
         font-size: .6rem;
       }
@@ -39,6 +37,7 @@ $color-black-lighter: #404040;
     }
     .main-one-left{
       padding-right: .15rem;
+      margin-top: .2rem;
     }
     .main-one-right{
       padding-left: .15rem;

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/styles/common.scss

@@ -3,7 +3,6 @@
 
 html {
   font-size:625%;
-  background: #f1f3f6;
 }
 html, body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -12,6 +11,7 @@ html, body {
   margin: 0;
   padding: 0;
   height: 100%;
+  background: #f1f3f6;
 }
 
 div, article, p, table, tr, td, th, ul, ol, li, h1, h2, h3, form, dl, dt, dd {
@@ -44,5 +44,4 @@ em {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   height: 100%;
-  background-color: #ececec;
 }