!385 fix: 用户头像、昵称修改，同步更新Layout/UserInfo

Merge pull request !385 from dhb52/hotfix/dhb52/avatarupdate

src/components/Cropper/src/CropperAvatar.vue

@@ -18,7 +18,7 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 import { useI18n } from 'vue-i18n'
 import CopperModal from './CopperModal.vue'
-import avatar from '@/assets/imgs/avatar.jpg'
+import avatar from '@/assets/imgs/avatar.gif'
 
 defineOptions({ name: 'CropperAvatar' })
 

src/layout/components/UserInfo/src/UserInfo.vue

@@ -1,18 +1,15 @@
 <script lang="ts" setup>
 import { ElMessageBox } from 'element-plus'
 
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
-import { useDesign } from '@/hooks/web/useDesign'
 import avatarImg from '@/assets/imgs/avatar.gif'
-import { useUserStore } from '@/store/modules/user'
+import { useDesign } from '@/hooks/web/useDesign'
 import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useUserStore } from '@/store/modules/user'
 
 defineOptions({ name: 'UserInfo' })
 
 const { t } = useI18n()
 
-const { wsCache } = useCache()
-
 const { push, replace } = useRouter()
 
 const userStore = useUserStore()
@@ -23,24 +20,21 @@ const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('user-info')
 
-const user = wsCache.get(CACHE_KEY.USER)
+const avatar = computed(() => userStore.user.avatar ?? avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
 
-const avatar = user.user.avatar ? user.user.avatar : avatarImg
-
-const userName = user.user.nickname ? user.user.nickname : 'Admin'
-
-const loginOut = () => {
-  ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
+const loginOut = async () => {
+  try {
+    await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
       confirmButtonText: t('common.ok'),
       cancelButtonText: t('common.cancel'),
       type: 'warning'
     })
-    .then(async () => {
     await userStore.loginOut()
     tagsViewStore.delAllViews()
     replace('/login?redirect=/index')
-    })
-    .catch(() => {})
+  }
+  catch { }
 }
 const toProfile = async () => {
   push('/user/profile')

src/store/modules/user.ts

@@ -63,6 +63,20 @@ export const useUserStore = defineStore('admin-user', {
       wsCache.set(CACHE_KEY.USER, userInfo)
       wsCache.set(CACHE_KEY.ROLE_ROUTERS, userInfo.menus)
     },
+    async setUserAvatarAction(avatar: string) {
+      const userInfo = wsCache.get(CACHE_KEY.USER)
+      // NOTE: 是否需要像`setUserInfoAction`一样判断`userInfo != null`
+      this.user.avatar = avatar
+      userInfo.user.avatar = avatar
+      wsCache.set(CACHE_KEY.USER, userInfo)
+    },
+    async setUserNicknameAction(nickname: string) {
+      const userInfo = wsCache.get(CACHE_KEY.USER)
+      // NOTE: 是否需要像`setUserInfoAction`一样判断`userInfo != null`
+      this.user.nickname = nickname
+      userInfo.user.nickname = nickname
+      wsCache.set(CACHE_KEY.USER, userInfo)
+    },
     async loginOut() {
       await loginOut()
       removeToken()

src/views/Profile/components/BasicInfo.vue

@@ -21,11 +21,13 @@ import {
   updateUserProfile,
   UserProfileUpdateReqVO
 } from '@/api/system/user/profile'
+import { useUserStore } from '@/store/modules/user'
 
 defineOptions({ name: 'BasicInfo' })
 
 const { t } = useI18n()
 const message = useMessage() // 消息弹窗
+const userStore = useUserStore() 
 // 表单校验
 const rules = reactive<FormRules>({
   nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
@@ -78,13 +80,15 @@ const submit = () => {
       const data = unref(formRef)?.formModel as UserProfileUpdateReqVO
       await updateUserProfile(data)
       message.success(t('common.updateSuccess'))
-      await init()
+      const profile = await init()
+      userStore.setUserNicknameAction(profile.nickname)
     }
   })
 }
 const init = async () => {
   const res = await getUserProfile()
   unref(formRef)?.setValues(res)
+  return res
 }
 onMounted(async () => {
   await init()

src/views/Profile/components/UserAvatar.vue

@@ -14,6 +14,8 @@
 import { propTypes } from '@/utils/propTypes'
 import { uploadAvatar } from '@/api/system/user/profile'
 import { CropperAvatar } from '@/components/Cropper'
+import { useUserStore } from '@/store/modules/user'
+
 
 defineOptions({ name: 'UserAvatar' })
 
@@ -21,10 +23,14 @@ defineProps({
   img: propTypes.string.def('')
 })
 
+const userStore = useUserStore()
+
+
 const cropperRef = ref()
 const handelUpload = async ({ data }) => {
-  await uploadAvatar({ avatarFile: data })
+  const res = await uploadAvatar({ avatarFile: data })
   cropperRef.value.close()
+  userStore.setUserAvatarAction(res.data)
 }
 </script>