diff --git a/CloudBuilder/CloudBuilder.Master.Service/FamilyTreeService.auto.cs b/CloudBuilder/CloudBuilder.Master.Service/FamilyTreeService.auto.cs
index 985c0e4..b86a1a0 100644
--- a/CloudBuilder/CloudBuilder.Master.Service/FamilyTreeService.auto.cs
+++ b/CloudBuilder/CloudBuilder.Master.Service/FamilyTreeService.auto.cs
@@ -25,6 +25,39 @@ namespace CloudBuilder.Master.Service
             this.service = service;
             repository = service.GetRepository<IRepository<FamilyTreeEntity>>();
         }
+
+        [PermissionOperate(name: MasterPermissionPolicy.FamilyTree, operate: Operate.Find)]
+        public FamilyTreeData FindAllByTreeId(string treeId)
+        {
+            FamilyTreeData data = new FamilyTreeData();
+            if (string.IsNullOrEmpty(treeId)) return data;
+
+            FamilyTreeEntity d = repository.DetachedEntities.Where(x => x.TreeId == treeId).FirstOrDefault();
+
+            if (d == null) return data;
+
+            data.FamilyTree = new FamilyTreeDisplayData(d);
+            data.CurrentPerson = new FamilyPersonData();
+
+            IRepository<FamilyPersonEntity> repositoryFamilyPerson = repository.GetRepository<IRepository<FamilyPersonEntity>>();
+
+            var currentPerson = d.AncestorPersonId;
+
+            data.CurrentPerson.FamilyPerson = new FamilyPersonDisplayData(repositoryFamilyPerson.DetachedEntities.Where(x => x.PersonId == currentPerson).FirstOrDefault()!);
+
+            data.FamilyTree.AncestorPersonGenealogyName = data.CurrentPerson.FamilyPerson.GenealogyName;
+
+            IRepository<FamilyTreeChildrenMapViewEntity> repositoryChildrenMap = repository.GetRepository<IRepository<FamilyTreeChildrenMapViewEntity>>();
+
+            IRepository<FamilyTreeSpouseMapViewEntity> repositorySpouseMap = repository.GetRepository<IRepository<FamilyTreeSpouseMapViewEntity>>();
+
+            data.CurrentPerson.FamilyTreeSpouseMaps = repositorySpouseMap.GetRepository<IRepository<FamilyTreeSpouseMapViewEntity>>().DetachedEntities.Where(x => x.TreeId == treeId).OrderBy(x => x.Orderby).ToArray();
+
+            data.CurrentPerson.FamilyTreeChildrenMaps = repositoryChildrenMap.GetRepository<IRepository<FamilyTreeChildrenMapViewEntity>>().DetachedEntities.Where(x => x.TreeId == treeId).OrderBy(x => x.Orderby).ToArray();
+
+            return data;
+        }
+
         [PermissionOperate(name: MasterPermissionPolicy.FamilyTree, operate: Operate.Find)]
         public FamilyTreeData FindByKey(string key)
         {
diff --git a/CloudBuilder/CloudBuilder.Master/Service/IFamilyTreeService.auto.cs b/CloudBuilder/CloudBuilder.Master/Service/IFamilyTreeService.auto.cs
index aae8e9d..02b46af 100644
--- a/CloudBuilder/CloudBuilder.Master/Service/IFamilyTreeService.auto.cs
+++ b/CloudBuilder/CloudBuilder.Master/Service/IFamilyTreeService.auto.cs
@@ -9,6 +9,7 @@ namespace CloudBuilder.Master.Service
 {
     public interface IFamilyTreeService : IServiceBase<FamilyTreeData, string, FamilyTreeSearchCriteria>
     {
+        FamilyTreeData FindAllByTreeId(string treeId);
         FamilyTreeData FindByCurrentPerson(string key, string personId);
         FamilyTreeResultData FindBySearchCriteria(FamilyTreeSearchCriteria tc);
         dynamic PrintBySearchCriteria(FamilyTreeSearchCriteria tc);
diff --git a/CloudBuilder/CloudBuilder.Request/Master/FamilyTreeRequest.auto.cs b/CloudBuilder/CloudBuilder.Request/Master/FamilyTreeRequest.auto.cs
index f846825..b77d22f 100644
--- a/CloudBuilder/CloudBuilder.Request/Master/FamilyTreeRequest.auto.cs
+++ b/CloudBuilder/CloudBuilder.Request/Master/FamilyTreeRequest.auto.cs
@@ -22,7 +22,11 @@ public FamilyTreeRequest(IServiceRequest serviceRequest)
 this.serviceRequest = serviceRequest;
 }
 
-        public  FamilyTreeData FindByKey(string key)       
+        public  FamilyTreeData FindAllByTreeId(string treeId)       
+                {
+return Task.Run(() =>   serviceRequest.PostAsJsonAsync<FamilyTreeData>("/FamilyTree/FindAllByTreeId?treeId=" + treeId.ToString())).GetAwaiter().GetResult();                }
+
+                        public  FamilyTreeData FindByKey(string key)       
                 {
 return Task.Run(() =>   serviceRequest.PostAsJsonAsync<FamilyTreeData>("/FamilyTree/FindByKey?key=" + key.ToString())).GetAwaiter().GetResult();                }
 
diff --git a/CloudBuilder/CloudBuilder.Web.Entry/Controllers/Master/FamilyTreeController.auto.cs b/CloudBuilder/CloudBuilder.Web.Entry/Controllers/Master/FamilyTreeController.auto.cs
index 1b6ae4c..fad56ec 100644
--- a/CloudBuilder/CloudBuilder.Web.Entry/Controllers/Master/FamilyTreeController.auto.cs
+++ b/CloudBuilder/CloudBuilder.Web.Entry/Controllers/Master/FamilyTreeController.auto.cs
@@ -29,6 +29,26 @@ this.familyTreeService= familyTreeService;
 }
 
         [PermissionOperate(name: "FamilyTree", operate: "Find")]
+                            [HttpPost]
+                            public dynamic FindAllByTreeId(string treeId)       
+                    {
+                    try
+                    {            
+
+                    var result = familyTreeService.FindAllByTreeId(treeId);
+                    return result;
+                    }
+                    catch (ValidatedException vex)
+                    {
+                    return vex;
+                    }            
+                    catch (Exception ex)
+                    {
+                    return new ServiceErrorException(ex);
+                    }           
+                    }
+
+                            [PermissionOperate(name: "FamilyTree", operate: "Find")]
                             [HttpPost]
                             public dynamic FindByKey(string key)       
                     {
diff --git a/WebVue/package-lock.json b/WebVue/package-lock.json
index 2abc875..221aecc 100644
--- a/WebVue/package-lock.json
+++ b/WebVue/package-lock.json
@@ -1,14 +1,16 @@
 {
-  "name": "webmaster",
+  "name": "webvue",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "webmaster",
+      "name": "webvue",
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/icons-vue": "^7.0.1",
+        "@antv/g6": "^5.1.1",
+        "@babel/runtime": "^7.24.0",
         "@simplewebauthn/browser": "^13.1.0",
         "@types/crypto-js": "^4.2.2",
         "@types/lodash-es": "^4.17.12",
@@ -24,6 +26,7 @@
         "crypto-js": "^4.2.0",
         "gsap": "^3.12.5",
         "howler": "^2.2.4",
+        "html2canvas": "^1.4.1",
         "jsencrypt": "^3.3.2",
         "lodash-es": "^4.17.21",
         "pinia": "^2.1.7",
@@ -85,6 +88,264 @@
         "vue": ">=3.0.3"
       }
     },
+    "node_modules/@antv/algorithm": {
+      "version": "0.1.26",
+      "resolved": "https://registry.npmmirror.com/@antv/algorithm/-/algorithm-0.1.26.tgz",
+      "integrity": "sha512-DVhcFSQ8YQnMNW34Mk8BSsfc61iC1sAnmcfYoXTAshYHuU50p/6b7x3QYaGctDNKWGvi1ub7mPcSY0bK+aN0qg==",
+      "dependencies": {
+        "@antv/util": "^2.0.13",
+        "tslib": "^2.0.0"
+      }
+    },
+    "node_modules/@antv/algorithm/node_modules/@antv/util": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmmirror.com/@antv/util/-/util-2.0.17.tgz",
+      "integrity": "sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==",
+      "dependencies": {
+        "csstype": "^3.0.8",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/component": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmmirror.com/@antv/component/-/component-2.1.11.tgz",
+      "integrity": "sha512-dTdz8VAd3rpjOaGEZTluz82mtzrP4XCtNlNQyrxY7VNRNcjtvpTLDn57bUL2lRu1T+iklKvgbE2llMriWkq9vQ==",
+      "dependencies": {
+        "@antv/g": "^6.1.11",
+        "@antv/scale": "^0.4.16",
+        "@antv/util": "^3.3.10",
+        "svg-path-parser": "^1.1.0"
+      }
+    },
+    "node_modules/@antv/event-emitter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmmirror.com/@antv/event-emitter/-/event-emitter-0.1.3.tgz",
+      "integrity": "sha512-4ddpsiHN9Pd4UIlWuKVK1C4IiZIdbwQvy9i7DUSI3xNJ89FPUFt8lxDYj8GzzfdllV0NkJTRxnG+FvLk0llidg=="
+    },
+    "node_modules/@antv/expr": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@antv/expr/-/expr-1.0.2.tgz",
+      "integrity": "sha512-vrfdmPHkTuiS5voVutKl2l06w1ihBh9A8SFdQPEE+2KMVpkymzGOF1eWpfkbGZ7tiFE15GodVdhhHomD/hdIwg=="
+    },
+    "node_modules/@antv/g": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/@antv/g/-/g-6.3.1.tgz",
+      "integrity": "sha512-WYEKqy86LHB2PzTmrZXrIsIe+3Epeds2f68zceQ+BJtRoGki7Sy4IhlC8LrUMztgfT1t3d/0L745NWZwITroKA==",
+      "dependencies": {
+        "@antv/g-lite": "2.7.0",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "html2canvas": "^1.4.1"
+      }
+    },
+    "node_modules/@antv/g-canvas": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@antv/g-canvas/-/g-canvas-2.2.0.tgz",
+      "integrity": "sha512-h7zVBBo2aO64DuGKvq9sG+yTU3sCUb9DALCVm7nz8qGPs8hhLuFOkKPEzUDNfNYZGJUGzY8UDtJ3QRGRFcvEQg==",
+      "dependencies": {
+        "@antv/g-lite": "2.7.0",
+        "@antv/g-math": "3.1.0",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-canvas/node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@antv/g-lite": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/@antv/g-lite/-/g-lite-2.7.0.tgz",
+      "integrity": "sha512-uSzgHYa5bwR5L2Au7/5tsOhFmXKZKLPBH90+Q9bP9teVs5VT4kOAi0isPSpDI8uhdDC2/VrfTWu5K9HhWI6FWw==",
+      "dependencies": {
+        "@antv/g-math": "3.1.0",
+        "@antv/util": "^3.3.5",
+        "@antv/vendor": "^1.0.3",
+        "@babel/runtime": "^7.25.6",
+        "eventemitter3": "^5.0.1",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-lite/node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@antv/g-math": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/@antv/g-math/-/g-math-3.1.0.tgz",
+      "integrity": "sha512-DtN1Gj/yI0UiK18nSBsZX8RK0LszGwqfb+cBYWgE+ddyTm8dZnW4tPUhV7QXePsS6/A5hHC+JFpAAK7OEGo5ZQ==",
+      "dependencies": {
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-math/node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@antv/g-plugin-dragndrop": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/@antv/g-plugin-dragndrop/-/g-plugin-dragndrop-2.1.1.tgz",
+      "integrity": "sha512-+aesDUJVQDs6UJ2bOBbDlaGAPCfHmU0MbrMTlQlfpwNplWueqtgVAZ3L57oZ2ZGHRWUHiRwZGPjXMBM3O2LELw==",
+      "dependencies": {
+        "@antv/g-lite": "2.7.0",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-dragndrop/node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@antv/g/node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@antv/g6": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/@antv/g6/-/g6-5.1.1.tgz",
+      "integrity": "sha512-50bXxMUf4mChyOv4ePVeWZLwotih9VunKfp0a++Wofv/wCyY8fb9+CV2wouIBCOZnd5ydBRA4NNaX9yLJzqa2w==",
+      "dependencies": {
+        "@antv/algorithm": "^0.1.26",
+        "@antv/component": "^2.1.7",
+        "@antv/event-emitter": "^0.1.3",
+        "@antv/g": "^6.1.28",
+        "@antv/g-canvas": "^2.0.48",
+        "@antv/g-plugin-dragndrop": "^2.0.38",
+        "@antv/graphlib": "^2.0.4",
+        "@antv/hierarchy": "^0.7.1",
+        "@antv/layout": "^2.0.0",
+        "@antv/util": "^3.3.11",
+        "bubblesets-js": "^2.3.4"
+      }
+    },
+    "node_modules/@antv/graphlib": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/@antv/graphlib/-/graphlib-2.0.4.tgz",
+      "integrity": "sha512-zc/5oQlsdk42Z0ib1mGklwzhJ5vczLFiPa1v7DgJkTbgJ2YxRh9xdarf86zI49sKVJmgbweRpJs7Nu5bIiwv4w==",
+      "dependencies": {
+        "@antv/event-emitter": "^0.1.3"
+      }
+    },
+    "node_modules/@antv/hierarchy": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmmirror.com/@antv/hierarchy/-/hierarchy-0.7.1.tgz",
+      "integrity": "sha512-7r22r+HxfcRZp79ZjGmsn97zgC1Iajrv0Mm9DIgx3lPfk+Kme2MG/+EKdZj1iEBsN0rJRzjWVPGL5YrBdVHchw=="
+    },
+    "node_modules/@antv/layout": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/@antv/layout/-/layout-2.0.0.tgz",
+      "integrity": "sha512-aCZ3UdNc40SfT7meFV7QTADY2HCnc0DShVw56CJNTI6oExUIVU736grPuL5Dhb8/JrVaU4Y83QPN/P7KafBzlw==",
+      "dependencies": {
+        "@antv/event-emitter": "^0.1.3",
+        "@antv/expr": "^1.0.2",
+        "@antv/graphlib": "^2.0.0",
+        "@antv/util": "^3.3.2",
+        "comlink": "^4.4.1",
+        "d3-force": "^3.0.0",
+        "d3-force-3d": "^3.0.5",
+        "d3-octree": "^1.0.2",
+        "d3-quadtree": "^3.0.1",
+        "dagre": "^0.8.5",
+        "ml-matrix": "^6.10.4",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@antv/scale": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmmirror.com/@antv/scale/-/scale-0.4.16.tgz",
+      "integrity": "sha512-5wg/zB5kXHxpTV5OYwJD3ja6R8yTiqIOkjOhmpEJiowkzRlbEC/BOyMvNUq5fqFIHnMCE9woO7+c3zxEQCKPjw==",
+      "dependencies": {
+        "@antv/util": "^3.3.7",
+        "color-string": "^1.5.5",
+        "fecha": "^4.2.1"
+      }
+    },
+    "node_modules/@antv/util": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/@antv/util/-/util-3.3.11.tgz",
+      "integrity": "sha512-FII08DFM4ABh2q5rPYdr0hMtKXRgeZazvXaFYCs7J7uTcWDHUhczab2qOCJLNDugoj8jFag1djb7wS9ehaRYBg==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "gl-matrix": "^3.3.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@antv/vendor": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmmirror.com/@antv/vendor/-/vendor-1.0.11.tgz",
+      "integrity": "sha512-LmhPEQ+aapk3barntaiIxJ5VHno/Tyab2JnfdcPzp5xONh/8VSfed4bo/9xKo5HcUAEydko38vYLfj6lJliLiw==",
+      "dependencies": {
+        "@types/d3-array": "^3.2.1",
+        "@types/d3-color": "^3.1.3",
+        "@types/d3-dispatch": "^3.0.6",
+        "@types/d3-dsv": "^3.0.7",
+        "@types/d3-ease": "^3.0.2",
+        "@types/d3-fetch": "^3.0.7",
+        "@types/d3-force": "^3.0.10",
+        "@types/d3-format": "^3.0.4",
+        "@types/d3-geo": "^3.1.0",
+        "@types/d3-hierarchy": "^3.1.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-path": "^3.1.0",
+        "@types/d3-quadtree": "^3.0.6",
+        "@types/d3-random": "^3.0.3",
+        "@types/d3-scale": "^4.0.9",
+        "@types/d3-scale-chromatic": "^3.1.0",
+        "@types/d3-shape": "^3.1.7",
+        "@types/d3-time": "^3.0.4",
+        "@types/d3-timer": "^3.0.2",
+        "d3-array": "^3.2.4",
+        "d3-color": "^3.1.0",
+        "d3-dispatch": "^3.0.1",
+        "d3-dsv": "^3.0.1",
+        "d3-ease": "^3.0.1",
+        "d3-fetch": "^3.0.1",
+        "d3-force": "^3.0.0",
+        "d3-force-3d": "^3.0.5",
+        "d3-format": "^3.1.0",
+        "d3-geo": "^3.1.1",
+        "d3-geo-projection": "^4.0.0",
+        "d3-hierarchy": "^3.1.2",
+        "d3-interpolate": "^3.0.1",
+        "d3-path": "^3.1.0",
+        "d3-quadtree": "^3.0.1",
+        "d3-random": "^3.0.1",
+        "d3-regression": "^1.3.10",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.1.0",
+        "d3-shape": "^3.2.0",
+        "d3-time": "^3.1.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.24.2",
       "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.24.2.tgz",
@@ -463,9 +724,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.5.tgz",
-      "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1380,11 +1641,126 @@
       "resolved": "https://registry.npmmirror.com/@types/crypto-js/-/crypto-js-4.2.2.tgz",
       "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ=="
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA=="
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g=="
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmmirror.com/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw=="
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g=="
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/@types/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-65Emv9fQiQQqphLlRkuQ5ypPsOmWPhtBGCMv61JDPEPMvsx+gzhGf74yw1a78xFKPj6zw4AgQICJoQv0vK9M2w==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmmirror.com/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg=="
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/d3-random/-/d3-random-3.0.4.tgz",
+      "integrity": "sha512-UHYId5WTCx4L4YNel7NU00XUXXgvgpgZOvp10PuvsQENjMDXhh2RyFc0KBjO7B45ne4Ha1yVH7ii0vnzKkuzWA=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmmirror.com/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ=="
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/@types/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-kVd74ta9eof3eJOvbNd1vGKS/XERRyQbT26Og63hIsvDO84cjD5gEOhsXf26w3FSoNlPVz84DOFcKv/oou+fMw==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmmirror.com/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="
+    },
     "node_modules/@types/howler": {
       "version": "2.2.11",
       "resolved": "https://registry.npmmirror.com/@types/howler/-/howler-2.2.11.tgz",
@@ -1800,6 +2176,14 @@
         "vue": ">=3.2.0"
       }
     },
