feat: add base user avatar component

2026-02-06 23:21:16 +08:00 · 2025-09-24 00:30:54 +08:00
parent 26d1db79f4
commit 76aef40de7
15 changed files with 314 additions and 43 deletions
--- a/frontend_nuxt/components/BaseTimeline.vue
+++ b/frontend_nuxt/components/BaseTimeline.vue
@@ -3,10 +3,18 @@
    <div class="timeline-item" v-for="(item, idx) in items" :key="idx">
      <div
        class="timeline-icon"
-        :class="{ clickable: !!item.iconClick }"
-        @click="item.iconClick && item.iconClick()"
+        :class="{ clickable: !!item.iconClick || hasLink(item) }"
+        @click="onIconClick(item, $event)"
      >
-        <BaseImage v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
+        <BaseUserAvatar
+          v-if="item.src"
+          :src="item.src"
+          :user-id="item.userId"
+          :to="item.avatarLink"
+          class="timeline-img"
+          alt="timeline item"
+          :disable-link="!hasLink(item) || !!item.iconClick"
+        />
        <component
          v-else-if="item.icon && (typeof item.icon !== 'string' || !item.icon.includes(' '))"
          :is="item.icon"
@@ -22,11 +30,28 @@
 </template>

 <script>
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
+
 export default {
  name: 'BaseTimeline',
+  components: { BaseUserAvatar },
  props: {
    items: { type: Array, default: () => [] },
  },
+  methods: {
+    hasLink(item) {
+      if (!item) return false
+      if (item.avatarLink) return true
+      const id = item?.userId
+      return id !== undefined && id !== null && id !== ''
+    },
+    onIconClick(item, event) {
+      if (item && item.iconClick) {
+        event.preventDefault()
+        item.iconClick()
+      }
+    },
+  },
 }
 </script>

@@ -66,8 +91,12 @@ export default {
 .timeline-img {
  width: 100%;
  height: 100%;
+}
+
+.timeline-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
  object-fit: cover;
-  border-radius: 50%;
 }

 .timeline-emoji {
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -0,0 +1,132 @@
+<template>
+  <NuxtLink
+    v-if="isLink"
+    :to="resolvedLink"
+    class="base-user-avatar"
+    :class="wrapperClass"
+    :style="wrapperStyle"
+    v-bind="wrapperAttrs"
+  >
+    <img :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
+  </NuxtLink>
+  <div
+    v-else
+    class="base-user-avatar"
+    :class="wrapperClass"
+    :style="wrapperStyle"
+    v-bind="wrapperAttrs"
+  >
+    <img :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
+  </div>
+</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],
+    default: null,
+  },
+  src: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: [Number, String],
+    default: null,
+  },
+  rounded: {
+    type: Boolean,
+    default: true,
+  },
+  disableLink: {
+    type: Boolean,
+    default: false,
+  },
+  to: {
+    type: String,
+    default: '',
+  },
+})
+
+const attrs = useAttrs()
+
+const currentSrc = ref(props.src || DEFAULT_AVATAR)
+
+watch(
+  () => props.src,
+  (value) => {
+    currentSrc.value = value || DEFAULT_AVATAR
+  },
+)
+
+const resolvedLink = computed(() => {
+  if (props.to) return props.to
+  if (props.userId !== null && props.userId !== undefined && props.userId !== '') {
+    return `/users/${props.userId}`
+  }
+  return null
+})
+
+const isLink = computed(() => !props.disableLink && Boolean(resolvedLink.value))
+
+const altText = computed(() => props.alt || '用户头像')
+
+const sizeStyle = computed(() => {
+  if (!props.width && props.width !== 0) return null
+  const value = typeof props.width === 'number' ? `${props.width}px` : props.width
+  if (!value) return null
+  return { width: value, height: value }
+})
+
+const wrapperStyle = computed(() => {
+  const attrStyle = attrs.style
+  return [sizeStyle.value, attrStyle]
+})
+
+const wrapperClass = computed(() => [attrs.class, { 'is-rounded': props.rounded }])
+
+const wrapperAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+
+function onError() {
+  if (currentSrc.value !== DEFAULT_AVATAR) {
+    currentSrc.value = DEFAULT_AVATAR
+  }
+}
+</script>
+
+<style scoped>
+.base-user-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: var(--avatar-placeholder-color, #f0f0f0);
+}
+
+.base-user-avatar.is-rounded {
+  border-radius: 50%;
+}
+
+.base-user-avatar:not(.is-rounded) {
+  border-radius: 0;
+}
+
+.base-user-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+</style>
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -26,11 +26,12 @@
          <span v-if="level >= 2" class="reply-item">
            <next class="reply-icon" />
            <span class="reply-info">
