qrcode/web/client/src/layout/components/header/index.js

'use strict';
import React from 'react';
import { Menu } from 'antd';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import styles from './style.css';

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;
    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']}>
                <img src='/assets/images/logo_white.png' style={{ margin: '-14px 12px 0 0', height: 36 }} />
                <div className={styles['header-title']} style={{}}>
                    <div className={styles['title-cn']}>飞尚码尚来二维码管理系统</div>
                    <div className={styles['title-en']}>FREESUN QRCODE MANAGEMENT SYSTEM</div>
                </div>
            </div>
            <div id="nav" className={styles['header-nav']}>
                <Menu
                    mode='horizontal'
                    selectedKeys={[current]}
                    style={{ border: 0, background: '#004093' }}
                    onClick={handelClick}
                    theme={'light'}
                    items={[{
                        label: <span style={{ color: 'aliceblue' }}>{user.displayName}</span>,
                        key: "user",
                        icon: <img className={styles['header-nav-user-img']} src={`/assets/images/avatar/5.png`} />,
                        children: [{
                            label: '退出', key: 'logout'
                        }],
                    }]}
                />
            </div>
        </div>
    );
};

function mapStateToProps (state) {
    const { global, auth } = state;
    return {
        actions: global.actions,
        user: auth.user
    };
}

export default connect(mapStateToProps)(Header);