fix: 移动端--频道--表情无法显示完全 #994

frontend_nuxt/assets/global.css

@@ -108,7 +108,6 @@ body {
 
 .vditor-toolbar--pin {
   top: calc(var(--header-height) + 1px) !important;
-  z-index: 20;
 }
 
 .vditor-panel {
@@ -134,26 +133,6 @@ body {
   animation: spin 1s linear infinite;
 }
 
-/* .vditor {
-  --textarea-background-color: transparent;
-  border: none !important;
-  box-shadow: none !important;
-}
-
-.vditor-reset {
-  color: var(--text-color);
-}
-
-.vditor-toolbar {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-} */
-
-/* .vditor-toolbar {
-  position: relative !important;
-} */
-
 /*************************
  * Markdown 渲染样式
  *************************/
@@ -333,10 +312,6 @@ body {
     min-height: 100px;
   }
 
-  .vditor-toolbar {
-    overflow-x: auto;
-  }
-
   .about-content h1,
   .info-content-text h1 {
     font-size: 20px;
@@ -354,8 +329,8 @@ body {
     margin-bottom: 3px;
   }
 
-  .vditor-toolbar--pin {
+  .vditor-panel {
-    top: 0 !important;
+    min-width: 330px;
   }
 
   .about-content li,
@@ -367,11 +342,6 @@ body {
     line-height: 1.5;
   }
 
-  .vditor-panel {
-    position: relative;
-    min-width: 0;
-  }
-
   .d2h-file-name {
     font-size: 14px !important;
   }

frontend_nuxt/components/BaseTimeline.vue

@@ -3,18 +3,10 @@
     <div class="timeline-item" v-for="(item, idx) in items" :key="idx">
       <div
         class="timeline-icon"
-        :class="{ clickable: !!item.iconClick || hasLink(item) }"
+        :class="{ clickable: !!item.iconClick }"
-        @click="onIconClick(item, $event)"
+        @click="item.iconClick && item.iconClick()"
       >
-        <BaseUserAvatar
+        <BaseImage v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
-          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"
@@ -30,28 +22,11 @@
 </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>
 
@@ -91,12 +66,8 @@ 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 {

frontend_nuxt/components/BaseUserAvatar.vue

@@ -1,189 +0,0 @@
-<template>
-  <NuxtLink
-    :to="resolvedLink"
-    class="base-user-avatar"
-    :class="wrapperClass"
-    :style="wrapperStyle"
-    v-bind="wrapperAttrs"
-  >
-    <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
-  </NuxtLink>
-</template>
-
-<script setup>
-import { computed, ref, watch } from 'vue'
-import { useAttrs } from 'vue'
-import BaseImage from './BaseImage.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 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 {
-  --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;
-}
-
-.base-user-avatar.is-rounded {
-  border-radius: 50%;
-}
-
-.base-user-avatar:not(.is-rounded) {
-  border-radius: var(--avatar-square-radius, 0);
-}
-
-.base-user-avatar-img {
-  width: 100%;
-  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>

frontend_nuxt/components/CommentItem.vue

@@ -26,12 +26,11 @@
           <span v-if="level >= 2" class="reply-item">
             <next class="reply-icon" />
             <span class="reply-info">
-              <BaseUserAvatar
+              <BaseImage
                 class="reply-avatar"
-                :src="comment.parentUserAvatar"
+                :src="comment.parentUserAvatar || '/default-avatar.svg'"
-                :user-id="comment.parentUserId"
+                alt="avatar"
-                :alt="comment.parentUserName"
+                @click="comment.parentUserClick && comment.parentUserClick()"
-                :disable-link="!comment.parentUserId"
               />
               <span class="reply-user-name">{{ comment.parentUserName }}</span>
             </span>
@@ -112,7 +111,6 @@ 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
 
@@ -261,7 +259,6 @@ 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,
@@ -273,12 +270,10 @@ 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()

frontend_nuxt/components/HeaderComponent.vue

@@ -70,14 +70,7 @@
           <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
-                <BaseUserAvatar
+                <img class="avatar-img" :src="avatar" alt="avatar" />
-                  class="avatar-img"
-                  :user-id="authState.userId"
-                  :src="avatar"
-                  alt="avatar"
-                  :width="32"
-                  :disable-link="true"
-                />
                 <down />
               </div>
             </template>
@@ -100,7 +93,6 @@ 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'

frontend_nuxt/components/MessageEditor.vue

@@ -159,12 +159,6 @@ export default {
   border: 1px solid var(--border-color);
   border-radius: 8px;
 }
-
-.vditor {
-  min-height: 50px;
-  max-height: 150px;
-}
-
 .message-bottom-container {
   display: flex;
   flex-direction: row;

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"
         :src="log.userAvatar"
-        :to="log.username ? `/users/${log.username}` : ''"
         alt="avatar"
-        :disable-link="!log.username"
+        @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>
@@ -56,8 +55,10 @@
 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 BaseUserAvatar from '~/components/BaseUserAvatar.vue'
+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'
@@ -134,12 +135,6 @@ 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;

frontend_nuxt/components/PostLottery.vue

@@ -53,24 +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"
         :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"
           :src="w.avatar"
           alt="avatar"
+          @click="gotoUser(w.id)"
         />
         <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
           {{ lotteryWinners[0].username }}
@@ -87,7 +87,6 @@ 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 },
@@ -107,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,13 +247,8 @@ const joinLottery = async () => {
   height: 30px;
   margin-left: 3px;
   border-radius: 50%;
-  cursor: pointer;
-}
-
-.prize-member-avatar :deep(.base-user-avatar-img) {
-  width: 100%;
-  height: 100%;
   object-fit: cover;
+  cursor: pointer;
 }
 
 .prize-member-winner {

frontend_nuxt/components/PostPoll.vue

@@ -17,13 +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"
                 :src="p.avatar"
                 alt="avatar"
+                @click="gotoUser(p.id)"
               />
             </div>
           </div>
@@ -119,7 +119,6 @@ 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 },
@@ -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) => {
@@ -428,10 +429,4 @@ const submitMultiPoll = async () => {
   border-radius: 50%;
   cursor: pointer;
 }
-
-.poll-participant-avatar :deep(.base-user-avatar-img) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
 </style>

frontend_nuxt/components/SearchPersonDropdown.vue

@@ -24,12 +24,10 @@
       </template>
       <template #option="{ option }">
         <div class="search-option-item">
-          <BaseUserAvatar
+          <BaseImage
-            :src="option.avatar"
+            :src="option.avatar || '/default-avatar.svg'"
-            :user-id="option.id"
-            :alt="option.username"
             class="avatar"
-            :disable-link="true"
+            @error="handleAvatarError"
           />
           <div class="result-body">
             <div class="result-main" v-html="highlight(option.username)"></div>
@@ -51,7 +49,6 @@ 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
 
@@ -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)
@@ -178,12 +179,6 @@ defineExpose({
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  overflow: hidden;
-}
-
-.avatar :deep(.base-user-avatar-img) {
-  width: 100%;
-  height: 100%;
   object-fit: cover;
 }
 

frontend_nuxt/components/UserList.vue

@@ -1,8 +1,8 @@
 <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">
+    <div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)">
-      <BaseUserAvatar :src="u.avatar" :user-id="u.id" alt="avatar" class="user-avatar" />
+      <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>
@@ -13,7 +13,6 @@
 
 <script setup>
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
-import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 
 defineProps({
   users: { type: Array, default: () => [] },
@@ -28,27 +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: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
   border-radius: 50%;
   flex-shrink: 0;
-}
-
-.user-avatar :deep(.base-user-avatar-img) {
-  width: 100%;
-  height: 100%;
   object-fit: cover;
 }
 .user-info {

frontend_nuxt/pages/index.vue

@@ -85,16 +85,14 @@
           </div>
 
           <div class="article-member-avatars-container">
-            <div v-for="member in article.members">
+            <NuxtLink
-              <BaseUserAvatar
+              v-for="member in article.members"
-                class="article-member-avatar-item-img"
+              :key="`${article.id}-${member.id}`"
-                :src="member.avatar"
+              class="article-member-avatar-item"
-                :user-id="member.id"
+              :to="`/users/${member.id}`"
-                alt="avatar"
+            >
-                :disable-link="true"
+              <BaseImage class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
-                :width="25"
+            </NuxtLink>
-              />
-            </div>
           </div>
 
           <div class="article-comments main-info-text">
@@ -140,7 +138,6 @@ 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({
@@ -386,6 +383,7 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
   selectedCategoryGlobal.value = newCategory
   selectedTagsGlobal.value = newTags
 })
+
 </script>
 
 <style scoped>
@@ -630,12 +628,14 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
   margin-left: 20px;
 }
 
-.article-member-avatar-item-img {
+.article-member-avatar-item {
-  width: 100%;
+  width: 25px;
-  height: 100%;
+  height: 25px;
+  border-radius: 50%;
+  overflow: hidden;
 }
 
-.article-member-avatar-item-img :deep(.base-user-avatar-img) {
+.article-member-avatar-item-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -692,7 +692,6 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
     margin-left: 0px;
     gap: 0px;
   }
-
   .article-main-container,
   .header-item.main-item {
     width: calc(70% - 20px);

frontend_nuxt/pages/message-box/[id].vue

@@ -44,12 +44,7 @@
             <div v-if="item.replyTo" class="reply-preview info-content-text">
               <div class="reply-header">
                 <next class="reply-icon" />
-                <BaseUserAvatar
+                <BaseImage class="reply-avatar" :src="item.replyTo.sender.avatar" alt="avatar" />
-                  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>
@@ -126,7 +121,6 @@ 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()
@@ -249,7 +243,6 @@ 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)
       },
@@ -335,7 +328,6 @@ async function sendMessage(content, clearInput) {
     messages.value.push({
       ...newMessage,
       src: newMessage.sender.avatar,
-      userId: newMessage.sender.id,
       iconClick: () => {
         openUser(newMessage.sender.id)
       },
@@ -411,7 +403,6 @@ const subscribeToConversation = () => {
       messages.value.push({
         ...parsedMessage,
         src: parsedMessage.sender.avatar,
-        userId: parsedMessage.sender.id,
         iconClick: () => openUser(parsedMessage.sender.id),
       })
 
@@ -695,12 +686,6 @@ 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;

frontend_nuxt/pages/message-box/index.vue

@@ -33,12 +33,11 @@
           @click="goToConversation(convo.id)"
         >
           <div class="conversation-avatar">
-            <BaseUserAvatar
+            <BaseImage
-              :src="getOtherParticipant(convo)?.avatar"
+              :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
-              :user-id="getOtherParticipant(convo)?.id"
               :alt="getOtherParticipant(convo)?.username || '用户'"
               class="avatar-img"
-              :disable-link="true"
+              @error="handleAvatarError"
             />
           </div>
 
@@ -131,7 +130,6 @@ 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([])
@@ -433,11 +431,6 @@ function minimize() {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-}
-
-.avatar-img :deep(.base-user-avatar-img) {
-  width: 100%;
-  height: 100%;
   object-fit: cover;
 }
 

frontend_nuxt/pages/posts/[id]/index.vue

@@ -48,13 +48,7 @@
       <div class="info-content-container author-info-container">
         <div class="user-avatar-container" @click="gotoProfile">
           <div class="user-avatar-item">
-            <BaseUserAvatar
+            <BaseImage class="user-avatar-item-img" :src="author.avatar" alt="avatar" />
-              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">
@@ -199,7 +193,6 @@ 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'
@@ -347,7 +340,7 @@ const mapComment = (
   iconClick: () => navigateTo(`/users/${c.author.id}`),
   parentUserName: parentUserName,
   parentUserAvatar: parentUserAvatar,
-  parentUserId: parentUserId,
+  parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
 })
 
 const changeLogIcon = (l) => {
@@ -1193,12 +1186,6 @@ 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;

frontend_nuxt/pages/settings.vue

@@ -15,13 +15,7 @@
         <div class="avatar-row">
           <!-- label 充当点击区域，内部隐藏 input -->
           <label class="avatar-container">
-            <BaseUserAvatar
+            <BaseImage :src="avatar" class="avatar-preview" alt="avatar" />
-              :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" />
@@ -80,7 +74,6 @@ 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'
@@ -94,7 +87,6 @@ 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)
@@ -111,7 +103,6 @@ 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()
@@ -280,11 +271,6 @@ const save = async () => {
   width: 80px;
   height: 80px;
   border-radius: 40px;
-}
-
-.avatar-preview :deep(.base-user-avatar-img) {
-  width: 100%;
-  height: 100%;
   object-fit: cover;
 }
 

frontend_nuxt/pages/users/[id].vue

@@ -7,12 +7,7 @@
     <div v-else>
       <div class="profile-page-header">
         <div class="profile-page-header-avatar">
-          <BaseUserAvatar
+          <BaseImage :src="user.avatar" alt="avatar" class="profile-page-header-avatar-img" />
-            :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>
@@ -277,7 +272,6 @@ 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'
@@ -658,11 +652,6 @@ 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;
 }
 
@@ -1091,7 +1080,6 @@ watch(selectedTab, async (val) => {
   .profile-page-header-avatar-img {
     width: 100px;
     height: 100px;
-    border-radius: 50%;
   }
 
   :deep(.base-tabs-item) {