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.
120 lines
4.6 KiB
120 lines
4.6 KiB
"use strict";
|
|
import React from "react";
|
|
import { connect } from "react-redux";
|
|
import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
|
|
import "./index.less";
|
|
|
|
const Header = (props) => {
|
|
const { dispatch, history, user, actions, socket ,headerItems,tochange} = props;
|
|
|
|
return (
|
|
<>
|
|
<div id="top-slider">
|
|
<Nav
|
|
mode={"horizontal"}
|
|
onClick={({ itemKey }) => {
|
|
if (itemKey == "logout") {
|
|
dispatch(actions.auth.logout(user));
|
|
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={
|
|
<>
|
|
{headerItems.map((item,index)=>{
|
|
// console.log('item',item);
|
|
if(item.hasOwnProperty('items')){
|
|
return(
|
|
<Nav.Sub
|
|
key={index+'a'}
|
|
itemKey={item.itemKey}
|
|
text={item.text}
|
|
dropdownStyle={{color:'#F2F3F5'}}
|
|
>
|
|
{item.hasOwnProperty('items')&&item.items.map((ite,idx)=>(
|
|
<Nav.Item key={idx+'d'} itemKey={ite.itemKey} text={ite.text} onClick={()=>{tochange(ite);}}/>
|
|
))}
|
|
</Nav.Sub>
|
|
)
|
|
}
|
|
else{
|
|
return(
|
|
<Nav.Item key={index+'a'} itemKey={item.itemKey} text={item.text} onClick={()=>{tochange(item)}} />
|
|
)
|
|
}
|
|
})}
|
|
<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>
|
|
</>
|
|
}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
function mapStateToProps (state) {
|
|
const { global, auth, webSocket } = state;
|
|
return {
|
|
actions: global.actions,
|
|
user: auth.user,
|
|
socket: webSocket.socket,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Header);
|
|
|