From a6cc1513be737c19e9af7ae000ddf326cad31480 Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sat, 17 Feb 2024 19:19:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=94=A8=E6=88=B7=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E3=80=81=E6=98=B5=E7=A7=B0=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit a3e95b56cad16f2ca0817d9b366258724109ec29)
---
 src/assets/imgs/avatar.jpg                    | Bin 6264 -> 0 bytes
 src/components/Cropper/src/CropperAvatar.vue  |   2 +-
 .../components/UserInfo/src/UserInfo.vue      |  36 ++++++++----------
 src/store/modules/user.ts                     |  14 +++++++
 src/views/Profile/components/BasicInfo.vue    |   6 ++-
 src/views/Profile/components/UserAvatar.vue   |   9 ++++-
 6 files changed, 43 insertions(+), 24 deletions(-)
 delete mode 100644 src/assets/imgs/avatar.jpg

diff --git a/src/assets/imgs/avatar.jpg b/src/assets/imgs/avatar.jpg
deleted file mode 100644
index d46a70a46430e31744420865138cc7eedb8b77e1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6264
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
BLq7lj

diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index 55a7d34b..9464c2a8 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/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' })
 
diff --git a/src/layout/components/UserInfo/src/UserInfo.vue b/src/layout/components/UserInfo/src/UserInfo.vue
index a5a92da3..22acfd13 100644
--- a/src/layout/components/UserInfo/src/UserInfo.vue
+++ b/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'), {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning'
-  })
-    .then(async () => {
-      await userStore.loginOut()
-      tagsViewStore.delAllViews()
-      replace('/login?redirect=/index')
+const loginOut = async () => {
+  try {
+    await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
+      confirmButtonText: t('common.ok'),
+      cancelButtonText: t('common.cancel'),
+      type: 'warning'
     })
-    .catch(() => {})
+    await userStore.loginOut()
+    tagsViewStore.delAllViews()
+    replace('/login?redirect=/index')
+  }
+  catch { }
 }
 const toProfile = async () => {
   push('/user/profile')
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index e6bd5b37..77c13dee 100644
--- a/src/store/modules/user.ts
+++ b/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 loginOutApi()
       removeToken()
diff --git a/src/views/Profile/components/BasicInfo.vue b/src/views/Profile/components/BasicInfo.vue
index 41a8ae51..08f38ec5 100644
--- a/src/views/Profile/components/BasicInfo.vue
+++ b/src/views/Profile/components/BasicInfo.vue
@@ -21,11 +21,13 @@ import {
   updateUserProfileApi,
   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 updateUserProfileApi(data)
       message.success(t('common.updateSuccess'))
-      await init()
+      const profile = await init()
+      userStore.setUserNicknameAction(profile.nickname)
     }
   })
 }
 const init = async () => {
   const res = await getUserProfileApi()
   unref(formRef)?.setValues(res)
+  return res
 }
 onMounted(async () => {
   await init()
diff --git a/src/views/Profile/components/UserAvatar.vue b/src/views/Profile/components/UserAvatar.vue
index 10f3fbde..0c5c3cfb 100644
--- a/src/views/Profile/components/UserAvatar.vue
+++ b/src/views/Profile/components/UserAvatar.vue
@@ -13,6 +13,9 @@
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { uploadAvatarApi } from '@/api/system/user/profile'
+import { CropperAvatar } from '@/components/Cropper'
+import { useUserStore } from '@/store/modules/user'
+
 
 defineOptions({ name: 'UserAvatar' })
 
@@ -20,10 +23,14 @@ defineProps({
   img: propTypes.string.def('')
 })
 
+const userStore = useUserStore()
+
+
 const cropperRef = ref()
 const handelUpload = async ({ data }) => {
-  await uploadAvatarApi({ avatarFile: data })
+  const res = await uploadAvatarApi({ avatarFile: data })
   cropperRef.value.close()
+  userStore.setUserAvatarAction(res.data)
 }
 </script>