From 13b320ca93214babf1a8dafd0ef29fbb056520d7 Mon Sep 17 00:00:00 2001
From: meowrain <meowrain@126.com>
Date: Sun, 18 Jan 2026 16:16:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=A4=B4=E5=83=8F):=20=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=A4=B4=E5=83=8F=E5=8A=A0=E8=BD=BD=E5=92=8C?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在全局头部和用户资料页面添加头像加载逻辑，当用户有头像时显示图片，否则显示默认图标。通过监听用户头像变化实时更新显示，并添加样式处理圆形头像和图片适应。
---
 src/components/GlobalHeader.vue    | 43 ++++++++++++++++++++++++++++--
 src/views/user/UserProfileView.vue |  1 +
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/GlobalHeader.vue b/src/components/GlobalHeader.vue
index 768a2a6..d3c1a2a 100644
--- a/src/components/GlobalHeader.vue
+++ b/src/components/GlobalHeader.vue
@@ -41,7 +41,12 @@
         <a-dropdown v-else trigger="hover" position="br">
           <div class="user-info">
             <a-avatar :size="36" class="user-avatar">
-              <IconUser />
+              <img
+                v-if="avatarUrl"
+                :src="avatarUrl"
+                alt="avatar"
+              />
+              <IconUser v-else />
             </a-avatar>
             <span class="username">{{ userStore.loginUser.userName }}</span>
             <icon-down class="dropdown-icon" />
@@ -70,7 +75,7 @@
 <script setup lang="ts">
 import { routes } from "../router/index.ts";
 import { useRouter } from "vue-router";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { Message } from "@arco-design/web-vue";
 import {
   IconUser,
@@ -82,13 +87,42 @@ import checkAccess from "../access/checkAccess.ts";
 import { useUserStore } from "../store/user.ts";
 import { clearTokens } from "@/utils/token";
 import ACCESS_ENUM from "@/access/accessEnum";
+import { getFileById } from "@/api/file/file";
+import { isApiSuccess } from "@/api/response";
 
 const router = useRouter();
 const userStore = useUserStore();
+const avatarUrl = ref("");
 
 // 默认主页
 const selectedKeys = ref(["/"]);
 
+// 加载用户头像
+const loadAvatarUrl = async () => {
+  if (!userStore.loginUser.userAvatar) {
+    avatarUrl.value = "";
+    return;
+  }
+  try {
+    const res = await getFileById(userStore.loginUser.userAvatar);
+    if (isApiSuccess(res) && res.data && res.data.storagePath) {
+      // 拼接 /file/ 前缀，通过 vite 代理访问后端静态资源
+      avatarUrl.value = `/api/file/${res.data.storagePath}`;
+    }
+  } catch (error) {
+    console.error("加载头像失败", error);
+  }
+};
+
+// 监听用户头像变化
+watch(
+  () => userStore.loginUser.userAvatar,
+  () => {
+    loadAvatarUrl();
+  },
+  { immediate: true }
+);
+
 const doMenuItemClick = (path: string) => {
   router.push({ path });
 };
@@ -305,6 +339,11 @@ router.afterEach((to) => {
 
   .user-avatar {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+    :deep(img) {
+      border-radius: 50%;
+      object-fit: cover;
+    }
   }
 
   .username {
diff --git a/src/views/user/UserProfileView.vue b/src/views/user/UserProfileView.vue
index 6df2571..2005f0c 100644
--- a/src/views/user/UserProfileView.vue
+++ b/src/views/user/UserProfileView.vue
@@ -61,6 +61,7 @@ const userStore = useUserStore();
 const loginUser = computed(() => userStore.loginUser);
 const avatarUrl = ref('');
 
+// 加载用户头像
 const loadAvatarUrl = async () => {
     if (!loginUser.value.userAvatar) {
         avatarUrl.value = '';