0.0.4.0

2025-11-23 14:46:53 +08:00
parent 2b4bc92f1b
commit d797f1abb9
98 changed files with 187824 additions and 161 deletions
@@ -1,6 +1,6 @@
 "use client"

-import { useEffect, useRef, useState, forwardRef, useImperativeHandle } from "react"
+import { useEffect, useRef, useState, forwardRef, useImperativeHandle, memo } from "react"
 import * as d3 from "d3"
 // @ts-ignore - d3-org-chart没有TypeScript类型定义
 import { OrgChart } from "d3-org-chart"
@@ -14,6 +14,8 @@ interface D3OrgChartFlowProps {
  rootId: string
  onMemberClick?: (memberId: string) => void
  onExport?: () => void
+  relationMode?: boolean
+  selectedMembers?: string[]
 }

 export interface D3OrgChartRef {
@@ -57,8 +59,10 @@ function calculateAge(birthDate?: string, deathDate?: string): number | null {
  return age
 }

-export const D3OrgChartFlow = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
-  ({ members, rootId, onMemberClick, onExport }, ref) => {
+const D3OrgChartFlowComponent = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
+  ({ members, rootId, onMemberClick, onExport, relationMode = false, selectedMembers = [] }, ref) => {
+  console.log('D3OrgChartFlow render, selectedMembers:', selectedMembers, 'relationMode:', relationMode)
+  
  const chartRef = useRef<HTMLDivElement>(null)
  const chartInstanceRef = useRef<any>(null)
  const [isReady, setIsReady] = useState(false)
@@ -216,11 +220,15 @@ export const D3OrgChartFlow = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
        // 获取头像URL
        const avatarUrl = node.avatarImageId ? avatarCache.get(node.avatarImageId) : null
        
+        // 检查是否被选中
+        const isSelected = selectedMembers.includes(node.id)
+        
        return `
          <div style="
            position: relative;
            width: 160px;
            height: 120px;
+            box-sizing: border-box;
            background: ${node.deathYear ? '#fafafa' : 'white'};
            border: 2px solid ${color};
            border-radius: 10px;
@@ -253,8 +261,9 @@ export const D3OrgChartFlow = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
                }
              </div>
              <div style="flex: 1; min-width: 0;">
-                <div style="font-size: 13px; font-weight: 600; color: #1f2937; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                  ${node.name}
+                <div style="font-size: 13px; font-weight: 600; color: #1f2937; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px;">
+                  <span>${node.name}</span>
+                  ${isSelected ? `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>` : ''}
                </div>
                <div style="font-size: 9px; color: #6b7280; padding: 1px 4px; background: #f3f4f6; border-radius: 3px; display: inline-block;">
                  ${node.generation}
@@ -349,6 +358,9 @@ export const D3OrgChartFlow = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
    }
  }, [members, rootId, onMemberClick, avatarCache])

+  // 监听selectedMembers变化，动态显示/隐藏勾选图标
+  // 逻辑已移至tree/page.tsx以避免组件重新渲染
+  
  // 导出PNG
  const handleExportPNG = () => {
    if (!chartInstanceRef.current) return
@@ -440,4 +452,10 @@ export const D3OrgChartFlow = forwardRef<D3OrgChartRef, D3OrgChartFlowProps>(
  )
 })

-D3OrgChartFlow.displayName = 'D3OrgChartFlow'
+D3OrgChartFlowComponent.displayName = 'D3OrgChartFlow'
+
+// 使用memo优化，避免不必要的重新渲染
+export const D3OrgChartFlow = memo(D3OrgChartFlowComponent, (prevProps, nextProps) => {
+  return prevProps.rootId === nextProps.rootId && 
+         prevProps.members === nextProps.members
+})
@@ -11,6 +11,8 @@ interface FamilyNodeProps {
  isRoot?: boolean
  onSelect?: (member: FamilyMember) => void
  isHighlighted?: boolean
+  relationMode?: boolean
+  isSelected?: boolean
 }

 // 格式化日期显示（只显示年份）
@@ -38,7 +40,7 @@ function calculateAge(birthDate?: string, deathDate?: string): number | null {
 }

 // 单个人员卡片组件
-function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted }: { member: FamilyMember; isRoot?: boolean; isSpouse?: boolean; onSelect?: (member: FamilyMember) => void; isHighlighted?: boolean }) {
+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 birthYear = formatYear(member.birthDate)
@@ -61,13 +63,16 @@ function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted }: { mem
    <div
      className={cn(
        "family-node-card relative flex flex-col items-center gap-2 p-3 rounded-lg transition-all cursor-pointer hover:scale-105 shadow-sm w-32",
-        isHighlighted
-          ? "border-4 border-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 ring-4 ring-yellow-200 dark:ring-yellow-800 animate-pulse"
-          : isRoot 
-            ? "border-2 border-primary bg-primary/5" 
-            : isSpouse
-              ? "border-2 border-dashed border-border/60 bg-muted/30"
-              : "border-2 border-border bg-card",
+        isSelected
+          ? "border-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20 ring-4 ring-blue-200 dark:ring-blue-800"
+          : isHighlighted
+            ? "border-4 border-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 ring-4 ring-yellow-200 dark:ring-yellow-800 animate-pulse"
+            : isRoot 
+              ? "border-2 border-primary bg-primary/5" 
+              : isSpouse
+                ? "border-2 border-dashed border-border/60 bg-muted/30"
+                : "border-2 border-border bg-card",
+        relationMode && "hover:border-blue-400 hover:shadow-lg"
      )}
      onClick={() => onSelect?.(member)}
    >
@@ -120,17 +125,17 @@ function PersonCard({ member, isRoot, isSpouse, onSelect, isHighlighted }: { mem
  )
 }

-export function FamilyNode({ member, spouse, isRoot, onSelect, isHighlighted }: FamilyNodeProps) {
+export function FamilyNode({ member, spouse, isRoot, onSelect, isHighlighted, relationMode, isSelected }: FamilyNodeProps) {
  if (!spouse) {
-    return <PersonCard member={member} isRoot={isRoot} onSelect={onSelect} isHighlighted={isHighlighted} />
+    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} />
+      <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} />
+      <PersonCard member={spouse} isSpouse={true} onSelect={onSelect} relationMode={relationMode} />
    </div>
  )
 }
@@ -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>