From a1eccb3b1e4a4aa8f370843415eca12507c97323 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Wed, 24 Sep 2025 00:30:23 +0800
Subject: [PATCH] Revert "feat: add BaseUserAvatar and unify avatar usage"

This reverts commit efbb83924b2e2d3b713a68e892323fc03f331d1d.
---
 frontend_nuxt/components/BaseTimeline.vue     |  25 ++--
 frontend_nuxt/components/BaseUserAvatar.vue   | 116 ------------------
 frontend_nuxt/components/CommentItem.vue      |  15 +--
 frontend_nuxt/components/HeaderComponent.vue  |  10 +-
 .../components/PostChangeLogItem.vue          |  11 +-
 frontend_nuxt/components/PostLottery.vue      |  22 ++--
 frontend_nuxt/components/PostPoll.vue         |  12 +-
 .../components/SearchPersonDropdown.vue       |  15 ++-
 frontend_nuxt/components/UserList.vue         |  11 +-
 frontend_nuxt/pages/index.vue                 |  33 +++--
 frontend_nuxt/pages/message-box/[id].vue      |  14 +--
 frontend_nuxt/pages/message-box/index.vue     |  21 +---
 frontend_nuxt/pages/posts/[id]/index.vue      |  29 ++---
 frontend_nuxt/pages/users/[id].vue            |  10 +-
 frontend_nuxt/utils/notification.js           |  10 --
 15 files changed, 91 insertions(+), 263 deletions(-)
 delete mode 100644 frontend_nuxt/components/BaseUserAvatar.vue

diff --git a/frontend_nuxt/components/BaseTimeline.vue b/frontend_nuxt/components/BaseTimeline.vue
index f5bb3f7d0..b95d5e422 100644
--- a/frontend_nuxt/components/BaseTimeline.vue
+++ b/frontend_nuxt/components/BaseTimeline.vue
@@ -3,19 +3,10 @@
     <div class="timeline-item" v-for="(item, idx) in items" :key="idx">
       <div
         class="timeline-icon"
-        :class="{ clickable: !!item.iconClick && !item.src }"
-        @click="!item.src && item.iconClick && item.iconClick()"
+        :class="{ clickable: !!item.iconClick }"
+        @click="item.iconClick && item.iconClick()"
       >
-        <BaseUserAvatar
-          v-if="item.src"
-          :class="['timeline-img', { 'is-clickable': !!item.iconClick }]"
-          :user-id="item.userId"
-          :avatar="item.src"
-          :username="item.userName || item.username"
-          :width="32"
-          :link="!item.iconClick"
-          @click.stop="item.iconClick && item.iconClick()"
-        />
+        <BaseImage v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
         <component
           v-else-if="item.icon && (typeof item.icon !== 'string' || !item.icon.includes(' '))"
           :is="item.icon"
