freedakgmail
64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
import { MemberNameWithStatus } from "./member-name-with-status"
|
|
import { useFamily } from "@/context/family-context"
|
|
|
|
interface RelationshipPathDisplayProps {
|
|
path: string
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* 显示关系路径，并为路径中的每个成员姓名添加状态标识
|
|
* 路径格式: "虞国栋 → 儿子(虞晓东) → 儿子(虞雨轩) → 女儿(虞诗语)"
|
|
*/
|
|
export function RelationshipPathDisplay({ path, className = "" }: RelationshipPathDisplayProps) {
|
|
const { treeData } = useFamily()
|
|
|
|
if (!path) return null
|
|
|
|
// 解析路径字符串
|
|
// 格式: "起点名 → 关系(名字) → 关系(名字) → ..."
|
|
const parts = path.split(' → ')
|
|
|
|
return (
|
|
<div className={`flex flex-wrap items-center gap-2 ${className}`}>
|
|
{parts.map((part, index) => {
|
|
// 第一个部分是起点名字（没有关系前缀）
|
|
if (index === 0) {
|
|
const member = Object.values(treeData.members).find(m => m.fullName === part)
|
|
return (
|
|
<span key={index} className="inline-flex items-center">
|
|
<MemberNameWithStatus
|
|
name={part}
|
|
isDead={!!member?.deathDate}
|
|
/>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// 其他部分格式: "关系(名字)"
|
|
const match = part.match(/^(.+?)\((.+?)\)$/)
|
|
if (match) {
|
|
const [, relation, name] = match
|
|
const member = Object.values(treeData.members).find(m => m.fullName === name)
|
|
|
|
return (
|
|
<span key={index} className="inline-flex items-center gap-2">
|
|
<span className="text-muted-foreground">→</span>
|
|
<span className="text-sm text-muted-foreground">{relation}</span>
|
|
<span className="text-muted-foreground">(</span>
|
|
<MemberNameWithStatus
|
|
name={name}
|
|
isDead={!!member?.deathDate}
|
|
/>
|
|
<span className="text-muted-foreground">)</span>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// 如果格式不匹配，直接显示原文
|
|
return <span key={index}>{part}</span>
|
|
})}
|
|
</div>
|
|
)
|
|
}
|