From d0ecbaf3ab1d9c1f508e1f4187c9446a6d8cc7a4 Mon Sep 17 00:00:00 2001
From: Yuhang Wu <YuhangWu@orbitmes.com>
Date: Thu, 30 Jul 2026 15:09:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E5=AE=9E=E7=8E=B0=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=A4=B4=E5=83=8F=E5=8A=A8=E6=80=81=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=92=8C=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在布局头部组件中添加用户头像条件渲染逻辑
- 从localStorage获取用户信息并解析用户名和头像数据
- 为布局侧边栏组件添加相同的头像显示功能
- 在个人资料页面实现头像的动态切换显示
- 添加错误处理确保用户信息读取失败时显示默认值
- 重构用户初始字母计算逻辑以适应响应式数据结构
---
 src/layout/components/LayoutHeader.vue | 20 +++++++++++++++++---
 src/layout/components/LayoutSider.vue  | 20 +++++++++++++++++---
 src/views/system/Profile.vue           |  3 ++-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/layout/components/LayoutHeader.vue b/src/layout/components/LayoutHeader.vue
index 443e2af..833b074 100644
--- a/src/layout/components/LayoutHeader.vue
+++ b/src/layout/components/LayoutHeader.vue
@@ -35,7 +35,8 @@
       </n-tooltip>
       <n-dropdown trigger="click" :options="userDropdownOptions" @select="onUserAction">
         <div class="header-user">
-          <n-avatar round size="small" :style="{ backgroundColor: '#0891B2' }">
+          <n-avatar v-if="userAvatar" round size="small" :src="userAvatar" />
+          <n-avatar v-else round size="small" :style="{ backgroundColor: '#0891B2' }">
             {{ userInitial }}
           </n-avatar>
           <span class="header-username">{{ username }}</span>
@@ -73,8 +74,21 @@ const message = useMessage()
 const layoutStore = useLayoutStore()
 const themeStore = useThemeStore()
 
-const username = 'SparksFly'
-const userInitial = computed(() => username.charAt(0).toUpperCase())
+const username = computed(() => {
+  try {
+    const stored = localStorage.getItem('userInfo')
+    if (stored) return JSON.parse(stored).user_name || 'Guest'
+  } catch {}
+  return 'Guest'
+})
+const userAvatar = computed(() => {
+  try {
+    const stored = localStorage.getItem('userInfo')
+    if (stored) return JSON.parse(stored).avatar || ''
+  } catch {}
+  return ''
+})
+const userInitial = computed(() => username.value.charAt(0).toUpperCase())
 
 const currentRouteTitle = computed(() => (route.meta?.title as string) || '')
 
diff --git a/src/layout/components/LayoutSider.vue b/src/layout/components/LayoutSider.vue
index 228b94c..8776dfe 100644
--- a/src/layout/components/LayoutSider.vue
+++ b/src/layout/components/LayoutSider.vue
@@ -41,7 +41,8 @@
     <!-- 用户区 -->
     <transition name="fade-text">
       <div v-if="!layoutStore.siderCollapsed" class="sider-user">
-        <n-avatar round size="small" :style="{ backgroundColor: '#0891B2' }">
+        <n-avatar v-if="userAvatar" round size="small" :src="userAvatar" />
+        <n-avatar v-else round size="small" :style="{ backgroundColor: '#0891B2' }">
           {{ userInitial }}
         </n-avatar>
         <div class="user-meta">
@@ -86,8 +87,21 @@ const message = useMessage()
 const layoutStore = useLayoutStore()
 
 // ─── 用户 ───
-const username = 'SparksFly'
-const userInitial = computed(() => username.charAt(0).toUpperCase())
+const username = computed(() => {
+  try {
+    const stored = localStorage.getItem('userInfo')
+    if (stored) return JSON.parse(stored).user_name || 'Guest'
+  } catch {}
+  return 'Guest'
+})
+const userAvatar = computed(() => {
+  try {
+    const stored = localStorage.getItem('userInfo')
+    if (stored) return JSON.parse(stored).avatar || ''
+  } catch {}
+  return ''
+})
+const userInitial = computed(() => username.value.charAt(0).toUpperCase())
 
 // ─── Icon helper ───
 function renderIcon(icon: Component) {
diff --git a/src/views/system/Profile.vue b/src/views/system/Profile.vue
index 892e8e6..a2e7e04 100644
--- a/src/views/system/Profile.vue
+++ b/src/views/system/Profile.vue
@@ -9,7 +9,8 @@
       <!-- 左侧信息卡 -->
       <div class="profile-card card">
         <div class="avatar-wrap">
-          <n-avatar round :size="80" :style="{ backgroundColor: '#0891B2', fontSize: '32px' }">
+          <n-avatar v-if="form.avatar" round :size="80" :src="form.avatar" />
+          <n-avatar v-else round :size="80" :style="{ backgroundColor: '#0891B2', fontSize: '32px' }">
             {{ userInitial }}
           </n-avatar>
           <div class="avatar-info">