feat(头像): 实现用户头像加载和显示功能

在全局头部和用户资料页面添加头像加载逻辑，当用户有头像时显示图片，否则显示默认图标。通过监听用户头像变化实时更新显示，并添加样式处理圆形头像和图片适应。

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 {

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 = '';