Revert "feat: add BaseUserAvatar and unify avatar usage"

This reverts commit efbb83924b.

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 {

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

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 {

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 {

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 {