avatar

src/components/UserPanel.css

+
+.normal {
+}

src/components/UserPanel.js

+import React from 'react';
+import { connect } from 'dva';
+import styles from './UserPanel.css';
+import { Dropdown, Menu, Icon } from 'antd';
+import { FormattedMessage as Format } from 'react-intl';
+import { Link } from 'dva/router'
+
+const defaultAvatar = require('../../public/default_avatar.jpg');
+
+function UserPanel({ dispatch, user, token }) {
+
+  const { avatar } = user;
+  const menu = (
+    <Menu trigger={['click']}>
+      <Menu.Item>
+      {
+        token ? <Link to="/profiles">//i18n 个人中心</Link> : <Link to="/signin">//i18n 登录</Link> 
+      }
+      </Menu.Item>
+
+      <Menu.Divider/>
+      {
+        token && 
+      <Menu.Item >
+        <div onClick={() => { dispatch({ type: 'auth/signOut' }) }}>
+          <Format id="sign-out" />                          
+        </div>
+      </Menu.Item>
+      }
+    </Menu>
+  )
+
+  return (
+    <Dropdown overlay={menu} placement="bottomCenter">
+      <div className="ant-dropdown-link" style={{ display: 'flex', alignItems: 'center'}}>
+        <img alt="avatar" src={avatar || defaultAvatar} style={{ borderRadius: '40px', height: '40px', weight: 'auto' }}/>
+      </div>
+    </Dropdown>
+  );
+}
+
+function mapStateToProps(state) {
+  const {
+    common: { messages, client, language },
+    user: { user, token },
+  } = state;
+  return {
+    token,
+    user,
+    language,
+    messages,
+    client,
+  };
+}
+
+export default connect(mapStateToProps)(UserPanel);

src/router.js

@@ -17,6 +17,7 @@ import Reset from './routes/Reset.js';
 
 import Verify from './routes/Verify.js';
 
+
 function RouterConfig({ history }) {
   return (
     <Router history={history}>

src/routes/Index.js

@@ -6,6 +6,7 @@ import DocumentTitle from 'react-document-title';
 import { FormattedMessage as Format } from 'react-intl';
 import Particles from 'react-particles-js';
 import logo from '../assets/MoeCube.png';
+import UserPanel from '../components/UserPanel'
 
 const languageMap = {
   'zh-CN': '中文',
@@ -157,8 +158,7 @@ function Index({ children, messages, dispatch, client, token, language }) {
             theme="dark"
             mode="horizontal"
             defaultSelectedKeys={['1']}
-            style={{ lineHeight: '64px' }}
-          >
+            style={{ lineHeight: '64px' }}>
             <Menu.Item key="1">
               <Link to="/">
                 <Format id="Home" />
@@ -166,24 +166,9 @@ function Index({ children, messages, dispatch, client, token, language }) {
             </Menu.Item>
           </Menu>
 
-          <Menu
-            theme="dark"
-            mode="horizontal"
-            defaultSelectedKeys={['1']}
-            style={{ lineHeight: '64px', position: 'absolute', right: '50px' }}
-          >
-            {token && (<Menu.Item key="1">
-              <div
-                onClick={() => {
-                  dispatch({ type: 'auth/signOut' });
-                }}
-              >
-                <Format id="sign-out" />
-              </div>
-            </Menu.Item>)
-            }
-          </Menu>
-
+          <div style={{ position: 'absolute', right: '40px' }}> 
+            <UserPanel />            
+          </div>
         </Header>
       }