mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2025-03-07 14:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 解决上传头像和Header同步的问题

Browse Source
This commit is contained in:
gaoxiaolin.gao 2017-11-03 10:54:48 +08:00
parent 1c20d68270
commit b60ef889b9
2 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/components/Header/Header.js
View File

@ -3,7 +3,7 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { Icon, Layout, Menu, Dropdown, message, Tooltip, Avatar, Popover, Tag } from 'antd'
import { Icon, Layout, Menu, Dropdown, message, Tooltip, Popover, Tag } from 'antd'
import { checkLoginState, logoutActions, loginTypeAction } from '../../reducer/modules/user'
import { changeMenuItem } from '../../reducer/modules/menu'
import { withRouter } from 'react-router';
@ -102,6 +102,7 @@ MenuUser.propTypes = {
}
const ToolUser = (props) => {
let imageUrl = props.imageUrl ? props.imageUrl : `/api/user/avatar?uid=${props.uid}`;
return (
<ul>
<li className="toolbar-li item-search">
@ -170,13 +171,10 @@ const ToolUser = (props) => {
/>
}>
<a className="dropdown-link">
{/* <Avatar src={props.url + props.uid}></Avatar> */}
{
props.imageUrl? <Avatar src={props.imageUrl} />: <Avatar src={`/api/user/avatar?uid=${props.uid}`} />
}
{/*<img style={{width:24,height:24}} src={`/api/user/avatar?uid=${props.uid}`} />*/}
{/*<span className="name">{props.user}</span>*/}
<span className="avatar-image">
<img src={imageUrl} />
</span>
{/*props.imageUrl? <Avatar src={props.imageUrl} />: <Avatar src={`/api/user/avatar?uid=${props.uid}`} />*/}
<span className="name"><Icon type="down" /></span>
</a>
</Dropdown>
@ -241,7 +239,7 @@ export default class HeaderCom extends Component {
location: PropTypes.object,
study: PropTypes.bool,
studyTip: PropTypes.number,
imageUrl:PropTypes.any
imageUrl: PropTypes.any
}
linkTo = (e) => {
if (e.key != '/doc') {
@ -288,7 +286,7 @@ export default class HeaderCom extends Component {
render() {
const { login, user, msg, uid, role, studyTip, study,imageUrl } = this.props;
const { login, user, msg, uid, role, studyTip, study, imageUrl } = this.props;
return (
<Header className="header-box m-header">
<div className="content g-row">

25
client/components/Header/Header.scss
View File

@ -106,12 +106,33 @@
.dropdown-link {
color: #ccc;
transition: color .2s;
.ant-avatar-image{
// .ant-avatar-image{
// margin-bottom: -10px;
// }
// .ant-avatar > img{
// height: auto;
// }
.avatar-image{
margin-bottom: -10px;
display: inline-block;
text-align: center;
background: #ccc;
color: #fff;
white-space: nowrap;
position: relative;
overflow: hidden;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 16px;
}
.ant-avatar > img{
.avatar-image > img{
height: auto;
width:100%;
display: bloack;
}
}
.anticon.active {
color: #2395f1;