OperationalService/web/client/src/layout/components/header/index.jsx

"use strict";
import React from "react";
import { connect } from "react-redux";
import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";

const Header = (props) => {
    const { dispatch, history, user, actions, socket } = props;

    return (
        <>
            <Nav
                mode={"horizontal"}
                onClick={({ itemKey }) => {
                    if (itemKey == "logout") {
                        dispatch(actions.auth.logout(user));
                        const iotAuth = document.getElementById('iotAuth').contentWindow;
                        iotAuth.postMessage({ action: 'logout' }, '*');
                        if (socket) {
                            socket.disconnect();
                        }
                        history.push(`/signin`);
                    }
                }}
                style={{
                    height: 60,
                    minWidth: 520,
                    background: '#1D2343',
                    backgroundSize: "100% 100%",
                    color: "white",
                }}
                header={{
                    logo: (
                        <img
                            src="/assets/images/background/logo.png"
                            style={{ display: "inline-block", width: 280, height: 52 }}
                        />
                    ),
                    text: "",
                }}
                footer={
                    <Nav.Sub
                        itemKey={"user"}
                        text={
                            <div
                                style={{
                                    marginLeft: 20,
                                    display: "inline-block",
                                    color: "white",
                                }}
                            >
                                <img
                                    src="/assets/images/background/notice.png"
                                    style={{
                                        display: "inline-block",
                                        width: 18,
                                        height: 18,
                                        position: "relative",
                                        top: 6,
                                        left: -10,
                                    }}
                                />

                                <Avatar size="small" color="light-blue" style={{marginRight:4}}>
                                    <img src="/assets/images/avatar/6.png" />
                                </Avatar>
                                <div style={{
                                    display: "inline-block", position: "relative",
                                    top: 10,
                                    left: 4,
                                    marginRight: 4,
                                }}>
                                    <div>你好！</div>
                                    <div>{user && user.displayName}</div>
                                </div>
                            </div>
                        }
                    >
                        <Nav.Item itemKey={"logout"} text={"退出"} />
                    </Nav.Sub>
                }
            />
        </>
    );
};

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

export default connect(mapStateToProps)(Header);