feat: add BaseUserAvatar and unify avatar usage

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),
       })

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 {