fix(story): 修复UserInfoHeader不显示的问题

- 移除personalInfo为null时返回null的逻辑
- 使用可选链和默认值确保组件始终渲染
- 更新测试用例以匹配新行为
- UserInfoHeader现在即使没有数据也会显示默认值

🤖 Generated with [Claude Code](https://claude.com/claude-code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

mini-ui-packages/rencai-personal-info-ui/src/components/UserInfoHeader.tsx

@@ -22,7 +22,7 @@ const jobStatusMap: Record<number, string> = {
 const UserInfoHeader: React.FC<UserInfoHeaderProps> = ({ personalInfo, loading }) => {
   if (loading) {
     return (
-      <View className="bg-gradient-to-b from-blue-500 to-blue-700 p-5">
+      <View className="bg-gradient-to-b from-blue-500 to-blue-700 p-5 mb-3">
         <View className="flex justify-between items-start">
           <View className="flex items-center">
             <View className="w-16 h-16 rounded-full border-2 border-white mr-4 bg-blue-400 flex items-center justify-center animate-pulse" />
@@ -36,22 +36,19 @@ const UserInfoHeader: React.FC<UserInfoHeaderProps> = ({ personalInfo, loading }
     )
   }
 
-  if (!personalInfo) {
-    return null
-  }
-
-  // 提取姓名首字作为头像占位符
-  const nameInitial = personalInfo.name ? personalInfo.name.charAt(0) : '?'
+  // 提取姓名首字作为头像占位符 (即使personalInfo为null也渲染)
+  const nameInitial = personalInfo?.name ? personalInfo.name.charAt(0) : '?'
+  const displayName = personalInfo?.name || '未知用户'
 
   // 组合用户状态: "残疾类型 · 等级 · 就业状态"
   const userStatus = [
-    personalInfo.disabilityType,
-    personalInfo.disabilityLevel,
-    jobStatusMap[personalInfo.jobStatus] || '未知'
-  ].filter(Boolean).join(' · ')
+    personalInfo?.disabilityType,
+    personalInfo?.disabilityLevel,
+    personalInfo?.jobStatus !== undefined ? jobStatusMap[personalInfo.jobStatus] : undefined
+  ].filter(Boolean).join(' · ') || '状态未知'
 
   return (
-    <View className="bg-gradient-to-b from-blue-500 to-blue-700 p-5">
+    <View className="bg-gradient-to-b from-blue-500 to-blue-700 p-5 mb-3">
       <View className="flex justify-between items-start">
         {/* 左侧: 头像和用户信息 */}
         <View className="flex items-center">
@@ -63,10 +60,10 @@ const UserInfoHeader: React.FC<UserInfoHeaderProps> = ({ personalInfo, loading }
           {/* 用户信息 */}
           <View>
             <Text className="text-xl font-bold text-white block mb-1">
-              {personalInfo.name || '未知用户'}
+              {displayName}
             </Text>
             <Text className="text-sm text-white opacity-80">
-              {userStatus || '状态未知'}
+              {userStatus}
             </Text>
           </View>
         </View>

mini-ui-packages/rencai-personal-info-ui/src/pages/PersonalInfoPage/PersonalInfoPage.tsx

@@ -112,13 +112,14 @@ const PersonalInfoPage: React.FC = () => {
           placeholder={true}
         />
 
+        {/* 顶部用户信息区域 - 直接在Navbar下方,无padding */}
+        <UserInfoHeader
+          personalInfo={personalInfo || null}
+          loading={personalInfoLoading}
+        />
+
         {/* 页面内容 */}
         <View className="px-4 py-3">
-          {/* 顶部用户信息区域 */}
-          <UserInfoHeader
-            personalInfo={personalInfo || null}
-            loading={personalInfoLoading}
-          />
 
           {/* 个人基本信息卡片 */}
           <PersonalBasicInfo

mini-ui-packages/rencai-personal-info-ui/tests/unit/components/UserInfoHeader.test.tsx

@@ -60,13 +60,18 @@ describe('UserInfoHeader', () => {
     expect(pulseElement).toBeInTheDocument()
   })
 
-  it('应该在personalInfo为null时不渲染', () => {
+  it('应该在personalInfo为null时显示默认值', () => {
     const { container } = render(
       <UserInfoHeader personalInfo={null} loading={false} />
     )
 
-    // 应该返回null,不渲染任何内容
-    expect(container.firstChild).toBeNull()
+    // 应该显示默认值而不是null
+    expect(screen.getByText('未知用户')).toBeInTheDocument()
+    expect(screen.getByText('状态未知')).toBeInTheDocument()
+    expect(screen.getByText('?')).toBeInTheDocument()
+    // 检查渐变背景
+    const gradientElement = container.querySelector('.bg-gradient-to-b')
+    expect(gradientElement).toBeInTheDocument()
   })
 
   it('应该正确提取姓名首字作为头像', () => {