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

This commit is contained in:
sean 2017-07-25 15:42:19 +08:00
commit 2879fe7002
8 changed files with 186 additions and 37 deletions

View File

@ -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,7 +39,7 @@ export default class App extends Component {
route = (status) => {
let r;
if (status === LOADING_STATUS) {
return <span>loading...</span>
return <Loading visible/>
} else {
r = (
<HashRouter>

View File

@ -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>
<Link to="/ProjectGroups">项目广场</Link>
</Menu.Item>
</Menu>
<div className="user-toolbar">

View File

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

View File

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

View File

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

View File

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

View File

@ -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) => {

View File

@ -42,6 +42,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",