0.0.0.4
This commit is contained in:
freedakgmail
@@ -425,12 +425,64 @@ __turbopack_context__.s([
|
||||
]);
|
||||
var __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__ = __turbopack_context__.i("[project]/Documents/go-new/chinese-family-tree/node_modules/.pnpm/next@16.0.3_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/next/dist/compiled/react/jsx-dev-runtime.js [app-client] (ecmascript)");
|
||||
var __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$lib$2f$utils$2e$ts__$5b$app$2d$client$5d$__$28$ecmascript$29$__ = __turbopack_context__.i("[project]/Documents/go-new/chinese-family-tree/lib/utils.ts [app-client] (ecmascript)");
|
||||
;
|
||||
var _s = __turbopack_context__.k.signature();
|
||||
"use client";
|
||||
;
|
||||
;
|
||||
// 格式化日期显示（只显示年份）
|
||||
function formatYear(dateString) {
|
||||
if (!dateString) return '';
|
||||
const year = dateString.split('-')[0];
|
||||
return year;
|
||||
}
|
||||
function FamilyNode({ member, spouse, isRoot, onSelect }) {
|
||||
_s();
|
||||
const [avatarBlobUrl, setAvatarBlobUrl] = useState(undefined);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const birthYear = formatYear(member.birthDate);
|
||||
const deathYear = formatYear(member.deathDate);
|
||||
// 生卒年月显示文本
|
||||
const lifeSpan = birthYear ? deathYear ? `${birthYear}-${deathYear}` : `${birthYear}-` : '';
|
||||
// 加载上传的头像（如果存在）
|
||||
useEffect({
|
||||
"FamilyNode.useEffect": ()=>{
|
||||
let isMounted = true;
|
||||
let objectUrl;
|
||||
if (member?.avatarImageId) {
|
||||
setIsLoading(true);
|
||||
db.images.get(member.avatarImageId).then({
|
||||
"FamilyNode.useEffect": (image)=>{
|
||||
if (image && isMounted) {
|
||||
objectUrl = URL.createObjectURL(image.blob);
|
||||
setAvatarBlobUrl(objectUrl);
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}["FamilyNode.useEffect"]).catch({
|
||||
"FamilyNode.useEffect": ()=>{
|
||||
if (isMounted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}["FamilyNode.useEffect"]);
|
||||
} else {
|
||||
setAvatarBlobUrl(undefined);
|
||||
setIsLoading(false);
|
||||
}
|
||||
return ({
|
||||
"FamilyNode.useEffect": ()=>{
|
||||
isMounted = false;
|
||||
if (objectUrl) {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
}
|
||||
}
|
||||
})["FamilyNode.useEffect"];
|
||||
}
|
||||
}["FamilyNode.useEffect"], [
|
||||
member?.avatarImageId
|
||||
]);
|
||||
return /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$lib$2f$utils$2e$ts__$5b$app$2d$client$5d$__$28$ecmascript$29$__["cn"])("relative flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-all cursor-pointer hover:scale-105 shadow-sm w-32", isRoot ? "border-primary bg-primary/5" : "border-border bg-card", member.gender === "female" ? "rounded-full w-28 h-28 justify-center" : "rounded-lg"),
|
||||
className: (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$lib$2f$utils$2e$ts__$5b$app$2d$client$5d$__$28$ecmascript$29$__["cn"])("relative flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-all cursor-pointer hover:scale-105 shadow-sm w-32", isRoot ? "border-primary bg-primary/5" : "border-border bg-card"),
|
||||
onClick: ()=>onSelect?.(member),
|
||||
children: [
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
@@ -441,41 +493,45 @@ function FamilyNode({ member, spouse, isRoot, onSelect }) {
|
||||
]
|
||||
}, void 0, true, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx",
|
||||
lineNumber: 23,
|
||||
lineNumber: 74,
|
||||
columnNumber: 7
|
||||
}, this),
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "h-10 w-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground overflow-hidden border border-border/50",
|
||||
children: member.avatarUrl ? /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("img", {
|
||||
src: member.avatarUrl || "/placeholder.svg",
|
||||
className: "h-12 w-12 rounded-full bg-muted flex items-center justify-center text-muted-foreground overflow-hidden border border-border/50",
|
||||
children: avatarBlobUrl ? /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("img", {
|
||||
src: avatarBlobUrl,
|
||||
alt: member.fullName,
|
||||
className: "h-full w-full object-cover"
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx",
|
||||
lineNumber: 29,
|
||||
lineNumber: 80,
|
||||
columnNumber: 11
|
||||
}, this) : /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("span", {
|
||||
className: "font-serif font-bold text-lg text-foreground/70",
|
||||
children: member.surname
|
||||
children: member.givenName
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx",
|
||||
lineNumber: 35,
|
||||
lineNumber: 86,
|
||||
columnNumber: 11
|
||||
}, this)
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx",
|
||||
lineNumber: 27,
|
||||
lineNumber: 78,
|
||||
columnNumber: 7
|
||||
}, this),
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "text-center",
|
||||
className: "text-center w-full",
|
||||
children: [
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "font-serif font-bold text-foreground leading-tight",
|
||||
children: member.givenName
|
||||
}, void 0, false, {
|
||||
children: [
|
||||
member.surname,
|
||||
" ",
|
||||
member.givenName
|
||||
]
|
||||
}, void 0, true, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx",
|
||||
lineNumber: 40,
|
||||
lineNumber: 91,
|
||||
columnNumber: 9
|
||||
}, this),
|
||||
member.courtesyName && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
@@ -486,29 +542,38 @@ function FamilyNode({ member, spouse, isRoot, onSelect }) {
|
||||
]
|
||||
}, void 0, true, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx",
|
||||
lineNumber: 42,
|
||||
lineNumber: 93,
|
||||
columnNumber: 11
|
||||
}, this),
|
||||
lifeSpan && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "text-[9px] text-muted-foreground/70 mt-1 font-mono",
|
||||
children: lifeSpan
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx",
|
||||
lineNumber: 96,
|
||||
columnNumber: 11
|
||||
}, this)
|
||||
]
|
||||
}, void 0, true, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx",
|
||||
lineNumber: 39,
|
||||
lineNumber: 90,
|
||||
columnNumber: 7
|
||||
}, this),
|
||||
member.lifeStatus === "deceased" && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
member.deathDate && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-neutral-400 ring-2 ring-background"
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx",
|
||||
lineNumber: 47,
|
||||
lineNumber: 103,
|
||||
columnNumber: 9
|
||||
}, this)
|
||||
]
|
||||
}, void 0, true, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx",
|
||||
lineNumber: 15,
|
||||
lineNumber: 67,
|
||||
columnNumber: 5
|
||||
}, this);
|
||||
}
|
||||
_s(FamilyNode, "5puKg1UIe7xwQ5TKpc/rIlus/W0=");
|
||||
_c = FamilyNode;
|
||||
var _c;
|
||||
__turbopack_context__.k.register(_c, "FamilyNode");
|
||||
@@ -526,18 +591,138 @@ __turbopack_context__.s([
|
||||
var __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__ = __turbopack_context__.i("[project]/Documents/go-new/chinese-family-tree/node_modules/.pnpm/next@16.0.3_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/next/dist/compiled/react/jsx-dev-runtime.js [app-client] (ecmascript)");
|
||||
var __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$components$2f$tree$2f$family$2d$node$2e$tsx__$5b$app$2d$client$5d$__$28$ecmascript$29$__ = __turbopack_context__.i("[project]/Documents/go-new/chinese-family-tree/components/tree/family-node.tsx [app-client] (ecmascript)");
|
||||
var __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$context$2f$family$2d$context$2e$tsx__$5b$app$2d$client$5d$__$28$ecmascript$29$__ = __turbopack_context__.i("[project]/Documents/go-new/chinese-family-tree/context/family-context.tsx [app-client] (ecmascript)");
|
||||
var __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$index$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__ = __turbopack_context__.i("[project]/Documents/go-new/chinese-family-tree/node_modules/.pnpm/next@16.0.3_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/next/dist/compiled/react/index.js [app-client] (ecmascript)");
|
||||
;
|
||||
var _s = __turbopack_context__.k.signature();
|
||||
"use client";
|
||||
;
|
||||
;
|
||||
;
|
||||
function TreeLayout({ rootId, onSelectMember }) {
|
||||
_s();
|
||||
const { getMember } = (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$context$2f$family$2d$context$2e$tsx__$5b$app$2d$client$5d$__$28$ecmascript$29$__["useFamily"])();
|
||||
const { getMember, treeData } = (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$context$2f$family$2d$context$2e$tsx__$5b$app$2d$client$5d$__$28$ecmascript$29$__["useFamily"])();
|
||||
const root = getMember(rootId);
|
||||
const containerRef = (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$index$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["useRef"])(null);
|
||||
const [connections, setConnections] = (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$index$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["useState"])([]);
|
||||
const nodeRefs = (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$index$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["useRef"])(new Map());
|
||||
// 节点间距配置
|
||||
const HORIZONTAL_GAP = 32 // 2rem = 32px
|
||||
;
|
||||
const VERTICAL_GAP = 48 // 3rem = 48px
|
||||
;
|
||||
const CONNECTOR_HEIGHT = 48 // 连接线垂直高度
|
||||
;
|
||||
// 计算所有连线位置
|
||||
const calculateConnections = (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$index$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["useCallback"])({
|
||||
"TreeLayout.useCallback[calculateConnections]": ()=>{
|
||||
const newConnections = [];
|
||||
const containerRect = containerRef.current?.getBoundingClientRect();
|
||||
if (!containerRect) return;
|
||||
// 检查是否有足够的节点已注册
|
||||
if (nodeRefs.current.size === 0) return;
|
||||
nodeRefs.current.forEach({
|
||||
"TreeLayout.useCallback[calculateConnections]": (nodeElement, nodeId)=>{
|
||||
const member = getMember(nodeId);
|
||||
if (!member || !member.childrenIds || member.childrenIds.length === 0) return;
|
||||
const parentRect = nodeElement.getBoundingClientRect();
|
||||
const parentCenterX = parentRect.left + parentRect.width / 2 - containerRect.left;
|
||||
const parentBottomY = parentRect.bottom - containerRect.top;
|
||||
// 父节点到水平线的垂直连线
|
||||
const verticalLineY = parentBottomY + CONNECTOR_HEIGHT / 2;
|
||||
newConnections.push({
|
||||
from: {
|
||||
x: parentCenterX,
|
||||
y: parentBottomY
|
||||
},
|
||||
to: {
|
||||
x: parentCenterX,
|
||||
y: verticalLineY
|
||||
},
|
||||
type: 'vertical'
|
||||
});
|
||||
// 获取所有子节点的位置
|
||||
const childPositions = member.childrenIds.map({
|
||||
"TreeLayout.useCallback[calculateConnections].childPositions": (childId)=>{
|
||||
const childElement = nodeRefs.current.get(childId);
|
||||
if (!childElement) return null;
|
||||
const childRect = childElement.getBoundingClientRect();
|
||||
return {
|
||||
id: childId,
|
||||
centerX: childRect.left + childRect.width / 2 - containerRect.left,
|
||||
topY: childRect.top - containerRect.top
|
||||
};
|
||||
}
|
||||
}["TreeLayout.useCallback[calculateConnections].childPositions"]).filter(Boolean);
|
||||
if (childPositions.length === 0) return;
|
||||
// 如果有多个子节点，绘制水平连线
|
||||
if (childPositions.length > 1) {
|
||||
const leftmostX = Math.min(...childPositions.map({
|
||||
"TreeLayout.useCallback[calculateConnections].leftmostX": (p)=>p.centerX
|
||||
}["TreeLayout.useCallback[calculateConnections].leftmostX"]));
|
||||
const rightmostX = Math.max(...childPositions.map({
|
||||
"TreeLayout.useCallback[calculateConnections].rightmostX": (p)=>p.centerX
|
||||
}["TreeLayout.useCallback[calculateConnections].rightmostX"]));
|
||||
newConnections.push({
|
||||
from: {
|
||||
x: leftmostX,
|
||||
y: verticalLineY
|
||||
},
|
||||
to: {
|
||||
x: rightmostX,
|
||||
y: verticalLineY
|
||||
},
|
||||
type: 'horizontal'
|
||||
});
|
||||
}
|
||||
// 每个子节点的垂直连线
|
||||
childPositions.forEach({
|
||||
"TreeLayout.useCallback[calculateConnections]": (child)=>{
|
||||
newConnections.push({
|
||||
from: {
|
||||
x: child.centerX,
|
||||
y: verticalLineY
|
||||
},
|
||||
to: {
|
||||
x: child.centerX,
|
||||
y: child.topY
|
||||
},
|
||||
type: 'vertical'
|
||||
});
|
||||
}
|
||||
}["TreeLayout.useCallback[calculateConnections]"]);
|
||||
}
|
||||
}["TreeLayout.useCallback[calculateConnections]"]);
|
||||
setConnections(newConnections);
|
||||
}
|
||||
}["TreeLayout.useCallback[calculateConnections]"], [
|
||||
getMember
|
||||
]);
|
||||
(0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$index$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["useEffect"])({
|
||||
"TreeLayout.useEffect": ()=>{
|
||||
// 多次尝试计算，确保 DOM 完全渲染
|
||||
const timers = [];
|
||||
timers.push(setTimeout(calculateConnections, 50));
|
||||
timers.push(setTimeout(calculateConnections, 150));
|
||||
timers.push(setTimeout(calculateConnections, 300));
|
||||
timers.push(setTimeout(calculateConnections, 500));
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', calculateConnections);
|
||||
return ({
|
||||
"TreeLayout.useEffect": ()=>{
|
||||
timers.forEach({
|
||||
"TreeLayout.useEffect": (timer)=>clearTimeout(timer)
|
||||
}["TreeLayout.useEffect"]);
|
||||
window.removeEventListener('resize', calculateConnections);
|
||||
}
|
||||
})["TreeLayout.useEffect"];
|
||||
}
|
||||
}["TreeLayout.useEffect"], [
|
||||
calculateConnections,
|
||||
treeData
|
||||
]);
|
||||
if (!root) return null;
|
||||
// Recursive component to render the tree
|
||||
const TreeNode = ({ memberId })=>{
|
||||
// 递归渲染树节点
|
||||
const TreeNode = ({ memberId, isRoot = false })=>{
|
||||
const member = getMember(memberId);
|
||||
if (!member) return null;
|
||||
const hasChildren = member.childrenIds && member.childrenIds.length > 0;
|
||||
@@ -545,132 +730,125 @@ function TreeLayout({ rootId, onSelectMember }) {
|
||||
className: "flex flex-col items-center",
|
||||
children: [
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
ref: (el)=>{
|
||||
if (el) {
|
||||
nodeRefs.current.set(memberId, el);
|
||||
} else {
|
||||
nodeRefs.current.delete(memberId);
|
||||
}
|
||||
},
|
||||
className: "relative z-10",
|
||||
children: [
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])(__TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$components$2f$tree$2f$family$2d$node$2e$tsx__$5b$app$2d$client$5d$__$28$ecmascript$29$__["FamilyNode"], {
|
||||
member: member,
|
||||
onSelect: onSelectMember
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 27,
|
||||
columnNumber: 11
|
||||
}, this),
|
||||
hasChildren && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "absolute top-full left-1/2 -translate-x-1/2 h-8 w-px bg-border"
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 30,
|
||||
columnNumber: 27
|
||||
}, this)
|
||||
]
|
||||
}, void 0, true, {
|
||||
children: /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])(__TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$components$2f$tree$2f$family$2d$node$2e$tsx__$5b$app$2d$client$5d$__$28$ecmascript$29$__["FamilyNode"], {
|
||||
member: member,
|
||||
onSelect: onSelectMember,
|
||||
isRoot: isRoot
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 135,
|
||||
columnNumber: 11
|
||||
}, this)
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 26,
|
||||
lineNumber: 125,
|
||||
columnNumber: 9
|
||||
}, this),
|
||||
hasChildren && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "flex items-start pt-8 relative",
|
||||
children: [
|
||||
member.childrenIds.length > 1 && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "absolute top-0 left-[50%] -translate-x-1/2 h-px bg-border w-[calc(100%-8rem)]"
|
||||
}, void 0, false, {
|
||||
className: "flex items-start relative",
|
||||
style: {
|
||||
marginTop: `${VERTICAL_GAP}px`,
|
||||
gap: `${HORIZONTAL_GAP}px`
|
||||
},
|
||||
children: member.childrenIds.map((childId)=>/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])(TreeNode, {
|
||||
memberId: childId
|
||||
}, childId, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 37,
|
||||
lineNumber: 148,
|
||||
columnNumber: 15
|
||||
}, this),
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "flex gap-8 relative",
|
||||
children: [
|
||||
member.childrenIds.length > 1 && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "absolute top-0 left-0 right-0 h-px bg-transparent"
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 43,
|
||||
columnNumber: 17
|
||||
}, this),
|
||||
member.childrenIds.map((childId, index)=>/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "flex flex-col items-center relative",
|
||||
children: [
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "h-8 w-px bg-border absolute -top-8 left-1/2 -translate-x-1/2"
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 51,
|
||||
columnNumber: 19
|
||||
}, this),
|
||||
member.childrenIds.length > 1 && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])(__TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["Fragment"], {
|
||||
children: [
|
||||
index === 0 && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "absolute -top-8 right-0 w-1/2 h-px bg-border"
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 56,
|
||||
columnNumber: 39
|
||||
}, this),
|
||||
index === member.childrenIds.length - 1 && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "absolute -top-8 left-0 w-1/2 h-px bg-border"
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 58,
|
||||
columnNumber: 25
|
||||
}, this),
|
||||
index > 0 && index < member.childrenIds.length - 1 && /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "absolute -top-8 left-0 w-full h-px bg-border"
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 61,
|
||||
columnNumber: 25
|
||||
}, this)
|
||||
]
|
||||
}, void 0, true),
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])(TreeNode, {
|
||||
memberId: childId
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 66,
|
||||
columnNumber: 19
|
||||
}, this)
|
||||
]
|
||||
}, childId, true, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 49,
|
||||
columnNumber: 17
|
||||
}, this))
|
||||
]
|
||||
}, void 0, true, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 40,
|
||||
columnNumber: 13
|
||||
}, this)
|
||||
]
|
||||
}, void 0, true, {
|
||||
}, this))
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 34,
|
||||
lineNumber: 140,
|
||||
columnNumber: 11
|
||||
}, this)
|
||||
]
|
||||
}, void 0, true, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 25,
|
||||
lineNumber: 123,
|
||||
columnNumber: 7
|
||||
}, this);
|
||||
};
|
||||
return /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "p-12 min-w-fit",
|
||||
children: /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])(TreeNode, {
|
||||
memberId: rootId
|
||||
}, void 0, false, {
|
||||
className: "relative",
|
||||
children: /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
ref: containerRef,
|
||||
className: "p-12 min-w-fit relative",
|
||||
style: {
|
||||
minHeight: '100%'
|
||||
},
|
||||
children: [
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "absolute inset-0 pointer-events-none",
|
||||
style: {
|
||||
zIndex: 1
|
||||
},
|
||||
children: connections.map((conn, index)=>{
|
||||
const isHorizontal = conn.type === 'horizontal';
|
||||
const width = isHorizontal ? Math.abs(conn.to.x - conn.from.x) : 2;
|
||||
const height = isHorizontal ? 2 : Math.abs(conn.to.y - conn.from.y);
|
||||
const left = Math.min(conn.from.x, conn.to.x);
|
||||
const top = Math.min(conn.from.y, conn.to.y);
|
||||
// 跳过无效的连线（宽度或高度为0）
|
||||
if (width <= 0 || height <= 0) return null;
|
||||
return /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "absolute bg-foreground/40 rounded-full",
|
||||
style: {
|
||||
left: `${left}px`,
|
||||
top: `${top}px`,
|
||||
width: `${width}px`,
|
||||
height: `${height}px`
|
||||
}
|
||||
}, index, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 172,
|
||||
columnNumber: 15
|
||||
}, this);
|
||||
})
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 160,
|
||||
columnNumber: 9
|
||||
}, this),
|
||||
/*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])("div", {
|
||||
className: "relative",
|
||||
style: {
|
||||
zIndex: 10
|
||||
},
|
||||
children: /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$node_modules$2f2e$pnpm$2f$next$40$16$2e$0$2e$3_react$2d$dom$40$19$2e$2$2e$0_react$40$19$2e$2$2e$0_$5f$react$40$19$2e$2$2e$0$2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2f$jsx$2d$dev$2d$runtime$2e$js__$5b$app$2d$client$5d$__$28$ecmascript$29$__["jsxDEV"])(TreeNode, {
|
||||
memberId: rootId,
|
||||
isRoot: true
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 188,
|
||||
columnNumber: 11
|
||||
}, this)
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 187,
|
||||
columnNumber: 9
|
||||
}, this)
|
||||
]
|
||||
}, void 0, true, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 78,
|
||||
lineNumber: 158,
|
||||
columnNumber: 7
|
||||
}, this)
|
||||
}, void 0, false, {
|
||||
fileName: "[project]/Documents/go-new/chinese-family-tree/components/tree/tree-layout.tsx",
|
||||
lineNumber: 77,
|
||||
lineNumber: 157,
|
||||
columnNumber: 5
|
||||
}, this);
|
||||
}
|
||||
_s(TreeLayout, "4iVqxGJ3BVSCeSrEI+JXR0phw8s=", false, function() {
|
||||
_s(TreeLayout, "L8DuWoGUvxDERpdCrEZF8kp6Sks=", false, function() {
|
||||
return [
|
||||
__TURBOPACK__imported__module__$5b$project$5d2f$Documents$2f$go$2d$new$2f$chinese$2d$family$2d$tree$2f$context$2f$family$2d$context$2e$tsx__$5b$app$2d$client$5d$__$28$ecmascript$29$__["useFamily"]
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user