fix: keep dropdown at bottom after loading more

Feature/user list and avatar

backend/src/main/java/com/openisle/controller/TagController.java

@@ -100,18 +100,32 @@ public class TagController {
   )
   public List<TagDto> list(
     @RequestParam(value = "keyword", required = false) String keyword,
+    @RequestParam(value = "page", required = false) Integer page,
+    @RequestParam(value = "pageSize", required = false) Integer pageSize,
     @RequestParam(value = "limit", required = false) Integer limit
   ) {
     List<Tag> tags = tagService.searchTags(keyword);
     List<Long> tagIds = tags.stream().map(Tag::getId).toList();
     Map<Long, Long> postCntByTagIds = postService.countPostsByTagIds(tagIds);
+    if (postCntByTagIds == null) {
+      postCntByTagIds = java.util.Collections.emptyMap();
+    }
+    Map<Long, Long> finalPostCntByTagIds = postCntByTagIds;
     List<TagDto> dtos = tags
       .stream()
-      .map(t -> tagMapper.toDto(t, postCntByTagIds.getOrDefault(t.getId(), 0L)))
+      .map(t -> tagMapper.toDto(t, finalPostCntByTagIds.getOrDefault(t.getId(), 0L)))
       .sorted((a, b) -> Long.compare(b.getCount(), a.getCount()))
       .collect(Collectors.toList());
+    if (page != null && pageSize != null && page >= 0 && pageSize > 0) {
+      int fromIndex = page * pageSize;
+      if (fromIndex >= dtos.size()) {
+        return java.util.Collections.emptyList();
+      }
+      int toIndex = Math.min(fromIndex + pageSize, dtos.size());
+      return new java.util.ArrayList<>(dtos.subList(fromIndex, toIndex));
+    }
     if (limit != null && limit > 0 && dtos.size() > limit) {
-      return dtos.subList(0, limit);
+      return new java.util.ArrayList<>(dtos.subList(0, limit));
     }
     return dtos;
   }

backend/src/test/java/com/openisle/controller/TagControllerTest.java

