fix the user icon in the upper right corner flickered when switching between pages on desktop version

Author: mayswind

src/components/desktop/MainPageLayout.vue

@@ -109,14 +109,8 @@
                         </v-btn>
                         <v-avatar class="cursor-pointer ms-3" variant="tonal"
                                   :color="currentUserAvatar ? 'rgba(0,0,0,0)' : 'primary'">
-                            <v-img :src="currentUserAvatar" v-if="currentUserAvatar">
-                                <template #placeholder>
-                                    <div class="d-flex align-center justify-center bg-light-primary">
-                                        <v-icon color="primary" :icon="mdiAccount"/>
-                                    </div>
-                                </template>
-                            </v-img>
-                            <v-icon :icon="mdiAccount" v-else-if="!currentUserAvatar"/>
+                            <v-icon :color="currentUserAvatar ? 'primary' : undefined" :icon="mdiAccount"/>
+                            <span class="user-avatar-image" :style="currentUserAvatarStyle" v-if="currentUserAvatar"></span>
                             <v-menu activator="parent" width="230" location="bottom end" offset="14px">
                                 <v-list>
                                     <v-list-item>
@@ -259,7 +253,10 @@ const showMobileQrCode = ref<boolean>(false);
 const showAboutDialog = ref<boolean>(false);
 
 const currentNickName = computed<string>(() => userStore.currentUserNickname || tt('User'));
-const currentUserAvatar = computed<string | null>(() => userStore.getUserAvatarUrl(userStore.currentUserBasicInfo, true));
+const currentUserAvatar = computed<string | null>(() => userStore.currentUserAvatar);
+const currentUserAvatarStyle = computed<Record<string, string> | undefined>(() => currentUserAvatar.value ? {
+    backgroundImage: `url("${currentUserAvatar.value}")`
+} : undefined);
 
 const currentTheme = computed<string>({
     get: () => {
@@ -338,4 +335,14 @@ function showAddDialogInTransactionListPage(): void {
     min-width: 38px;
     border-radius: 10px;
 }
+
+.user-avatar-image {
+    position: absolute;
+    z-index: 1;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    inset: 0;
+    pointer-events: none;
+}
 </style>

src/stores/user.ts

@@ -28,6 +28,10 @@ import {
     isNumber
 } from '@/lib/common.ts';
 
+import {
+    generateRandomUUID
+} from '@/lib/misc.ts';
+
 import {
     getCurrentUserInfo,
     updateCurrentUserInfo,
@@ -40,6 +44,7 @@ import services from '@/lib/services.ts';
 export const useUserStore = defineStore('user', () => {
     const settingsStore = useSettingsStore();
     const currentUserBasicInfo = ref<UserBasicInfo | null>(getCurrentUserInfo());
+    const currentUserAvatarNoCacheId = ref<string>(generateRandomUUID());
 
     const currentUserNickname = computed<string | null>(() => {
         const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
@@ -48,7 +53,7 @@ export const useUserStore = defineStore('user', () => {
 
     const currentUserAvatar = computed<string | null>(() => {
         const userInfo = currentUserBasicInfo.value || EMPTY_USER_BASIC_INFO;
-        return getUserAvatarUrl(userInfo, false);
+        return getUserAvatarUrl(userInfo, currentUserAvatarNoCacheId.value);
     });
 
     const currentUserDefaultAccountId = computed<string>(() => {
@@ -167,6 +172,7 @@ export const useUserStore = defineStore('user', () => {
 
     function resetUserBasicInfo(): void {
         currentUserBasicInfo.value = null;
+        currentUserAvatarNoCacheId.value = generateRandomUUID();
         clearCurrentUserInfo();
     }
 
@@ -233,6 +239,7 @@ export const useUserStore = defineStore('user', () => {
                 }
 
                 storeUserBasicInfo(data.result);
+                currentUserAvatarNoCacheId.value = generateRandomUUID();
 
                 resolve(data.result);
             }).catch(error => {