+    "node_modules/ant-design-vue/node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/array-tree-filter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
@@ -1831,6 +2215,14 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -1857,6 +2249,11 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/bubblesets-js": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmmirror.com/bubblesets-js/-/bubblesets-js-2.3.4.tgz",
+      "integrity": "sha512-DyMjHmpkS2+xcFNtyN00apJYL3ESdp9fTrkDr5+9Qg/GPqFmcWgGsK1akZnttE1XFxJ/VMy4DNNGMGYtmFp1Sg=="
+    },
     "node_modules/camelcase": {
       "version": "6.3.0",
       "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-6.3.0.tgz",
@@ -1896,6 +2293,15 @@
       "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1907,6 +2313,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comlink": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmmirror.com/comlink/-/comlink-4.4.2.tgz",
+      "integrity": "sha512-OxGdvBmJuNKSCMO4NTl1L47VRp6xn2wG4F/2hYzB6tiCb709otOxtEYCSvK80PtjODfXXZu8ds+Nw5kVCjqd2g=="
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/compute-scroll-into-view": {
       "version": "1.0.20",
       "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
@@ -1955,11 +2374,291 @@
       "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
       "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-binarytree": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-binarytree/-/d3-binarytree-1.0.2.tgz",
+      "integrity": "sha512-cElUNH+sHu95L04m92pG73t2MEJXKu+GeKUN1TJkFsu93E5W8E9Sc3kHEGJKgenGvj19m6upSn2EunvMgMD2Yw=="
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force-3d": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/d3-force-3d/-/d3-force-3d-3.0.6.tgz",
+      "integrity": "sha512-4tsKHUPLOVkyfEffZo1v6sFHvGFwAIIjt/W8IThbp08DYAsXZck+2pSHEG5W1+gQgEvFLdZkYvmJAbRM2EzMnA==",
+      "dependencies": {
+        "d3-binarytree": "1",
+        "d3-dispatch": "1 - 3",
+        "d3-octree": "1",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-projection": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-geo-projection/-/d3-geo-projection-4.0.0.tgz",
+      "integrity": "sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==",
+      "dependencies": {
+        "commander": "7",
+        "d3-array": "1 - 3",
+        "d3-geo": "1.12.0 - 3"
+      },
+      "bin": {
+        "geo2svg": "bin/geo2svg.js",
+        "geograticule": "bin/geograticule.js",
+        "geoproject": "bin/geoproject.js",
+        "geoquantize": "bin/geoquantize.js",
+        "geostitch": "bin/geostitch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-octree": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-octree/-/d3-octree-1.1.0.tgz",
+      "integrity": "sha512-F8gPlqpP+HwRPMO/8uOu5wjH110+6q4cgJvgJT6vlpy3BEaDIKlTZrgHKZSp/i1InRpVfh4puY/kvL6MxK930A=="
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-regression": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmmirror.com/d3-regression/-/d3-regression-1.3.10.tgz",
+      "integrity": "sha512-PF8GWEL70cHHWpx2jUQXc68r1pyPHIA+St16muk/XRokETzlegj5LriNKg7o4LR0TySug4nHYPJNNRz/W+/Niw=="
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.11",
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
@@ -2088,6 +2787,21 @@
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fecha": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/fecha/-/fecha-4.2.3.tgz",
+      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw=="
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.6",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -2135,6 +2849,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmmirror.com/gl-matrix/-/gl-matrix-3.4.4.tgz",
+      "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ=="
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz",
@@ -2149,6 +2868,14 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "optional": true
     },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmmirror.com/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/gsap": {
       "version": "3.12.5",
       "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.12.5.tgz",
@@ -2189,11 +2916,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "optional": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -2213,6 +2951,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/is-any-array": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-any-array/-/is-any-array-3.0.0.tgz",
+      "integrity": "sha512-o4h+tylWykC4BD1vaejp6gDxoM13bwW8FGuNs4yIKpj8xbBJcRxJx8vZpq0dCr7ZDEfeKjmsi/euolKhX6f/ww=="
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.3.4.tgz",
+      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA=="
+    },
     "node_modules/is-plain-object": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz",
@@ -2387,6 +3143,41 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/ml-array-max": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ml-array-max/-/ml-array-max-2.0.0.tgz",
+      "integrity": "sha512-QQZ4kENwpWmyNb98UXRDFXrmtIXuXtt1+bSbda/2KA85+F+rrJP8hZk6QOkCQXM2Th9mUDYdq/PNByPdT9ID4A==",
+      "dependencies": {
+        "is-any-array": "^3.0.0"
+      }
+    },
+    "node_modules/ml-array-min": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ml-array-min/-/ml-array-min-2.0.0.tgz",
+      "integrity": "sha512-GRj6Ky6sW9vGL6yIjgsHmXZ9YgrdmcQ8nCxPqEGeKc6dkfYg1XDYxGFxADUjNuZyoCd5PUscWAS4N+cFaX6hFg==",
+      "dependencies": {
+        "is-any-array": "^3.0.0"
+      }
+    },
+    "node_modules/ml-array-rescale": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ml-array-rescale/-/ml-array-rescale-2.0.0.tgz",
+      "integrity": "sha512-2GGtKfSno94/kIloWGvpp/U5Q5vLvLrza+SAaGsLeo6Xj4mEbA6Gqx+oTfZFkxnd1grT2X007HfJNs3T5BsiVg==",
+      "dependencies": {
+        "is-any-array": "^3.0.0",
+        "ml-array-max": "^2.0.0",
+        "ml-array-min": "^2.0.0"
+      }
+    },
+    "node_modules/ml-matrix": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmmirror.com/ml-matrix/-/ml-matrix-6.15.0.tgz",
+      "integrity": "sha512-wFa1v6KP8bKp+fj0nYmRs1Pb5K4zRkXGKsOvLinvILENFIADncm4XlOI+S1M7yuACMGfI6cfk0IifDgd4j5xmw==",
+      "dependencies": {
+        "is-any-array": "^3.0.0",
+        "ml-array-rescale": "^2.0.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -2584,11 +3375,15 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "optional": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sax": {
       "version": "1.3.0",
@@ -2621,6 +3416,14 @@
       "resolved": "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz",
       "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmmirror.com/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
+      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/smoothscroll": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/smoothscroll/-/smoothscroll-0.4.0.tgz",
@@ -2664,11 +3467,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/svg-path-parser": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/svg-path-parser/-/svg-path-parser-1.1.0.tgz",
+      "integrity": "sha512-jGCUqcQyXpfe38R7RFfhrMyfXcBmpMNJI/B+4CE9/Unkh98UporAc461GTthv+TVDuZXsBx7/WiwJb1Oh4tt4A=="
+    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz",
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA=="
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/throttle-debounce": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
@@ -2686,10 +3502,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "devOptional": true
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "node_modules/typescript": {
       "version": "5.4.5",
@@ -2724,6 +3539,14 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-9.0.1.tgz",
diff --git a/WebVue/package.json b/WebVue/package.json
index 6a10ec0..4565f69 100644
--- a/WebVue/package.json
+++ b/WebVue/package.json
@@ -10,6 +10,9 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
+    "@antv/g6": "^5.1.1",
+    "@babel/runtime": "^7.24.0",
+    "@simplewebauthn/browser": "^13.1.0",
     "@types/crypto-js": "^4.2.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.12.11",
@@ -24,6 +27,7 @@
     "crypto-js": "^4.2.0",
     "gsap": "^3.12.5",
     "howler": "^2.2.4",
+    "html2canvas": "^1.4.1",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
     "pinia": "^2.1.7",
@@ -36,8 +40,7 @@
     "vue-router": "^4.0.13",
     "vue3-photo-preview": "^0.3.0",
     "vue3-video-play": "^1.3.1",
-    "wow.js": "^1.2.2",
-    "@simplewebauthn/browser": "^13.1.0"
+    "wow.js": "^1.2.2"
   },
   "devDependencies": {
     "@types/howler": "^2.2.11",
diff --git a/WebVue/src/components/master/FamilyTreeChartModal.vue b/WebVue/src/components/master/FamilyTreeChartModal.vue
new file mode 100644
index 0000000..a0a1109
--- /dev/null
+++ b/WebVue/src/components/master/FamilyTreeChartModal.vue
@@ -0,0 +1,406 @@
+<template>
+    <dragModal v-model:open="visibleModel" width="85%" :title="title" :mask-closable="false" :fullscreen="fullscreen"
+        @cancel="onCancel">
+        <div ref="containerRef" v-if="hasPerson" class="family-chart-container"></div>
+        <a-empty v-else description="暂无当前族员数据" />
+    </dragModal>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+import { Graph } from "@antv/g6";
+import dragModal from "@/components/basic/DragModal.vue";
+import type { FamilyTreeData } from "@/data/auto/familyTreeData";
+import { useLocalePolicy } from "@/hooks/useLocalePolicy";
+
+const props = defineProps({
+    open: { type: Boolean, default: false },
+    data: { type: Object as () => FamilyTreeData, required: true },
+    title: { type: String, default: "谱系图" },
+    fullscreen: { type: Boolean, default: true },
+    loadedNodes: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:open", "cancel", "select-child"]);
+
+const visibleModel = computed({
+    get: () => props.open,
+    set: (v: boolean) => emit("update:open", v),
+});
+
+/** 已展开的节点 personId 集合 */
+const expandedIds = ref<Set<string>>(new Set());
+
+const { getPolicyOptions } = useLocalePolicy();
+const genderOptions = getPolicyOptions("GenderPolicy", false);
+const relationTypeOptions = getPolicyOptions("RelationTypePolicy", false);
+
+interface PolicyOption {
+    BindValue: string;
+    DisplayName: string;
+}
+
+const getPolicyText = (options: PolicyOption[], value?: string | null) => {
+    const o = options.find((x) => x.BindValue === value);
+    return o ? o.DisplayName : value ?? "";
+};
+
+const genderLabel = (g?: string) => getPolicyText(genderOptions, g);
+const relationLabel = (r?: string) => getPolicyText(relationTypeOptions, r);
+
+const isMale = (g?: string) => {
+    const t = (genderLabel(g) ?? "").toLowerCase();
+    return t.includes("男") || t.includes("male") || g === "M" || g === "1";
+};
+
+const hasPerson = computed(() => !!props.data?.CurrentPerson?.FamilyPerson);
+
+const rootPersonId = computed(() => props.data?.CurrentPerson?.FamilyPerson?.PersonId ?? "");
+
+/** HTML 字符串转义，防止人名中的特殊字符破坏卡片结构 */
+const esc = (v?: string | null) =>
+    (v ?? "")
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+
+/** 自定义人员卡片 HTML */
+const renderCard = (d: any) => {
+    const data = d?.data ?? {};
+    const male = isMale(data.gender);
+    // 本人=橙色，男性=蓝色，女性=粉色
+    const theme = data.kind === "self" ? "#fa8c16" : male ? "#1890ff" : "#eb2f96";
+    const ico = male ? "♂" : "♀";
+    const common = data.commonName
+        ? `<div class="ftc-sub">常用名：${esc(data.commonName)}</div>`
+        : "";
+    const actionTag = data.hasChildren
+        ? `<div class="ftc-tag" style="color:#13c2c2; background:#13c2c21a;">${data.expanded ? "点击折叠" : "点击展开"}</div>`
+        : !data.loaded
+        ? `<div class="ftc-tag" style="color:#722ed1; background:#722ed11a;">点击查看</div>`
+        : "";
+    const clickable = data.hasChildren || !data.loaded ? "ftc-clickable" : "";
+    return `
+        <div class="ftc-card ${clickable}" style="border-top: 3px solid ${theme};">
+            <div class="ftc-head">
+                <span class="ftc-ico" style="color:${theme};">${ico}</span>
+                <span class="ftc-name" title="${esc(data.name)}">${esc(data.name)}</span>
+            </div>
+            ${common}
+            <div class="ftc-footer">
+                <div class="ftc-tag" style="color:${theme}; background:${theme}1a;">${esc(data.tag)}</div>
+                ${actionTag}
+            </div>
+        </div>`;
+};
+
+/** 每个族员的描述：人员信息 + 配偶 + 孩子（根来自 data，其他来自 loadedNodes） */
+const describePerson = (personId: string): any => {
+    if (personId === rootPersonId.value) {
+        const dp = props.data?.CurrentPerson;
+        if (!dp?.FamilyPerson) return null;
+        return {
+            person: dp.FamilyPerson,
+            spouses: dp.FamilyTreeSpouseMaps ?? [],
+            children: dp.FamilyTreeChildrenMaps ?? [],
+            loaded: true,
+        };
+    }
+    const loaded = (props.loadedNodes as Record<string, any>)?.[personId];
+    if (loaded) {
+        return {
+            person: loaded.person,
+            spouses: loaded.spouses ?? [],
+            children: loaded.children ?? [],
+            loaded: true,
+        };
+    }
+    return null;
+};
+
+/** 构建图数据：树形竖向排列，本人默认展开孩子，点击孩子可递归加载子树 */
+const buildGraphData = () => {
+    const nodes: any[] = [];
+    const edges: any[] = [];
+    const root = rootPersonId.value;
+    if (!root) return { nodes, edges };
+
+    const Y_STEP = 116;
+    let cursor = 0;
+
+    const walk = (personId: string, depth: number, xBase: number) => {
+        const desc = describePerson(personId);
+        if (!desc) return;
+
+        const isRoot = personId === root;
+        const expanded = expandedIds.value.has(personId);
+        const hasChildren = desc.children.length > 0;
+        const p = desc.person;
+        const x = xBase;
+        const y = cursor;
+        cursor += Y_STEP;
+
+        nodes.push({
+            id: "n-" + personId,
+            style: { x, y },
+            data: {
+                kind: isRoot ? "self" : "member",
+                personId,
+                tag: isRoot ? "本人" : "族员",
+                name: (p?.Surname ?? "") + (p?.GenealogyName ?? ""),
+                commonName: p?.CommonName,
+                gender: p?.Gender,
+                hasChildren,
+                expanded,
+                loaded: desc.loaded,
+            },
+        });
+
+        // 配偶与本人同一行，水平间隔 200 对齐
+        const SPOUSE_GAP = 200;
+        desc.spouses.forEach((s: any, i: number) => {
+            const sid = "s-" + personId + "-" + i;
+            nodes.push({
+                id: sid,
+                style: { x: x + 210 + i * SPOUSE_GAP, y },
+                data: {
+                    kind: "spouse",
+                    tag: "配偶",
+                    name: (s.SpouseSurname ?? "") + (s.SpouseGenealogyName ?? ""),
+                    gender: s.Gender,
+                    loaded: true,
+                    hasChildren: false,
+                    expanded: false,
+                },
+            });
+            edges.push({ source: "n-" + personId, target: sid, data: { kind: "spouse" } });
+        });
+
+        if (expanded) {
+            // 孩子列与本人第一行的配偶列对齐（x + 210），即孩子位于配偶正下方，竖直跟第一行对齐
+            const childBaseX = x + 210;
+
+            desc.children.forEach((c: any) => {
+                const childId = c.ChildrenId;
+                if (describePerson(childId)) {
+                    walk(childId, depth + 1, childBaseX);
+                } else {
+                    nodes.push({
+                        id: "n-" + childId,
+                        style: { x: childBaseX, y: cursor },
+                        data: {
+                            kind: "child",
+                            personId: childId,
+                            tag: c.RelationType ? relationLabel(c.RelationType) : "子女",
+                            name: (c.ChildrenSurname ?? "") + (c.ChildrenGenealogyName ?? ""),
+                            commonName: c.CommonName,
+                            gender: c.Gender,
+                            hasChildren: false,
+                            expanded: false,
+                            loaded: false,
+                        },
+                    });
+                    cursor += Y_STEP;
+                }
+                edges.push({ source: "n-" + personId, target: "n-" + childId, data: { kind: "parent" } });
+            });
+        }
+    };
+
+    walk(root, 0, 0);
+    return { nodes, edges };
+};
+
+const containerRef = ref<HTMLDivElement>();
+let graph: any = null;
+
+const destroyGraph = () => {
+    if (graph) {
+        graph.destroy();
+        graph = null;
+    }
+};
+
+const initGraph = async () => {
+    destroyGraph();
+    await nextTick();
+    // 等待弹窗动画完成，确保容器有实际尺寸
+    await new Promise((r) => requestAnimationFrame(r));
+    if (!containerRef.value) return;
+
+    const { nodes, edges } = buildGraphData();
+    if (!nodes.length) return;
+
+    graph = new Graph({
+        container: containerRef.value,
+        autoFit: "view",
+        data: { nodes, edges },
+        node: {
+            type: "html",
+            style: {
+                size: [180, 96],
+                dx: -90,
+                dy: -48,
+                // 官方文档推荐函数形式，类型声明仅支持 string/HTMLElement，故断言
+                innerHTML: renderCard as any,
+            },
+        },
+        edge: {
+            type: (d: any) => (d?.data?.kind === "spouse" ? "line" : "polyline"),
+            style: (d: any) => ({
+                // 夫妻关系=紫色虚线，亲子关系=灰色实线
+                stroke: d?.data?.kind === "spouse" ? "#722ed1" : "#a0a0a0",
+                lineWidth: 1.5,
+                lineDash: d?.data?.kind === "spouse" ? [4, 4] : undefined,
+                router: d?.data?.kind === "spouse" ? undefined : { type: "orth" },
+            }),
+        },
+        behaviors: ["drag-canvas", "zoom-canvas", "drag-element"],
+    });
+    graph.on("node:click", (event: any) => {
+        const id = event.target?.id ?? event.item?.getID?.();
+        if (typeof id !== "string" || !id.startsWith("n-")) return;
+        const personId = id.slice(2);
+        const isRoot = personId === rootPersonId.value;
+        if (isRoot) {
+            const children = props.data?.CurrentPerson?.FamilyTreeChildrenMaps ?? [];
+            if (children.length > 0) {
+                toggleExpanded(personId);
+            }
+            return;
+        }
+        if (describePerson(personId)) {
+            toggleExpanded(personId);
+        } else {
+            emit("select-child", personId);
+        }
+    });
+    await graph.render();
+};
+
+const toggleExpanded = (personId: string) => {
+    const set = new Set(expandedIds.value);
+    if (set.has(personId)) set.delete(personId);
+    else set.add(personId);
+    expandedIds.value = set;
+    initGraph();
+};
+
+watch(visibleModel, async (v) => {
+    if (v) {
+        // 第一个人（当前族员）默认展开孩子
+        expandedIds.value = new Set([rootPersonId.value].filter(Boolean));
+        await initGraph();
+    } else {
+        destroyGraph();
+    }
+});
+
+watch(
+    () => props.data,
+    async () => {
+        if (visibleModel.value) {
+            expandedIds.value = new Set([rootPersonId.value].filter(Boolean));
+            await initGraph();
+        }
+    },
+    { deep: true }
+);
+
+watch(
+    () => props.loadedNodes,
+    async (val) => {
+        if (!val || !visibleModel.value) return;
+        // 新加载的族员自动展开，方便查看其子树
+        const set = new Set(expandedIds.value);
+        Object.keys(val as Record<string, any>).forEach((k) => set.add(k));
+        expandedIds.value = set;
+        await initGraph();
+    },
+    { deep: true }
+);
+
+onBeforeUnmount(() => destroyGraph());
+
+const onCancel = () => emit("cancel");
+</script>
+
+<style>
+.family-chart-container {
+    width: 100%;
+    height: 72vh;
+    min-height: 480px;
+    background: #fafafa;
+    border: 1px solid #f0f0f0;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+/* G6 HTML 节点卡片样式（注入到 canvas 容器，使用独立前缀避免污染全局） */
+.ftc-card {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
+    padding: 8px 10px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+}
+
+.ftc-head {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.ftc-ico {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.ftc-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ftc-sub {
+    font-size: 12px;
+    color: #888;
+    margin-top: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ftc-footer {
+    margin-top: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.ftc-tag {
+    font-size: 11px;
+    line-height: 1;
+    border-radius: 3px;
+    padding: 3px 6px;
+}
+
+.ftc-clickable {
+    cursor: pointer;
+}
+
+.ftc-clickable:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+</style>
diff --git a/WebVue/src/service/master/familyTreeService.ts b/WebVue/src/service/master/familyTreeService.ts
index a190e0f..1810dde 100644
--- a/WebVue/src/service/master/familyTreeService.ts
+++ b/WebVue/src/service/master/familyTreeService.ts
@@ -6,6 +6,16 @@ import { request } from "@/utils/request";
         
 class FamilyTreeService{
 
+                        async FindAllByTreeId(data: string) {
+                        return request<FamilyTreeData>(
+                                {
+                                url: "/FamilyTree/FindAllByTreeId?treeId="+data,
+                                method: "post",
+                                data,
+                                }
+                        )
+                        };
+                        
                         async FindByKey(data: string) {
                         return request<FamilyTreeData>(
                                 {
diff --git a/WebVue/src/views/master/FamilyTreeOperation.vue b/WebVue/src/views/master/FamilyTreeOperation.vue
index 3ec7abd..3099980 100644
--- a/WebVue/src/views/master/FamilyTreeOperation.vue
+++ b/WebVue/src/views/master/FamilyTreeOperation.vue
@@ -24,7 +24,7 @@
                             <a-button type="primary" :disabled="isEdit" :icon="h(ClearOutlined)"
                                 @click.prevent="onReset">重置</a-button>
                             <a-button type="primary" :disabled="isEdit" :icon="h(FileAddOutlined)"
-                                @click.prevent="onCreate">新增</a-button>
+                                @click.prevent="onCreate">新增</a-button>              
                         </a-space>
                     </a-col>
                 </a-row>
@@ -91,6 +91,11 @@
                                     <a-input-search required :disabled="!isEdit" style="width: 50%;"
                                         v-model:value="data.FamilyTree.AncestorPersonId"
                                         @search="onModalPerson" />
+                                        <a-input-search style="flex: 1; min-width: 0;"
+                                        v-model:value="data.CurrentPerson.FamilyPerson.PersonId"
+                                        @search="onModalCurrentPerson" />
+                                                      <a-button type="primary" :disabled="!hasData" :icon="h(ApartmentOutlined)"
+                                @click.prevent="">祖谱系图</a-button>
                                 </a-input-group>
                             </a-col>
                         </a-row>
@@ -114,7 +119,7 @@
                 <a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
                 </a-divider>
                 <a-row :gutter="[16, 8]">
-                    <a-col :lg="12" :sm="24">
+                    <a-col :lg="18" :sm="24">
                         <a-row :wrap="false">
                             <a-col flex="auto">
                                 <a-input-group compact style="display: flex; width: 100%;">
@@ -134,6 +139,8 @@
                                     <a-input-search style="flex: 1; min-width: 0;"
                                         v-model:value="data.CurrentPerson.FamilyPerson.PersonId"
                                         @search="onModalCurrentPerson" />
+                                                      <a-button type="primary" :disabled="!hasData" :icon="h(ApartmentOutlined)"
+                                @click.prevent="onShowChart">谱系图</a-button>
                                 </a-input-group>
                             </a-col>
                         </a-row>
@@ -281,8 +288,6 @@
                                 </a-row>
                                 <a-row v-else :gutter="[16, 8]">
                                     <a-space>
-                                        <a-button type="primary" :icon="h(FileSearchOutlined)"
-                                            :disabled="!hasData" >谱系</a-button>
                                         <a-button type="primary" v-if="canAmend" :icon="h(EditOutlined)"
                                             :disabled="!hasData" @click.prevent="onAmend">修改</a-button>
                                         <a-popconfirm :disabled="!hasData" title="确定是否删除这条记录?" ok-text="是"
@@ -307,6 +312,8 @@
             <FamilyPersonEnquiry ref="personEnquiry"
                 @on-row-dblclick="handleSelectPerson"></FamilyPersonEnquiry>
         </dragModal>
+        <FamilyTreeChartModal v-model:open="chartVisible" :data="data" :loaded-nodes="loadedNodes" title="谱系图"
+            @select-child="onChartSelectChild" />
     </a-spin>
 </template>
 <script lang="ts" setup>
@@ -315,11 +322,12 @@ import { notification } from "ant-design-vue";
 import { useRoute, useRouter } from 'vue-router'
 import dayjs from "dayjs";
 import type { Dayjs } from "dayjs";
-import { DeleteOutlined, EditOutlined, ClearOutlined, FileSearchOutlined, FileAddOutlined, UndoOutlined, SaveOutlined, PlusSquareTwoTone, DownSquareTwoTone, UpSquareTwoTone } from "@ant-design/icons-vue";
+import { DeleteOutlined, EditOutlined, ClearOutlined, FileSearchOutlined, FileAddOutlined, UndoOutlined, SaveOutlined, PlusSquareTwoTone, DownSquareTwoTone, UpSquareTwoTone, ApartmentOutlined } from "@ant-design/icons-vue";
 import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
 import dragModal from "@/components/basic/DragModal.vue"
 import FamilyTreeEnquiry from "./FamilyTreeEnquiry.vue";
 import FamilyPersonEnquiry from "./FamilyPersonEnquiry.vue";
+import FamilyTreeChartModal from "@/components/master/FamilyTreeChartModal.vue";
 import { FamilyTreeData } from "@/data/auto/familyTreeData";
 import { FamilyTreeSpouseMapViewEntity } from "@/data/auto/familyTreeSpouseMapViewEntity";
 import { FamilyTreeChildrenMapViewEntity } from "@/data/auto/familyTreeChildrenMapViewEntity";
@@ -350,6 +358,7 @@ const canDelete = ref<boolean>(false);
 const canCreate = ref<boolean>(false);
 
 const showModalType = ref<number>(0);
+const chartVisible = ref<boolean>(false);
 
 const data = ref<FamilyTreeData>(new FamilyTreeData());
 const hasData = ref<boolean>(false);
@@ -588,6 +597,48 @@ const onModalSearch = (() => {
     showModalType.value = 0;
 })
 
+const onShowChart = (() => {
+    if (!hasData.value) return;
+    chartVisible.value = true;
+})
+
+/** 谱系图中已加载的族员节点（personId -> { person, spouses, children }），不清空原 data，只追加 */
+const loadedNodes = ref<Record<string, any>>({});
+
+const onChartSelectChild = (async (personId: string) => {
+    if (!personId || !treeId.value) return;
+    if (loadedNodes.value[personId]) return;
+
+    try {
+        loading.value = true;
+        const childData = await familyTreeService.FindByCurrentPerson({
+            key: treeId.value.trim(),
+            personId,
+        });
+
+        if (childData?.CurrentPerson?.FamilyPerson) {
+            loadedNodes.value = {
+                ...loadedNodes.value,
+                [personId]: {
+                    person: childData.CurrentPerson.FamilyPerson,
+                    spouses: childData.CurrentPerson.FamilyTreeSpouseMaps ?? [],
+                    children: childData.CurrentPerson.FamilyTreeChildrenMaps ?? [],
+                },
+            };
+        } else {
+            notification.info({
+                message: '系统提示：',
+                description: '未找到该族员的谱系数据',
+                placement: "topRight",
+            });
+        }
+    } catch (error) {
+        console.log(error);
+    } finally {
+        loading.value = false;
+    }
+})
+
 
 const onSearch = (async () => {
 
@@ -626,6 +677,7 @@ const onReset = (() => {
     data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
     treeId.value = '';
     hasData.value = false;
+    loadedNodes.value = {};
     selectedSonIndex.value = -1;
     selectedParentIndex.value = -1;
 })