fix: avatar 以及 auth 重构

frontend_nuxt/components/BaseImage.vue

@@ -17,7 +17,7 @@ import { computed, ref } from 'vue'
 import { useAttrs } from 'vue'
 
 const props = defineProps({
-  src: { type: String, required: true },
+  src: { type: String, default: '' },
   alt: { type: String, default: '' },
 })
 
@@ -39,9 +39,6 @@ const placeholder = computed(() => {
 function onLoad() {
   loaded.value = true
 }
-function onError() {
-  loaded.value = true
-}
 </script>
 
 <style scoped>

frontend_nuxt/components/BaseUserAvatar.vue

@@ -1,22 +1,20 @@
 <template>
-  <NuxtLink
-    :to="resolvedLink"
+  <div
     class="base-user-avatar"
     :class="wrapperClass"
     :style="wrapperStyle"
     v-bind="wrapperAttrs"
+    @click="handleClick"
   >
-    <BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
-  </NuxtLink>
+    <BaseImage :src="props.src" :alt="altText" class="base-user-avatar-img" />
+  </div>
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, watch } from 'vue'
 import { useAttrs } from 'vue'
 import BaseImage from './BaseImage.vue'
 
-const DEFAULT_AVATAR = '/default-avatar.jpg'
-
 const props = defineProps({
   userId: {
     type: [String, Number],
@@ -50,15 +48,6 @@ const props = defineProps({
 
 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 !== '') {
@@ -70,10 +59,16 @@ const resolvedLink = computed(() => {
 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 }
+  var style = {}
+
+  if (props.width > 0) {
+    style.width = `${props.width}px`
+  }
+  if (props.height > 0) {
+    style.height = `${props.height}px`
+  }
+
+  return style
 })
 
 const wrapperStyle = computed(() => {
@@ -88,10 +83,9 @@ const wrapperAttrs = computed(() => {
   return rest
 })
 
-function onError() {
-  if (currentSrc.value !== DEFAULT_AVATAR) {
-    currentSrc.value = DEFAULT_AVATAR
-  }
+const handleClick = () => {
+  if (props.disableLink) return
+  navigateTo(resolvedLink.value)
 }
 </script>
 

frontend_nuxt/components/HeaderComponent.vue

@@ -78,7 +78,9 @@
             <div class="header-icon-item" @click="goToMessages">
               <message-emoji class="header-icon" />
               <span class="header-label">消息</span>
-              <span v-if="unreadMessageCount > 0" class="unread-badge">{{ unreadMessageCount }}</span>
+              <span v-if="unreadMessageCount > 0" class="unread-badge">{{
+                unreadMessageCount
+              }}</span>
               <span v-else-if="hasChannelUnread" class="unread-dot"></span>
             </div>
           </ToolTip>
@@ -89,10 +91,9 @@
                 <BaseUserAvatar
                   class="avatar-img"
                   :user-id="authState.userId"
-                  :src="avatar"
-                  alt="avatar"
-                  :width="32"
+                  :src="authState.avatar"
                   :disable-link="true"
+                  :width="32"
                 />
                 <down />
               </div>
@@ -117,7 +118,7 @@ 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 { authState, clearToken } from '~/utils/auth'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
 import { useIsMobile } from '~/utils/screen'
@@ -139,13 +140,11 @@ const isLogin = computed(() => authState.loggedIn)
 const isMobile = useIsMobile()
 const { count: unreadMessageCount, fetchUnreadCount } = useUnreadCount()
 const { hasUnread: hasChannelUnread, fetchChannelUnread } = useChannelsUnreadCount()
-const avatar = ref('')
 const showSearch = ref(false)
 const searchDropdown = ref(null)
 const userMenu = ref(null)
 const menuBtn = ref(null)
 const isCopying = ref(false)
-
 const onlineCount = ref(0)
 
 // 心跳检测
@@ -208,7 +207,7 @@ const copyInviteLink = async () => {
   const token = getToken()
   if (!token) {
     toast.error('请先登录')
-    isCopying.value = false   // 🔥 修复：未登录时立即复原状态
+    isCopying.value = false // 🔥 修复：未登录时立即复原状态
     return
   }
   try {
@@ -252,17 +251,7 @@ const copyRssLink = async () => {
 }
 
 const goToProfile = async () => {
-  if (!authState.loggedIn) {
-    navigateTo('/login', { replace: true })
-    return
-  }
-  let id = authState.username || authState.userId
-  if (!id) {
-    const user = await loadCurrentUser()
-    if (user) {
-      id = user.username || user.id
-    }
-  }
+  let id = authState.username || authState.id
   if (id) {
     navigateTo(`/users/${id}`, { replace: true })
   }
@@ -306,14 +295,6 @@ const iconClass = computed(() => {
 })
 
 onMounted(async () => {
-  const updateAvatar = async () => {
-    if (authState.loggedIn) {
-      const user = await loadCurrentUser()
-      if (user && user.avatar) {
-        avatar.value = user.avatar
-      }
-    }
-  }
   const updateUnread = async () => {
     if (authState.loggedIn) {
       fetchUnreadCount()
@@ -323,17 +304,8 @@ onMounted(async () => {
     }
   }
 
-  await updateAvatar()
   await updateUnread()
 
-  watch(
-    () => authState.loggedIn,
-    async (isLoggedIn) => {
-      await updateAvatar()
-      await updateUnread()
-    },
-  )
-
   // 新增的在线人数逻辑
   sendPing()
   fetchCount()
@@ -482,7 +454,6 @@ onMounted(async () => {
   cursor: pointer;
 }
 
-
 .invite_text:hover {
   opacity: 0.8;
   text-decoration: underline;
@@ -543,7 +514,10 @@ onMounted(async () => {
   color: var(--primary-color);
   cursor: pointer;
   position: relative;
-  transition: color 0.25s ease, transform 0.15s ease, opacity 0.2s ease;
+  transition:
+    color 0.25s ease,
+    transform 0.15s ease,
+    opacity 0.2s ease;
 }
 
 .header-icon-item:hover {
@@ -572,15 +546,14 @@ onMounted(async () => {
   position: absolute;
   top: -4px;
   right: -6px;
-  color: var(--primary-color);  /* 🔹 使用主题主色 */
-  background: none;             /* 🔹 去掉背景 */
-  font-size: 11px;              /* 字体稍微大一点以便清晰 */
-  font-weight: 600;             /* 加一点权重让数字更醒目 */
+  color: var(--primary-color); /* 🔹 使用主题主色 */
+  background: none; /* 🔹 去掉背景 */
+  font-size: 11px; /* 字体稍微大一点以便清晰 */
+  font-weight: 600; /* 加一点权重让数字更醒目 */
   line-height: 1;
-  padding: 0;                   /* 去掉内边距 */
+  padding: 0; /* 去掉内边距 */
 }
 
-
 @keyframes rss-glow {
   0% {
     text-shadow: 0 0 0px var(--primary-color);