From 26d1db79f4f36df1237d1005777c1af0824828ee Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 23 Sep 2025 23:59:42 +0800
Subject: [PATCH 01/12] =?UTF-8?q?fix:=20user=20list=20=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/UserList.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend_nuxt/components/UserList.vue b/frontend_nuxt/components/UserList.vue
index d6b4d2b59..09d1fb1a6 100644
--- a/frontend_nuxt/components/UserList.vue
+++ b/frontend_nuxt/components/UserList.vue
@@ -27,18 +27,20 @@ const handleUserClick = (user) => {
 .user-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
 }
 .user-item {
+  padding-top: 20px;
+  padding-bottom: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
   cursor: pointer;
+  border-bottom: 1px solid var(--normal-border-color);
 }
 .user-avatar {
-  width: 40px;
-  height: 40px;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
   flex-shrink: 0;
   object-fit: cover;

From efbb83924b2e2d3b713a68e892323fc03f331d1d Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Wed, 24 Sep 2025 00:26:51 +0800
Subject: [PATCH 02/12] feat: add BaseUserAvatar and unify avatar usage

---
 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, 263 insertions(+), 91 deletions(-)
 create mode 100644 frontend_nuxt/components/BaseUserAvatar.vue

diff --git a/frontend_nuxt/components/BaseTimeline.vue b/frontend_nuxt/components/BaseTimeline.vue
index b95d5e422..f5bb3f7d0 100644
--- a/frontend_nuxt/components/BaseTimeline.vue
+++ b/frontend_nuxt/components/BaseTimeline.vue
@@ -3,10 +3,19 @@
     <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 && !item.src }"
+        @click="!item.src && item.iconClick && item.iconClick()"
       >
-        <BaseImage v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
+        <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()"
+        />
         <component
           v-else-if="item.icon && (typeof item.icon !== 'string' || !item.icon.includes(' '))"
           :is="item.icon"
@@ -64,10 +73,12 @@ export default {
 }
 
 .timeline-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+}
+
+.timeline-img.is-clickable {
+  cursor: pointer;
 }
 
 .timeline-emoji {
diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
new file mode 100644
index 000000000..54624a5d2
--- /dev/null
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -0,0 +1,116 @@
+<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 584f0a90b..be12aaf29 100644
--- a/frontend_nuxt/components/CommentItem.vue
+++ b/frontend_nuxt/components/CommentItem.vue
@@ -26,10 +26,14 @@
           <span v-if="level >= 2" class="reply-item">
             <next class="reply-icon" />
             <span class="reply-info">
-              <BaseImage
+              <BaseUserAvatar
+                v-if="comment.parentUserName"
                 class="reply-avatar"
-                :src="comment.parentUserAvatar || '/default-avatar.svg'"
-                alt="avatar"
+                :user-id="comment.parentUserId"
+                :avatar="comment.parentUserAvatar"
+                :username="comment.parentUserName"
+                :width="20"
+                :link="Boolean(comment.parentUserId)"
                 @click="comment.parentUserClick && comment.parentUserClick()"
               />
               <span class="reply-user-name">{{ comment.parentUserName }}</span>
@@ -253,16 +257,19 @@ 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,
@@ -394,9 +401,7 @@ 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 0f1176a9f..51605425c 100644
--- 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"
+                  :avatar="avatar"
+                  :username="authState.username"
+                  :width="32"
+                  :link="false"
+                />
                 <down />
               </div>
             </template>
@@ -434,7 +441,6 @@ 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 31988452a..5f0198957 100644
--- 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"
-        alt="avatar"
-        @click="() => navigateTo(`/users/${log.username}`)"
+        :user-id="log.userId"
+        :avatar="log.userAvatar"
+        :username="log.username"
+        :width="20"
       />
       <span v-if="log.username" class="change-log-user">{{ log.username }}</span>
       <span v-if="log.type === 'CONTENT'" class="change-log-content">变更了文章内容</span>
@@ -57,8 +58,6 @@ 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 166ee1a83..04cc3cd99 100644
--- a/frontend_nuxt/components/PostLottery.vue
+++ b/frontend_nuxt/components/PostLottery.vue
@@ -53,24 +53,26 @@
       </div>
     </div>
     <div class="prize-member-container">
-      <BaseImage
+      <BaseUserAvatar
         v-for="p in lotteryParticipants"
         :key="p.id"
         class="prize-member-avatar"
-        :src="p.avatar"
-        alt="avatar"
-        @click="gotoUser(p.id)"
+        :user-id="p.id"
+        :avatar="p.avatar"
+        :username="p.username"
+        :width="30"
       />
       <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"
-          :src="w.avatar"
-          alt="avatar"
-          @click="gotoUser(w.id)"
+          :user-id="w.id"
+          :avatar="w.avatar"
+          :username="w.username"
+          :width="30"
         />
         <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
           {{ lotteryWinners[0].username }}
@@ -106,8 +108,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 () => {
@@ -246,8 +246,6 @@ 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 a6ef9ba7e..857294bbe 100644
--- a/frontend_nuxt/components/PostPoll.vue
+++ b/frontend_nuxt/components/PostPoll.vue
@@ -17,13 +17,14 @@
               ></div>
             </div>
             <div class="poll-participants">
-              <BaseImage
+              <BaseUserAvatar
                 v-for="p in pollOptionParticipants[idx] || []"
                 :key="p.id"
                 class="poll-participant-avatar"
-                :src="p.avatar"
-                alt="avatar"
-                @click="gotoUser(p.id)"
+                :user-id="p.id"
+                :avatar="p.avatar"
+                :username="p.username"
+                :width="30"
               />
             </div>
           </div>
@@ -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) => {
@@ -426,7 +425,6 @@ 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 0587d7c10..ff9bd71ce 100644
--- a/frontend_nuxt/components/SearchPersonDropdown.vue
+++ b/frontend_nuxt/components/SearchPersonDropdown.vue
@@ -24,10 +24,13 @@
       </template>
       <template #option="{ option }">
         <div class="search-option-item">
-          <BaseImage
-            :src="option.avatar || '/default-avatar.svg'"
+          <BaseUserAvatar
             class="avatar"
-            @error="handleAvatarError"
+            :user-id="option.id"
+            :avatar="option.avatar"
+            :username="option.username"
+            :width="32"
+            :link="false"
           />
           <div class="result-body">
             <div class="result-main" v-html="highlight(option.username)"></div>
@@ -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)
@@ -178,8 +177,6 @@ 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 09d1fb1a6..09d4881bb 100644
--- a/frontend_nuxt/components/UserList.vue
+++ b/frontend_nuxt/components/UserList.vue
@@ -2,7 +2,14 @@
   <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
+        class="user-avatar"
+        :user-id="u.id"
+        :avatar="u.avatar"
+        :username="u.username"
+        :width="50"
+        :link="false"
+      />
       <div class="user-info">
         <div class="user-name">{{ u.username }}</div>
         <div v-if="u.introduction" class="user-intro">{{ u.introduction }}</div>
@@ -41,9 +48,7 @@ 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 a6327dc61..c4565bff5 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -85,14 +85,15 @@
           </div>
 
           <div class="article-member-avatars-container">
-            <NuxtLink
+            <BaseUserAvatar
               v-for="member in article.members"
               :key="`${article.id}-${member.id}`"
               class="article-member-avatar-item"
-              :to="`/users/${member.id}`"
-            >
-              <BaseImage class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
-            </NuxtLink>
+              :user-id="member.id"
+              :avatar="member.avatar"
+              :username="member.username"
+              :width="25"
+            />
           </div>
 
           <div class="article-comments main-info-text">
@@ -291,7 +292,11 @@ const {
       description: p.content,
       category: p.category,
       tags: p.tags || [],
-      members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
+      members: (p.participants || []).map((m) => ({
+        id: m.id,
+        avatar: m.avatar,
+        username: m.username,
+      })),
       comments: p.commentCount,
       views: p.views,
       rssExcluded: p.rssExcluded || false,
@@ -333,7 +338,11 @@ const fetchNextPage = async () => {
     description: p.content,
     category: p.category,
     tags: p.tags || [],
-    members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
+    members: (p.participants || []).map((m) => ({
+      id: m.id,
+      avatar: m.avatar,
+      username: m.username,
+    })),
     comments: p.commentCount,
     views: p.views,
     rssExcluded: p.rssExcluded || false,
@@ -383,7 +392,6 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
   selectedCategoryGlobal.value = newCategory
   selectedTagsGlobal.value = newTags
 })
-
 </script>
 
 <style scoped>
@@ -631,14 +639,7 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
 .article-member-avatar-item {
   width: 25px;
   height: 25px;
-  border-radius: 50%;
-  overflow: hidden;
-}
-
-.article-member-avatar-item-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  flex-shrink: 0;
 }
 
 .placeholder-container {
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index 56fe7cefa..344bc4a33 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -44,7 +44,13 @@
             <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"
+                  :user-id="item.replyTo.sender.id"
+                  :avatar="item.replyTo.sender.avatar"
+                  :username="item.replyTo.sender.username"
+                  :width="20"
+                />
                 <div class="reply-author">{{ item.replyTo.sender.username }}:</div>
               </div>
               <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
@@ -242,6 +248,8 @@ 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)
@@ -327,6 +335,8 @@ 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)
@@ -402,6 +412,8 @@ 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 a7894f26f..385053dc2 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -33,11 +33,23 @@
           @click="goToConversation(convo.id)"
         >
           <div class="conversation-avatar">
