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.
96 lines
3.6 KiB
96 lines
3.6 KiB
3 years ago
|
"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: `url(${__webpack_public_path__}assets/images/background/header.png)`,
|
||
|
|
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);
|