0.3.0.0

2025-11-30 09:16:43 +08:00
parent b436ae0680
commit fd9c064749
227 changed files with 1251 additions and 912 deletions
@@ -60,19 +60,20 @@ export async function GET(
      return NextResponse.json({ error: "无权访问此家族树" }, { status: 403 })
    }

-    // 获取家族树信息
-    const tree = await prisma.familyTree.findUnique({
-      where: { id: treeId },
-      select: { rootMemberId: true }
-    })
-
-    const members = await prisma.familyMember.findMany({
-      where: { treeId },
-      orderBy: [
-        { generation: 'asc' },
-        { createdAt: 'asc' }
-      ]
-    })
+    // 并行获取家族树信息和成员数据
+    const [tree, members] = await Promise.all([
+      prisma.familyTree.findUnique({
+        where: { id: treeId },
+        select: { rootMemberId: true }
+      }),
+      prisma.familyMember.findMany({
+        where: { treeId },
+        orderBy: [
+          { generation: 'asc' },
+          { createdAt: 'asc' }
+        ]
+      })
+    ])

    // 如果没有设置 rootMemberId，尝试找到第一代成员作为根
    let rootId = tree?.rootMemberId
@@ -80,22 +81,14 @@ export async function GET(
      const firstGenMember = members.find((m: any) => m.generation === 1)
      if (firstGenMember) {
        rootId = firstGenMember.id
-        // 更新家族树的 rootMemberId
-        await prisma.familyTree.update({
+        // 异步更新家族树的 rootMemberId（不阻塞响应）
+        prisma.familyTree.update({
          where: { id: treeId },
          data: { rootMemberId: firstGenMember.id }
-        })
+        }).catch(err => console.error('更新 rootMemberId 失败:', err))
      }
    }

