From a47d3f10f9b67c3ae74c7540b09b73326884f48d Mon Sep 17 00:00:00 2001
From: Aqr-K <95741669+Aqr-K@users.noreply.github.com>
Date: Wed, 16 Oct 2024 22:48:23 +0800
Subject: [PATCH] feat(user): UserSettings function adjustment.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增加更新头像时，立刻同步更新localStorage；解决当前头像替换后，必须重新登录才能刷新localStorage的问题。
- 删除个人信息页面上传图片时，立刻触发更新的功能，统一保存后再更新。
- 增加 `还原当前头像` 按钮，允许 `上传新头像`、`重置默认头像` 后，进行回退；解决重置后后悔了，但其他参数已经填写时，必须刷新页面才能还原当前头像的问题。
---
 src/components/dialog/UserAddEditDialog.vue | 55 ++++++++++++-----
 src/views/user/UserProfileView.vue          | 67 ++++++++++++++-------
 2 files changed, 87 insertions(+), 35 deletions(-)

diff --git a/src/components/dialog/UserAddEditDialog.vue b/src/components/dialog/UserAddEditDialog.vue
index e30eb62f..64932426 100644
--- a/src/components/dialog/UserAddEditDialog.vue
+++ b/src/components/dialog/UserAddEditDialog.vue
@@ -25,6 +25,9 @@ const props = defineProps({
 // 当前用户名称
 const currentUser = store.state.auth.userName
 
+// 当前头像缓存
+const nowAvatar = ref(avatar1)
+
 // 注册事件
 const emit = defineEmits(['save', 'close'])
 
@@ -48,7 +51,7 @@ const userForm = ref<User>({
   },
 })
 
-// changeAvatar function
+// 更新头像
 function changeAvatar(file: Event) {
   const fileReader = new FileReader()
   const { files } = file.target as HTMLInputElement
@@ -56,15 +59,22 @@ function changeAvatar(file: Event) {
     fileReader.readAsDataURL(files[0])
     fileReader.onload = () => {
       if (typeof fileReader.result === 'string') {
-        userForm.value.avatar = fileReader.result
+        nowAvatar.value = fileReader.result
       }
     }
   }
 }
 
-// reset avatar image
-function resetAvatar() {
-  userForm.value.avatar = avatar1
+// 重置默认头像
+function resetDefaultAvatar() {
+  nowAvatar.value = avatar1
+  $toast.success('已重置为默认头像，待保存后生效！')
+}
+
+// 还原当前头像
+function restoreNowAvatar() {
+  nowAvatar.value = userForm.value.avatar
+  $toast.success('已还原当前使用头像！')
 }
 
 // 提示框
@@ -82,6 +92,7 @@ async function fetchUserInfo() {
     userForm.value = await api.get(`user/${props.username}`)
     if (userForm.value) {
       userForm.value.avatar = userForm.value.avatar || avatar1
+      nowAvatar.value = userForm.value.avatar
     }
   } catch (error) {
     console.error(error)
@@ -122,11 +133,17 @@ async function updateUser() {
     }
     userForm.value.password = newPassword.value
   }
+  const oldAvatar = userForm.value.avatar
+  userForm.value.avatar = nowAvatar.value
   startNProgress()
   try {
     const result: { [key: string]: any } = await api.put('user/', userForm.value)
     if (result.success) {
       $toast.success(`${userForm.value?.name} 更新成功！`)
+      // 通知 localStorage 立刻更新头像
+      if (oldAvatar !== nowAvatar.value && isCurrentUser.value) {
+        store.commit('auth/setAvatar', nowAvatar.value)
+      }
       emit('save')
     } else {
       $toast.error(`${userForm.value?.name} 更新失败：${result.message}`)
@@ -152,13 +169,16 @@ const canControl = computed(() => {
   if (props.oper === 'add') {
     return true
   } else {
-    // 编辑显示的用户与当前用户不一致时，有权限
-    if (props.username !== currentUser) {
-      return true
-    }
+    // 调用isCurrentUser函数判断是否为当前用户
+    return isCurrentUser.value
   }
 })
 
+// 检查是否为当前用户
+const isCurrentUser = computed(() => {
+  return props.username === currentUser
+})
+
 onMounted(() => {
   if (props.oper !== 'add') {
     fetchUserInfo()
@@ -176,25 +196,32 @@ onMounted(() => {
       <VDivider />
       <VCardText class="d-flex">
         <!-- 👉 Avatar -->
-        <VAvatar rounded="lg" size="100" class="me-6" :image="userForm.avatar" />
+        <VAvatar rounded="lg" size="100" class="me-6" :image="nowAvatar" />
 
         <!-- 👉 Upload Photo -->
         <form class="d-flex flex-column justify-center gap-5">
           <div class="d-flex flex-wrap gap-2">
             <VBtn color="primary" @click="refInputEl?.click()">
               <VIcon icon="mdi-cloud-upload-outline" />
-              <span v-if="display.mdAndUp.value" class="ms-2">上传头像</span>
+              <span v-if="display.mdAndUp.value" class="ms-2">上传新头像</span>
             </VBtn>
 
             <input ref="refInputEl" type="file" name="file" accept=".jpeg,.png,.jpg,GIF" hidden @input="changeAvatar" />
 
-            <VBtn type="reset" color="error" variant="tonal" @click="resetAvatar">
+
+            <VBtn type="reset" color="error" variant="tonal" @click="restoreNowAvatar">
               <VIcon icon="mdi-refresh" />
-              <span v-if="display.mdAndUp.value" class="ms-2">重置</span>
+              <span v-if="display.mdAndUp.value" class="ms-2">还原当前头像</span>
             </VBtn>
+
+            <VBtn type="reset" color="error" variant="tonal" @click="resetDefaultAvatar">
+              <VIcon icon="mdi-refresh" />
+              <span v-if="display.mdAndUp.value" class="ms-2">重置默认头像</span>
+            </VBtn>
+
           </div>
 
-          <p class="text-body-1 mb-0">允许 JPG、GIF 或 PNG 格式， 最大尺寸 800K。</p>
+          <p class="text-body-1 mb-0">允许 JPG、PNG、GIF 格式， 最大尺寸 800K。</p>
         </form>
       </VCardText>
       <VCardText>
diff --git a/src/views/user/UserProfileView.vue b/src/views/user/UserProfileView.vue
index c234c2a5..371f324e 100644
--- a/src/views/user/UserProfileView.vue
+++ b/src/views/user/UserProfileView.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { useToast } from 'vue-toast-notification'
+import {useToast} from 'vue-toast-notification'
 import QrcodeVue from 'qrcode.vue'
-import { VForm } from 'vuetify/lib/components/index.mjs'
+import {VForm} from 'vuetify/lib/components/index.mjs'
 import api from '@/api'
-import type { User } from '@/api/types'
+import type {User} from '@/api/types'
 import avatar1 from '@images/avatars/avatar-1.png'
-import { useDisplay } from 'vuetify'
+import {useDisplay} from 'vuetify'
+import store from "@/store";
 
 // 显示器宽度
 const display = useDisplay()
@@ -32,6 +33,9 @@ const secret = ref('')
 // 确认双重验证密码
 const otpPassword = ref('')
 
+// 当前头像缓存
+const nowAvatar = ref(avatar1)
+
 // 当前用户信息
 const accountInfo = ref<User>({
   id: 0,
@@ -58,7 +62,7 @@ const allUsers = ref<User[]>([])
 // 二维码信息
 const qrCode = ref('')
 
-// changeAvatar function
+// 更新头像
 function changeAvatar(file: Event) {
   const fileReader = new FileReader()
   const { files } = file.target as HTMLInputElement
@@ -67,16 +71,23 @@ function changeAvatar(file: Event) {
     fileReader.readAsDataURL(files[0])
     fileReader.onload = () => {
       if (typeof fileReader.result === 'string') {
-        accountInfo.value.avatar = fileReader.result
-        saveAccountInfo()
+        nowAvatar.value = fileReader.result
+        $toast.success('新头像上传成功，待保存后生效!')
       }
     }
   }
 }
 
-// reset avatar image
-function resetAvatar() {
-  accountInfo.value.avatar = avatar1
+// 重置默认头像
+function resetDefaultAvatar() {
+  nowAvatar.value = avatar1
+  $toast.success('已重置为默认头像，待保存后生效！')
+}
+
+// 还原当前头像
+function restoreNowAvatar() {
+  nowAvatar.value = accountInfo.value.avatar
+  $toast.success('已还原当前使用头像！')
 }
 
 // 调用API，加载当前用户数据
@@ -85,7 +96,10 @@ async function loadAccountInfo() {
     const user: User = await api.get('user/current')
     console.log(user)
     accountInfo.value = user
-    if (!accountInfo.value.avatar) accountInfo.value.avatar = avatar1
+    if (!accountInfo.value.avatar) {
+      accountInfo.value.avatar = avatar1
+    }
+  nowAvatar.value = accountInfo.value.avatar
   } catch (error) {
     console.log(error)
   }
@@ -101,9 +115,17 @@ async function saveAccountInfo() {
     }
     accountInfo.value.password = newPassword.value
   }
+  const oldAvatar = accountInfo.value.avatar
+  accountInfo.value.avatar = nowAvatar.value
   try {
     const result: { [key: string]: any } = await api.put('user/', accountInfo.value)
-    if (result.success) $toast.success('用户信息保存成功！')
+    if (result.success) {
+      $toast.success('用户信息保存成功！')
+      if (oldAvatar !== nowAvatar.value) {
+      // 通知 localStorage 中的用户头像发生变化
+      store.commit('auth/setAvatar', nowAvatar.value)
+      }
+    }
     else $toast.error(`用户信息保存失败：${result.message}！`)
   } catch (error) {
     console.log(error)
@@ -113,9 +135,7 @@ async function saveAccountInfo() {
 // 调用API，查询所有用户
 async function loadAllUsers() {
   try {
-    const result: User[] = await api.get('/user/')
-
-    allUsers.value = result
+    allUsers.value = await api.get('/user/')
   } catch (error) {
     console.log(error)
   }
@@ -191,14 +211,14 @@ onMounted(() => {
         <VCard title="个人信息">
           <VCardText class="d-flex">
             <!-- 👉 Avatar -->
-            <VAvatar rounded="lg" size="100" class="me-6" :image="accountInfo.avatar" />
+            <VAvatar rounded="lg" size="100" class="me-6" :image="nowAvatar" />
 
             <!-- 👉 Upload Photo -->
             <form class="d-flex flex-column justify-center gap-5">
               <div class="d-flex flex-wrap gap-2">
                 <VBtn color="primary" @click="refInputEl?.click()">
                   <VIcon icon="mdi-cloud-upload-outline" />
-                  <span v-if="display.mdAndUp.value" class="ms-2">上传头像</span>
+                  <span v-if="display.mdAndUp.value" class="ms-2">上传新头像</span>
                 </VBtn>
 
                 <input
@@ -210,9 +230,14 @@ onMounted(() => {
                   @input="changeAvatar"
                 />
 
-                <VBtn type="reset" color="error" variant="tonal" @click="resetAvatar">
+                <VBtn type="reset" color="error" variant="tonal" @click="restoreNowAvatar">
                   <VIcon icon="mdi-refresh" />
-                  <span v-if="display.mdAndUp.value" class="ms-2">重置</span>
+                  <span v-if="display.mdAndUp.value" class="ms-2">还原当前头像</span>
+                </VBtn>
+
+                <VBtn type="reset" color="error" variant="tonal" @click="resetDefaultAvatar">
+                  <VIcon icon="mdi-refresh" />
+                  <span v-if="display.mdAndUp.value" class="ms-2">重置默认头像</span>
                 </VBtn>
 
                 <VBtn
@@ -222,12 +247,12 @@ onMounted(() => {
                 >
                   <VIcon icon="mdi-account-key" />
                   <span v-if="display.mdAndUp.value" class="ms-2">{{
-                    accountInfo.is_otp ? '关闭验证' : '双重验证'
+                    accountInfo.is_otp ? '关闭双重验证' : '开启双重验证'
                   }}</span>
                 </VBtn>
               </div>
 
-              <p class="text-body-1 mb-0">允许 JPG、GIF 或 PNG 格式， 最大尺寸 800K。</p>
+              <p class="text-body-1 mb-0">允许 JPG、PNG、GIF 格式， 最大尺寸 800K。</p>
             </form>
           </VCardText>