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

client/Application.js

@@ -53,6 +53,7 @@ export default class App extends Component {
     } else {
       r = (
         <Router >
+          <div className="g-main">
             <div className="router-main">
               {this.props.loginState !== 1 ? <Header /> : null}
               <div className="router-container">
@@ -68,6 +69,7 @@ export default class App extends Component {
                 // <Route path="/add-interface" component={requireAuthentication(AddInterface)} />
                 }
               </div>
+            </div>
             <Footer />
           </div>
         </Router>

client/components/Footer/Footer.js

@@ -1,6 +1,7 @@
 import './Footer.scss'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { Row, Col } from 'antd';
 import { Icon } from 'antd'
 class Footer extends Component {
   constructor(props) {
@@ -10,23 +11,17 @@ class Footer extends Component {
     footList: PropTypes.array
   }
   render () {
-    const style = {
-      'background': 'url(/image/footer-bac.jpg)'
-    }
     return (
-      <div className = 'footer-wrapper'>
+      <div className="footer-wrapper">
-        <div className = 'footer' style = {style}>
+        <Row>
-          <div className = 'footContent'>
           { this.props.footList.map(function(item,i){
             return <FootItem key={ i } linkList={ item.linkList } title={ item.title } iconType={ item.iconType } ></FootItem>
           }) }
-            <div className = 'copyRight'>
+          <div className="copyRight">
             <h4>Copyright © 2017</h4>
             YMFF出品 @ YMFF
           </div>
-          </div>
+        </Row>
-          <div className='footerMask'></div>
-        </div>
       </div>
     )
   }
@@ -43,12 +38,12 @@ class FootItem extends Component {
   }
   render () {
     return (
-      <div className = 'footItem'>
+      <Col span={6}>
         <h4><Icon type={ this.props.iconType } style={{ fontSize: 16 }} />&nbsp;&nbsp; { this.props.title } </h4>
         { this.props.linkList.map(function(item,i){
           return (<div key={i}>&nbsp;&nbsp;<a href={ item.itemLink }><span>{ item.itemTitle }</span></a></div>);
         }) }
-      </div>
+      </Col>
     );
   }
 }

client/components/Footer/Footer.scss

@@ -2,39 +2,10 @@
 @import '../../styles/mixin.scss';
 
 .footer-wrapper{
+    height: 2rem;
     width: 100%;
 }
-.footer{
+
-    @include wrap-width-limit;
-    margin: 0 auto;
-    clear: both;
-    font-size: 12px;
-    background: #000c15;
-    position: relative;
-    z-index: 1;
-    color: rgba(255,255,255,.65);
-    box-shadow: 0 1000px 0 1000px #fff;
-    // background-image: url('image/footer-bac.jpg');
-    background-repeat: no-repeat;
-    background-position: center center;
-    h4{
-        margin-bottom: 20px;
-        color: #FFF;
-        i{
-            margin-left: -20px;
-        }
-    }
-}
-.footerMask{
-    @include wrap-width-limit;
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    background-color: #404040;
-    opacity: .65;
-    z-index: 1;
-}
 .footContent{
     @include row-width-limit;
     //width:90%;

client/containers/Home/Home.js

@@ -107,18 +107,38 @@ const HomeGuest = () => (
         <Row className="row-card">
           <Col span={12} className="section-card">
             <Card title="Mock 规则">
-              <p>通过学习一些简单的 Mock 模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼: 所有的数据都可以实时随机生成。</p>
+              <p className="mock-desc">通过学习一些简单的 Mock 模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼: 所有的数据都可以实时随机生成。</p>
-              <p>通过学习一些简单的 Mock 模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼: 所有的数据都可以实时随机生成。</p>
+              <div className="code">
-              <p>通过学习一些简单的 Mock 模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼: 所有的数据都可以实时随机生成。</p>
+                <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;&ensp;&ensp;<span className="string">&quot;errcode|200-500&quot;</span><span>:&ensp;200,&ensp;&ensp;</span></span></li>
+                  <li className="alt"><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=""><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="alt"><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=""><span className="orderNum">6</span><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;array|4&quot;</span><span>:&ensp;1,&ensp;&ensp;</span></span></li>
+                  <li className="alt"><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=""><span className="orderNum">8</span><span>&ensp;&ensp;&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>
           <Col span={12} className="section-card mock-after">
             <Card title="生成的 Mock 数据">
-              <p>生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
+              <p className="mock-desc">生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
-              <p>生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
+              <div className="code">
-              <p>生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
+                <ol start="1">
-              <p>生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
+                  <li className="alt"><span className="orderNum orderNum-first">1</span><span><span>&#123;&ensp;&ensp;</span></span></li>
-              <p>生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
+                  <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><span className="number">4</span><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&ensp;&amp;&ensp;4&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>
@@ -206,8 +226,6 @@ class Home extends Component {
             </div>
           )
           : <HomeGuest introList={this.props.introList}/>}
-        <div style={{height: '1000px'}}>
-        </div>
       </div>
     )
   }

client/containers/Home/Home.scss

@@ -9,6 +9,7 @@ $color-blue-light: #5dade2;
 $color-black-lighter: #404040;
 $color-text-dark: #2e2e5a;
 $color-text-light: #6d7c90;
+$color-bg-lightblue: #c6e2ff;
 .g-body {
   position: relative;
 }
@@ -360,13 +361,37 @@ $color-text-light: #6d7c90;
     }
     .ant-card-body {
       text-align: left;
+      padding: 0;
+    }
+    .mock-desc {
       padding: .32rem;
+      min-height: 8em;
     }
     padding: .08rem;
   }
+  .code {
+    color: $color-text-dark;
+    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;
+    }
+    .orderNum-first {
+      padding-top: .5em;
+    }
+    .orderNum-last {
+      border-bottom-left-radius: 4px;
+      padding-bottom: .5em;
+    }
+  }
   .mock-after {
     .ant-card-head {
-      background-color: #c6e2ff;
+      background-color: $color-bg-lightblue;
     }
     .ant-card-head-title {
       color: #4074af;

client/containers/Login/Login.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Form, Button, Input, Icon, message } from 'antd';
 import { loginActions } from  '../../reducer/modules/user';
+import { withRouter } from 'react-router'
 const FormItem = Form.Item;
 import './Login.scss'
 
@@ -24,7 +25,7 @@ const changeHeight = {
     loginActions
   }
 )
-
+@withRouter
 class Login extends Component {
   constructor(props) {
     super(props)
@@ -32,6 +33,7 @@ class Login extends Component {
 
   static propTypes = {
     form: PropTypes.object,
+    history: PropTypes.object,
     loginActions: PropTypes.func
   }
 
@@ -42,6 +44,7 @@ class Login extends Component {
       if (!err) {
         this.props.loginActions(values).then((res) => {
           if (res.payload.data.errcode == 0) {
+            this.props.history.push('/');
             message.success('登录成功! ');
           } else {
             message.error(res.payload.data.errmsg);

client/styles/common.scss

@@ -39,13 +39,20 @@ em {
   font-style: normal;
 }
 
+[data-reactroot], .g-main, .router-main {
+  height: 100%;
+}
 // 页面最外层元素 样式
 .router-main {
-  display: -webkit-box;
+  padding-bottom: .24rem;
-  -webkit-box-orient: vertical;
+  min-height: 100%;
+  height: auto !important;
   height: 100%;
-  .router-container{
+  margin-bottom: -2rem;
-    min-height:calc(100% - 2.47rem);
+  &::after {
+    content: '';
+    display: block;
+    height: 2rem;
   }
 }