-              <BaseImage
+              <BaseUserAvatar
                class="reply-avatar"
-                :src="comment.parentUserAvatar || '/default-avatar.svg'"
-                alt="avatar"
-                @click="comment.parentUserClick && comment.parentUserClick()"
+                :src="comment.parentUserAvatar"
+                :user-id="comment.parentUserId"
+                :alt="comment.parentUserName"
+                :disable-link="!comment.parentUserId"
              />
              <span class="reply-user-name">{{ comment.parentUserName }}</span>
            </span>
@@ -111,6 +112,7 @@ import BaseTimeline from '~/components/BaseTimeline.vue'
 import CommentEditor from '~/components/CommentEditor.vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import ReactionsGroup from '~/components/ReactionsGroup.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl

@@ -259,6 +261,7 @@ const submitReply = async (parentUserName, text, clear) => {
        text: data.content,
        parentUserName: parentUserName,
        parentUserAvatar: props.comment.avatar,
+        parentUserId: props.comment.userId,
        reactions: [],
        reply: (data.replies || []).map((r) => ({
          id: r.id,
@@ -270,10 +273,12 @@ const submitReply = async (parentUserName, text, clear) => {
          reply: [],
          openReplies: false,
          src: r.author.avatar,
+          userId: r.author.id,
          iconClick: () => navigateTo(`/users/${r.author.id}`),
        })),
        openReplies: false,
        src: data.author.avatar,
+        userId: data.author.id,
        iconClick: () => navigateTo(`/users/${data.author.id}`),
      })
      clear()
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -70,7 +70,14 @@
          <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
            <template #trigger>
              <div class="avatar-container">
-                <img class="avatar-img" :src="avatar" alt="avatar" />
+                <BaseUserAvatar
+                  class="avatar-img"
+                  :user-id="authState.userId"
+                  :src="avatar"
+                  alt="avatar"
+                  :width="32"
+                  :disable-link="true"
+                />
                <down />
              </div>
            </template>
@@ -93,6 +100,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import ToolTip from '~/components/ToolTip.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
--- a/frontend_nuxt/components/PostChangeLogItem.vue
+++ b/frontend_nuxt/components/PostChangeLogItem.vue
@@ -1,12 +1,13 @@
 <template>
  <div :id="`change-log-${log.id}`" class="change-log-container">
    <div class="change-log-text">
-      <BaseImage
+      <BaseUserAvatar
        v-if="log.userAvatar"
        class="change-log-avatar"
        :src="log.userAvatar"
+        :to="log.username ? `/users/${log.username}` : ''"
        alt="avatar"
-        @click="() => navigateTo(`/users/${log.username}`)"
+        :disable-link="!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>
@@ -55,10 +56,8 @@
 import { computed } from 'vue'
 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 BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import { themeState } from '~/utils/theme'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
