0.0.5.1

components/tree/family-node.tsx

@@ -8,6 +8,7 @@ import { CircleUser, CircleUserRound, Heart } from "lucide-react"
 interface FamilyNodeProps {
   member: FamilyMember
   spouse?: FamilyMember
+  spouses?: FamilyMember[]
   isRoot?: boolean
   onSelect?: (member: FamilyMember) => void
   isHighlighted?: boolean
@@ -88,7 +89,7 @@ function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted, relatio
             className="h-full w-full object-cover"
           />
         ) : (
-          member.gender === 'female' ? (
+          member.gender === 'FEMALE' ? (
             <CircleUserRound className="h-8 w-8 text-pink-400" />
           ) : (
             <CircleUser className="h-8 w-8 text-blue-400" />
@@ -125,17 +126,24 @@ function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted, relatio
   )
 }
 
-export function FamilyNode({ member, spouse, isRoot, onSelect, isHighlighted, relationMode, isSelected }: FamilyNodeProps) {
-  if (!spouse) {
+export function FamilyNode({ member, spouse, spouses, isRoot, onSelect, isHighlighted, relationMode, isSelected }: FamilyNodeProps) {
+  // 优先使用 spouses 数组，如果没有则使用单个 spouse
+  const spouseList = spouses || (spouse ? [spouse] : [])
+  
+  if (spouseList.length === 0) {
     return <PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} relationMode={relationMode} isSelected={isSelected} />
   }
   
-  // 有配偶时，并排显示
+  // 有配偶时，并排显示所有配偶
   return (
     <div className="flex items-center gap-2">
       <PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} relationMode={relationMode} isSelected={isSelected} />
-      <Heart className="h-4 w-4 text-red-400 flex-shrink-0" />
-      <PersonCard member={spouse} isSpouse={true} onSelect={onSelect} relationMode={relationMode} />
+      {spouseList.map((spouseMember, index) => (
+        <div key={spouseMember.id} className="flex items-center gap-2">
+          <Heart className="h-4 w-4 text-red-400 flex-shrink-0" />
+          <PersonCard member={spouseMember} isSpouse={true} onSelect={onSelect} relationMode={relationMode} />
+        </div>
+      ))}
     </div>
   )
 }