0.0.8.5

components/tree/family-node.tsx

@@ -4,6 +4,7 @@ import type { FamilyMember } from "@/types/family"
 import { cn } from "@/lib/utils"
 import { useAvatarCache } from "@/hooks/use-avatar-cache"
 import { CircleUser, CircleUserRound, Heart } from "lucide-react"
+import { MemberNameWithStatus } from "@/components/member-name-with-status"
 
 interface FamilyNodeProps {
   member: FamilyMember
@@ -42,7 +43,7 @@ function calculateAge(birthDate?: string, deathDate?: string): number | null {
 
 // 单个人员卡片组件
 function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted, relationMode, isSelected }: { member: FamilyMember; isRoot?: boolean; isSpouse?: boolean; onSelect?: (member: FamilyMember) => void; isHighlighted?: boolean; relationMode?: boolean; isSelected?: boolean }) {
-  const { avatarUrl: avatarBlobUrl } = useAvatarCache(member?.avatarImageId)
+  const { avatarUrl: avatarBlobUrl } = useAvatarCache(member?.avatarUrl)
   
   const birthYear = formatYear(member.birthDate)
   const deathYear = formatYear(member.deathDate)
@@ -98,7 +99,12 @@ function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted, relatio
       </div>
 
       <div className="text-center w-full">
-        <div className="font-serif font-bold text-foreground leading-tight">{member.surname} {member.givenName}</div>
+        <div className="font-serif font-bold text-foreground leading-tight flex items-center justify-center gap-1">
+          <MemberNameWithStatus 
+            name={`${member.surname}${member.givenName}`}
+            isDead={!!member.deathDate}
+          />
+        </div>
         {member.courtesyName && (
           <div className="text-[10px] text-muted-foreground mt-0.5">字 {member.courtesyName}</div>
         )}
@@ -118,10 +124,6 @@ function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted, relatio
           </div>
         )}
       </div>
-
-      {member.deathDate && (
-        <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-neutral-400 ring-2 ring-background" />
-      )}
     </div>
   )
 }