@@ -73,12 +64,10 @@ export default {
 }
 
 .timeline-img {
-  width: 32px;
-  height: 32px;
-}
-
-.timeline-img.is-clickable {
-  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
 }
 
 .timeline-emoji {
diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
deleted file mode 100644
index 54624a5d2..000000000
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <component :is="wrapperTag" v-bind="wrapperAttrs" :class="containerClass" :style="mergedStyle">
-    <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="handleError" />
-  </component>
-</template>
-
-<script setup>
-import { computed, ref, watch } from 'vue'
-import { useAttrs } from 'vue'
-
-const DEFAULT_AVATAR = '/default-avatar.svg'
-
-const props = defineProps({
-  userId: {
-    type: [String, Number],
-    required: true,
-  },
-  avatar: {
-    type: String,
-    default: '',
-  },
-  username: {
-    type: String,
-    default: '',
-  },
-  width: {
-    type: [Number, String],
-    default: 40,
-  },
-  alt: {
-    type: String,
-    default: '',
-  },
-  link: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-const attrs = useAttrs()
-const currentSrc = ref(props.avatar || DEFAULT_AVATAR)
-
-watch(
-  () => props.avatar,
-  (newVal) => {
-    currentSrc.value = newVal || DEFAULT_AVATAR
-  },
-)
-
-const wrapperTag = computed(() => (props.link ? 'NuxtLink' : 'div'))
-const sizeStyle = computed(() => {
-  const value = typeof props.width === 'number' ? `${props.width}px` : props.width || '40px'
-  return {
-    width: value,
-    height: value,
-  }
-})
-
-const altText = computed(() => {
-  if (props.alt) return props.alt
-  if (props.username) return `${props.username}的头像`
-  return '用户头像'
-})
-
-const containerClass = computed(() => {
-  const classes = ['base-user-avatar']
-  if (props.link) classes.push('is-link')
-  if (attrs.class) classes.push(attrs.class)
-  return classes
-})
-
-const mergedStyle = computed(() => {
-  if (!attrs.style) return sizeStyle.value
-  return [sizeStyle.value, attrs.style]
-})
-
-const wrapperAttrs = computed(() => {
-  const { class: _class, style: _style, ...rest } = attrs
-  if (props.link) {
-    return {
-      ...rest,
-      to: `/users/${props.userId}`,
-    }
-  }
-  return rest
-})
-
-function handleError() {
-  if (currentSrc.value !== DEFAULT_AVATAR) {
-    currentSrc.value = DEFAULT_AVATAR
-  }
-}
-</script>
-
-<style scoped>
-.base-user-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  overflow: hidden;
-  background-color: var(--avatar-background, rgba(0, 0, 0, 0.05));
-}
-
-.base-user-avatar.is-link {
-  cursor: pointer;
-}
-
-.base-user-avatar-img {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  object-fit: cover;
-  display: block;
-}
-</style>
diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index be12aaf29..584f0a90b 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -26,14 +26,10 @@
           <span v-if="level >= 2" class="reply-item">
             <next class="reply-icon" />
             <span class="reply-info">
-              <BaseUserAvatar
-                v-if="comment.parentUserName"
+              <BaseImage
                 class="reply-avatar"
-                :user-id="comment.parentUserId"
-                :avatar="comment.parentUserAvatar"
-                :username="comment.parentUserName"
-                :width="20"
-                :link="Boolean(comment.parentUserId)"
+                :src="comment.parentUserAvatar || '/default-avatar.svg'"
+                alt="avatar"
                 @click="comment.parentUserClick && comment.parentUserClick()"
               />
               <span class="reply-user-name">{{ comment.parentUserName }}</span>
@@ -257,19 +253,16 @@ const submitReply = async (parentUserName, text, clear) => {
       replyList.push({
         id: data.id,
         userName: data.author.username,
-        userId: data.author.id,
         time: TimeManager.format(data.createdAt),
         avatar: data.author.avatar,
         medal: data.author.displayMedal,
         text: data.content,
         parentUserName: parentUserName,
         parentUserAvatar: props.comment.avatar,
-        parentUserId: props.comment.userId,
         reactions: [],
         reply: (data.replies || []).map((r) => ({
           id: r.id,
           userName: r.author.username,
-          userId: r.author.id,
           time: TimeManager.format(r.createdAt),
           avatar: r.author.avatar,
           text: r.content,
@@ -401,7 +394,9 @@ const handleContentClick = (e) => {
 .reply-avatar {
   width: 20px;
   height: 20px;
+  border-radius: 50%;
   margin-right: 5px;
+  cursor: pointer;
 }
 
 .reply-icon {
diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index 51605425c..0f1176a9f 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -70,14 +70,7 @@
           <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
-                <BaseUserAvatar
-                  class="avatar-img"
-                  :user-id="authState.userId"
-                  :avatar="avatar"
-                  :username="authState.username"
-                  :width="32"
-                  :link="false"
-                />
+                <img class="avatar-img" :src="avatar" alt="avatar" />
                 <down />
               </div>
             </template>
@@ -441,6 +434,7 @@ onMounted(async () => {
   height: 32px;
   border-radius: 50%;
   background-color: lightgray;
+  object-fit: cover;
 }
 
 .dropdown-icon {
diff --git a/frontend_nuxt/components/PostChangeLogItem.vue b/frontend_nuxt/components/PostChangeLogItem.vue
index 5f0198957..31988452a 100644
--- a/frontend_nuxt/components/PostChangeLogItem.vue
+++ b/frontend_nuxt/components/PostChangeLogItem.vue
@@ -1,13 +1,12 @@
 <template>
   <div :id="`change-log-${log.id}`" class="change-log-container">
     <div class="change-log-text">
-      <BaseUserAvatar
+      <BaseImage
         v-if="log.userAvatar"
         class="change-log-avatar"
-        :user-id="log.userId"
-        :avatar="log.userAvatar"
-        :username="log.username"
-        :width="20"
+        :src="log.userAvatar"
+        alt="avatar"
+        @click="() => navigateTo(`/users/${log.username}`)"
       />
       <span v-if="log.username" class="change-log-user">{{ log.username }}</span>
       <span v-if="log.type === 'CONTENT'" class="change-log-content">变更了文章内容</span>
@@ -58,6 +57,8 @@ import { html } from 'diff2html'
 import { createTwoFilesPatch } from 'diff'
 import { useIsMobile } from '~/utils/screen'
 import 'diff2html/bundles/css/diff2html.min.css'
+import BaseImage from '~/components/BaseImage.vue'
+import { navigateTo } from 'nuxt/app'
 import { themeState } from '~/utils/theme'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
diff --git a/frontend_nuxt/components/PostLottery.vue b/frontend_nuxt/components/PostLottery.vue
index 04cc3cd99..166ee1a83 100644
--- a/frontend_nuxt/components/PostLottery.vue
+++ b/frontend_nuxt/components/PostLottery.vue
@@ -53,26 +53,24 @@
       </div>
     </div>
     <div class="prize-member-container">
-      <BaseUserAvatar
+      <BaseImage
         v-for="p in lotteryParticipants"
         :key="p.id"
         class="prize-member-avatar"
-        :user-id="p.id"
-        :avatar="p.avatar"
-        :username="p.username"
-        :width="30"
+        :src="p.avatar"
+        alt="avatar"
+        @click="gotoUser(p.id)"
       />
       <div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner">
         <medal-one class="medal-icon"></medal-one>
         <span class="prize-member-winner-name">获奖者: </span>
-        <BaseUserAvatar
+        <BaseImage
           v-for="w in lotteryWinners"
           :key="w.id"
           class="prize-member-avatar"
-          :user-id="w.id"
-          :avatar="w.avatar"
-          :username="w.username"
-          :width="30"
+          :src="w.avatar"
+          alt="avatar"
+          @click="gotoUser(w.id)"
         />
         <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
           {{ lotteryWinners[0].username }}
@@ -108,6 +106,8 @@ const hasJoined = computed(() => {
   return lotteryParticipants.value.some((p) => p.id === Number(authState.userId))
 })
 
+const gotoUser = (id) => navigateTo(`/users/${id}`, { replace: true })
+
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const joinLottery = async () => {
@@ -246,6 +246,8 @@ const joinLottery = async () => {
   width: 30px;
   height: 30px;
   margin-left: 3px;
+  border-radius: 50%;
+  object-fit: cover;
   cursor: pointer;
 }
 
diff --git a/frontend_nuxt/components/PostPoll.vue b/frontend_nuxt/components/PostPoll.vue
index 857294bbe..a6ef9ba7e 100644
--- a/frontend_nuxt/components/PostPoll.vue
+++ b/frontend_nuxt/components/PostPoll.vue
@@ -17,14 +17,13 @@
               ></div>
             </div>
             <div class="poll-participants">
-              <BaseUserAvatar
+              <BaseImage
                 v-for="p in pollOptionParticipants[idx] || []"
                 :key="p.id"
                 class="poll-participant-avatar"
-                :user-id="p.id"
-                :avatar="p.avatar"
-                :username="p.username"
-                :width="30"
+                :src="p.avatar"
+                alt="avatar"
+                @click="gotoUser(p.id)"
               />
             </div>
           </div>
@@ -153,6 +152,8 @@ watch([hasVoted, pollEnded], ([voted, ended]) => {
   if (voted || ended) showPollResult.value = true
 })
 
+const gotoUser = (id) => navigateTo(`/users/${id}`, { replace: true })
+
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const voteOption = async (idx) => {
@@ -425,6 +426,7 @@ const submitMultiPoll = async () => {
 .poll-participant-avatar {
   width: 30px;
   height: 30px;
+  border-radius: 50%;
   cursor: pointer;
 }
 </style>
diff --git a/frontend_nuxt/components/SearchPersonDropdown.vue b/frontend_nuxt/components/SearchPersonDropdown.vue
index ff9bd71ce..0587d7c10 100644
--- a/frontend_nuxt/components/SearchPersonDropdown.vue
+++ b/frontend_nuxt/components/SearchPersonDropdown.vue
@@ -24,13 +24,10 @@
       </template>
       <template #option="{ option }">
         <div class="search-option-item">
-          <BaseUserAvatar
+          <BaseImage
+            :src="option.avatar || '/default-avatar.svg'"
             class="avatar"
-            :user-id="option.id"
-            :avatar="option.avatar"
-            :username="option.username"
-            :width="32"
-            :link="false"
+            @error="handleAvatarError"
           />
           <div class="result-body">
             <div class="result-main" v-html="highlight(option.username)"></div>
@@ -90,6 +87,10 @@ const highlight = (text) => {
   return text.replace(reg, (m) => `<span class="highlight">${m}</span>`)
 }
 
+const handleAvatarError = (e) => {
+  e.target.src = '/default-avatar.svg'
+}
+
 watch(selected, async (val) => {
   if (!val) return
   const user = results.value.find((u) => u.id === val)
@@ -177,6 +178,8 @@ defineExpose({
 .avatar {
   width: 32px;
   height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
 }
 
 .result-body {
diff --git a/frontend_nuxt/components/UserList.vue b/frontend_nuxt/components/UserList.vue
index 09d4881bb..09d1fb1a6 100644
--- a/frontend_nuxt/components/UserList.vue
+++ b/frontend_nuxt/components/UserList.vue
@@ -2,14 +2,7 @@
   <div class="user-list">
     <BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="inbox" />
     <div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)">
-      <BaseUserAvatar
-        class="user-avatar"
-        :user-id="u.id"
-        :avatar="u.avatar"
-        :username="u.username"
-        :width="50"
-        :link="false"
-      />
+      <BaseImage :src="u.avatar" alt="avatar" class="user-avatar" />
       <div class="user-info">
         <div class="user-name">{{ u.username }}</div>
         <div v-if="u.introduction" class="user-intro">{{ u.introduction }}</div>
@@ -48,7 +41,9 @@ const handleUserClick = (user) => {
 .user-avatar {
   width: 50px;
   height: 50px;
+  border-radius: 50%;
   flex-shrink: 0;
+  object-fit: cover;
 }
 .user-info {
   display: flex;
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index c4565bff5..a6327dc61 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -85,15 +85,14 @@
           </div>
 
           <div class="article-member-avatars-container">
-            <BaseUserAvatar
+            <NuxtLink
               v-for="member in article.members"
               :key="`${article.id}-${member.id}`"
               class="article-member-avatar-item"
-              :user-id="member.id"
-              :avatar="member.avatar"
-              :username="member.username"
-              :width="25"
-            />
+              :to="`/users/${member.id}`"
+            >
+              <BaseImage class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
+            </NuxtLink>
           </div>
 
           <div class="article-comments main-info-text">
@@ -292,11 +291,7 @@ const {
       description: p.content,
       category: p.category,
       tags: p.tags || [],
-      members: (p.participants || []).map((m) => ({
-        id: m.id,
-        avatar: m.avatar,
-        username: m.username,
-      })),
+      members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
       comments: p.commentCount,
       views: p.views,
       rssExcluded: p.rssExcluded || false,
@@ -338,11 +333,7 @@ const fetchNextPage = async () => {
     description: p.content,
     category: p.category,
     tags: p.tags || [],
-    members: (p.participants || []).map((m) => ({
-      id: m.id,
-      avatar: m.avatar,
-      username: m.username,
-    })),
+    members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
     comments: p.commentCount,
     views: p.views,
     rssExcluded: p.rssExcluded || false,
@@ -392,6 +383,7 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
   selectedCategoryGlobal.value = newCategory
   selectedTagsGlobal.value = newTags
 })
+
 </script>
 
 <style scoped>
@@ -639,7 +631,14 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
 .article-member-avatar-item {
   width: 25px;
   height: 25px;
-  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.article-member-avatar-item-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .placeholder-container {
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index 344bc4a33..56fe7cefa 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -44,13 +44,7 @@
             <div v-if="item.replyTo" class="reply-preview info-content-text">
               <div class="reply-header">
                 <next class="reply-icon" />
-                <BaseUserAvatar
-                  class="reply-avatar"
-                  :user-id="item.replyTo.sender.id"
-                  :avatar="item.replyTo.sender.avatar"
-                  :username="item.replyTo.sender.username"
-                  :width="20"
-                />
+                <BaseImage class="reply-avatar" :src="item.replyTo.sender.avatar" alt="avatar" />
                 <div class="reply-author">{{ item.replyTo.sender.username }}:</div>
               </div>
               <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
@@ -248,8 +242,6 @@ async function fetchMessages(page = 0) {
 
     const newMessages = pageData.content.reverse().map((item) => ({
       ...item,
-      userId: item.sender.id,
-      userName: item.sender.username,
       src: item.sender.avatar,
       iconClick: () => {
         openUser(item.sender.id)
@@ -335,8 +327,6 @@ async function sendMessage(content, clearInput) {
     const newMessage = await response.json()
     messages.value.push({
       ...newMessage,
-      userId: newMessage.sender.id,
-      userName: newMessage.sender.username,
       src: newMessage.sender.avatar,
       iconClick: () => {
         openUser(newMessage.sender.id)
@@ -412,8 +402,6 @@ const subscribeToConversation = () => {
 
       messages.value.push({
         ...parsedMessage,
-        userId: parsedMessage.sender.id,
-        userName: parsedMessage.sender.username,
         src: parsedMessage.sender.avatar,
         iconClick: () => openUser(parsedMessage.sender.id),
       })
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index 385053dc2..a7894f26f 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -33,23 +33,11 @@
           @click="goToConversation(convo.id)"
         >
           <div class="conversation-avatar">
-            <BaseUserAvatar
-              v-if="getOtherParticipant(convo)"
+            <BaseImage
+              :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
+              :alt="getOtherParticipant(convo)?.username || '用户'"
               class="avatar-img"
-              :user-id="getOtherParticipant(convo).id"
-              :avatar="getOtherParticipant(convo).avatar"
-              :username="getOtherParticipant(convo).username"
-              :width="40"
-              @click.stop
-            />
-            <BaseUserAvatar
-              v-else
-              class="avatar-img"
-              :user-id="convo.id"
-              :avatar="''"
-              username="用户"
-              :width="40"
-              :link="false"
+              @error="handleAvatarError"
             />
           </div>
 
@@ -443,6 +431,7 @@ function minimize() {
   width: 40px;
   height: 40px;
   border-radius: 50%;
+  object-fit: cover;
 }
 
 .conversation-content {
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 6a99aa2d6..405b7eeb5 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -46,14 +46,10 @@
       </div>
 
       <div class="info-content-container author-info-container">
-        <div class="user-avatar-container">
-          <BaseUserAvatar
-            class="user-avatar-item"
-            :user-id="author.id"
-            :avatar="author.avatar"
-            :username="author.username"
-            :width="50"
-          />
+        <div class="user-avatar-container" @click="gotoProfile">
+          <div class="user-avatar-item">
+            <BaseImage class="user-avatar-item-img" :src="author.avatar" alt="avatar" />
+          </div>
           <div v-if="isMobile" class="info-content-header">
             <div class="user-name">
               {{ author.username }}
@@ -344,7 +340,6 @@ const mapComment = (
   iconClick: () => navigateTo(`/users/${c.author.id}`),
   parentUserName: parentUserName,
   parentUserAvatar: parentUserAvatar,
-  parentUserId: parentUserId,
   parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
 })
 
@@ -384,7 +379,6 @@ const mapChangeLog = (l) => ({
   id: l.id,
   kind: 'log',
   username: l.username,
-  userId: l.userId ?? l.username,
   userAvatar: l.userAvatar,
   type: l.type,
   createdAt: l.time,
@@ -869,6 +863,10 @@ const jumpToHashComment = async () => {
   }
 }
 
+const gotoProfile = () => {
+  navigateTo(`/users/${author.value.id}`, { replace: true })
+}
+
 const initPage = async () => {
   scrollTo(0, 0)
   await fetchTimeline()
@@ -962,8 +960,6 @@ onMounted(async () => {
 .user-avatar-container {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  gap: 10px;
 }
 
 .scroller-middle {
@@ -1176,13 +1172,18 @@ onMounted(async () => {
 }
 
 .user-avatar-container {
-  cursor: default;
+  cursor: pointer;
 }
 
 .user-avatar-item {
   width: 50px;
   height: 50px;
-  flex-shrink: 0;
+}
+
+.user-avatar-item-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
 }
 
 .info-content {
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index ecb1e9c80..28fd4e6ba 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -7,13 +7,7 @@
     <div v-else>
       <div class="profile-page-header">
         <div class="profile-page-header-avatar">
-          <BaseUserAvatar
-            class="profile-page-header-avatar-img"
-            :user-id="user.id"
-            :avatar="user.avatar"
-            :username="user.username"
-            :width="200"
-          />
+          <BaseImage :src="user.avatar" alt="avatar" class="profile-page-header-avatar-img" />
         </div>
         <div class="profile-page-header-user-info">
           <div class="profile-page-header-user-info-name">{{ user.username }}</div>
@@ -657,6 +651,8 @@ watch(selectedTab, async (val) => {
 .profile-page-header-avatar-img {
   width: 200px;
   height: 200px;
+  border-radius: 50%;
+  object-fit: cover;
 }
 
 .profile-page-header-user-info {
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 3de698bc9..d05875cb9 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -199,8 +199,6 @@ function createFetchNotifications() {
           arr.push({
             ...n,
             src: n.comment.author.avatar,
-            userId: n.comment.author.id,
-            userName: n.comment.author.username,
             iconClick: () => {
               markNotificationRead(n.id)
               navigateTo(`/users/${n.comment.author.id}`, { replace: true })
@@ -221,8 +219,6 @@ function createFetchNotifications() {
           arr.push({
             ...n,
             src: n.fromUser ? n.fromUser.avatar : null,
-            userId: n.fromUser ? n.fromUser.id : undefined,
-            userName: n.fromUser ? n.fromUser.username : undefined,
             icon: n.fromUser ? undefined : iconMap[n.type],
             iconClick: () => {
               if (n.fromUser) {
@@ -235,8 +231,6 @@ function createFetchNotifications() {
           arr.push({
             ...n,
             src: n.fromUser ? n.fromUser.avatar : null,
-            userId: n.fromUser ? n.fromUser.id : undefined,
-            userName: n.fromUser ? n.fromUser.username : undefined,
             icon: n.fromUser ? undefined : iconMap[n.type],
             iconClick: () => {
               if (n.fromUser) {
@@ -275,8 +269,6 @@ function createFetchNotifications() {
           arr.push({
             ...n,
             src: n.comment.author.avatar,
-            userId: n.comment.author.id,
-            userName: n.comment.author.username,
             iconClick: () => {
               markNotificationRead(n.id)
               navigateTo(`/users/${n.comment.author.id}`, { replace: true })
@@ -323,8 +315,6 @@ function createFetchNotifications() {
           arr.push({
             ...n,
             src: n.fromUser ? n.fromUser.avatar : null,
-            userId: n.fromUser ? n.fromUser.id : undefined,
-            userName: n.fromUser ? n.fromUser.username : undefined,
             icon: n.fromUser ? undefined : iconMap[n.type],
             iconClick: () => {
               if (n.post) {