2017-07-10 11:50:56 +08:00
|
|
|
import './Header.scss'
|
2017-07-07 17:26:31 +08:00
|
|
|
import React, { Component } from 'react'
|
2017-07-12 16:27:06 +08:00
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { connect } from 'react-redux'
|
2017-07-10 21:29:03 +08:00
|
|
|
import { Link } from 'react-router-dom'
|
2017-07-17 21:11:58 +08:00
|
|
|
import { Icon, Layout, Menu} from 'antd'
|
2017-07-19 10:38:29 +08:00
|
|
|
import { logoutActions, loginTypeAction} from '../../actions/login'
|
2017-07-12 16:27:06 +08:00
|
|
|
|
2017-07-17 21:11:58 +08:00
|
|
|
const { Header } = Layout;
|
2017-07-12 16:27:06 +08:00
|
|
|
const ToolUser = (props)=> (
|
|
|
|
<ul>
|
2017-07-17 21:11:58 +08:00
|
|
|
<li><Icon type="question-circle-o" />帮助</li>
|
2017-07-18 18:25:53 +08:00
|
|
|
<li><Link to="/user" onClick={props.relieveLink}><Icon type="user" />{ props.user }</Link></li>
|
|
|
|
<li><Link to="/News" onClick={props.relieveLink}><Icon type="mail" />{ props.msg }</Link></li>
|
2017-07-19 10:38:29 +08:00
|
|
|
<li onClick={props.logout}>退出</li>
|
2017-07-12 16:27:06 +08:00
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
ToolUser.propTypes={
|
2017-07-12 21:13:22 +08:00
|
|
|
user:PropTypes.string,
|
2017-07-18 18:25:53 +08:00
|
|
|
msg:PropTypes.string,
|
2017-07-19 10:38:29 +08:00
|
|
|
relieveLink:PropTypes.func,
|
|
|
|
logout:PropTypes.func
|
2017-07-12 16:27:06 +08:00
|
|
|
};
|
|
|
|
|
2017-07-18 18:25:53 +08:00
|
|
|
const ToolGuest = ()=> (
|
2017-07-12 21:13:22 +08:00
|
|
|
<ul>
|
2017-07-18 18:25:53 +08:00
|
|
|
<li><Icon type="question-circle-o" />帮助</li>
|
2017-07-12 21:13:22 +08:00
|
|
|
</ul>
|
|
|
|
);
|
|
|
|
ToolGuest.propTypes={
|
|
|
|
onLogin:PropTypes.func,
|
|
|
|
onReg:PropTypes.func
|
|
|
|
}
|
2017-07-07 17:26:31 +08:00
|
|
|
|
2017-07-17 21:11:58 +08:00
|
|
|
class HeaderCom extends Component {
|
2017-07-07 17:26:31 +08:00
|
|
|
constructor(props) {
|
2017-07-12 16:27:06 +08:00
|
|
|
super(props);
|
2017-07-18 18:25:53 +08:00
|
|
|
this.state = {
|
|
|
|
current : window.location.hash.split("#")[1]
|
|
|
|
}
|
|
|
|
}
|
2017-07-19 10:38:29 +08:00
|
|
|
static propTypes ={
|
|
|
|
user: PropTypes.string,
|
|
|
|
msg: PropTypes.string,
|
|
|
|
login:PropTypes.bool,
|
|
|
|
relieveLink:PropTypes.func,
|
|
|
|
logoutActions:PropTypes.func,
|
|
|
|
loginTypeAction:PropTypes.func
|
|
|
|
}
|
2017-07-18 18:25:53 +08:00
|
|
|
linkTo = (e) =>{
|
|
|
|
this.setState({
|
|
|
|
current : e.key
|
|
|
|
})
|
|
|
|
}
|
2017-07-19 10:38:29 +08:00
|
|
|
relieveLink = () => {
|
2017-07-18 18:25:53 +08:00
|
|
|
this.setState({
|
|
|
|
current : ""
|
|
|
|
})
|
2017-07-12 21:13:22 +08:00
|
|
|
}
|
2017-07-19 10:38:29 +08:00
|
|
|
logout = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.logoutActions();
|
|
|
|
}
|
2017-07-12 21:13:22 +08:00
|
|
|
handleLogin = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.loginTypeAction("1");
|
|
|
|
}
|
|
|
|
handleReg = (e)=>{
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.loginTypeAction("2");
|
2017-07-07 17:26:31 +08:00
|
|
|
}
|
|
|
|
render () {
|
2017-07-12 16:27:06 +08:00
|
|
|
const { login, user, msg } = this.props;
|
2017-07-07 17:26:31 +08:00
|
|
|
return (
|
|
|
|
<acticle className="header-box">
|
2017-07-17 21:11:58 +08:00
|
|
|
<Layout className="'layout">
|
|
|
|
<Header>
|
|
|
|
<div className="content">
|
|
|
|
<div className="logo">
|
|
|
|
YAPI
|
|
|
|
</div>
|
|
|
|
<Menu
|
|
|
|
mode="horizontal"
|
|
|
|
className="nav-toolbar"
|
|
|
|
theme="dark"
|
|
|
|
style={{ lineHeight : '.64rem'}}
|
2017-07-18 18:25:53 +08:00
|
|
|
onClick={this.linkTo}
|
|
|
|
selectedKeys={[this.state.current]}
|
2017-07-17 21:11:58 +08:00
|
|
|
>
|
2017-07-18 18:25:53 +08:00
|
|
|
<Menu.Item key="/">
|
|
|
|
<Link to="/">首页</Link>
|
2017-07-17 21:11:58 +08:00
|
|
|
</Menu.Item>
|
2017-07-18 18:25:53 +08:00
|
|
|
<Menu.Item key="/ProjectGroups">
|
|
|
|
<Link to="/ProjectGroups">分组</Link>
|
2017-07-17 21:11:58 +08:00
|
|
|
</Menu.Item>
|
2017-07-18 18:25:53 +08:00
|
|
|
<Menu.Item key="/Interface">
|
|
|
|
<Link to="/Interface">接口</Link>
|
2017-07-17 21:11:58 +08:00
|
|
|
</Menu.Item>
|
|
|
|
</Menu>
|
|
|
|
<div className="user-toolbar">
|
2017-07-19 10:38:29 +08:00
|
|
|
{login?<ToolUser user={user} msg={msg} relieveLink={this.relieveLink} logout={this.logout}/>:<ToolGuest/>}
|
2017-07-17 21:11:58 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Header>
|
|
|
|
</Layout>
|
2017-07-07 17:26:31 +08:00
|
|
|
</acticle>
|
|
|
|
)
|
|
|
|
}
|
2017-07-06 01:09:33 +08:00
|
|
|
}
|
2017-07-07 17:26:31 +08:00
|
|
|
|
2017-07-12 16:27:06 +08:00
|
|
|
export default connect(
|
2017-07-12 21:13:22 +08:00
|
|
|
(state) => {
|
|
|
|
return{
|
|
|
|
user: state.login.userName,
|
2017-07-18 18:25:53 +08:00
|
|
|
msg: null,
|
2017-07-12 21:13:22 +08:00
|
|
|
login:state.login.isLogin
|
|
|
|
}
|
|
|
|
},
|
2017-07-19 10:38:29 +08:00
|
|
|
{
|
|
|
|
loginTypeAction,
|
|
|
|
logoutActions
|
|
|
|
}
|
2017-07-17 21:11:58 +08:00
|
|
|
)(HeaderCom)
|
2017-07-12 16:27:06 +08:00
|
|
|
|