0.0.4.0

components/tree/tree-layout.tsx

@@ -8,6 +8,9 @@ import { useRouter } from "next/navigation"
 interface TreeLayoutProps {
   rootId: string
   onSelectMember?: (member: FamilyMember) => void
+  relationMode?: boolean
+  selectedMembers?: string[]
+  onMemberClick?: (memberId: string) => void
 }
 
 interface Connection {
@@ -16,7 +19,13 @@ interface Connection {
   type: 'vertical' | 'horizontal'
 }
 
-export function TreeLayout({ rootId, onSelectMember }: TreeLayoutProps) {
+export function TreeLayout({ 
+  rootId, 
+  onSelectMember,
+  relationMode = false,
+  selectedMembers = [],
+  onMemberClick
+}: TreeLayoutProps) {
   const { getMember, treeData, highlightedMemberId } = useFamily()
   const root = getMember(rootId)
   const router = useRouter()
@@ -31,8 +40,12 @@ export function TreeLayout({ rootId, onSelectMember }: TreeLayoutProps) {
   
   // 处理节点点击
   const handleNodeClick = useCallback((member: FamilyMember) => {
-    router.push(`/members/${member.id}`)
-  }, [router])
+    if (relationMode && onMemberClick) {
+      onMemberClick(member.id)
+    } else {
+      router.push(`/members/${member.id}`)
+    }
+  }, [relationMode, onMemberClick, router])
 
   // 计算所有连线位置
   const calculateConnections = useCallback(() => {
@@ -150,6 +163,8 @@ export function TreeLayout({ rootId, onSelectMember }: TreeLayoutProps) {
             onSelect={handleNodeClick} 
             isRoot={isRoot}
             isHighlighted={member.id === highlightedMemberId}
+            relationMode={relationMode}
+            isSelected={selectedMembers.includes(member.id)}
           />
         </div>