@@ -135,6 +134,12 @@ const diffHtml = computed(() => {
  cursor: pointer;
 }

+.change-log-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .change-log-time {
  font-size: 12px;
  opacity: 0.6;
--- a/frontend_nuxt/components/PostLottery.vue
+++ b/frontend_nuxt/components/PostLottery.vue
@@ -53,24 +53,24 @@
      </div>
    </div>
    <div class="prize-member-container">
-      <BaseImage
+      <BaseUserAvatar
        v-for="p in lotteryParticipants"
        :key="p.id"
        class="prize-member-avatar"
+        :user-id="p.id"
        :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>
-        <BaseImage
+        <BaseUserAvatar
          v-for="w in lotteryWinners"
          :key="w.id"
          class="prize-member-avatar"
+          :user-id="w.id"
          :src="w.avatar"
          alt="avatar"
-          @click="gotoUser(w.id)"
        />
        <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
          {{ lotteryWinners[0].username }}
@@ -87,6 +87,7 @@ import { toast } from '~/main'
 import { useRuntimeConfig } from '#imports'
 import { useIsMobile } from '~/utils/screen'
 import { useCountdown } from '~/composables/useCountdown'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'

 const props = defineProps({
  lottery: { type: Object, required: true },
@@ -106,8 +107,6 @@ 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 () => {
@@ -247,10 +246,15 @@ const joinLottery = async () => {
  height: 30px;
  margin-left: 3px;
  border-radius: 50%;
-  object-fit: cover;
  cursor: pointer;
 }

+.prize-member-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .prize-member-winner {
  display: flex;
  flex-direction: row;
--- a/frontend_nuxt/components/PostPoll.vue
+++ b/frontend_nuxt/components/PostPoll.vue
@@ -17,13 +17,13 @@
              ></div>
            </div>
            <div class="poll-participants">
-              <BaseImage
+              <BaseUserAvatar
                v-for="p in pollOptionParticipants[idx] || []"
                :key="p.id"
                class="poll-participant-avatar"
+                :user-id="p.id"
                :src="p.avatar"
                alt="avatar"
-                @click="gotoUser(p.id)"
              />
            </div>
          </div>
@@ -119,6 +119,7 @@ import { getToken, authState } from '~/utils/auth'
 import { toast } from '~/main'
 import { useRuntimeConfig } from '#imports'
 import { useCountdown } from '~/composables/useCountdown'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'

 const props = defineProps({
  poll: { type: Object, required: true },
@@ -152,8 +153,6 @@ 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) => {
@@ -429,4 +428,10 @@ const submitMultiPoll = async () => {
  border-radius: 50%;
  cursor: pointer;
 }
+
+.poll-participant-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 </style>
--- a/frontend_nuxt/components/SearchPersonDropdown.vue
+++ b/frontend_nuxt/components/SearchPersonDropdown.vue
@@ -24,10 +24,12 @@
      </template>
      <template #option="{ option }">
        <div class="search-option-item">
-          <BaseImage
-            :src="option.avatar || '/default-avatar.svg'"
+          <BaseUserAvatar
+            :src="option.avatar"
+            :user-id="option.id"
+            :alt="option.username"
            class="avatar"
-            @error="handleAvatarError"
+            :disable-link="true"
          />
          <div class="result-body">
            <div class="result-main" v-html="highlight(option.username)"></div>
@@ -49,6 +51,7 @@ import Dropdown from '~/components/Dropdown.vue'
 import { stripMarkdown } from '~/utils/markdown'
 import { useIsMobile } from '~/utils/screen'
 import { getToken } from '~/utils/auth'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl

@@ -87,10 +90,6 @@ 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)
@@ -179,6 +178,12 @@ defineExpose({
  width: 32px;
  height: 32px;
  border-radius: 50%;
+  overflow: hidden;
+}
+
+.avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
  object-fit: cover;
 }

--- a/frontend_nuxt/components/UserList.vue
+++ b/frontend_nuxt/components/UserList.vue
@@ -2,7 +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)">
-      <BaseImage :src="u.avatar" alt="avatar" class="user-avatar" />
+      <BaseUserAvatar :src="u.avatar" :user-id="u.id" 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>
@@ -13,6 +13,7 @@

 <script setup>
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'

 defineProps({
  users: { type: Array, default: () => [] },
@@ -43,6 +44,11 @@ const handleUserClick = (user) => {
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
+}
+
+.user-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
  object-fit: cover;
 }
 .user-info {
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -91,7 +91,13 @@
              class="article-member-avatar-item"
              :to="`/users/${member.id}`"
            >
-              <BaseImage class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
+              <BaseUserAvatar
+                class="article-member-avatar-item-img"
+                :src="member.avatar"
+                :user-id="member.id"
+                alt="avatar"
+                :disable-link="true"
+              />
            </NuxtLink>
          </div>

@@ -138,6 +144,7 @@ import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import { getToken } from '~/utils/auth'
 import { stripMarkdown } from '~/utils/markdown'
 import { useIsMobile } from '~/utils/screen'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import TimeManager from '~/utils/time'
 import { selectedCategoryGlobal, selectedTagsGlobal } from '~/composables/postFilter'
 useHead({
@@ -383,7 +390,6 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
  selectedCategoryGlobal.value = newCategory
  selectedTagsGlobal.value = newTags
 })
-
 </script>

 <style scoped>
@@ -638,6 +644,11 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
 .article-member-avatar-item-img {
  width: 100%;
  height: 100%;
+}
+
+.article-member-avatar-item-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
  object-fit: cover;
 }

--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -44,7 +44,12 @@
            <div v-if="item.replyTo" class="reply-preview info-content-text">
              <div class="reply-header">
                <next class="reply-icon" />
-                <BaseImage class="reply-avatar" :src="item.replyTo.sender.avatar" alt="avatar" />
+                <BaseUserAvatar
+                  class="reply-avatar"
+                  :src="item.replyTo.sender.avatar"
+                  :user-id="item.replyTo.sender.id"
+                  :alt="item.replyTo.sender.username"
+                />
                <div class="reply-author">{{ item.replyTo.sender.username }}:</div>
              </div>
              <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
@@ -121,6 +126,7 @@ import TimeManager from '~/utils/time'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import VueEasyLightbox from 'vue-easy-lightbox'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'

 const config = useRuntimeConfig()
 const route = useRoute()
@@ -243,6 +249,7 @@ async function fetchMessages(page = 0) {
    const newMessages = pageData.content.reverse().map((item) => ({
      ...item,
      src: item.sender.avatar,
+      userId: item.sender.id,
      iconClick: () => {
        openUser(item.sender.id)
      },
@@ -328,6 +335,7 @@ async function sendMessage(content, clearInput) {
    messages.value.push({
      ...newMessage,
      src: newMessage.sender.avatar,
+      userId: newMessage.sender.id,
      iconClick: () => {
        openUser(newMessage.sender.id)
      },
@@ -403,6 +411,7 @@ const subscribeToConversation = () => {
      messages.value.push({
        ...parsedMessage,
        src: parsedMessage.sender.avatar,
+        userId: parsedMessage.sender.id,
        iconClick: () => openUser(parsedMessage.sender.id),
      })

@@ -686,6 +695,12 @@ function goBack() {
  margin-right: 5px;
 }

+.reply-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .reply-preview {
  margin-top: 10px;
  padding: 10px;
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -33,11 +33,12 @@
          @click="goToConversation(convo.id)"
        >
          <div class="conversation-avatar">
-            <BaseImage
-              :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
+            <BaseUserAvatar
+              :src="getOtherParticipant(convo)?.avatar"
+              :user-id="getOtherParticipant(convo)?.id"
              :alt="getOtherParticipant(convo)?.username || '用户'"
              class="avatar-img"
-              @error="handleAvatarError"
+              :disable-link="true"
            />
          </div>

@@ -130,6 +131,7 @@ import { stripMarkdownLength } from '~/utils/markdown'
 import SearchPersonDropdown from '~/components/SearchPersonDropdown.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTabs from '~/components/BaseTabs.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'

 const config = useRuntimeConfig()
 const conversations = ref([])
@@ -431,6 +433,11 @@ function minimize() {
  width: 40px;
  height: 40px;
  border-radius: 50%;
+}
+
+.avatar-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
  object-fit: cover;
 }

--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -48,7 +48,13 @@
      <div class="info-content-container author-info-container">
        <div class="user-avatar-container" @click="gotoProfile">
          <div class="user-avatar-item">
-            <BaseImage class="user-avatar-item-img" :src="author.avatar" alt="avatar" />
+            <BaseUserAvatar
+              class="user-avatar-item-img"
+              :src="author.avatar"
+              :user-id="author.id"
+              alt="avatar"
+              :disable-link="true"
+            />
          </div>
          <div v-if="isMobile" class="info-content-header">
            <div class="user-name">
@@ -193,6 +199,7 @@ import ReactionsGroup from '~/components/ReactionsGroup.vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import PostLottery from '~/components/PostLottery.vue'
 import PostPoll from '~/components/PostPoll.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import { renderMarkdown, handleMarkdownClick, stripMarkdownLength } from '~/utils/markdown'
 import { getMedalTitle } from '~/utils/medal'
 import { toast } from '~/main'
@@ -340,7 +347,7 @@ const mapComment = (
  iconClick: () => navigateTo(`/users/${c.author.id}`),
  parentUserName: parentUserName,
  parentUserAvatar: parentUserAvatar,
-  parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
+  parentUserId: parentUserId,
 })

 const changeLogIcon = (l) => {
@@ -1186,6 +1193,12 @@ onMounted(async () => {
  border-radius: 50%;
 }

+.user-avatar-item-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .info-content {
  display: flex;
  flex-direction: column;
--- a/frontend_nuxt/pages/settings.vue
+++ b/frontend_nuxt/pages/settings.vue
@@ -15,7 +15,13 @@
        <div class="avatar-row">
          <!-- label 充当点击区域，内部隐藏 input -->
          <label class="avatar-container">
-            <BaseImage :src="avatar" class="avatar-preview" alt="avatar" />
+            <BaseUserAvatar
+              :src="avatar"
+              :user-id="userId"
+              alt="avatar"
+              class="avatar-preview"
+              :disable-link="true"
+            />
            <!-- 半透明蒙层：hover 时出现 -->
            <div class="avatar-overlay">更换头像</div>
            <input type="file" class="avatar-input" accept="image/*" @change="onAvatarChange" />
@@ -74,6 +80,7 @@ import AvatarCropper from '~/components/AvatarCropper.vue'
 import BaseInput from '~/components/BaseInput.vue'
 import Dropdown from '~/components/Dropdown.vue'
 import BaseSwitch from '~/components/BaseSwitch.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import { toast } from '~/main'
 import { fetchCurrentUser, getToken, setToken } from '~/utils/auth'
 import { frostedState, setFrosted } from '~/utils/frosted'
@@ -87,6 +94,7 @@ const avatarFile = ref(null)
 const tempAvatar = ref('')
 const showCropper = ref(false)
 const role = ref('')
+const userId = ref(null)
 const publishMode = ref('DIRECT')
 const passwordStrength = ref('LOW')
 const aiFormatLimit = ref(3)
@@ -103,6 +111,7 @@ onMounted(async () => {
    username.value = user.username
    introduction.value = user.introduction || ''
    avatar.value = user.avatar
+    userId.value = user.id
    role.value = user.role
    if (role.value === 'ADMIN') {
      loadAdminConfig()
@@ -271,6 +280,11 @@ const save = async () => {
  width: 80px;
  height: 80px;
  border-radius: 40px;
+}
+
+.avatar-preview :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
  object-fit: cover;
 }

--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -7,7 +7,12 @@
    <div v-else>
      <div class="profile-page-header">
        <div class="profile-page-header-avatar">
-          <BaseImage :src="user.avatar" alt="avatar" class="profile-page-header-avatar-img" />
+          <BaseUserAvatar
+            :src="user.avatar"
+            :user-id="user.id"
+            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>
@@ -272,6 +277,7 @@ import LevelProgress from '~/components/LevelProgress.vue'
 import TimelineCommentGroup from '~/components/TimelineCommentGroup.vue'
 import TimelinePostItem from '~/components/TimelinePostItem.vue'
 import TimelineTagItem from '~/components/TimelineTagItem.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import UserList from '~/components/UserList.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
@@ -652,6 +658,11 @@ watch(selectedTab, async (val) => {
  width: 200px;
  height: 200px;
  border-radius: 50%;
+}
+
+.profile-page-header-avatar-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
  object-fit: cover;
 }

@@ -1080,6 +1091,7 @@ watch(selectedTab, async (val) => {
  .profile-page-header-avatar-img {
    width: 100px;
    height: 100px;
+    border-radius: 50%;
  }

  :deep(.base-tabs-item) {