0.0.4.0

components/tree/d3-org-chart-flow.tsx

@@ -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
+})