mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-15 05:10:47 +08:00
Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev
This commit is contained in:
sean
commit
56c8439520
@ -52,21 +52,23 @@ export default class App extends Component {
|
||||
return <Loading visible />;
|
||||
} else {
|
||||
r = (
|
||||
<Router>
|
||||
<div className="router-main">
|
||||
{this.props.loginState !== 1 ? <Header /> : null}
|
||||
<div className="router-container">
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/group" component={requireAuthentication(Group)} />
|
||||
<Route path="/project/:id" component={requireAuthentication(Project)} />
|
||||
<Route path="/user" component={requireAuthentication(User)} />
|
||||
<Route path="/follow" component={requireAuthentication(Follows)} />
|
||||
<Route path="/add-project" component={requireAuthentication(AddProject)} />
|
||||
<Route path="/login" component={Login} />
|
||||
{
|
||||
// <Route path="/news" component={requireAuthentication(News)} />
|
||||
// <Route path="/add-interface" component={requireAuthentication(AddInterface)} />
|
||||
}
|
||||
<Router >
|
||||
<div className="g-main">
|
||||
<div className="router-main">
|
||||
{this.props.loginState !== 1 ? <Header /> : null}
|
||||
<div className="router-container">
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/group" component={requireAuthentication(Group)} />
|
||||
<Route path="/project/:id" component={requireAuthentication(Project)} />
|
||||
<Route path="/user" component={requireAuthentication(User)} />
|
||||
<Route path="/follow" component={requireAuthentication(Follows)} />
|
||||
<Route path="/add-project" component={requireAuthentication(AddProject)} />
|
||||
<Route path="/login" component={Login} />
|
||||
{
|
||||
// <Route path="/news" component={requireAuthentication(News)} />
|
||||
// <Route path="/add-interface" component={requireAuthentication(AddInterface)} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
@ -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' style = {style}>
|
||||
<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'>
|
||||
<h4>Copyright © 2017</h4>
|
||||
YMFF出品 @ YMFF
|
||||
</div>
|
||||
<div className="footer-wrapper">
|
||||
<Row>
|
||||
{ this.props.footList.map(function(item,i){
|
||||
return <FootItem key={ i } linkList={ item.linkList } title={ item.title } iconType={ item.iconType } ></FootItem>
|
||||
}) }
|
||||
<div className="copyRight">
|
||||
<h4>Copyright © 2017</h4>
|
||||
YMFF出品 @ YMFF
|
||||
</div>
|
||||
<div className='footerMask'></div>
|
||||
</div>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -43,12 +38,12 @@ class FootItem extends Component {
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div className = 'footItem'>
|
||||
<h4><Icon type= { this.props.iconType } style={{ fontSize: 16 }} /> { this.props.title } </h4>
|
||||
<Col span={6}>
|
||||
<h4><Icon type={ this.props.iconType } style={{ fontSize: 16 }} /> { this.props.title } </h4>
|
||||
{ this.props.linkList.map(function(item,i){
|
||||
return (<div key = {i}> <a href = { item.itemLink }><span>{ item.itemTitle }</span></a></div>);
|
||||
return (<div key={i}> <a href={ item.itemLink }><span>{ item.itemTitle }</span></a></div>);
|
||||
}) }
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -107,18 +107,38 @@ const HomeGuest = () => (
|
||||
<Row className="row-card">
|
||||
<Col span={12} className="section-card">
|
||||
<Card title="Mock 规则">
|
||||
<p>通过学习一些简单的 Mock 模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼: 所有的数据都可以实时随机生成。</p>
|
||||
<p>通过学习一些简单的 Mock 模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼: 所有的数据都可以实时随机生成。</p>
|
||||
<p>通过学习一些简单的 Mock 模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼: 所有的数据都可以实时随机生成。</p>
|
||||
<p className="mock-desc">通过学习一些简单的 Mock 模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼: 所有的数据都可以实时随机生成。</p>
|
||||
<div className="code">
|
||||
<ol start="1">
|
||||
<li className="alt"><span className="orderNum orderNum-first">1</span><span><span>{  </span></span></li>
|
||||
<li className=""><span className="orderNum">2</span><span>    <span className="string">"errcode|200-500"</span><span>: 200,  </span></span></li>
|
||||
<li className="alt"><span className="orderNum">3</span><span>    <span className="string">"errmsg|4-8"</span><span>: </span><span className="string">"@string"</span><span>,  </span></span></li>
|
||||
<li className=""><span className="orderNum">4</span><span>    <span className="string">"data"</span><span>: {  </span></span></li>
|
||||
<li className="alt"><span className="orderNum">5</span><span>        <span className="string">"boolean|1"</span><span>: </span><span className="keyword">true</span><span>,  </span></span></li>
|
||||
<li className=""><span className="orderNum">6</span><span>        <span className="string">"array|4"</span><span>: 1,  </span></span></li>
|
||||
<li className="alt"><span className="orderNum">7</span><span>        <span className="string">"combine"</span><span>: </span><span className="string">"@boolean & @array"</span><span>  </span></span></li>
|
||||
<li className=""><span className="orderNum">8</span><span>    }  </span></li>
|
||||
<li className="alt"><span className="orderNum orderNum-last">9</span><span>}  </span></li>
|
||||
</ol>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12} className="section-card mock-after">
|
||||
<Card title="生成的 Mock 数据">
|
||||
<p>生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
|
||||
<p>生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
|
||||
<p>生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
|
||||
<p>生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
|
||||
<p>生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
|
||||
<p className="mock-desc">生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
|
||||
<div className="code">
|
||||
<ol start="1">
|
||||
<li className="alt"><span className="orderNum orderNum-first">1</span><span><span>{  </span></span></li>
|
||||
<li className=""><span className="orderNum">2</span><span>  <span className="string">"errcode"</span><span>: </span><span className="number">304</span><span>,  </span></span></li>
|
||||
<li className="alt"><span className="orderNum">3</span><span>  <span className="string">"errmsg"</span><span>: </span><span className="string">"JtkMIoRu)N#ie^h%Z77[F)"</span><span>,  </span></span></li>
|
||||
<li className=""><span className="orderNum">4</span><span>  <span className="string">"data"</span><span>: {  </span></span></li>
|
||||
<li className="alt"><span className="orderNum">5</span><span>    <span className="string">"boolean"</span><span>: </span><span className="keyword">true</span><span>,  </span></span></li>
|
||||
<li className=""><span className="orderNum">6</span><span>    <span className="string">"array"</span><span>: </span><span className="number">4</span><span>,  </span></span></li>
|
||||
<li className="alt"><span className="orderNum">7</span><span>    <span className="string">"combine"</span><span>: </span><span className="string">"true & 4"</span><span>  </span></span></li>
|
||||
<li className=""><span className="orderNum">8</span><span>  }  </span></li>
|
||||
<li className="alt"><span className="orderNum orderNum-last">9</span><span>}  </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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -39,13 +39,20 @@ em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[data-reactroot], .g-main, .router-main {
|
||||
height: 100%;
|
||||
}
|
||||
// 页面最外层元素 样式
|
||||
.router-main {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
padding-bottom: .24rem;
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
.router-container{
|
||||
min-height:calc(100% - 2.47rem);
|
||||
margin-bottom: -2rem;
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user