@@ -82,6 +82,7 @@ class TagControllerTest {
     t.setIcon("i2");
     t.setSmallIcon("s2");
     Mockito.when(tagService.searchTags(null)).thenReturn(List.of(t));
+    Mockito.when(postService.countPostsByTagIds(List.of(2L))).thenReturn(java.util.Map.of());
 
     mockMvc
       .perform(get("/api/tags"))
@@ -93,6 +94,31 @@ class TagControllerTest {
       .andExpect(jsonPath("$[0].smallIcon").value("s2"));
   }
 
+  @Test
+  void listTagsWithPagination() throws Exception {
+    Tag t1 = new Tag();
+    t1.setId(1L);
+    t1.setName("java");
+    Tag t2 = new Tag();
+    t2.setId(2L);
+    t2.setName("spring");
+    Mockito.when(tagService.searchTags(null)).thenReturn(List.of(t1, t2));
+    Mockito.when(postService.countPostsByTagIds(List.of(1L, 2L))).thenReturn(
+      java.util.Map.of(1L, 1L, 2L, 5L)
+    );
+
+    mockMvc
+      .perform(get("/api/tags").param("page", "1").param("pageSize", "1"))
+      .andExpect(status().isOk())
+      .andExpect(jsonPath("$", org.hamcrest.Matchers.hasSize(1)))
+      .andExpect(jsonPath("$[0].id").value(1));
+
+    mockMvc
+      .perform(get("/api/tags").param("page", "2").param("pageSize", "1"))
+      .andExpect(status().isOk())
+      .andExpect(jsonPath("$", org.hamcrest.Matchers.hasSize(0)));
+  }
+
   @Test
   void updateTag() throws Exception {
     Tag t = new Tag();

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 {
-    top: 0 !important;
+  .vditor-panel {
+    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,17 @@
     <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 || hasLink(item) }"
+        @click="onIconClick(item, $event)"
       >
         <BaseUserAvatar
           v-if="item.src"
-          :class="['timeline-img', { 'is-clickable': !!item.iconClick }]"
+          :src="item.src"
           :user-id="item.userId"
-          :avatar="item.src"
-          :username="item.userName || item.username"
-          :width="32"
-          :link="!item.iconClick"
-          @click.stop="item.iconClick && item.iconClick()"
+          :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(' '))"
@@ -31,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>
 
@@ -73,12 +89,14 @@ export default {
 }
 
 .timeline-img {
-  width: 32px;
-  height: 32px;
+  width: 100%;
+  height: 100%;
 }
 
-.timeline-img.is-clickable {
-  cursor: pointer;
+.timeline-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .timeline-emoji {

frontend_nuxt/components/BaseUserAvatar.vue

@@ -1,91 +1,94 @@
 <template>
-  <component :is="wrapperTag" v-bind="wrapperAttrs" :class="containerClass" :style="mergedStyle">
-    <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="handleError" />
-  </component>
+  <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],
-    required: true,
+    default: null,
   },
-  avatar: {
+  src: {
     type: String,
     default: '',
   },
-  username: {
-    type: String,
-    default: '',
-  },
-  width: {
-    type: [Number, String],
-    default: 40,
-  },
   alt: {
     type: String,
     default: '',
   },
-  link: {
+  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.avatar || DEFAULT_AVATAR)
+
+const currentSrc = ref(props.src || DEFAULT_AVATAR)
 
 watch(
-  () => props.avatar,
-  (newVal) => {
-    currentSrc.value = newVal || DEFAULT_AVATAR
+  () => props.src,
+  (value) => {
+    currentSrc.value = value || 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 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(() => {
-  if (props.alt) return props.alt
-  if (props.username) return `${props.username}的头像`
-  return '用户头像'
+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 containerClass = computed(() => {
-  const classes = ['base-user-avatar']
-  if (props.link) classes.push('is-link')
-  if (attrs.class) classes.push(attrs.class)
-  return classes
+const wrapperStyle = computed(() => {
+  const attrStyle = attrs.style
+  return [sizeStyle.value, attrStyle]
 })
 
-const mergedStyle = computed(() => {
-  if (!attrs.style) return sizeStyle.value
-  return [sizeStyle.value, attrs.style]
-})
+const wrapperClass = computed(() => [attrs.class, { 'is-rounded': props.rounded }])
 
 const wrapperAttrs = computed(() => {
   const { class: _class, style: _style, ...rest } = attrs
-  if (props.link) {
-    return {
-      ...rest,
-      to: `/users/${props.userId}`,
-    }
-  }
   return rest
 })
 
-function handleError() {
+function onError() {
   if (currentSrc.value !== DEFAULT_AVATAR) {
     currentSrc.value = DEFAULT_AVATAR
   }
@@ -97,19 +100,34 @@ function handleError() {
   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));
+  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.is-link {
-  cursor: pointer;
+.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 {
+  border-radius: 50%;
+}
+
+.base-user-avatar:not(.is-rounded) {
+  border-radius: 0;
 }
 
 .base-user-avatar-img {
   width: 100%;
   height: 100%;
-  border-radius: 50%;
   object-fit: cover;
   display: block;
 }

frontend_nuxt/components/CommentItem.vue

@@ -27,14 +27,11 @@
             <next class="reply-icon" />
             <span class="reply-info">
               <BaseUserAvatar
-                v-if="comment.parentUserName"
                 class="reply-avatar"
+                :src="comment.parentUserAvatar"
                 :user-id="comment.parentUserId"
-                :avatar="comment.parentUserAvatar"
-                :username="comment.parentUserName"
-                :width="20"
-                :link="Boolean(comment.parentUserId)"
-                @click="comment.parentUserClick && comment.parentUserClick()"
+                :alt="comment.parentUserName"
+                :disable-link="!comment.parentUserId"
               />
               <span class="reply-user-name">{{ comment.parentUserName }}</span>
             </span>
@@ -115,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
 
@@ -257,7 +255,6 @@ 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,
@@ -269,7 +266,6 @@ const submitReply = async (parentUserName, text, clear) => {
         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,
@@ -277,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()
@@ -401,7 +399,9 @@ const handleContentClick = (e) => {
 .reply-avatar {
   width: 20px;
   height: 20px;
+  border-radius: 50%;
   margin-right: 5px;
+  cursor: pointer;
 }
 
 .reply-icon {

frontend_nuxt/components/Dropdown.vue

@@ -52,6 +52,7 @@
       v-if="open && !isMobile && (loading || filteredOptions.length > 0 || showSearch)"
       :class="['dropdown-menu', menuClass]"
       v-click-outside="close"
+      ref="menuRef"
     >
       <div v-if="showSearch" class="dropdown-search">
         <search-icon class="search-icon" />
@@ -80,6 +81,7 @@
             <span>{{ o.name }}</span>
           </slot>
         </div>
+        <slot name="footer" :close="close" :loading="loading" />
       </template>
     </div>
     <Teleport to="body">
@@ -88,7 +90,7 @@
           <next class="back-icon" @click="close" />
           <span class="mobile-title">{{ placeholder }}</span>
         </div>
-        <div class="dropdown-mobile-menu">
+        <div class="dropdown-mobile-menu" ref="mobileMenuRef">
           <div v-if="showSearch" class="dropdown-search">
             <search-icon class="search-icon" />
             <input type="text" v-model="search" placeholder="搜索" />
@@ -116,6 +118,7 @@
                 <span>{{ o.name }}</span>
               </slot>
             </div>
+            <slot name="footer" :close="close" :loading="loading" />
           </template>
         </div>
       </div>
@@ -151,6 +154,8 @@ export default {
     const loaded = ref(false)
     const loading = ref(false)
     const wrapper = ref(null)
+    const menuRef = ref(null)
+    const mobileMenuRef = ref(null)
     const isMobile = useIsMobile()
 
     const toggle = () => {
@@ -200,6 +205,17 @@ export default {
       }
     }
 
+    const scrollToBottom = () => {
+      const el = isMobile.value ? mobileMenuRef.value : menuRef.value
+      if (el) {
+        el.scrollTop = el.scrollHeight
+      }
+    }
+
+    const reload = async () => {
+      await loadOptions(props.remote ? search.value : undefined)
+    }
+
     watch(
       () => props.initialOptions,
       (val) => {
@@ -249,7 +265,7 @@ export default {
       return /^https?:\/\//.test(icon) || icon.startsWith('/')
     }
 
-    expose({ toggle, close })
+    expose({ toggle, close, reload, scrollToBottom })
 
     return {
       open,
@@ -259,6 +275,8 @@ export default {
       search,
       filteredOptions,
       wrapper,
+      menuRef,
+      mobileMenuRef,
       selectedLabels,
       isSelected,
       loading,

frontend_nuxt/components/HeaderComponent.vue

@@ -73,10 +73,10 @@
                 <BaseUserAvatar
                   class="avatar-img"
                   :user-id="authState.userId"
-                  :avatar="avatar"
-                  :username="authState.username"
+                  :src="avatar"
+                  alt="avatar"
                   :width="32"
-                  :link="false"
+                  :disable-link="true"
                 />
                 <down />
               </div>
@@ -100,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'
@@ -441,6 +442,7 @@ onMounted(async () => {
   height: 32px;
   border-radius: 50%;
   background-color: lightgray;
+  object-fit: cover;
 }
 
 .dropdown-icon {

frontend_nuxt/components/MenuComponent.vue

@@ -116,30 +116,42 @@
             <div v-if="isLoadingTag" class="menu-loading-container">
               <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
             </div>
-            <div 
-                v-else 
-                v-for="t in tagData" 
-                :key="t.id" 
-                class="section-item" 
-                :class="{ selected: isTagSelected(t.id) }" 
+            <template v-else>
+              <div
+                v-for="t in tagData"
+                :key="t.id"
+                class="section-item"
+                :class="{ selected: isTagSelected(t.id) }"
                 @click="gotoTag(t)"
               >
-              <BaseImage
-                v-if="isImageIcon(t.smallIcon || t.icon)"
-                :src="t.smallIcon || t.icon"
-                class="section-item-icon"
-                :alt="t.name"
-              />
-              <component
-                v-else-if="t.smallIcon || t.icon"
-                :is="t.smallIcon || t.icon"
-                class="section-item-icon"
-              />
-              <tag-one v-else class="section-item-icon" />
-              <span class="section-item-text"
-                >{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span
-              >
-            </div>
+                <BaseImage
+                  v-if="isImageIcon(t.smallIcon || t.icon)"
+                  :src="t.smallIcon || t.icon"
+                  class="section-item-icon"
+                  :alt="t.name"
+                />
+                <component
+                  v-else-if="t.smallIcon || t.icon"
+                  :is="t.smallIcon || t.icon"
+                  class="section-item-icon"
+                />
+                <tag-one v-else class="section-item-icon" />
+                <span class="section-item-text"
+                  >{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span
+                >
+              </div>
+              <div v-if="hasMoreTags || isLoadingMoreTags" class="section-item more-item">
+                <a
+                  v-if="hasMoreTags && !isLoadingMoreTags"
+                  href="#"
+                  class="more-link"
+                  @click.prevent="loadMoreTags"
+                >
+                  查看更多
+                </a>
+                <span v-else class="more-loading">加载中...</span>
+              </div>
+            </template>
           </div>
         </div>
       </div>
@@ -207,16 +219,88 @@ const {
   },
 )
 
+const TAG_PAGE_SIZE = 10
+const tagPage = ref(0)
+const hasMoreTags = ref(true)
+const isLoadingMoreTags = ref(false)
+
+const buildTagUrl = (page = 0) => {
+  const base = API_BASE_URL || (import.meta.client ? window.location.origin : '')
+  const url = new URL('/api/tags', base)
+  url.searchParams.set('page', String(page))
+  url.searchParams.set('pageSize', String(TAG_PAGE_SIZE))
+  return url.toString()
+}
+
+const fetchTagPage = async (page = 0) => {
+  try {
+    return await $fetch(buildTagUrl(page))
+  } catch (e) {
+    console.error('Failed to fetch tags', e)
+    return []
+  }
+}
+
 const {
   data: tagData,
   pending: isLoadingTag,
   error: tagError,
-} = await useAsyncData('menu:tags', () => $fetch(`${API_BASE_URL}/api/tags?limit=10`), {
+} = await useAsyncData('menu:tags', () => fetchTagPage(0), {
   server: true,
   default: () => [],
   staleTime: 5 * 60 * 1000,
 })
 
+const dedupeTags = (list) => Array.from(new Map(list.map((tag) => [tag.id, tag])).values())
+
+const initializeTagState = (val) => {
+  const initial = Array.isArray(val) ? val : []
+  if (!Array.isArray(val)) {
+    tagData.value = []
+  }
+  tagPage.value = 0
+  hasMoreTags.value = initial.length === TAG_PAGE_SIZE
+}
+
+initializeTagState(tagData.value)
+
+watch(
+  tagData,
+  (val, oldVal) => {
+    const next = Array.isArray(val) ? val : []
+    if (!Array.isArray(val)) {
+      tagData.value = []
+    }
+    const shouldReset =
+      !Array.isArray(oldVal) || oldVal.length > next.length || next.length <= TAG_PAGE_SIZE
+    if (shouldReset) {
+      tagPage.value = 0
+      hasMoreTags.value = next.length === TAG_PAGE_SIZE
+    }
+  },
+  { deep: false },
+)
+
+const loadMoreTags = async () => {
+  if (isLoadingMoreTags.value || !hasMoreTags.value) return
+  isLoadingMoreTags.value = true
+  const nextPage = tagPage.value + 1
+  try {
+    const result = await fetchTagPage(nextPage)
+    const data = Array.isArray(result) ? result : []
+    const existing = Array.isArray(tagData.value) ? tagData.value : []
+    tagData.value = dedupeTags([...existing, ...data])
+    tagPage.value = nextPage
+    if (data.length < TAG_PAGE_SIZE) {
+      hasMoreTags.value = false
+    }
+  } catch (e) {
+    console.error('Failed to load more tags', e)
+  } finally {
+    isLoadingMoreTags.value = false
+  }
+}
+
 /** 其余逻辑保持不变 */
 const iconClass = computed(() => {
   switch (themeState.mode) {
@@ -433,6 +517,27 @@ const gotoTag = (t) => {
   transition: background-color 0.5s ease;
 }
 
+.more-item {
+  justify-content: center;
+}
+
+.more-link {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.more-link:hover {
+  text-decoration: underline;
+}
+
+.more-loading {
+  font-size: 13px;
+  color: var(--menu-text-color);
+  opacity: 0.7;
+}
+
 .section-item:hover {
   background-color: var(--menu-selected-background-color-hover);
 }
@@ -441,7 +546,6 @@ const gotoTag = (t) => {
   background-color: var(--menu-selected-background-color);
 }
 
-
 .section-item-text-count {
   font-size: 12px;
   color: var(--menu-text-color);

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

@@ -4,10 +4,10 @@
       <BaseUserAvatar
         v-if="log.userAvatar"
         class="change-log-avatar"
-        :user-id="log.userId"
-        :avatar="log.userAvatar"
-        :username="log.username"
-        :width="20"
+        :src="log.userAvatar"
+        :to="log.username ? `/users/${log.username}` : ''"
+        alt="avatar"
+        :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>
@@ -56,8 +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 BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 import { themeState } from '~/utils/theme'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
@@ -134,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;

frontend_nuxt/components/PostLottery.vue

@@ -58,9 +58,8 @@
         :key="p.id"
         class="prize-member-avatar"
         :user-id="p.id"
-        :avatar="p.avatar"
-        :username="p.username"
-        :width="30"
+        :src="p.avatar"
+        alt="avatar"
       />
       <div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner">
         <medal-one class="medal-icon"></medal-one>
@@ -70,9 +69,8 @@
           :key="w.id"
           class="prize-member-avatar"
           :user-id="w.id"
-          :avatar="w.avatar"
-          :username="w.username"
-          :width="30"
+          :src="w.avatar"
+          alt="avatar"
         />
         <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
           {{ lotteryWinners[0].username }}
@@ -89,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 },
@@ -246,9 +245,16 @@ const joinLottery = async () => {
   width: 30px;
   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;
+}
+
 .prize-member-winner {
   display: flex;
   flex-direction: row;

frontend_nuxt/components/PostPoll.vue

@@ -22,9 +22,8 @@
                 :key="p.id"
                 class="poll-participant-avatar"
                 :user-id="p.id"
-                :avatar="p.avatar"
-                :username="p.username"
-                :width="30"
+                :src="p.avatar"
+                alt="avatar"
               />
             </div>
           </div>
@@ -120,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 },
@@ -425,6 +425,13 @@ const submitMultiPoll = async () => {
 .poll-participant-avatar {
   width: 30px;
   height: 30px;
+  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

@@ -25,12 +25,11 @@
       <template #option="{ option }">
         <div class="search-option-item">
           <BaseUserAvatar
-            class="avatar"
+            :src="option.avatar"
             :user-id="option.id"
-            :avatar="option.avatar"
-            :username="option.username"
-            :width="32"
-            :link="false"
+            :alt="option.username"
+            class="avatar"
+            :disable-link="true"
           />
           <div class="result-body">
             <div class="result-main" v-html="highlight(option.username)"></div>
@@ -52,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
 
@@ -177,6 +177,14 @@ defineExpose({
 .avatar {
   width: 32px;
   height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .result-body {

frontend_nuxt/components/TagSelect.vue

@@ -1,5 +1,6 @@
 <template>
   <Dropdown
+    ref="dropdownRef"
     v-model="selected"
     :fetch-options="fetchTags"
     multiple
@@ -25,11 +26,23 @@
         <div v-if="option.description" class="option-desc">{{ option.description }}</div>
       </div>
     </template>
+    <template #footer>
+      <div v-if="hasMoreRemoteTags" class="dropdown-footer">
+        <a
+          href="#"
+          class="dropdown-more"
+          :class="{ disabled: loadMoreRequested }"
+          @click.prevent="loadMoreRemoteTags"
+        >
+          {{ loadMoreRequested ? '加载中...' : '查看更多' }}
+        </a>
+      </div>
+    </template>
   </Dropdown>
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, reactive, ref, watch, nextTick } from 'vue'
 import { toast } from '~/main'
 import Dropdown from '~/components/Dropdown.vue'
 const config = useRuntimeConfig()
@@ -42,9 +55,19 @@ const props = defineProps({
   options: { type: Array, default: () => [] },
 })
 
+const dropdownRef = ref(null)
 const localTags = ref([])
 const providedTags = ref(Array.isArray(props.options) ? [...props.options] : [])
 
+const TAG_PAGE_SIZE = 10
+const remoteState = reactive({
+  keyword: '',
+  nextPage: 0,
+  hasMore: true,
+  options: [],
+})
+const loadMoreRequested = ref(false)
+
 watch(
   () => props.options,
   (val) => {
@@ -53,7 +76,7 @@ watch(
 )
 
 const mergedOptions = computed(() => {
-  const arr = [...providedTags.value, ...localTags.value]
+  const arr = [...providedTags.value, ...localTags.value, ...remoteState.options]
   return arr.filter((v, i, a) => a.findIndex((t) => t.id === v.id) === i)
 })
 
@@ -62,44 +85,93 @@ const isImageIcon = (icon) => {
   return /^https?:\/\//.test(icon) || icon.startsWith('/')
 }
 
-const buildTagsUrl = (kw = '') => {
+const buildTagsUrl = (kw = '', page = 0) => {
   const base = API_BASE_URL || (import.meta.client ? window.location.origin : '')
   const url = new URL('/api/tags', base)
 
   if (kw) url.searchParams.set('keyword', kw)
-  url.searchParams.set('limit', '10')
+  url.searchParams.set('page', String(page))
+  url.searchParams.set('pageSize', String(TAG_PAGE_SIZE))
 
   return url.toString()
 }
 
+const fetchRemoteTags = async (kw = '', page = 0) => {
+  const url = buildTagsUrl(kw, page)
+  try {
+    const res = await fetch(url)
+    if (res.ok) {
+      const data = await res.json()
+      return Array.isArray(data) ? data : []
+    }
+    throw new Error('failed to fetch tags')
+  } catch (e) {
+    console.error('Failed to fetch tags', e)
+    toast.error('获取标签失败')
+    throw e
+  }
+}
+
+const combineOptions = (remoteOptions = []) => {
+  const options = [...providedTags.value, ...localTags.value, ...remoteOptions]
+  return Array.from(new Map(options.map((t) => [t.id, t])).values())
+}
+
 const fetchTags = async (kw = '') => {
   const defaultOption = { id: 0, name: '无标签' }
 
-  // 1) 先拼 URL（自动兜底到 window.location.origin）
-  const url = buildTagsUrl(kw)
-
-  // 2) 拉数据
-  let data = []
-  try {
-    const res = await fetch(url)
-    if (res.ok) data = await res.json()
-  } catch {
-    toast.error('获取标签失败')
+  if (kw !== remoteState.keyword) {
+    remoteState.keyword = kw
+    remoteState.nextPage = 0
+    remoteState.options = []
+    remoteState.hasMore = true
   }
 
-  // 3) 合并、去重、可创建
-  let options = [...data, ...localTags.value]
+  const shouldFetch = remoteState.options.length === 0 || loadMoreRequested.value
+  if (shouldFetch) {
+    const pageToFetch = loadMoreRequested.value ? remoteState.nextPage : 0
+    try {
+      const data = await fetchRemoteTags(remoteState.keyword, pageToFetch)
+      if (pageToFetch === 0) {
+        remoteState.options = data
+      } else {
+        const existing = Array.isArray(remoteState.options) ? remoteState.options : []
+        const merged = [...existing, ...data]
+        remoteState.options = Array.from(new Map(merged.map((t) => [t.id, t])).values())
+      }
+      remoteState.hasMore = data.length === TAG_PAGE_SIZE
+      remoteState.nextPage = pageToFetch + 1
+    } catch (e) {
+      return [defaultOption, ...combineOptions(remoteState.options)]
+    } finally {
+      loadMoreRequested.value = false
+    }
+  }
+
+  let options = combineOptions(remoteState.options)
 
   if (props.creatable && kw && !options.some((t) => t.name.toLowerCase() === kw.toLowerCase())) {
     options.push({ id: `__create__:${kw}`, name: `创建"${kw}"` })
   }
 
-  options = Array.from(new Map(options.map((t) => [t.id, t])).values())
-
-  // 4) 最终结果
   return [defaultOption, ...options]
 }
 
+const hasMoreRemoteTags = computed(() => remoteState.hasMore)
+
+const loadMoreRemoteTags = async () => {
+  if (!remoteState.hasMore || loadMoreRequested.value) return
+  loadMoreRequested.value = true
+  try {
+    await dropdownRef.value?.reload()
+    await nextTick()
+    dropdownRef.value?.scrollToBottom?.()
+  } catch (e) {
+    console.error('Failed to load more tags', e)
+    loadMoreRequested.value = false
+  }
+}
+
 const selected = computed({
   get: () => props.modelValue,
   set: (v) => {
@@ -151,4 +223,21 @@ const selected = computed({
   font-weight: bold;
   opacity: 0.4;
 }
+
+.dropdown-footer {
+  padding: 8px 20px;
+  text-align: center;
+  border-top: 1px solid var(--normal-border-color);
+}
+
+.dropdown-more {
+  color: var(--primary-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.dropdown-more.disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
 </style>

frontend_nuxt/components/UserList.vue

@@ -1,15 +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" @click="handleUserClick(u)">
-      <BaseUserAvatar
-        class="user-avatar"
-        :user-id="u.id"
-        :avatar="u.avatar"
-        :username="u.username"
-        :width="50"
-        :link="false"
-      />
+    <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>
         <div v-if="u.introduction" class="user-intro">{{ u.introduction }}</div>
@@ -20,6 +13,7 @@
 
 <script setup>
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import BaseUserAvatar from '~/components/BaseUserAvatar.vue'
 
 defineProps({
   users: { type: Array, default: () => [] },
@@ -48,8 +42,15 @@ const handleUserClick = (user) => {
 .user-avatar {
   width: 50px;
   height: 50px;
+  border-radius: 50%;
   flex-shrink: 0;
 }
+
+.user-avatar :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 .user-info {
   display: flex;
   flex-direction: column;

frontend_nuxt/pages/index.vue

@@ -85,15 +85,16 @@
           </div>
 
           <div class="article-member-avatars-container">
-            <BaseUserAvatar
-              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"
-            />
+            <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"
+              />
+            </div>
           </div>
 
           <div class="article-comments main-info-text">
@@ -139,6 +140,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({
@@ -292,11 +294,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 +336,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,
@@ -636,10 +630,15 @@ watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
   margin-left: 20px;
 }
 
-.article-member-avatar-item {
-  width: 25px;
-  height: 25px;
-  flex-shrink: 0;
+.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;
 }
 
 .placeholder-container {
@@ -693,6 +692,7 @@ 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

@@ -46,10 +46,9 @@
                 <next class="reply-icon" />
                 <BaseUserAvatar
                   class="reply-avatar"
+                  :src="item.replyTo.sender.avatar"
                   :user-id="item.replyTo.sender.id"
-                  :avatar="item.replyTo.sender.avatar"
-                  :username="item.replyTo.sender.username"
-                  :width="20"
+                  :alt="item.replyTo.sender.username"
                 />
                 <div class="reply-author">{{ item.replyTo.sender.username }}:</div>
               </div>
@@ -127,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()
@@ -248,9 +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,
+      userId: item.sender.id,
       iconClick: () => {
         openUser(item.sender.id)
       },
@@ -335,9 +334,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,
+      userId: newMessage.sender.id,
       iconClick: () => {
         openUser(newMessage.sender.id)
       },
@@ -412,9 +410,8 @@ const subscribeToConversation = () => {
 
       messages.value.push({
         ...parsedMessage,
-        userId: parsedMessage.sender.id,
-        userName: parsedMessage.sender.username,
         src: parsedMessage.sender.avatar,
+        userId: parsedMessage.sender.id,
         iconClick: () => openUser(parsedMessage.sender.id),
       })
 
@@ -698,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;

frontend_nuxt/pages/message-box/index.vue

@@ -34,22 +34,11 @@
         >
           <div class="conversation-avatar">
             <BaseUserAvatar
-              v-if="getOtherParticipant(convo)"
+              :src="getOtherParticipant(convo)?.avatar"
+              :user-id="getOtherParticipant(convo)?.id"
+              :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"
+              :disable-link="true"
             />
           </div>
 
@@ -142,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([])
@@ -445,6 +435,12 @@ function minimize() {
   border-radius: 50%;
 }
 
+.avatar-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .conversation-content {
   flex: 1;
   min-width: 0;

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

@@ -46,14 +46,16 @@
       </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">
+            <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">
               {{ author.username }}
@@ -197,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'
@@ -345,7 +348,6 @@ const mapComment = (
   parentUserName: parentUserName,
   parentUserAvatar: parentUserAvatar,
   parentUserId: parentUserId,
-  parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
 })
 
 const changeLogIcon = (l) => {
@@ -384,7 +386,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 +870,10 @@ const jumpToHashComment = async () => {
   }
 }
 
+const gotoProfile = () => {
+  navigateTo(`/users/${author.value.id}`, { replace: true })
+}
+
 const initPage = async () => {
   scrollTo(0, 0)
   await fetchTimeline()
@@ -962,8 +967,6 @@ onMounted(async () => {
 .user-avatar-container {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  gap: 10px;
 }
 
 .scroller-middle {
@@ -1176,13 +1179,24 @@ 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%;
+}
+
+.user-avatar-item-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .info-content {

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;
 }
 

frontend_nuxt/pages/users/[id].vue

@@ -8,11 +8,10 @@
       <div class="profile-page-header">
         <div class="profile-page-header-avatar">
           <BaseUserAvatar
-            class="profile-page-header-avatar-img"
+            :src="user.avatar"
             :user-id="user.id"
-            :avatar="user.avatar"
-            :username="user.username"
-            :width="200"
+            alt="avatar"
+            class="profile-page-header-avatar-img"
           />
         </div>
         <div class="profile-page-header-user-info">
@@ -278,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'
@@ -657,6 +657,13 @@ watch(selectedTab, async (val) => {
 .profile-page-header-avatar-img {
   width: 200px;
   height: 200px;
+  border-radius: 50%;
+}
+
+.profile-page-header-avatar-img :deep(.base-user-avatar-img) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .profile-page-header-user-info {
@@ -1084,6 +1091,7 @@ watch(selectedTab, async (val) => {
   .profile-page-header-avatar-img {
     width: 100px;
     height: 100px;
+    border-radius: 50%;
   }
 
   :deep(.base-tabs-item) {

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) {