0.6.0.3
This commit is contained in:
freedakgmail
+110
-104
@@ -199,142 +199,141 @@ function PersonCard({
|
||||
<div
|
||||
data-member-id={member.id}
|
||||
className={cn(
|
||||
"family-node-card relative flex flex-col items-center p-4 transition-all cursor-pointer hover:scale-[1.02] w-[140px]",
|
||||
// 庄严的边框样式 - 双层边框效果
|
||||
"border-[3px] rounded-none",
|
||||
"shadow-lg hover:shadow-xl",
|
||||
// 根据状态设置样式 - 中国风配色
|
||||
"family-node-card relative flex flex-col items-center p-4 transition-all duration-300 cursor-pointer w-[140px]",
|
||||
// 现代简约中国风 - 圆角卡片
|
||||
"rounded-xl",
|
||||
"hover:scale-[1.03] hover:-translate-y-1",
|
||||
// 柔和阴影效果
|
||||
isHighlighted
|
||||
? "border-yellow-600 bg-yellow-50/90 dark:bg-yellow-950/50 ring-2 ring-yellow-400 animate-pulse"
|
||||
: isFounder || isRoot
|
||||
? "border-amber-500 bg-gradient-to-b from-amber-100 via-yellow-50 to-amber-100 dark:from-amber-900/40 dark:to-yellow-900/20 shadow-xl ring-1 ring-amber-300"
|
||||
: isSpouse
|
||||
? "border-dashed border-amber-400 bg-amber-50/50 dark:bg-amber-900/20"
|
||||
: isDead
|
||||
? "border-stone-500 bg-gradient-to-b from-stone-100 to-stone-50 dark:from-stone-900/50 dark:to-stone-800/30"
|
||||
: isMale
|
||||
? "border-amber-800 bg-gradient-to-b from-amber-50 via-orange-50/30 to-amber-50/80 dark:from-amber-950/40 dark:to-orange-950/20"
|
||||
: "border-rose-700 bg-gradient-to-b from-rose-50 via-pink-50/30 to-rose-50/80 dark:from-rose-950/40 dark:to-pink-950/20",
|
||||
relationMode && "hover:shadow-xl"
|
||||
? "shadow-[0_8px_30px_rgba(234,179,8,0.4)] ring-2 ring-yellow-400"
|
||||
: "shadow-[0_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0_12px_40px_rgba(0,0,0,0.15)]",
|
||||
// 根据状态设置背景 - 更柔和的渐变
|
||||
isHighlighted
|
||||
? "bg-gradient-to-br from-yellow-50 via-amber-50 to-yellow-100 dark:from-yellow-950/60 dark:to-amber-900/40"
|
||||
: isFounder || isRoot
|
||||
? "bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 dark:from-amber-950/50 dark:to-orange-900/30"
|
||||
: isSpouse
|
||||
? "bg-gradient-to-br from-rose-50/80 via-pink-50/60 to-rose-50/80 dark:from-rose-950/30 dark:to-pink-900/20"
|
||||
: isDead
|
||||
? "bg-gradient-to-br from-stone-100 via-gray-50 to-stone-100 dark:from-stone-900/50 dark:to-gray-800/30"
|
||||
: isMale
|
||||
? "bg-gradient-to-br from-sky-50 via-blue-50/50 to-indigo-50/30 dark:from-sky-950/40 dark:to-blue-900/20"
|
||||
: "bg-gradient-to-br from-rose-50 via-pink-50/50 to-fuchsia-50/30 dark:from-rose-950/40 dark:to-pink-900/20",
|
||||
relationMode && "hover:ring-2 hover:ring-primary/50"
|
||||
)}
|
||||
onClick={() => onSelect?.(member)}
|
||||
>
|
||||
{/* 内边框装饰 */}
|
||||
{/* 顶部装饰条 */}
|
||||
<div className={cn(
|
||||
"absolute inset-[3px] border pointer-events-none",
|
||||
isHighlighted ? "border-yellow-500/50"
|
||||
: isFounder || isRoot ? "border-amber-400/50"
|
||||
: isSpouse ? "border-amber-300/40"
|
||||
: isDead ? "border-stone-400/40"
|
||||
: isMale ? "border-amber-600/40"
|
||||
: "border-rose-500/40"
|
||||
)} />
|
||||
|
||||
{/* 四角装饰 - 更精致的角花 */}
|
||||
<div className={cn(
|
||||
"absolute top-0 left-0 w-4 h-4 border-t-[3px] border-l-[3px]",
|
||||
isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-amber-400" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-700"
|
||||
)} />
|
||||
<div className={cn(
|
||||
"absolute top-0 right-0 w-4 h-4 border-t-[3px] border-r-[3px]",
|
||||
isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-amber-400" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-700"
|
||||
)} />
|
||||
<div className={cn(
|
||||
"absolute bottom-0 left-0 w-4 h-4 border-b-[3px] border-l-[3px]",
|
||||
isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-amber-400" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-700"
|
||||
)} />
|
||||
<div className={cn(
|
||||
"absolute bottom-0 right-0 w-4 h-4 border-b-[3px] border-r-[3px]",
|
||||
isHighlighted ? "border-yellow-600" : isFounder || isRoot ? "border-amber-500" : isSpouse ? "border-amber-400" : isDead ? "border-stone-500" : isMale ? "border-amber-800" : "border-rose-700"
|
||||
"absolute top-0 left-4 right-4 h-1 rounded-b-full",
|
||||
isHighlighted ? "bg-gradient-to-r from-yellow-400 via-amber-500 to-yellow-400"
|
||||
: isFounder || isRoot ? "bg-gradient-to-r from-amber-400 via-orange-500 to-amber-400"
|
||||
: isSpouse ? "bg-gradient-to-r from-rose-300 via-pink-400 to-rose-300"
|
||||
: isDead ? "bg-gradient-to-r from-stone-400 via-gray-500 to-stone-400"
|
||||
: isMale ? "bg-gradient-to-r from-sky-400 via-blue-500 to-sky-400"
|
||||
: "bg-gradient-to-r from-rose-400 via-pink-500 to-rose-400"
|
||||
)} />
|
||||
|
||||
{/* 选中打钩标记 */}
|
||||
{isSelected && (
|
||||
<div className="absolute top-1 left-1 z-20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#2563eb" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 15 10" fill="none" stroke="white" strokeWidth="2.5"/></svg>
|
||||
<div className="absolute top-2 left-2 z-20">
|
||||
<div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center shadow-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 世代标签 - 庄严印章风格 */}
|
||||
{/* 世代标签 - 现代胶囊风格 */}
|
||||
<div className={cn(
|
||||
"absolute -top-3 px-3 py-1 text-[11px] font-serif font-bold tracking-wider",
|
||||
"border-2 shadow-md",
|
||||
"absolute -top-2.5 px-3 py-0.5 text-[10px] font-medium tracking-wider rounded-full",
|
||||
"shadow-md backdrop-blur-sm",
|
||||
isFounder || isRoot
|
||||
? "bg-amber-500 text-white border-amber-600"
|
||||
? "bg-gradient-to-r from-amber-500 to-orange-500 text-white"
|
||||
: isDead
|
||||
? "bg-stone-600 text-stone-100 border-stone-700"
|
||||
? "bg-gradient-to-r from-stone-500 to-gray-500 text-white"
|
||||
: isMale
|
||||
? "bg-amber-800 text-amber-100 border-amber-900"
|
||||
: "bg-rose-700 text-rose-100 border-rose-800"
|
||||
? "bg-gradient-to-r from-sky-500 to-blue-500 text-white"
|
||||
: "bg-gradient-to-r from-rose-500 to-pink-500 text-white"
|
||||
)}>
|
||||
{member.generation}世
|
||||
第{member.generation}世
|
||||
</div>
|
||||
|
||||
{/* 头像 - 方形带庄严边框 */}
|
||||
<div className={cn(
|
||||
"h-14 w-14 flex items-center justify-center overflow-hidden mt-2",
|
||||
"border-2 shadow-inner bg-white/80 dark:bg-black/20",
|
||||
isFounder || isRoot
|
||||
? "border-amber-500"
|
||||
: isDead
|
||||
? "border-stone-400"
|
||||
: isMale
|
||||
? "border-amber-700"
|
||||
: "border-rose-600"
|
||||
)}>
|
||||
{avatarBlobUrl ? (
|
||||
<img
|
||||
src={avatarBlobUrl}
|
||||
alt={member.fullName}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
member.gender === 'FEMALE' ? (
|
||||
<CircleUserRound className={cn("h-9 w-9", isDead ? "text-stone-400" : "text-rose-600")} />
|
||||
{/* 头像 - 圆形带光晕效果 */}
|
||||
<div className="relative mt-3">
|
||||
{/* 光晕背景 */}
|
||||
<div className={cn(
|
||||
"absolute inset-0 rounded-full blur-md opacity-40",
|
||||
isFounder || isRoot ? "bg-amber-400"
|
||||
: isDead ? "bg-stone-400"
|
||||
: isMale ? "bg-sky-400"
|
||||
: "bg-rose-400"
|
||||
)} />
|
||||
<div className={cn(
|
||||
"relative h-14 w-14 rounded-full flex items-center justify-center overflow-hidden",
|
||||
"border-[3px] shadow-lg bg-white dark:bg-gray-800",
|
||||
"ring-2 ring-white dark:ring-gray-700",
|
||||
isFounder || isRoot
|
||||
? "border-amber-400"
|
||||
: isDead
|
||||
? "border-stone-400"
|
||||
: isMale
|
||||
? "border-sky-400"
|
||||
: "border-rose-400"
|
||||
)}>
|
||||
{avatarBlobUrl ? (
|
||||
<img
|
||||
src={avatarBlobUrl}
|
||||
alt={member.fullName}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<CircleUser className={cn("h-9 w-9", isDead ? "text-stone-400" : "text-amber-700")} />
|
||||
)
|
||||
)}
|
||||
member.gender === 'FEMALE' ? (
|
||||
<CircleUserRound className={cn("h-8 w-8", isDead ? "text-stone-400" : "text-rose-500")} />
|
||||
) : (
|
||||
<CircleUser className={cn("h-8 w-8", isDead ? "text-stone-400" : "text-sky-500")} />
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
{/* 在线/已故状态指示器 */}
|
||||
<div className={cn(
|
||||
"absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-full border-2 border-white dark:border-gray-800",
|
||||
isDead ? "bg-stone-400" : "bg-emerald-500"
|
||||
)} />
|
||||
</div>
|
||||
|
||||
{/* 姓名和信息 */}
|
||||
<div className="text-center w-full mt-2 space-y-0.5">
|
||||
<div className={cn(
|
||||
"font-serif font-bold leading-tight flex items-center justify-center gap-1 text-base tracking-wide",
|
||||
"text-black"
|
||||
)}>
|
||||
<div className="text-center w-full mt-3 space-y-1">
|
||||
<div className="font-semibold leading-tight text-[15px] tracking-wide text-black dark:text-white">
|
||||
<MemberNameWithStatus
|
||||
name={`${member.surname}${member.givenName}`}
|
||||
isDead={isDead}
|
||||
/>
|
||||
</div>
|
||||
{member.courtesyName && (
|
||||
<div className={cn(
|
||||
"text-[11px] font-serif tracking-wide",
|
||||
"text-black"
|
||||
)}>
|
||||
<div className="text-[11px] tracking-wide text-black dark:text-white">
|
||||
字 {member.courtesyName}
|
||||
</div>
|
||||
)}
|
||||
{lifeSpan && (
|
||||
<div className={cn(
|
||||
"text-[10px] font-mono tracking-wider mt-1",
|
||||
"text-black font-semibold"
|
||||
"text-[10px] font-mono tracking-wider px-2 py-0.5 rounded-full inline-block text-black dark:text-white",
|
||||
isDead
|
||||
? "bg-stone-200 dark:bg-stone-700"
|
||||
: "bg-gray-200 dark:bg-gray-700"
|
||||
)}>
|
||||
{lifeSpan}
|
||||
</div>
|
||||
)}
|
||||
{ageText && (
|
||||
<div className={cn(
|
||||
"text-[10px] font-serif",
|
||||
"text-black font-semibold"
|
||||
)}>
|
||||
<div className="text-[10px] text-black dark:text-white">
|
||||
{ageText}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 折叠/展开按钮 */}
|
||||
{/* 折叠/展开按钮 - 更现代的样式 */}
|
||||
{hasChildren && onToggleCollapse && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
@@ -344,22 +343,29 @@ function PersonCard({
|
||||
className={cn(
|
||||
"absolute -bottom-3 left-1/2 -translate-x-1/2 z-20",
|
||||
"w-6 h-6 rounded-full flex items-center justify-center",
|
||||
"bg-white border-2 shadow-md transition-all hover:scale-110",
|
||||
"bg-white dark:bg-gray-800 shadow-lg transition-all duration-200",
|
||||
"hover:scale-110 active:scale-95",
|
||||
"border border-gray-200 dark:border-gray-700",
|
||||
isCollapsed
|
||||
? "border-amber-500 text-amber-600"
|
||||
: "border-amber-400 text-amber-500"
|
||||
? "text-amber-500 hover:bg-amber-50 dark:hover:bg-amber-900/30"
|
||||
: "text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50"
|
||||
)}
|
||||
title={isCollapsed ? "展开子孙" : "折叠子孙"}
|
||||
>
|
||||
{isCollapsed ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="18 15 12 9 6 15"></polyline>
|
||||
</svg>
|
||||
)}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={cn("transition-transform duration-200", isCollapsed ? "rotate-180" : "")}
|
||||
>
|
||||
<polyline points="18 15 12 9 6 15"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user