-            <BaseImage
-              :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
-              :alt="getOtherParticipant(convo)?.username || '用户'"
+            <BaseUserAvatar
+              v-if="getOtherParticipant(convo)"
               class="avatar-img"
-              @error="handleAvatarError"
+              :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"
             />
           </div>
 
@@ -431,7 +443,6 @@ 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 405b7eeb5..6a99aa2d6 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -46,10 +46,14 @@
       </div>
 
       <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" />
-          </div>
+        <div class="user-avatar-container">
+          <BaseUserAvatar
+            class="user-avatar-item"
+            :user-id="author.id"
+            :avatar="author.avatar"
+            :username="author.username"
+            :width="50"
+          />
           <div v-if="isMobile" class="info-content-header">
             <div class="user-name">
               {{ author.username }}
@@ -340,6 +344,7 @@ const mapComment = (
   iconClick: () => navigateTo(`/users/${c.author.id}`),
   parentUserName: parentUserName,
   parentUserAvatar: parentUserAvatar,
+  parentUserId: parentUserId,
   parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
 })
 
@@ -379,6 +384,7 @@ 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,
@@ -863,10 +869,6 @@ const jumpToHashComment = async () => {
   }
 }
 
-const gotoProfile = () => {
-  navigateTo(`/users/${author.value.id}`, { replace: true })
-}
-
 const initPage = async () => {
   scrollTo(0, 0)
   await fetchTimeline()
@@ -960,6 +962,8 @@ onMounted(async () => {
 .user-avatar-container {
   display: flex;
   flex-direction: row;
+  align-items: center;
+  gap: 10px;
 }
 
 .scroller-middle {
@@ -1172,18 +1176,13 @@ onMounted(async () => {
 }
 
 .user-avatar-container {
-  cursor: pointer;
+  cursor: default;
 }
 
 .user-avatar-item {
   width: 50px;
   height: 50px;
-}
-
-.user-avatar-item-img {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
+  flex-shrink: 0;
 }
 
 .info-content {
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 28fd4e6ba..ecb1e9c80 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -7,7 +7,13 @@
     <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
+            class="profile-page-header-avatar-img"
+            :user-id="user.id"
+            :avatar="user.avatar"
+            :username="user.username"
+            :width="200"
+          />
         </div>
         <div class="profile-page-header-user-info">
           <div class="profile-page-header-user-info-name">{{ user.username }}</div>
@@ -651,8 +657,6 @@ 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 d05875cb9..3de698bc9 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -199,6 +199,8 @@ 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 })
@@ -219,6 +221,8 @@ 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) {
@@ -231,6 +235,8 @@ 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) {
@@ -269,6 +275,8 @@ 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 })
@@ -315,6 +323,8 @@ 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) {

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 03/12] 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) {

From 76aef40de75410b64371ebe871d85dfa9c509b8b Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Wed, 24 Sep 2025 00:30:54 +0800
Subject: [PATCH 04/12] feat: add base user avatar component

---
 frontend_nuxt/components/BaseTimeline.vue     |  37 ++++-
 frontend_nuxt/components/BaseUserAvatar.vue   | 132 ++++++++++++++++++
 frontend_nuxt/components/CommentItem.vue      |  13 +-
 frontend_nuxt/components/HeaderComponent.vue  |  10 +-
 .../components/PostChangeLogItem.vue          |  15 +-
 frontend_nuxt/components/PostLottery.vue      |  18 ++-
 frontend_nuxt/components/PostPoll.vue         |  13 +-
 .../components/SearchPersonDropdown.vue       |  19 ++-
 frontend_nuxt/components/UserList.vue         |   8 +-
 frontend_nuxt/pages/index.vue                 |  15 +-
 frontend_nuxt/pages/message-box/[id].vue      |  17 ++-
 frontend_nuxt/pages/message-box/index.vue     |  13 +-
 frontend_nuxt/pages/posts/[id]/index.vue      |  17 ++-
 frontend_nuxt/pages/settings.vue              |  16 ++-
 frontend_nuxt/pages/users/[id].vue            |  14 +-
 15 files changed, 314 insertions(+), 43 deletions(-)
 create mode 100644 frontend_nuxt/components/BaseUserAvatar.vue

diff --git a/frontend_nuxt/components/BaseTimeline.vue b/frontend_nuxt/components/BaseTimeline.vue
index b95d5e422..a691603e3 100644
--- 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 {
diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
new file mode 100644
index 000000000..22e080523
--- /dev/null
+++ 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>
diff --git a/frontend_nuxt/components/CommentItem.vue b/frontend_nuxt/components/CommentItem.vue
index 584f0a90b..39f044aa9 100644
--- 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()
diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index 0f1176a9f..8b977c513 100644
--- 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'
diff --git a/frontend_nuxt/components/PostChangeLogItem.vue b/frontend_nuxt/components/PostChangeLogItem.vue
index 31988452a..b9ead1887 100644
--- 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;
diff --git a/frontend_nuxt/components/PostLottery.vue b/frontend_nuxt/components/PostLottery.vue
index 166ee1a83..21a4dfb03 100644
--- 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;
diff --git a/frontend_nuxt/components/PostPoll.vue b/frontend_nuxt/components/PostPoll.vue
index a6ef9ba7e..fced95271 100644
--- 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>
diff --git a/frontend_nuxt/components/SearchPersonDropdown.vue b/frontend_nuxt/components/SearchPersonDropdown.vue
index 0587d7c10..78b3acfd2 100644
--- 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;
 }
 
diff --git a/frontend_nuxt/components/UserList.vue b/frontend_nuxt/components/UserList.vue
index 09d1fb1a6..d09e0d1f2 100644
--- 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 {
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index a6327dc61..239d4ac79 100644
--- 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;
 }
 
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index 56fe7cefa..54ef8ee75 100644
--- 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;
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index a7894f26f..75b30406d 100644
--- 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;
 }
 
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 405b7eeb5..cbd70f071 100644
--- 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;
diff --git a/frontend_nuxt/pages/settings.vue b/frontend_nuxt/pages/settings.vue
index d668312f9..6da7c4fbe 100644
--- 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;
 }
 
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 28fd4e6ba..67232896c 100644
--- 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) {

From 6e4fbc3c42597771b2d43c388b0840ec2156a092 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Wed, 24 Sep 2025 00:43:57 +0800
Subject: [PATCH 05/12] =?UTF-8?q?fix:=20base=20avatar=20=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/BaseUserAvatar.vue | 15 ++-------------
 frontend_nuxt/components/UserList.vue       |  2 +-
 frontend_nuxt/pages/index.vue               | 18 ++++--------------
 3 files changed, 7 insertions(+), 28 deletions(-)

diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
index 22e080523..bfaae5071 100644
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -1,28 +1,19 @@
 <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" />
+    <BaseImage :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'
+import BaseImage from './BaseImage.vue'
 
 const DEFAULT_AVATAR = '/default-avatar.svg'
 
@@ -76,8 +67,6 @@ const resolvedLink = computed(() => {
   return null
 })
 
-const isLink = computed(() => !props.disableLink && Boolean(resolvedLink.value))
-
 const altText = computed(() => props.alt || '用户头像')
 
 const sizeStyle = computed(() => {
diff --git a/frontend_nuxt/components/UserList.vue b/frontend_nuxt/components/UserList.vue
index d09e0d1f2..204a8fc7a 100644
--- a/frontend_nuxt/components/UserList.vue
+++ b/frontend_nuxt/components/UserList.vue
@@ -1,7 +1,7 @@
 <template>
   <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)">
+    <div v-for="u in users" :key="u.id" class="user-item">
       <BaseUserAvatar :src="u.avatar" :user-id="u.id" alt="avatar" class="user-avatar" />
       <div class="user-info">
         <div class="user-name">{{ u.username }}</div>
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index 239d4ac79..a6c8bf2a7 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -85,20 +85,16 @@
           </div>
 
           <div class="article-member-avatars-container">
-            <NuxtLink
-              v-for="member in article.members"
-              :key="`${article.id}-${member.id}`"
-              class="article-member-avatar-item"
-              :to="`/users/${member.id}`"
-            >
+            <div v-for="member in article.members">
               <BaseUserAvatar
                 class="article-member-avatar-item-img"
                 :src="member.avatar"
                 :user-id="member.id"
                 alt="avatar"
                 :disable-link="true"
+                :width="25"
               />
-            </NuxtLink>
+            </div>
           </div>
 
           <div class="article-comments main-info-text">
@@ -634,13 +630,6 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
   margin-left: 20px;
 }
 
-.article-member-avatar-item {
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  overflow: hidden;
-}
-
 .article-member-avatar-item-img {
   width: 100%;
   height: 100%;
@@ -703,6 +692,7 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
     margin-left: 0px;
     gap: 0px;
   }
+
   .article-main-container,
   .header-item.main-item {
     width: calc(70% - 20px);

From 4b8229b0a12bf48d28bb0ae25b0680ba0a445b6b Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Wed, 24 Sep 2025 01:21:12 +0800
Subject: [PATCH 06/12] feat: refresh base user avatar styling

---
 frontend_nuxt/components/BaseUserAvatar.vue | 112 ++++++++++++++++++--
 1 file changed, 103 insertions(+), 9 deletions(-)

diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
index bfaae5071..78295542f 100644
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -1,13 +1,18 @@
 <template>
-  <NuxtLink
-    :to="resolvedLink"
+  <component
+    :is="wrapperTag"
+    :to="isLink ? resolvedLink : undefined"
     class="base-user-avatar"
     :class="wrapperClass"
     :style="wrapperStyle"
     v-bind="wrapperAttrs"
+    :role="isLink ? undefined : 'img'"
+    :aria-label="altText"
+    :title="altText"
   >
+    <span class="base-user-avatar-backdrop" aria-hidden="true" />
     <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
-  </NuxtLink>
+  </component>
 </template>
 
 <script setup>
@@ -76,15 +81,45 @@ const sizeStyle = computed(() => {
   return { width: value, height: value }
 })
 
-const wrapperStyle = computed(() => {
-  const attrStyle = attrs.style
-  return [sizeStyle.value, attrStyle]
+const accentHue = computed(() => {
+  const seed = props.userId ?? props.alt
+  const source = seed !== undefined && seed !== null ? String(seed) : ''
+  if (!source) return 198
+  let hash = 0
+  for (let index = 0; index < source.length; index += 1) {
+    hash = (hash << 5) - hash + source.charCodeAt(index)
+    hash |= 0
+  }
+  return Math.abs(hash) % 360
 })
 
-const wrapperClass = computed(() => [attrs.class, { 'is-rounded': props.rounded }])
+const accentStyles = computed(() => {
+  const hue = accentHue.value
+  return {
+    '--avatar-accent': `hsl(${hue}, 74%, 54%)`,
+    '--avatar-accent-light': `hsl(${hue}, 95%, 82%)`,
+    '--avatar-accent-soft': `hsl(${hue}, 96%, 95%)`,
+    '--avatar-accent-border': `hsla(${hue}, 70%, 48%, 0.28)`,
+    '--avatar-accent-shadow': `hsla(${hue}, 68%, 36%, 0.2)`,
+  }
+})
+
+const wrapperStyle = computed(() => {
+  const attrStyle = attrs.style
+  return [accentStyles.value, sizeStyle.value, attrStyle]
+})
+
+const isLink = computed(() => !props.disableLink && !!resolvedLink.value)
+
+const wrapperTag = computed(() => (isLink.value ? 'NuxtLink' : 'div'))
+
+const wrapperClass = computed(() => [
+  attrs.class,
+  { 'is-rounded': props.rounded, 'is-interactive': isLink.value },
+])
 
 const wrapperAttrs = computed(() => {
-  const { class: _class, style: _style, ...rest } = attrs
+  const { class: _class, style: _style, to: _to, href: _href, ...rest } = attrs
   return rest
 })
 
@@ -97,11 +132,26 @@ function onError() {
 
 <style scoped>
 .base-user-avatar {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background-color: var(--avatar-placeholder-color, #f0f0f0);
+  border-radius: 16px;
+  background: linear-gradient(
+    140deg,
+    var(--avatar-accent-soft, rgba(17, 182, 197, 0.12)) 0%,
+    var(--avatar-accent-light, rgba(17, 182, 197, 0.22)) 100%
+  );
+  border: 1px solid var(--avatar-accent-border, rgba(17, 182, 197, 0.2));
+  box-shadow:
+    0 1px 2px rgba(15, 52, 67, 0.08),
+    0 3px 8px var(--avatar-accent-shadow, rgba(17, 182, 197, 0.18));
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease,
+    border-color 0.3s ease,
+    background 0.3s ease;
 }
 
 .base-user-avatar.is-rounded {
@@ -112,10 +162,54 @@ function onError() {
   border-radius: 0;
 }
 
+.base-user-avatar-backdrop {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.72), transparent 62%),
+    linear-gradient(150deg, rgba(255, 255, 255, 0.08), transparent),
+    linear-gradient(
+      140deg,
+      var(--avatar-accent-soft, rgba(17, 182, 197, 0.08)) 0%,
+      var(--avatar-accent-light, rgba(17, 182, 197, 0.18)) 100%
+    );
+  opacity: 0.75;
+  transition:
+    opacity 0.35s ease,
+    transform 0.35s ease;
+  z-index: 0;
+}
+
 .base-user-avatar-img {
+  position: relative;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
+  z-index: 1;
+  border-radius: inherit;
+  transition: transform 0.35s ease;
+}
+
+.base-user-avatar.is-interactive:hover,
+.base-user-avatar.is-interactive:focus-visible {
+  transform: translateY(-1px) scale(1.02);
+  border-color: var(--avatar-accent, var(--primary-color, #0a6e78));
+  box-shadow:
+    0 6px 16px var(--avatar-accent-shadow, rgba(17, 182, 197, 0.24)),
+    0 3px 6px rgba(15, 52, 67, 0.18);
+  outline: none;
+}
+
+.base-user-avatar.is-interactive:hover .base-user-avatar-backdrop,
+.base-user-avatar.is-interactive:focus-visible .base-user-avatar-backdrop {
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.base-user-avatar.is-interactive:hover .base-user-avatar-img,
+.base-user-avatar.is-interactive:focus-visible .base-user-avatar-img {
+  transform: scale(1.02);
 }
 </style>

From 7d4479101142abd3a2f8bcdc34a9cccbabdd80a9 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Wed, 24 Sep 2025 01:22:50 +0800
Subject: [PATCH 07/12] Revert "feat: refresh base user avatar styling"

This reverts commit 4b8229b0a12bf48d28bb0ae25b0680ba0a445b6b.
---
 frontend_nuxt/components/BaseUserAvatar.vue | 108 ++------------------
 1 file changed, 7 insertions(+), 101 deletions(-)

diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
index 78295542f..bfaae5071 100644
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -1,18 +1,13 @@
 <template>
-  <component
-    :is="wrapperTag"
-    :to="isLink ? resolvedLink : undefined"
+  <NuxtLink
+    :to="resolvedLink"
     class="base-user-avatar"
     :class="wrapperClass"
     :style="wrapperStyle"
     v-bind="wrapperAttrs"
-    :role="isLink ? undefined : 'img'"
-    :aria-label="altText"
-    :title="altText"
   >
-    <span class="base-user-avatar-backdrop" aria-hidden="true" />
     <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
-  </component>
+  </NuxtLink>
 </template>
 
 <script setup>
@@ -81,45 +76,15 @@ const sizeStyle = computed(() => {
   return { width: value, height: value }
 })
 
-const accentHue = computed(() => {
-  const seed = props.userId ?? props.alt
-  const source = seed !== undefined && seed !== null ? String(seed) : ''
-  if (!source) return 198
-  let hash = 0
-  for (let index = 0; index < source.length; index += 1) {
-    hash = (hash << 5) - hash + source.charCodeAt(index)
-    hash |= 0
-  }
-  return Math.abs(hash) % 360
-})
-
-const accentStyles = computed(() => {
-  const hue = accentHue.value
-  return {
-    '--avatar-accent': `hsl(${hue}, 74%, 54%)`,
-    '--avatar-accent-light': `hsl(${hue}, 95%, 82%)`,
-    '--avatar-accent-soft': `hsl(${hue}, 96%, 95%)`,
-    '--avatar-accent-border': `hsla(${hue}, 70%, 48%, 0.28)`,
-    '--avatar-accent-shadow': `hsla(${hue}, 68%, 36%, 0.2)`,
-  }
-})
-
 const wrapperStyle = computed(() => {
   const attrStyle = attrs.style
-  return [accentStyles.value, sizeStyle.value, attrStyle]
+  return [sizeStyle.value, attrStyle]
 })
 
-const isLink = computed(() => !props.disableLink && !!resolvedLink.value)
-
-const wrapperTag = computed(() => (isLink.value ? 'NuxtLink' : 'div'))
-
-const wrapperClass = computed(() => [
-  attrs.class,
-  { 'is-rounded': props.rounded, 'is-interactive': isLink.value },
-])
+const wrapperClass = computed(() => [attrs.class, { 'is-rounded': props.rounded }])
 
 const wrapperAttrs = computed(() => {
-  const { class: _class, style: _style, to: _to, href: _href, ...rest } = attrs
+  const { class: _class, style: _style, ...rest } = attrs
   return rest
 })
 
@@ -132,26 +97,11 @@ function onError() {
 
 <style scoped>
 .base-user-avatar {
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border-radius: 16px;
-  background: linear-gradient(
-    140deg,
-    var(--avatar-accent-soft, rgba(17, 182, 197, 0.12)) 0%,
-    var(--avatar-accent-light, rgba(17, 182, 197, 0.22)) 100%
-  );
-  border: 1px solid var(--avatar-accent-border, rgba(17, 182, 197, 0.2));
-  box-shadow:
-    0 1px 2px rgba(15, 52, 67, 0.08),
-    0 3px 8px var(--avatar-accent-shadow, rgba(17, 182, 197, 0.18));
-  transition:
-    transform 0.3s ease,
-    box-shadow 0.3s ease,
-    border-color 0.3s ease,
-    background 0.3s ease;
+  background-color: var(--avatar-placeholder-color, #f0f0f0);
 }
 
 .base-user-avatar.is-rounded {
@@ -162,54 +112,10 @@ function onError() {
   border-radius: 0;
 }
 
-.base-user-avatar-backdrop {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background:
-    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.72), transparent 62%),
-    linear-gradient(150deg, rgba(255, 255, 255, 0.08), transparent),
-    linear-gradient(
-      140deg,
-      var(--avatar-accent-soft, rgba(17, 182, 197, 0.08)) 0%,
-      var(--avatar-accent-light, rgba(17, 182, 197, 0.18)) 100%
-    );
-  opacity: 0.75;
-  transition:
-    opacity 0.35s ease,
-    transform 0.35s ease;
-  z-index: 0;
-}
-
 .base-user-avatar-img {
-  position: relative;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
-  z-index: 1;
-  border-radius: inherit;
-  transition: transform 0.35s ease;
-}
-
-.base-user-avatar.is-interactive:hover,
-.base-user-avatar.is-interactive:focus-visible {
-  transform: translateY(-1px) scale(1.02);
-  border-color: var(--avatar-accent, var(--primary-color, #0a6e78));
-  box-shadow:
-    0 6px 16px var(--avatar-accent-shadow, rgba(17, 182, 197, 0.24)),
-    0 3px 6px rgba(15, 52, 67, 0.18);
-  outline: none;
-}
-
-.base-user-avatar.is-interactive:hover .base-user-avatar-backdrop,
-.base-user-avatar.is-interactive:focus-visible .base-user-avatar-backdrop {
-  opacity: 1;
-  transform: scale(1.05);
-}
-
-.base-user-avatar.is-interactive:hover .base-user-avatar-img,
-.base-user-avatar.is-interactive:focus-visible .base-user-avatar-img {
-  transform: scale(1.02);
 }
 </style>

From c68c5985f67d5f92a629798dce7a50ce7838d69c Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Wed, 24 Sep 2025 01:23:12 +0800
Subject: [PATCH 08/12] refine BaseUserAvatar styling

---
 frontend_nuxt/components/BaseUserAvatar.vue | 197 +++++++++++++++++++-
 1 file changed, 191 insertions(+), 6 deletions(-)

diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
index bfaae5071..ea4fcb12f 100644
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -6,7 +6,8 @@
     :style="wrapperStyle"
     v-bind="wrapperAttrs"
   >
-    <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
+    <BaseImage :src="currentSrc" :alt="altText" :class="imageClass" @error="onError" />
+    <span v-if="showInitial" class="base-user-avatar-initial">{{ userInitial }}</span>
   </NuxtLink>
 </template>
 
@@ -69,19 +70,121 @@ const resolvedLink = computed(() => {
 
 const altText = computed(() => props.alt || '用户头像')
 
+const identifier = computed(() => {
+  if (props.userId !== null && props.userId !== undefined && props.userId !== '') {
+    return String(props.userId)
+  }
+  if (props.alt && props.alt.trim()) {
+    return props.alt.trim()
+  }
+  return altText.value
+})
+
+const initialSource = computed(() => {
+  if (props.alt && props.alt.trim() && props.alt.trim() !== '用户头像') {
+    return props.alt.trim()
+  }
+  if (attrs.title && typeof attrs.title === 'string' && attrs.title.trim()) {
+    return attrs.title.trim()
+  }
+  if (props.userId !== null && props.userId !== undefined && props.userId !== '') {
+    return String(props.userId)
+  }
+  return ''
+})
+
+const isDefaultAvatar = computed(() => currentSrc.value === DEFAULT_AVATAR)
+
+function parseCssSize(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return { numeric: value, unit: 'px' }
+  }
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  const directNumber = Number(trimmed)
+  if (!Number.isNaN(directNumber)) {
+    return { numeric: directNumber, unit: 'px' }
+  }
+  const match = trimmed.match(/^(-?\d*\.?\d+)([a-z%]+)$/i)
+  if (!match) return null
+  return { numeric: Number(match[1]), unit: match[2] }
+}
+
 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 parsed = parseCssSize(value)
+  const style = { width: value, height: value, '--avatar-size': value }
+  if (parsed && Number.isFinite(parsed.numeric)) {
+    const computedFont = (parsed.numeric * 0.42).toFixed(2)
+    const normalized = computedFont.replace(/\.00$/, '')
+    style['--avatar-font-size'] = `${normalized}${parsed.unit}`
+  }
+  return style
+})
+
+function stringToColorSeed(value) {
+  if (!value) return 0
+  let hash = 0
+  for (let i = 0; i < value.length; i += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(i)
+    hash |= 0
+  }
+  return Math.abs(hash)
+}
+
+const accentStyle = computed(() => {
+  if (!isDefaultAvatar.value) return null
+  const seed = stringToColorSeed(identifier.value)
+  const hue = seed % 360
+  const altHue = (hue + 37) % 360
+  const saturation = 72
+  const lightness = 78
+  const start = `hsl(${hue}, ${saturation}%, ${Math.min(lightness + 8, 95)}%)`
+  const end = `hsl(${altHue}, ${Math.max(saturation - 12, 45)}%, ${Math.max(lightness - 12, 48)}%)`
+  return {
+    '--avatar-background': `linear-gradient(135deg, ${start}, ${end})`,
+    '--avatar-border-color': `hsla(${hue}, ${Math.max(saturation - 24, 32)}%, ${Math.max(
+      lightness - 35,
+      28,
+    )}%, 0.55)`,
+    '--avatar-text-color': '#ffffff',
+  }
 })
 
 const wrapperStyle = computed(() => {
   const attrStyle = attrs.style
-  return [sizeStyle.value, attrStyle]
+  return [
+    { '--avatar-font-size': 'clamp(0.75rem, 0.6rem + 0.4vw, 1.75rem)' },
+    sizeStyle.value,
+    accentStyle.value,
+    attrStyle,
+  ]
 })
 
-const wrapperClass = computed(() => [attrs.class, { 'is-rounded': props.rounded }])
+const wrapperClass = computed(() => [
+  attrs.class,
+  {
+    'is-rounded': props.rounded,
+    'has-default': isDefaultAvatar.value,
+    'is-interactive': !props.disableLink && Boolean(resolvedLink.value),
+  },
+])
+
+const imageClass = computed(() => ['base-user-avatar-img', { 'is-default': isDefaultAvatar.value }])
+
+const userInitial = computed(() => {
+  const source = initialSource.value || ''
+  const trimmed = source.trim()
+  if (!trimmed) return ''
+  const match = trimmed.match(/[\p{L}\p{N}]/u)
+  if (match && match[0]) return match[0].toUpperCase()
+  return trimmed.charAt(0).toUpperCase()
+})
+
+const showInitial = computed(() => isDefaultAvatar.value && Boolean(userInitial.value))
 
 const wrapperAttrs = computed(() => {
   const { class: _class, style: _style, ...rest } = attrs
@@ -97,11 +200,28 @@ function onError() {
 
 <style scoped>
 .base-user-avatar {
+  --avatar-background: var(--avatar-placeholder-color, #f0f0f0);
+  --avatar-border-color: rgba(15, 23, 42, 0.08);
+  --avatar-text-color: rgba(255, 255, 255, 0.86);
+  --avatar-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
+  --avatar-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.16);
+  --avatar-size: 3rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background-color: var(--avatar-placeholder-color, #f0f0f0);
+  position: relative;
+  background: var(--avatar-background);
+  border: 1px solid var(--avatar-border-color);
+  border-radius: var(--avatar-border-radius, 16px);
+  box-shadow: var(--avatar-shadow);
+  color: var(--avatar-text-color);
+  transition:
+    transform 0.28s ease,
+    box-shadow 0.32s ease,
+    border-color 0.32s ease,
+    filter 0.28s ease;
+  isolation: isolate;
 }
 
 .base-user-avatar.is-rounded {
@@ -109,7 +229,35 @@ function onError() {
 }
 
 .base-user-avatar:not(.is-rounded) {
-  border-radius: 0;
+  border-radius: var(--avatar-border-radius, 16px);
+}
+
+.base-user-avatar.is-interactive {
+  cursor: pointer;
+}
+
+.base-user-avatar.is-interactive:hover,
+.base-user-avatar.is-interactive:focus-visible {
+  transform: translateY(-1px) scale(1.01);
+  box-shadow: var(--avatar-shadow-hover);
+  border-color: rgba(59, 130, 246, 0.4);
+}
+
+.base-user-avatar.has-default::after {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  border-radius: inherit;
+  background: rgba(15, 23, 42, 0.12);
+  mix-blend-mode: soft-light;
+  opacity: 0.25;
+  pointer-events: none;
+  transition: opacity 0.28s ease;
+}
+
+.base-user-avatar.has-default:hover::after,
+.base-user-avatar.has-default:focus-visible::after {
+  opacity: 0.18;
 }
 
 .base-user-avatar-img {
@@ -117,5 +265,42 @@ function onError() {
   height: 100%;
   object-fit: cover;
   display: block;
+  filter: saturate(108%);
+  transition:
+    opacity 0.35s ease,
+    transform 0.35s ease,
+    filter 0.35s ease;
+}
+
+.base-user-avatar-img.is-default {
+  opacity: 0.32;
+  filter: saturate(90%) brightness(1.05);
+  mix-blend-mode: multiply;
+}
+
+.base-user-avatar-initial {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: var(--avatar-font-size, calc(var(--avatar-size) * 0.42));
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  pointer-events: none;
+  user-select: none;
+  color: inherit;
+  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .base-user-avatar {
+    transition: none;
+  }
+
+  .base-user-avatar-img {
+    transition: none;
+  }
 }
 </style>

From 612881f1b1d18ce2df421aa0f01fb444a1b69d36 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Wed, 24 Sep 2025 01:31:05 +0800
Subject: [PATCH 09/12] Revert "refine BaseUserAvatar styling"

This reverts commit c68c5985f67d5f92a629798dce7a50ce7838d69c.
---
 frontend_nuxt/components/BaseUserAvatar.vue | 197 +-------------------
 1 file changed, 6 insertions(+), 191 deletions(-)

diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
index ea4fcb12f..bfaae5071 100644
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -6,8 +6,7 @@
     :style="wrapperStyle"
     v-bind="wrapperAttrs"
   >
-    <BaseImage :src="currentSrc" :alt="altText" :class="imageClass" @error="onError" />
-    <span v-if="showInitial" class="base-user-avatar-initial">{{ userInitial }}</span>
+    <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
   </NuxtLink>
 </template>
 
@@ -70,121 +69,19 @@ const resolvedLink = computed(() => {
 
 const altText = computed(() => props.alt || '用户头像')
 
-const identifier = computed(() => {
-  if (props.userId !== null && props.userId !== undefined && props.userId !== '') {
-    return String(props.userId)
-  }
-  if (props.alt && props.alt.trim()) {
-    return props.alt.trim()
-  }
-  return altText.value
-})
-
-const initialSource = computed(() => {
-  if (props.alt && props.alt.trim() && props.alt.trim() !== '用户头像') {
-    return props.alt.trim()
-  }
-  if (attrs.title && typeof attrs.title === 'string' && attrs.title.trim()) {
-    return attrs.title.trim()
-  }
-  if (props.userId !== null && props.userId !== undefined && props.userId !== '') {
-    return String(props.userId)
-  }
-  return ''
-})
-
-const isDefaultAvatar = computed(() => currentSrc.value === DEFAULT_AVATAR)
-
-function parseCssSize(value) {
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return { numeric: value, unit: 'px' }
-  }
-  if (typeof value !== 'string') return null
-  const trimmed = value.trim()
-  if (!trimmed) return null
-  const directNumber = Number(trimmed)
-  if (!Number.isNaN(directNumber)) {
-    return { numeric: directNumber, unit: 'px' }
-  }
-  const match = trimmed.match(/^(-?\d*\.?\d+)([a-z%]+)$/i)
-  if (!match) return null
-  return { numeric: Number(match[1]), unit: match[2] }
-}
-
 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
-  const parsed = parseCssSize(value)
-  const style = { width: value, height: value, '--avatar-size': value }
-  if (parsed && Number.isFinite(parsed.numeric)) {
-    const computedFont = (parsed.numeric * 0.42).toFixed(2)
-    const normalized = computedFont.replace(/\.00$/, '')
-    style['--avatar-font-size'] = `${normalized}${parsed.unit}`
-  }
-  return style
-})
-
-function stringToColorSeed(value) {
-  if (!value) return 0
-  let hash = 0
-  for (let i = 0; i < value.length; i += 1) {
-    hash = (hash << 5) - hash + value.charCodeAt(i)
-    hash |= 0
-  }
-  return Math.abs(hash)
-}
-
-const accentStyle = computed(() => {
-  if (!isDefaultAvatar.value) return null
-  const seed = stringToColorSeed(identifier.value)
-  const hue = seed % 360
-  const altHue = (hue + 37) % 360
-  const saturation = 72
-  const lightness = 78
-  const start = `hsl(${hue}, ${saturation}%, ${Math.min(lightness + 8, 95)}%)`
-  const end = `hsl(${altHue}, ${Math.max(saturation - 12, 45)}%, ${Math.max(lightness - 12, 48)}%)`
-  return {
-    '--avatar-background': `linear-gradient(135deg, ${start}, ${end})`,
-    '--avatar-border-color': `hsla(${hue}, ${Math.max(saturation - 24, 32)}%, ${Math.max(
-      lightness - 35,
-      28,
-    )}%, 0.55)`,
-    '--avatar-text-color': '#ffffff',
-  }
+  return { width: value, height: value }
 })
 
 const wrapperStyle = computed(() => {
   const attrStyle = attrs.style
-  return [
-    { '--avatar-font-size': 'clamp(0.75rem, 0.6rem + 0.4vw, 1.75rem)' },
-    sizeStyle.value,
-    accentStyle.value,
-    attrStyle,
-  ]
+  return [sizeStyle.value, attrStyle]
 })
 
-const wrapperClass = computed(() => [
-  attrs.class,
-  {
-    'is-rounded': props.rounded,
-    'has-default': isDefaultAvatar.value,
-    'is-interactive': !props.disableLink && Boolean(resolvedLink.value),
-  },
-])
-
-const imageClass = computed(() => ['base-user-avatar-img', { 'is-default': isDefaultAvatar.value }])
-
-const userInitial = computed(() => {
-  const source = initialSource.value || ''
-  const trimmed = source.trim()
-  if (!trimmed) return ''
-  const match = trimmed.match(/[\p{L}\p{N}]/u)
-  if (match && match[0]) return match[0].toUpperCase()
-  return trimmed.charAt(0).toUpperCase()
-})
-
-const showInitial = computed(() => isDefaultAvatar.value && Boolean(userInitial.value))
+const wrapperClass = computed(() => [attrs.class, { 'is-rounded': props.rounded }])
 
 const wrapperAttrs = computed(() => {
   const { class: _class, style: _style, ...rest } = attrs
@@ -200,28 +97,11 @@ function onError() {
 
 <style scoped>
 .base-user-avatar {
-  --avatar-background: var(--avatar-placeholder-color, #f0f0f0);
-  --avatar-border-color: rgba(15, 23, 42, 0.08);
-  --avatar-text-color: rgba(255, 255, 255, 0.86);
-  --avatar-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
-  --avatar-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.16);
-  --avatar-size: 3rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  position: relative;
-  background: var(--avatar-background);
-  border: 1px solid var(--avatar-border-color);
-  border-radius: var(--avatar-border-radius, 16px);
-  box-shadow: var(--avatar-shadow);
-  color: var(--avatar-text-color);
-  transition:
-    transform 0.28s ease,
-    box-shadow 0.32s ease,
-    border-color 0.32s ease,
-    filter 0.28s ease;
-  isolation: isolate;
+  background-color: var(--avatar-placeholder-color, #f0f0f0);
 }
 
 .base-user-avatar.is-rounded {
@@ -229,35 +109,7 @@ function onError() {
 }
 
 .base-user-avatar:not(.is-rounded) {
-  border-radius: var(--avatar-border-radius, 16px);
-}
-
-.base-user-avatar.is-interactive {
-  cursor: pointer;
-}
-
-.base-user-avatar.is-interactive:hover,
-.base-user-avatar.is-interactive:focus-visible {
-  transform: translateY(-1px) scale(1.01);
-  box-shadow: var(--avatar-shadow-hover);
-  border-color: rgba(59, 130, 246, 0.4);
-}
-
-.base-user-avatar.has-default::after {
-  content: '';
-  position: absolute;
-  inset: 1px;
-  border-radius: inherit;
-  background: rgba(15, 23, 42, 0.12);
-  mix-blend-mode: soft-light;
-  opacity: 0.25;
-  pointer-events: none;
-  transition: opacity 0.28s ease;
-}
-
-.base-user-avatar.has-default:hover::after,
-.base-user-avatar.has-default:focus-visible::after {
-  opacity: 0.18;
+  border-radius: 0;
 }
 
 .base-user-avatar-img {
@@ -265,42 +117,5 @@ function onError() {
   height: 100%;
   object-fit: cover;
   display: block;
-  filter: saturate(108%);
-  transition:
-    opacity 0.35s ease,
-    transform 0.35s ease,
-    filter 0.35s ease;
-}
-
-.base-user-avatar-img.is-default {
-  opacity: 0.32;
-  filter: saturate(90%) brightness(1.05);
-  mix-blend-mode: multiply;
-}
-
-.base-user-avatar-initial {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: var(--avatar-font-size, calc(var(--avatar-size) * 0.42));
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  pointer-events: none;
-  user-select: none;
-  color: inherit;
-  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .base-user-avatar {
-    transition: none;
-  }
-
-  .base-user-avatar-img {
-    transition: none;
-  }
 }
 </style>

From 229439aa05d262a3a548c758fe3a86625de59c32 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Wed, 24 Sep 2025 01:31:31 +0800
Subject: [PATCH 10/12] style: enhance BaseUserAvatar presentation

---
 frontend_nuxt/components/BaseUserAvatar.vue | 72 ++++++++++++++++++++-
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
index bfaae5071..24af9b176 100644
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -97,11 +97,33 @@ function onError() {
 
 <style scoped>
 .base-user-avatar {
+  --base-avatar-ring-width: var(--avatar-ring-width, 1.5px);
+  --base-avatar-ring: var(--avatar-ring, linear-gradient(135deg, #6366f1, #ec4899));
+  --base-avatar-surface: var(
+    --avatar-surface,
+    var(--avatar-placeholder-color, rgba(255, 255, 255, 0.88))
+  );
+  --base-avatar-shadow: var(--avatar-shadow, 0 12px 30px -18px rgba(15, 23, 42, 0.55));
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background-color: var(--avatar-placeholder-color, #f0f0f0);
+  position: relative;
+  box-sizing: border-box;
+  color: inherit;
+  border-radius: 50%;
+  border: var(--base-avatar-ring-width) solid transparent;
+  background:
+    var(--base-avatar-surface) padding-box,
+    var(--base-avatar-ring) border-box;
+  background-clip: padding-box, border-box;
+  background-origin: border-box;
+  box-shadow: var(--base-avatar-shadow);
+  transition:
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    filter 0.25s ease;
 }
 
 .base-user-avatar.is-rounded {
@@ -109,7 +131,7 @@ function onError() {
 }
 
 .base-user-avatar:not(.is-rounded) {
-  border-radius: 0;
+  border-radius: var(--avatar-square-radius, 0);
 }
 
 .base-user-avatar-img {
@@ -117,5 +139,51 @@ function onError() {
   height: 100%;
   object-fit: cover;
   display: block;
+  border-radius: inherit;
+  position: relative;
+  z-index: 1;
+  transition:
+    transform 0.25s ease,
+    filter 0.25s ease;
+  backface-visibility: hidden;
+}
+
+.base-user-avatar:hover,
+.base-user-avatar:focus-visible {
+  transform: translateY(-1px) scale(1.02);
+  box-shadow: 0 18px 35px -20px rgba(15, 23, 42, 0.65);
+}
+
+.base-user-avatar:focus-visible {
+  outline: 2px solid rgba(96, 165, 250, 0.6);
+  outline-offset: 3px;
+}
+
+.base-user-avatar:active {
+  transform: translateY(0) scale(0.99);
+}
+
+.base-user-avatar:hover .base-user-avatar-img,
+.base-user-avatar:focus-visible .base-user-avatar-img {
+  transform: scale(1.03);
+  filter: saturate(1.08);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .base-user-avatar,
+  .base-user-avatar-img {
+    transition: none;
+  }
+
+  .base-user-avatar:hover,
+  .base-user-avatar:focus-visible,
+  .base-user-avatar:active {
+    transform: none;
+  }
+
+  .base-user-avatar:hover .base-user-avatar-img,
+  .base-user-avatar:focus-visible .base-user-avatar-img {
+    transform: none;
+  }
 }
 </style>

From 77507f7b18902e493ffb9f8f31d177d92ba42499 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Wed, 24 Sep 2025 01:38:41 +0800
Subject: [PATCH 11/12] Revert "style: enhance BaseUserAvatar presentation"

This reverts commit 229439aa05d262a3a548c758fe3a86625de59c32.
---
 frontend_nuxt/components/BaseUserAvatar.vue | 72 +--------------------
 1 file changed, 2 insertions(+), 70 deletions(-)

diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
index 24af9b176..bfaae5071 100644
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -97,33 +97,11 @@ function onError() {
 
 <style scoped>
 .base-user-avatar {
-  --base-avatar-ring-width: var(--avatar-ring-width, 1.5px);
-  --base-avatar-ring: var(--avatar-ring, linear-gradient(135deg, #6366f1, #ec4899));
-  --base-avatar-surface: var(
-    --avatar-surface,
-    var(--avatar-placeholder-color, rgba(255, 255, 255, 0.88))
-  );
-  --base-avatar-shadow: var(--avatar-shadow, 0 12px 30px -18px rgba(15, 23, 42, 0.55));
-
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  position: relative;
-  box-sizing: border-box;
-  color: inherit;
-  border-radius: 50%;
-  border: var(--base-avatar-ring-width) solid transparent;
-  background:
-    var(--base-avatar-surface) padding-box,
-    var(--base-avatar-ring) border-box;
-  background-clip: padding-box, border-box;
-  background-origin: border-box;
-  box-shadow: var(--base-avatar-shadow);
-  transition:
-    transform 0.25s ease,
-    box-shadow 0.25s ease,
-    filter 0.25s ease;
+  background-color: var(--avatar-placeholder-color, #f0f0f0);
 }
 
 .base-user-avatar.is-rounded {
@@ -131,7 +109,7 @@ function onError() {
 }
 
 .base-user-avatar:not(.is-rounded) {
-  border-radius: var(--avatar-square-radius, 0);
+  border-radius: 0;
 }
 
 .base-user-avatar-img {
@@ -139,51 +117,5 @@ function onError() {
   height: 100%;
   object-fit: cover;
   display: block;
-  border-radius: inherit;
-  position: relative;
-  z-index: 1;
-  transition:
-    transform 0.25s ease,
-    filter 0.25s ease;
-  backface-visibility: hidden;
-}
-
-.base-user-avatar:hover,
-.base-user-avatar:focus-visible {
-  transform: translateY(-1px) scale(1.02);
-  box-shadow: 0 18px 35px -20px rgba(15, 23, 42, 0.65);
-}
-
-.base-user-avatar:focus-visible {
-  outline: 2px solid rgba(96, 165, 250, 0.6);
-  outline-offset: 3px;
-}
-
-.base-user-avatar:active {
-  transform: translateY(0) scale(0.99);
-}
-
-.base-user-avatar:hover .base-user-avatar-img,
-.base-user-avatar:focus-visible .base-user-avatar-img {
-  transform: scale(1.03);
-  filter: saturate(1.08);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .base-user-avatar,
-  .base-user-avatar-img {
-    transition: none;
-  }
-
-  .base-user-avatar:hover,
-  .base-user-avatar:focus-visible,
-  .base-user-avatar:active {
-    transform: none;
-  }
-
-  .base-user-avatar:hover .base-user-avatar-img,
-  .base-user-avatar:focus-visible .base-user-avatar-img {
-    transform: none;
-  }
 }
 </style>

From bda377336d80913ad1f2153645017838449725eb Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Wed, 24 Sep 2025 01:51:02 +0800
Subject: [PATCH 12/12] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E5=A4=B4=E5=83=8F=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/BaseUserAvatar.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend_nuxt/components/BaseUserAvatar.vue b/frontend_nuxt/components/BaseUserAvatar.vue
index bfaae5071..6e0b62ab5 100644
--- a/frontend_nuxt/components/BaseUserAvatar.vue
+++ b/frontend_nuxt/components/BaseUserAvatar.vue
@@ -102,6 +102,19 @@ function onError() {
   justify-content: center;
   overflow: hidden;
   background-color: var(--avatar-placeholder-color, #f0f0f0);
+  /* 先用box-sizing: border-box，保证加border后宽高不变，圆形不变形 */
+  box-sizing: border-box;
+  border: 1.5px solid var(--normal-border-color);
+  transition: all 0.6s ease;
+}
+
+.base-user-avatar:hover {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+  transform: scale(1.05);
+}
+
+.base-user-avatar:active {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
 }
 
 .base-user-avatar.is-rounded {