feat: 头像显示

src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useUserInfoStore } from '@/stores/userInfo'
 import { useGlobalStore } from '@/stores/global'
-import { getUserLanguage } from '@/api/user'
+import { getUserLanguage, fetchUserProfile } from '@/api/user'
 import { fetchAllUnreadMessage } from '@/api/notification'
 import i18n from '@/lang/index'
 import myEvent from '@/utils/myEvent'
@@ -20,7 +20,7 @@ let languageSynced = false
  * 1. 设置路由的meta属性为{ cache: true }，表示需要缓存
  * 2. App.vue中使用RouteCache组件，通过路由的name来进行匹配
  * 3. 路由的name默认是文件名,如果文件名与name不一致,通过defineOptions({ name: 'componentName' })来设置
- * 
+ *
  * 需要登录路由: meta={ login:true }
  */
 const router = createRouter({
@@ -98,7 +98,7 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-	if(to.meta?.login && !useUserInfoStore().state.token) {
+	if (to.meta?.login && !useUserInfoStore().state.token) {
 		myEvent.emit('openLoginDialog')
 	}
 	next()
@@ -113,9 +113,19 @@ router.afterEach(async () => {
 		return
 	}
 
-  const globalStore = useGlobalStore()
+	const avatarUrl = userInfoStore.state.userInfo.avatarUrl
+	if (!avatarUrl) {
+		fetchUserProfile().then((res) => {
+			const profile = res as any
+			if (profile.avatarUrl) {
+				userInfoStore.setAvatarUrl(profile.avatarUrl)
+			}
+		})
+	}
+
+	const globalStore = useGlobalStore()
 	fetchAllUnreadMessage().then((res) => {
-    globalStore.setUnredCount(res.totalUnread)
+		globalStore.setUnredCount(res.totalUnread)
 	})
 
 	if (languageSynced) {

src/stores/userInfo.ts

@@ -13,6 +13,7 @@ export const useUserInfoStore = defineStore('userInfo', () => {
 			username: "",
 			accessToken: "",
 			expiresIn: "",
+			avatarUrl: "",
 		},
 		token: ''
 	})
@@ -28,6 +29,10 @@ export const useUserInfoStore = defineStore('userInfo', () => {
 		setLocal(data, 'token')
 	}
 
+	const setAvatarUrl = (url: string) => {
+		state.value.userInfo.avatarUrl = url
+	}
+
 	const logout = async (reload: boolean = false) => {
 		// 处理退出登录的一些逻辑
 		const userId = state.value.userInfo.userId
@@ -38,6 +43,7 @@ export const useUserInfoStore = defineStore('userInfo', () => {
 			username: "",
 			accessToken: "",
 			expiresIn: "",
+			avatarUrl: "",
 		}
 		state.value.token = ''
 		removeLocal('token')
@@ -49,6 +55,7 @@ export const useUserInfoStore = defineStore('userInfo', () => {
 		state,
 		setToken,
 		setUserInfo,
+		setAvatarUrl,
 		logout
 	}
-})
+})

src/views/main-header.vue

@@ -51,7 +51,9 @@
 						<div class="info">
 							<img src="@/assets/images/profile-content-bg.jpg" alt="" />
 							<div class="content">
-								<div class="profile"></div>
+								<div class="profile">
+									<img class="profile-avatar" :src="userInfoStore.state.userInfo.avatarUrl" alt="" />
+								</div>
 								<div class="name">
 									{{ $t('MainHeader.HiName', { name: userInfo.username }) }}
 								</div>
@@ -286,7 +288,12 @@
 					width: 5rem;
 					height: 5rem;
 					border-radius: 50%;
-					background: #cfcfcf;
+					.profile-avatar{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+						object-fit: cover;
+					}
 				}
 				> .name {
 					font-size: 1.4rem;

src/views/setting/index.vue

@@ -119,10 +119,6 @@
 		loadUserProfile
 	} = useSettingsForm({ t, locale })
 
-	// watch(locale, () => {
-	// 	loadUserProfile()
-	// })
-
 	onMounted(() => {
 		loadUserProfile()
 	})