From 0b8e0d9b998c7feed6a3bd772f04e43663e4a1c3 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 10 Oct 2023 11:12:36 +0800
Subject: [PATCH] feat: display add icon when user avatar is not setting
 (#4694)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.10.x

#### What this PR does / why we need it:

当用户未设置头像时，头像显示添加图标，能够更好的提示用户如何设置头像。

<img width="528" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/380ed906-2d76-41bd-ae17-6c31ca7c444a">

#### Which issue(s) this PR fixes:

Fixes #4693

#### Special notes for your reviewer:

1. 测试未设置头像时，是否添加添加图标。
2. 测试设置头像之后，鼠标移动到头像时，是否显示修改图标。

#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端个人资料的头像显示，未设置头像时显示添加图标。
```
---
 .../system/users/components/UserAvatar.vue    | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/console/src/modules/system/users/components/UserAvatar.vue b/console/src/modules/system/users/components/UserAvatar.vue
index 137e737a2..41c6636e2 100644
--- a/console/src/modules/system/users/components/UserAvatar.vue
+++ b/console/src/modules/system/users/components/UserAvatar.vue
@@ -2,6 +2,7 @@
 import { apiClient } from "@/utils/api-client";
 import {
   IconRiPencilFill,
+  IconAddCircle,
   VButton,
   VAvatar,
   VDropdown,
@@ -18,6 +19,7 @@ import { useQueryClient } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 import { useFileDialog } from "@vueuse/core";
 import { inject } from "vue";
+import { computed } from "vue";
 
 const queryClient = useQueryClient();
 const { currentUserHasPermission } = usePermission();
@@ -41,7 +43,6 @@ const user = inject<Ref<DetailedUser | undefined>>("user");
 const isCurrentUser = inject<ComputedRef<boolean>>("isCurrentUser");
 
 const userAvatarCropper = ref<IUserAvatarCropperType>();
-const showAvatarEditor = ref(false);
 const visibleCropperModal = ref(false);
 const originalFile = ref<File>() as Ref<File>;
 
@@ -117,14 +118,14 @@ const changeUploadAvatar = () => {
   reset();
   open();
 };
+
+const hasAvatar = computed(() => {
+  return !!user?.value?.user.spec.avatar;
+});
 </script>
 
 <template>
-  <div
-    class="h-full w-full"
-    @mouseover="showAvatarEditor = true"
-    @mouseout="showAvatarEditor = false"
-  >
+  <div class="group h-full w-full">
     <VAvatar
       :src="user?.user.spec.avatar"
       :alt="user?.user.spec.displayName"
@@ -137,10 +138,17 @@ const changeUploadAvatar = () => {
       v-if="currentUserHasPermission(['system:users:manage']) || isCurrentUser"
     >
       <div
-        v-show="showAvatarEditor"
-        class="absolute left-0 right-0 top-0 h-full w-full cursor-pointer rounded-full border-0 bg-black/60 text-center leading-[5rem] transition-opacity duration-300 group-hover:opacity-100"
+        class="absolute left-0 right-0 top-0 hidden h-full w-full cursor-pointer items-center rounded-full border-0 bg-black/60 text-center transition-all duration-300 group-hover:flex"
+        :class="{
+          '!flex': !hasAvatar,
+        }"
       >
+        <IconAddCircle
+          v-if="!hasAvatar"
+          class="inline-block w-full self-center text-2xl text-white"
+        />
         <IconRiPencilFill
+          v-else
           class="inline-block w-full self-center text-2xl text-white"
         />
       </div>
@@ -148,7 +156,7 @@ const changeUploadAvatar = () => {
         <VDropdownItem @click="open()">
           {{ $t("core.common.buttons.upload") }}
         </VDropdownItem>
-        <VDropdownItem @click="handleRemoveCurrentAvatar">
+        <VDropdownItem v-if="hasAvatar" @click="handleRemoveCurrentAvatar">
           {{ $t("core.common.buttons.delete") }}
         </VDropdownItem>
       </template>