fix: 优化一些头像属性

This reverts commit 229439aa05.

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(() => {
@@ -113,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 {

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>

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