fix: optimize avatar loading display

Author: fengstats

apps/client/components/Home/index.vue

@@ -2,11 +2,13 @@
   <div class="mt-8 flex w-full justify-between">
     <!-- 左侧头像区域 -->
     <div class="mr-16 hidden w-72 md:block">
-      <div class="mx-auto h-56 w-56 overflow-hidden">
+      <div
+        class="mx-auto h-56 w-56 overflow-hidden rounded-full border-2 border-gray-300 bg-gray-300 dark:border-gray-700 dark:bg-gray-700"
+      >
+        <!-- 通过给定高度来自适应拉伸图片，如果图片不存在或者加载失败则显示外层的背景色（没有宽度） -->
         <img
-          class="h-full w-full rounded-full border-2 border-gray-300 bg-gray-300 object-cover dark:border-gray-700 dark:bg-gray-700"
-          :src="userStore.userInfo?.picture || DEFAULT_AVATAR"
-          @error="onImageError"
+          class="h-full object-cover"
+          :src="userStore.userInfo?.picture!"
         />
       </div>
       <div class="mt-4 truncate">
@@ -57,17 +59,6 @@ const userStore = useUserStore();
 const { learnRecord, setupLearnRecord, setQueryYear } = useLearnRecord();
 const { toggleYear } = useCalendarGraph();
 
-// 默认 1x1 像素的透明 GIF 图片，用于消除头像图片加载失败时的白色边框
-const DEFAULT_AVATAR =
-  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
-
-function onImageError(e: Event) {
-  const target = e.target as HTMLImageElement;
-  if (target) {
-    target.src = DEFAULT_AVATAR;
-  }
-}
-
 function useCalendarGraph() {
   const data = ref<CalendarData[]>([]);
   const totalCount = ref<number>(0);

apps/client/components/Navbar.vue

@@ -55,14 +55,13 @@
             class="logged-in flex items-center"
           >
             <div
-              class="btn btn-square btn-ghost drawer-button"
+              class="h-8 w-8 cursor-pointer overflow-hidden rounded-full bg-gray-300 transition-all hover:scale-125 hover:opacity-90 dark:bg-gray-700"
               @click="handleShowUserMenu"
             >
-              <div class="avatar">
-                <div class="w-8 rounded-full">
-                  <img :src="userStore.userInfo?.picture!" />
-                </div>
-              </div>
+              <img
+                class="h-full object-cover"
+                :src="userStore.userInfo?.picture!"
+              />
             </div>
           </div>
           <!-- 登录/注册 -->