add react版前端

web-react/src/pages/home/index.jsx

@@ -0,0 +1,70 @@
+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>
+            </>
+        )
+    }
+}