0.3.0.0

app/tree/page.tsx

@@ -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() {