-    console.log('👥 GET /api/trees/[treeId]/members 返回数据:', {
-      treeId,
-      userId: session.user.id,
-      membersCount: members.length,
-      rootId,
-      members: members.map(m => ({ id: m.id, fullName: m.fullName, generation: m.generation }))
-    })
-
    return NextResponse.json({ members, rootId })
  } catch (error) {
    console.error("获取成员失败:", error)
@@ -17,69 +17,68 @@ export async function GET(

    const { treeId } = await params

-    const tree = await prisma.familyTree.findFirst({
-      where: {
-        id: treeId,
-        OR: [
-          { ownerId: session.user.id },
-          {
-            collaborators: {
-              some: {
-                userId: session.user.id
+    // 并行查询树信息和协作者角色
+    const [tree, collaborator] = await Promise.all([
+      prisma.familyTree.findFirst({
+        where: {
+          id: treeId,
+          OR: [
+            { ownerId: session.user.id },
+            {
+              collaborators: {
+                some: {
+                  userId: session.user.id
+                }
              }
            }
-          }
-        ]
-      },
-      include: {
-        owner: {
-          select: {
-            id: true,
-            name: true,
-            email: true,
-          }
+          ]
        },
-        _count: {
-          select: {
-            members: true,
-            collaborators: true,
+        select: {
+          id: true,
+          name: true,
+          description: true,
+          rootMemberId: true,
+          ownerId: true,
+          createdAt: true,
+          updatedAt: true,
+          owner: {
+            select: {
+              id: true,
+              name: true,
+              email: true,
+            }
+          },
+          _count: {
+            select: {
+              members: true,
+              collaborators: true,
+            }
          }
        }
-      }
-    })
+      }),
+      prisma.treeCollaborator.findFirst({
+        where: {
+          treeId,
+          userId: session.user.id
+        },
+        select: { role: true }
+      })
+    ])

    if (!tree) {
      return NextResponse.json({ error: "家族树不存在或无权访问" }, { status: 404 })
    }

    // 计算当前用户角色
-    let currentUserRole = "VIEWER"
-    if (tree.ownerId === session.user.id) {
-      currentUserRole = "OWNER"
-    } else {
-      const collaborator = await prisma.treeCollaborator.findUnique({
-        where: {
-          treeId_userId: {
-            treeId: tree.id,
-            userId: session.user.id
-          }
-        }
-      })
-      if (collaborator) {
-        currentUserRole = collaborator.role
-      }
-    }
+    const currentUserRole = tree.ownerId === session.user.id 
+      ? "OWNER" 
+      : (collaborator?.role || "VIEWER")

-    console.log('🌳 GET /api/trees/[treeId] 返回数据:', {
-      treeId,
-      userId: session.user.id,
-      treeName: tree.name,
-      currentUserRole,
-      membersCount: tree._count.members,
-      collaboratorsCount: tree._count.collaborators
-    })
-
-    return NextResponse.json({ tree: { ...tree, currentUserRole } })
+    // 添加缓存头
+    const response = NextResponse.json({ tree: { ...tree, currentUserRole } })
+    response.headers.set('Cache-Control', 'private, max-age=60, stale-while-revalidate=30')
+    
+    return response
  } catch (error) {
    console.error("获取家族树失败:", error)
    return NextResponse.json(
@@ -18,42 +18,59 @@ export async function GET(req: NextRequest) {
      return NextResponse.json({ error: "未授权" }, { status: 401 })
    }

-    // 1. 查询拥有的家族树
-    const ownedTrees = await prisma.familyTree.findMany({
-      where: { ownerId: session.user.id },
-      include: {
-        owner: {
-          select: { id: true, name: true, email: true }
+    // 使用并行查询优化性能
+    const [ownedTrees, collaboratedRelations] = await Promise.all([
+      // 1. 查询拥有的家族树 - 只选择必要字段
+      prisma.familyTree.findMany({
+        where: { ownerId: session.user.id },
+        select: {
+          id: true,
+          name: true,
+          description: true,
+          rootMemberId: true,
+          ownerId: true,
+          createdAt: true,
+          updatedAt: true,
+          owner: {
+            select: { id: true, name: true, email: true }
+          },
+          _count: {
+            select: { members: true, collaborators: true }
+          }
        },
-        _count: {
-          select: { members: true, collaborators: true }
-        }
-      },
-      orderBy: { updatedAt: 'desc' }
-    })
-
-    // 2. 查询协作的家族树
-    const collaboratedRelations = await prisma.treeCollaborator.findMany({
-      where: { userId: session.user.id },
-      include: {
-        tree: {
-          include: {
-            owner: {
-              select: { id: true, name: true, email: true }
-            },
-            _count: {
-              select: { members: true, collaborators: true }
+        orderBy: { updatedAt: 'desc' }
+      }),
+      // 2. 查询协作的家族树
+      prisma.treeCollaborator.findMany({
+        where: { userId: session.user.id },
+        select: {
+          role: true,
+          tree: {
+            select: {
+              id: true,
+              name: true,
+              description: true,
+              rootMemberId: true,
+              ownerId: true,
+              createdAt: true,
+              updatedAt: true,
+              owner: {
+                select: { id: true, name: true, email: true }
+              },
+              _count: {
+                select: { members: true, collaborators: true }
+              }
            }
          }
-        }
-      },
-      orderBy: { invitedAt: 'desc' }
-    })
+        },
+        orderBy: { invitedAt: 'desc' }
+      })
+    ])

    // 3. 格式化数据
    const formattedOwnedTrees = ownedTrees.map(tree => ({
      ...tree,
-      currentUserRole: "OWNER"
+      currentUserRole: "OWNER" as const
    }))

    const formattedCollaboratedTrees = collaboratedRelations.map(relation => ({
@@ -64,14 +81,6 @@ export async function GET(req: NextRequest) {
    // 4. 合并列表
    const trees = [...formattedOwnedTrees, ...formattedCollaboratedTrees]

-    console.log('🌳 GET /api/trees 返回数据:', {
-      userId: session.user.id,
-      ownedCount: formattedOwnedTrees.length,
-      collaboratedCount: formattedCollaboratedTrees.length,
-      totalCount: trees.length,
-      trees: trees.map(t => ({ id: t.id, name: t.name, role: t.currentUserRole }))
-    })
-
    return NextResponse.json({ trees })
  } catch (error) {
    console.error("获取家族树失败:", error)
@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server"
+import { getServerSession } from "next-auth"
+import { authOptions } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+
+export async function PATCH() {
+  try {
+    const session = await getServerSession(authOptions)
+
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "未授权" }, { status: 401 })
+    }
+
+    await prisma.user.update({
+      where: { id: session.user.id },
+      data: { hasSeenHelp: true },
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("更新使用帮助标记失败:", error)
+    return NextResponse.json({ error: "更新失败" }, { status: 500 })
+  }
+}
@@ -1,11 +1,41 @@
 "use client"

+import { useEffect } from "react"
+import { useSession } from "next-auth/react"
+import { useRouter } from "next/navigation"
 import { SiteHeader } from "@/components/site-header"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
 import { BookOpen, Users, Network, Settings, Shield, FileText } from "lucide-react"

 export default function HelpPage() {
+  const { data: session, status, update } = useSession()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (status !== "authenticated") return
+    if (session?.user?.hasSeenHelp) return
+
+    const markHelpSeen = async () => {
+      try {
+        const response = await fetch("/api/users/me/seen-help", {
+          method: "PATCH",
+        })
+
+        if (!response.ok) {
+          throw new Error("failed to update help status")
+        }
+
+        await update({ user: { hasSeenHelp: true } })
+      } catch (error) {
+        console.error("标记使用帮助状态失败:", error)
+      }
+    }
+
+    markHelpSeen()
+  }, [status, session?.user?.hasSeenHelp, update])
+
  return (
    <div className="h-screen flex flex-col bg-background">
      <SiteHeader />
@@ -19,6 +49,11 @@ export default function HelpPage() {
              <p className="text-muted-foreground">
                华夏家谱系统使用指南
              </p>
+              <div className="mt-4">
+                <Button onClick={() => router.replace("/")} size="lg">
+                  前往总览页面
+                </Button>
+              </div>
            </div>

            <Tabs defaultValue="guide" className="space-y-6">
@@ -1,3 +1,12 @@
+import { Loader2 } from "lucide-react"
+
 export default function Loading() {
-  return null
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="flex flex-col items-center gap-4">
+        <Loader2 className="h-10 w-10 animate-spin text-primary" />
+        <p className="text-sm text-muted-foreground font-serif">加载中...</p>
+      </div>
+    </div>
+  )
 }
@@ -27,6 +27,7 @@ export default function MemberProfilePage() {
  const [isEditing, setIsEditing] = useState(false)
  const [avatarBlobUrl, setAvatarBlobUrl] = useState<string | undefined>(undefined)
  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false)
+  const [lastSaveTime, setLastSaveTime] = useState(Date.now())
  
  // 未登录时重定向到登录页
  useEffect(() => {
@@ -94,9 +95,10 @@ export default function MemberProfilePage() {
    )
  }

-  const handleSave = (updatedMember: FamilyMember) => {
-    updateMember(updatedMember.id, updatedMember)
+  const handleSave = async (updatedMember: FamilyMember) => {
+    await updateMember(updatedMember.id, updatedMember)
    setIsEditing(false)
+    setLastSaveTime(Date.now())
  }

  const handleDelete = async () => {
@@ -173,6 +175,7 @@ export default function MemberProfilePage() {

      // 显示新头像
      setAvatarBlobUrl(url)
+      setLastSaveTime(Date.now())
    } catch (error) {
      console.error('上传头像失败:', error)
      alert('上传头像失败: ' + (error instanceof Error ? error.message : '未知错误'))
@@ -250,6 +253,18 @@ export default function MemberProfilePage() {
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="container mx-auto py-8 px-4 md:px-6">
+        {/* 返回按钮 */}
+        <div className="mb-6">
+          <Button 
+            variant="ghost" 
+            onClick={() => router.push(`/members${typeof window !== 'undefined' ? window.location.search : ''}`)}
+            className="gap-2 pl-0 hover:bg-transparent hover:text-primary text-2xl font-bold"
+          >
+            <ArrowLeft className="h-6 w-6" />
+            返回成员列表
+          </Button>
+        </div>
+
        {/* 始祖特殊提示框 */}
        {member.isFounder && (
          <div className="mb-6 p-6 bg-gradient-to-br from-amber-50 via-orange-50 to-amber-50 border-2 border-amber-400 rounded-xl shadow-md">
@@ -639,7 +654,10 @@ export default function MemberProfilePage() {
                <div className={`bg-card p-6 rounded-lg ${founderBorderClass} shadow-sm`}>
                  <PhotoGallery
                    photoIds={member.photoIds}
-                    onChange={(photoIds) => updateMember(member.id, { photoIds })}
+                    onChange={async (photoIds) => {
+                      await updateMember(member.id, { photoIds })
+                      setLastSaveTime(Date.now())
+                    }}
                    readonly={false}
                  />
                </div>
@@ -656,7 +674,10 @@ export default function MemberProfilePage() {
                <div className={`bg-card p-6 rounded-lg ${founderBorderClass} shadow-sm`}>
                  <StoryManager
                    stories={member.stories}
-                    onChange={(stories) => updateMember(member.id, { stories })}
+                    onChange={async (stories) => {
+                      await updateMember(member.id, { stories })
+                      setLastSaveTime(Date.now())
+                    }}
                    readonly={false}
                  />
                </div>
@@ -674,6 +695,7 @@ export default function MemberProfilePage() {
              <MemberVersionHistory 
                memberId={member.id}
                treeId={currentTree?.id || ''}
+                lastUpdated={lastSaveTime}
              />
            </section>
          </div>
@@ -3,15 +3,16 @@
 import type React from "react"
 import Link from "next/link"
 import Image from "next/image"
+import dynamic from "next/dynamic"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { SiteHeader } from "@/components/site-header"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { UserPlus, Network, Map, Calendar, Users, ArrowRight, Clock, Search, BookOpen, BarChart3, Calculator } from "lucide-react"
+import { UserPlus, Network, Map, Calendar, Users, ArrowRight, Clock, Search, BookOpen, BarChart3, Calculator, Loader2 } from "lucide-react"
 import { useFamily } from "@/context/family-context"
-import { useMemo, useState, useEffect, useRef } from "react"
-import { StatisticsCharts } from "@/components/dashboard/statistics-charts"
+import { useMemo, useState, useEffect, useRef, useCallback } from "react"
+import { useRouter } from "next/navigation"
 import { format } from "date-fns"
 import { useSession } from "next-auth/react"
 import { useSearchParams } from "next/navigation"
@@ -20,6 +21,20 @@ import { permissions } from "@/lib/permissions"
 import { isInCurrentMonth, solar2lunar, lunar2solar } from "@/lib/lunar-calendar"
 import { MemberNameWithStatus } from "@/components/member-name-with-status"

+// 动态导入统计图表组件（减少初始加载体积）
+const StatisticsCharts = dynamic(
+  () => import("@/components/dashboard/statistics-charts").then(mod => ({ default: mod.StatisticsCharts })),
+  { 
+    ssr: false,
+    loading: () => (
+      <div className="w-full h-64 flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <span className="ml-2 text-muted-foreground">加载统计图表...</span>
+      </div>
+    )
+  }
+)
+
 interface ActivityLog {
  id: string
  action: string
@@ -38,17 +53,14 @@ export default function DashboardPage() {
  const { treeData, isLoading, currentTree } = useFamily()
  const { data: session } = useSession()
  const [recentActivities, setRecentActivities] = useState<ActivityLog[]>([])
+  const router = useRouter()
  
-  // 检查是否首次登录，如果是则跳转到帮助页面
+  // 首次登录跳转到使用帮助
  useEffect(() => {
-    if (session?.user?.id) {
-      const hasVisited = localStorage.getItem(`user_${session.user.id}_visited`)
-      if (!hasVisited) {
-        localStorage.setItem(`user_${session.user.id}_visited`, 'true')
-        window.location.href = '/help'
-      }
-    }
-  }, [session?.user?.id])
+    if (!session?.user?.id) return
+    if (session.user.hasSeenHelp) return
+    router.replace('/help')
+  }, [router, session?.user?.id, session?.user?.hasSeenHelp])
  
  // 加载最近的操作日志
  useEffect(() => {
@@ -578,12 +590,31 @@ export default function DashboardPage() {
                                   activity.action === 'DELETE' ? '删除' : '导入'}
                                </span>
                                {activity.entityId && activity.entityType === 'MEMBER' ? (
-                                  <Link 
-                                    href={`/members/${activity.entityId}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`}
-                                    className="font-medium hover:text-primary hover:underline transition-colors"
-                                  >
-                                    {activity.entityName || '未知'}
-                                  </Link>
+                                  (() => {
+                                    const member = treeData.members[activity.entityId!]
+                                    if (member) {
+                                      return (
+                                        <MemberNameWithStatus 
+                                          name={activity.entityName || member.fullName || '未知'}
+                                          isDead={!!member.deathDate}
+                                          memberId={activity.entityId}
+                                          treeId={currentTree?.id}
+                                          className="font-medium"
+                                        />
+                                      )
+                                    }
+                                    // 成员不存在（可能已删除），不显示状态点，但保留链接（如果不是删除操作）
+                                    return activity.action === 'DELETE' ? (
+                                      <span className="font-medium">{activity.entityName || '未知'}</span>
+                                    ) : (
+                                      <Link 
+                                        href={`/members/${activity.entityId}${currentTree?.id ? `?treeId=${currentTree.id}` : ''}`}
+                                        className="font-medium hover:text-primary hover:underline transition-colors"
+                                      >
+                                        {activity.entityName || '未知'}
+                                      </Link>
+                                    )
+                                  })()
                                ) : (
                                  <span className="font-medium">{activity.entityName || '未知'}</span>
                                )}
@@ -4,16 +4,13 @@ import { useFamily } from "@/context/family-context"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import { Clock, Map as MapIcon, ArrowRight, Calendar, User } from 'lucide-react'
-import dynamic from 'next/dynamic'
-import { useMemo, useEffect, useState } from 'react'
-import * as echarts from 'echarts'
+import { Clock, Map as MapIcon, ArrowRight, Calendar, User, Loader2 } from 'lucide-react'
+import { useMemo, useEffect, useState, useRef, useCallback } from 'react'
 import { MemberNameWithStatus } from "@/components/member-name-with-status"
 import { useSession } from 'next-auth/react'
 import { EmptyStateBadge } from '@/components/empty-state-badge'
 import { useRouter } from 'next/navigation'
-
-const ReactECharts = dynamic(() => import('echarts-for-react'), { ssr: false })
+import type { ECharts } from 'echarts'

 // 中国地图 GeoJSON 数据 - 完整的轮廓
 const chinaGeoJSON = {
@@ -194,6 +191,7 @@ export default function TimelinePage() {
  const [mapLoaded, setMapLoaded] = useState(false)
  const treeId = currentTree?.id
  const router = useRouter()
+  const chartInstanceRef = useRef<ECharts | null>(null)
  
  // 未登录时重定向到登录页
  useEffect(() => {
@@ -204,18 +202,38 @@ export default function TimelinePage() {
  
  // 注册中国地图 - 从外部文件加载完整数据（必须在条件渲染之前）
  useEffect(() => {
-    fetch('/china.json')
-      .then(response => response.json())
-      .then(geoJson => {
-        echarts.registerMap('china', geoJson)
-        setMapLoaded(true)
-      })
-      .catch(error => {
-        console.error('Failed to load China map:', error)
-        // 如果加载失败，使用简化版本
-        echarts.registerMap('china', chinaGeoJSON as any)
-        setMapLoaded(true)
-      })
+    let isMounted = true
+    
+    // 动态导入 echarts 并注册地图
+    const loadMap = async () => {
+      try {
+        const echarts = await import('echarts')
+        
+        try {
+          const response = await fetch('/china.json')
+          const geoJson = await response.json()
+          if (isMounted) {
+            echarts.registerMap('china', geoJson)
+            setMapLoaded(true)
+          }
+        } catch (fetchError) {
+          console.error('Failed to load China map JSON, using fallback:', fetchError)
+          // 如果加载失败，使用简化版本
+          if (isMounted) {
+            echarts.registerMap('china', chinaGeoJSON as any)
+            setMapLoaded(true)
+          }
+        }
+      } catch (importError) {
+        console.error('Failed to import echarts:', importError)
+      }
+    }
+    
+    loadMap()
+    
+    return () => {
+      isMounted = false
+    }
  }, [])

  // -- Timeline Logic -- (必须在条件渲染之前)
@@ -482,6 +500,50 @@ export default function TimelinePage() {
    }
  }, [migrations])

+  // 使用 callback ref 来确保 DOM 元素挂载后初始化图表
+  const initChartRef = useCallback((node: HTMLDivElement | null) => {
+    if (!node || !mapLoaded) {
+      console.log('initChartRef: node或mapLoaded不存在', { node: !!node, mapLoaded })
+      return
+    }
+    
+    console.log('initChartRef: 开始初始化图表')
+    
+    // 动态导入并初始化图表
+    import('echarts').then((echarts) => {
+      // 再次检查节点是否存在
+      if (!node) return
+      
+      // 检查是否已有实例
+      let chart = echarts.getInstanceByDom(node)
+      
+      if (!chart) {
+        console.log('创建新的图表实例')
+        // 创建新实例
+        chart = echarts.init(node)
+        chartInstanceRef.current = chart
+        
+        // 监听窗口大小变化
+        const handleResize = () => {
+          chart?.resize()
+        }
+        window.addEventListener('resize', handleResize)
+        
+        // 保存清理函数到节点
+        ;(node as any).__resizeHandler = handleResize
+      } else {
+        console.log('使用已有的图表实例')
+      }
+      
+      // 设置选项
+      console.log('设置图表选项')
+      chart.setOption(mapOption, { notMerge: true })
+      console.log('图表选项设置完成')
+    }).catch(error => {
+      console.error('Failed to initialize chart:', error)
+    })
+  }, [mapLoaded, mapOption])
+
  // 未登录时不渲染内容（已在 useEffect 中重定向）
  if (status === 'loading' || !session) {
    return null
@@ -724,23 +786,10 @@ export default function TimelinePage() {
                          <p>加载地图中...</p>
                        </div>
                      </div>
-                    ) : migrations.length === 0 ? (
-                      <div className="flex items-center justify-center h-full">
-                        <div className="text-center space-y-4">
-                          <div className="inline-flex items-center justify-center w-16 h-16 text-primary/80">
-                            <MapIcon className="h-16 w-16" strokeWidth={1} />
-                          </div>
-                          <p className="text-sm text-foreground font-light tracking-wide">山河未绘</p>
-                        </div>
-                      </div>
                    ) : (
-                      <ReactECharts 
-                        key="migration-map"
-                        option={mapOption} 
+                      <div 
+                        ref={initChartRef}
                        style={{ height: '100%', width: '100%' }}
-                        opts={{ renderer: 'canvas' }}
-                        notMerge={true}
-                        lazyUpdate={true}
                      />
                    )}
                  </div>
@@ -1,10 +1,10 @@
 "use client"

 import type React from "react"
+import dynamic from "next/dynamic"

 import { SiteHeader } from "@/components/site-header"
 import { TreeLayout } from "@/components/tree/tree-layout"
-import { D3OrgChartFlow, type D3OrgChartRef } from "@/components/tree/d3-org-chart-flow"
 import { useFamily } from "@/context/family-context"
 import { useRelationship } from "@/hooks/use-relationship"
 import { Button } from "@/components/ui/button"
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Badge } from "@/components/ui/badge"
-import { ZoomIn, ZoomOut, Move, Download, LayoutGrid, ChevronDown, Users, Network, User } from "lucide-react"
+import { ZoomIn, ZoomOut, Move, Download, LayoutGrid, ChevronDown, Users, Network, User, Loader2 } from "lucide-react"
 import { useState, useRef, useEffect, useCallback } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
 import { MemberNameWithStatus } from "@/components/member-name-with-status"
@@ -24,6 +24,23 @@ import { RelationshipPathDisplay } from "@/components/relationship-path-display"
 import { useSession } from "next-auth/react"
 import { EmptyStateBadge } from "@/components/empty-state-badge"

+// 动态导入 D3 图表组件（减少初始加载体积）
+const D3OrgChartFlow = dynamic(
+  () => import("@/components/tree/d3-org-chart-flow").then(mod => ({ default: mod.D3OrgChartFlow })),
+  { 
+    ssr: false,
+    loading: () => (
+      <div className="w-full h-full flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <span className="ml-2 text-muted-foreground">加载图表组件...</span>
+      </div>
+    )
+  }
+)
+
+// 导入类型
+import type { D3OrgChartRef } from "@/components/tree/d3-org-chart-flow"
+
 type ViewMode = "traditional" | "d3-org-chart"

 export default function TreePage() {