You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.9 KiB
91 lines
2.9 KiB
'use strict';
|
|
import React from 'react';
|
|
import { Menu } from 'antd';
|
|
import { Link } from 'react-router-dom';
|
|
import { connect } from 'react-redux';
|
|
import darkVars from '$themes/dark.json';
|
|
import lightVars from '$themes/light.json';
|
|
import exampleVars from '$themes/example.json'
|
|
import styles from './style.css';
|
|
import {
|
|
MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined
|
|
} from '@ant-design/icons';
|
|
|
|
const themeMap = {
|
|
light: lightVars,
|
|
dark: darkVars,
|
|
example: exampleVars
|
|
}
|
|
|
|
const Header = props => {
|
|
const { dispatch, history, user, pathname, toggleCollapsed, collapsed, actions } = props
|
|
|
|
const handelClick = item => {
|
|
if (item.key == 'logout') {
|
|
dispatch(actions.auth.logout(user));
|
|
history.push(`/signin`);
|
|
}
|
|
}
|
|
|
|
let current = pathname;
|
|
console.log(pathname);
|
|
if (pathname == '/' || pathname == '') {
|
|
current = 'default';
|
|
} else if (pathname.charAt(0) == '/') {
|
|
current = pathname.substring(1);
|
|
}
|
|
|
|
if (current.indexOf('/') != -1) {
|
|
current = current.substring(0, current.indexOf('/'));
|
|
}
|
|
|
|
return (
|
|
<div className={styles.header}>
|
|
<div className={styles['header-fold']}>
|
|
<span onClick={toggleCollapsed} style={{ marginRight: 20 }}>
|
|
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|
</span>
|
|
<div className={styles['header-title']} style={{}}>
|
|
四好公路
|
|
</div>
|
|
</div>
|
|
<div id="nav" className={styles['header-nav']}>
|
|
<Menu
|
|
mode='horizontal'
|
|
selectedKeys={[current]} style={{ border: 0 }}
|
|
onClick={handelClick}
|
|
>
|
|
<Menu.SubMenu key="user" title={
|
|
<div style={{
|
|
margin: '0 8px'
|
|
}}>
|
|
<div
|
|
className={styles['header-nav-user-img-wrapper']}
|
|
>
|
|
<UserOutlined />
|
|
</div>
|
|
<div style={{ display: 'inline-block' }}>{user.name}</div>
|
|
</div>}
|
|
>
|
|
{/* <Menu.Item key="profile" icon={<UserOutlined />}>
|
|
<Link to="/profile">个人设置</Link>
|
|
</Menu.Item> */}
|
|
<Menu.Item key="logout" icon={<LogoutOutlined />}>
|
|
<span>退出</span>
|
|
</Menu.Item>
|
|
</Menu.SubMenu>
|
|
</Menu>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function mapStateToProps (state) {
|
|
const { global, auth } = state;
|
|
return {
|
|
actions: global.actions,
|
|
user: auth.user
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Header);
|