From 98f27227818219b2bd05a3156a4dfe0941b8179c Mon Sep 17 00:00:00 2001
From: supine-win <supine.win@gmail.com>
Date: Sat, 11 Jun 2022 06:01:53 +0800
Subject: [PATCH] 1.beautify user avatar image and show nickname

---
 yudao-ui-admin/src/layout/components/Navbar.vue | 16 ++++++++++++----
 yudao-ui-admin/src/store/getters.js             |  1 +
 yudao-ui-admin/src/store/modules/user.js        |  7 ++++++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/yudao-ui-admin/src/layout/components/Navbar.vue b/yudao-ui-admin/src/layout/components/Navbar.vue
index d6418e9fd..fbc2e7579 100644
--- a/yudao-ui-admin/src/layout/components/Navbar.vue
+++ b/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;
-          height: 40px;
-          border-radius: 10px;
+          width: 35px;
+          height: 35px;
+          border-radius: 50%;
+        }
+        .user-nickname{
+          margin-left: 5px;
+          font-size: 14px;
         }
 
         .el-icon-caret-bottom {
diff --git a/yudao-ui-admin/src/store/getters.js b/yudao-ui-admin/src/store/getters.js
index bcf7ab797..79cdf2c35 100644
--- a/yudao-ui-admin/src/store/getters.js
+++ b/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,
diff --git a/yudao-ui-admin/src/store/modules/user.js b/yudao-ui-admin/src/store/modules/user.js
index fbe209b75..7c3df753b 100644
--- a/yudao-ui-admin/src/store/modules/user.js
+++ b/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 => {