mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2024-12-21 05:19:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 首页mock介绍

Browse Source
This commit is contained in:
wenbo.dong 2017-08-21 15:13:52 +08:00
parent 5d9ce94d22
commit 63056cb4b2
6 changed files with 98 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
client/Application.js
View File

@ -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>

33
client/components/Footer/Footer.js
View File

@ -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 }} />&nbsp;&nbsp; { this.props.title } </h4>
<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>);
return (<div key={i}>&nbsp;&nbsp;<a href={ item.itemLink }><span>{ item.itemTitle }</span></a></div>);
}) }
</div>
</Col>
);
}
}

33
client/components/Footer/Footer.scss
View File

@ -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%;

36
client/containers/Home/Home.js
View File

@ -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>&#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>生成的 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>&#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><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>

27
client/containers/Home/Home.scss
View File

@ -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;

15
client/styles/common.scss
View File

@ -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;
}
}