0.3.1.3

components/tree/family-node.tsx

@@ -26,6 +26,7 @@ interface FamilyNodeProps {
   relationMode?: boolean
   isSelected?: boolean
   canEdit?: boolean
+  onAddRelation?: (type: "child" | "spouse") => void
 }
 
 // 格式化日期显示（只显示年份）
@@ -61,7 +62,8 @@ function PersonCard({
   isHighlighted, 
   relationMode, 
   isSelected,
-  canEdit = true 
+  canEdit = true,
+  onAddRelation
 }: { 
   member: FamilyMember
   isRoot?: boolean
@@ -71,6 +73,7 @@ function PersonCard({
   relationMode?: boolean
   isSelected?: boolean
   canEdit?: boolean
+  onAddRelation?: (type: "child" | "spouse") => void
 }) {
   const { avatarUrl: avatarBlobUrl } = useAvatarCache(member?.avatarUrl)
   const router = useRouter()
@@ -294,7 +297,11 @@ function PersonCard({
             className="gap-2 cursor-pointer"
             onPointerDown={(e) => {
               e.preventDefault()
-              handleAddMember('spouse')
+              if (onAddRelation) {
+                onAddRelation('spouse')
+              } else {
+                handleAddMember('spouse')
+              }
             }}
           >
             <Users className="h-4 w-4 text-red-500" />
@@ -307,7 +314,11 @@ function PersonCard({
             className="gap-2 cursor-pointer"
             onPointerDown={(e) => {
               e.preventDefault()
-              handleAddMember('child')
+              if (onAddRelation) {
+                onAddRelation('child')
+              } else {
+                handleAddMember('child')
+              }
             }}
           >
             <Baby className="h-4 w-4 text-green-500" />
@@ -319,18 +330,18 @@ function PersonCard({
   )
 }
 
-export function FamilyNode({ member, spouse, spouses, isRoot, onSelect, isHighlighted, relationMode, isSelected, canEdit = true }: FamilyNodeProps) {
+export function FamilyNode({ member, spouse, spouses, isRoot, onSelect, isHighlighted, relationMode, isSelected, canEdit = true, onAddRelation }: 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} canEdit={canEdit} />
+    return <PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} relationMode={relationMode} isSelected={isSelected} canEdit={canEdit} onAddRelation={onAddRelation} />
   }
   
   // 有配偶时，并排显示所有配偶
   return (
     <div className="flex items-center gap-2">
-      <PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} relationMode={relationMode} isSelected={isSelected} canEdit={canEdit} />
+      <PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} relationMode={relationMode} isSelected={isSelected} canEdit={canEdit} onAddRelation={onAddRelation} />
       {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" />