huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-26 17:21:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

1.beautify user avatar image and show nickname

Browse Source
This commit is contained in:
supine-win 2022-06-11 06:01:53 +08:00
parent 1895a9e809
commit 98f2722781
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
yudao-ui-admin/src/layout/components/Navbar.vue
View File

@ -28,6 +28,7 @@
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="avatar" class="user-avatar"> <img :src="avatar" class="user-avatar">
<span v-if="nickname" class="user-nickname">{{ nickname }}</span>
<i class="el-icon-caret-bottom" /> <i class="el-icon-caret-bottom" />
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
@ -73,6 +74,7 @@ export default {
...mapGetters([ ...mapGetters([
'sidebar', 'sidebar',
'avatar', 'avatar',
'nickname',
'device' 'device'
]), ]),
setting: { setting: {
@ -173,14 +175,20 @@ export default {
margin-right: 30px; margin-right: 30px;
.avatar-wrapper { .avatar-wrapper {
margin-top: 5px; display: flex;
justify-content: center;
align-items: center;
position: relative; position: relative;
.user-avatar { .user-avatar {
cursor: pointer; cursor: pointer;
width: 40px; width: 35px;
height: 40px; height: 35px;
border-radius: 10px; border-radius: 50%;
}
.user-nickname{
margin-left: 5px;
font-size: 14px;
} }
.el-icon-caret-bottom { .el-icon-caret-bottom {

1
yudao-ui-admin/src/store/getters.js
View File

@ -8,6 +8,7 @@ const getters = {
token: state => state.user.token, token: state => state.user.token,
avatar: state => state.user.avatar, avatar: state => state.user.avatar,
name: state => state.user.name, name: state => state.user.name,
nickname: state => state.user.nickname,
introduction: state => state.user.introduction, introduction: state => state.user.introduction,
roles: state => state.user.roles, roles: state => state.user.roles,
permissions: state => state.user.permissions, permissions: state => state.user.permissions,

7
yudao-ui-admin/src/store/modules/user.js
View File

@ -17,6 +17,9 @@ const user = {
SET_NAME: (state, name) => { SET_NAME: (state, name) => {
state.name = name state.name = name
}, },
SET_NICKNAME: (state, nickname) => {
state.nickname = nickname
},
SET_AVATAR: (state, avatar) => { SET_AVATAR: (state, avatar) => {
state.avatar = avatar state.avatar = avatar
}, },
@ -109,7 +112,8 @@ const user = {
user: { user: {
id: '', id: '',
avatar: '', avatar: '',
userName: '' userName: '',
nickname: ''
} }
} }
} }
@ -126,6 +130,7 @@ const user = {
} }
commit('SET_ID', user.id) commit('SET_ID', user.id)
commit('SET_NAME', user.userName) commit('SET_NAME', user.userName)
commit('SET_NICKNAME', user.nickname)
commit('SET_AVATAR', avatar) commit('SET_AVATAR', avatar)
resolve(res) resolve(res)
}).catch(error => { }).catch(error => {