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">