From 4bd97f9d8198a660ed26b767b38244e0812e7412 Mon Sep 17 00:00:00 2001
From: InfinityPacer <160988576+InfinityPacer@users.noreply.github.com>
Date: Mon, 16 Sep 2024 17:09:51 +0800
Subject: [PATCH] fix: handle scenarios where avatar is empty

---
 src/components/cards/UserCard.vue           |  2 +-
 src/components/dialog/UserAddEditDialog.vue | 40 ++++++---------------
 src/layouts/components/UserProfile.vue      |  6 ++--
 3 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/src/components/cards/UserCard.vue b/src/components/cards/UserCard.vue
index 66a4a0b4..b2d6fc3e 100644
--- a/src/components/cards/UserCard.vue
+++ b/src/components/cards/UserCard.vue
@@ -101,7 +101,7 @@ onMounted(() => {
   <VCard>
     <VCardText class="text-center pt-10 pb-3">
       <VAvatar variant="flat" size="100" rounded>
-        <VImg :src="user.avatar ?? avatar1" alt="avatar" />
+        <VImg :src="user.avatar || avatar1" alt="avatar" />
       </VAvatar>
       <h5 class="text-h5 mt-3">{{ user.name }}</h5>
       <VChip size="small" class="mt-3" :class="{ 'text-error': user.is_superuser }">
diff --git a/src/components/dialog/UserAddEditDialog.vue b/src/components/dialog/UserAddEditDialog.vue
index 9559f4b9..e30eb62f 100644
--- a/src/components/dialog/UserAddEditDialog.vue
+++ b/src/components/dialog/UserAddEditDialog.vue
@@ -80,6 +80,9 @@ const statusItems = [
 async function fetchUserInfo() {
   try {
     userForm.value = await api.get(`user/${props.username}`)
+    if (userForm.value) {
+      userForm.value.avatar = userForm.value.avatar || avatar1
+    }
   } catch (error) {
     console.error(error)
   }
@@ -148,8 +151,7 @@ const canControl = computed(() => {
   // 新增用户时，有权限
   if (props.oper === 'add') {
     return true
-  }
-  else {
+  } else {
     // 编辑显示的用户与当前用户不一致时，有权限
     if (props.username !== currentUser) {
       return true
@@ -202,17 +204,10 @@ onMounted(() => {
           </VDivider>
           <VRow>
             <VCol md="6" cols="12" v-if="props.oper === 'add'">
-              <VTextField v-model="userForm.name"
-                          density="comfortable"
-                          label="用户名"
-              />
+              <VTextField v-model="userForm.name" density="comfortable" label="用户名" />
             </VCol>
             <VCol cols="12" md="6">
-              <VTextField v-model="userForm.email"
-                          density="comfortable"
-                          label="邮箱"
-                          type="email"
-              />
+              <VTextField v-model="userForm.email" density="comfortable" label="邮箱" type="email" />
             </VCol>
             <VCol cols="12" md="6">
               <VTextField
@@ -236,7 +231,7 @@ onMounted(() => {
                 @click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
               />
             </VCol>
-            <VCol cols="12" md="6" v-if="canControl" >
+            <VCol cols="12" md="6" v-if="canControl">
               <VSelect
                 v-model="userStatus"
                 :items="statusItems"
@@ -252,29 +247,16 @@ onMounted(() => {
           </VDivider>
           <VRow>
             <VCol cols="12" md="6">
-              <VTextField v-model="userForm.settings.wechat_userid"
-                          density="comfortable"
-                          label="微信用户"
-              />
+              <VTextField v-model="userForm.settings.wechat_userid" density="comfortable" label="微信用户" />
             </VCol>
             <VCol cols="12" md="6">
-              <VTextField v-model="userForm.settings.telegram_userid"
-                          density="comfortable"
-                          label="Telegram用户"
-              />
+              <VTextField v-model="userForm.settings.telegram_userid" density="comfortable" label="Telegram用户" />
             </VCol>
             <VCol cols="12" md="6">
-              <VTextField v-model="userForm.settings.slack_userid"
-                          density="comfortable"
-                          label="Slack用户"
-              />
+              <VTextField v-model="userForm.settings.slack_userid" density="comfortable" label="Slack用户" />
             </VCol>
             <VCol cols="12" md="6">
-              <VTextField
-                v-model="userForm.settings.vocechat_userid"
-                density="comfortable"
-                label="VoceChat用户"
-              />
+              <VTextField v-model="userForm.settings.vocechat_userid" density="comfortable" label="VoceChat用户" />
             </VCol>
             <VCol cols="12" md="6">
               <VTextField
diff --git a/src/layouts/components/UserProfile.vue b/src/layouts/components/UserProfile.vue
index 964d8898..0477a9ca 100644
--- a/src/layouts/components/UserProfile.vue
+++ b/src/layouts/components/UserProfile.vue
@@ -65,7 +65,7 @@ const isCompactMode = ref(localStorage.getItem('MP_APPMODE') != '0')
 // 从Vuex Store中获取信息
 const superUser = store.state.auth.superUser
 const userName = store.state.auth.userName
-const avatar = store.state.auth.avatar
+const avatar = computed(() => store.state.auth.avatar || avatar1)
 
 // 监听精简模式切换
 watch(isCompactMode, value => {
@@ -77,7 +77,7 @@ watch(isCompactMode, value => {
 
 <template>
   <VAvatar class="cursor-pointer ms-3" color="primary" variant="tonal">
-    <VImg :src="avatar ?? avatar1" />
+    <VImg :src="avatar" />
 
     <VMenu activator="parent" width="230" location="bottom end" offset="14px">
       <VList>
@@ -86,7 +86,7 @@ watch(isCompactMode, value => {
           <template #prepend>
             <VListItemAction start>
               <VAvatar color="primary" variant="tonal">
-                <VImg :src="avatar ?? avatar1" />
+                <VImg :src="avatar" />
               </VAvatar>
             </VListItemAction>
           </template>