71 lines
2.5 KiB
JavaScript
71 lines
2.5 KiB
JavaScript
import React, { Component } from 'react'
|
||
import { Row, Col, Divider } from 'antd'
|
||
import { isEqual } from 'lodash'
|
||
import store from 'store'
|
||
import Components from 'components'
|
||
import moment from 'moment'
|
||
import './index.less'
|
||
|
||
const { getState, subscribe } = store
|
||
|
||
const { Container, Image, AntIcon } = Components
|
||
|
||
const storePath = 'user'
|
||
|
||
export default class index extends Component {
|
||
|
||
state = {
|
||
[storePath]: getState(storePath)
|
||
}
|
||
|
||
constructor(props) {
|
||
super(props)
|
||
|
||
this.unsubscribe = subscribe(storePath, () => {
|
||
this.setState(getState(storePath))
|
||
})
|
||
}
|
||
|
||
shouldComponentUpdate(props, state) {
|
||
return !isEqual(this.state, state)
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this.unsubscribe()
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<>
|
||
<div className="home-header">
|
||
<Container mode="fluid">
|
||
<Row align="middle" justify="space-between" type="flex">
|
||
<Col>
|
||
<div className="home-header-row">
|
||
<div className="home-header-avatar">
|
||
<Image id={this.state.user.avatar} size={64} icon={<AntIcon type="UserOutlined" />} type="avatar" />
|
||
</div>
|
||
<div className="home-header-content">
|
||
<h4>
|
||
{moment().format('A')}好，<span>{this.state.user.nickName || this.state.user.name}</span>，欢迎您登录系统！
|
||
</h4>
|
||
<div>
|
||
<span>上次IP：{this.state.user.lastLoginIp}</span>
|
||
<Divider type="vertical" />
|
||
<span>上次登录时间：{this.state.user.lastLoginTime}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
<Col>
|
||
<AntIcon type="MailOutlined" style={{ fontSize: '20px', color: '#f80000' }} className="mr-xs" />
|
||
您有<a href="/">0</a>封未读邮件，请尽快查收！
|
||
</Col>
|
||
</Row>
|
||
</Container>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
}
|