1.beautify user avatar image and show nickname

yudao-ui-admin/src/layout/components/Navbar.vue

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

yudao-ui-admin/src/store/getters.js

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

yudao-ui-admin/src/store/modules/user.js

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