0.0.8.5
This commit is contained in:
freedakgmail
+93
-21
@@ -11,6 +11,8 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
|
||||
import { Check, ChevronsUpDown } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { MemberNameWithStatus } from '@/components/member-name-with-status'
|
||||
import { RelationshipPathDisplay } from '@/components/relationship-path-display'
|
||||
|
||||
export default function RelationshipTestPage() {
|
||||
const { treeData } = useFamily()
|
||||
@@ -71,7 +73,15 @@ export default function RelationshipTestPage() {
|
||||
className="w-full justify-between"
|
||||
>
|
||||
{fromId
|
||||
? members.find((member) => member.id === fromId)?.fullName
|
||||
? (() => {
|
||||
const selectedMember = members.find((member) => member.id === fromId)
|
||||
return selectedMember ? (
|
||||
<MemberNameWithStatus
|
||||
name={selectedMember.fullName}
|
||||
isDead={!!selectedMember.deathDate}
|
||||
/>
|
||||
) : "搜索或选择成员A..."
|
||||
})()
|
||||
: "搜索或选择成员A..."}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
@@ -97,7 +107,10 @@ export default function RelationshipTestPage() {
|
||||
fromId === member.id ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{member.fullName} (第{member.generation}世)
|
||||
<MemberNameWithStatus
|
||||
name={member.fullName}
|
||||
isDead={!!member.deathDate}
|
||||
/> (第{member.generation}世)
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
@@ -118,7 +131,15 @@ export default function RelationshipTestPage() {
|
||||
className="w-full justify-between"
|
||||
>
|
||||
{toId
|
||||
? members.find((member) => member.id === toId)?.fullName
|
||||
? (() => {
|
||||
const selectedMember = members.find((member) => member.id === toId)
|
||||
return selectedMember ? (
|
||||
<MemberNameWithStatus
|
||||
name={selectedMember.fullName}
|
||||
isDead={!!selectedMember.deathDate}
|
||||
/>
|
||||
) : "搜索或选择成员B..."
|
||||
})()
|
||||
: "搜索或选择成员B..."}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
@@ -144,7 +165,10 @@ export default function RelationshipTestPage() {
|
||||
toId === member.id ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{member.fullName} (第{member.generation}世)
|
||||
<MemberNameWithStatus
|
||||
name={member.fullName}
|
||||
isDead={!!member.deathDate}
|
||||
/> (第{member.generation}世)
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
@@ -175,7 +199,10 @@ export default function RelationshipTestPage() {
|
||||
<div className="flex items-center justify-center gap-6 p-8 bg-muted/30 rounded-lg">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-serif font-light mb-1">
|
||||
{result.from.fullName}
|
||||
<MemberNameWithStatus
|
||||
name={result.from.fullName}
|
||||
isDead={!!result.from.deathDate}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground font-light">
|
||||
第{result.from.generation}世
|
||||
@@ -187,15 +214,19 @@ export default function RelationshipTestPage() {
|
||||
{result.relationship.term}
|
||||
</Badge>
|
||||
{result.relationship.path && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
路径: {result.relationship.path}
|
||||
</span>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
<div className="mb-1">路径:</div>
|
||||
<RelationshipPathDisplay path={result.relationship.path} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-serif font-light mb-1">
|
||||
{result.to.fullName}
|
||||
<MemberNameWithStatus
|
||||
name={result.to.fullName}
|
||||
isDead={!!result.to.deathDate}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground font-light">
|
||||
第{result.to.generation}世
|
||||
@@ -207,7 +238,7 @@ export default function RelationshipTestPage() {
|
||||
<div className="p-6 bg-primary/5 rounded-lg">
|
||||
<div className="text-sm font-light mb-2 text-center">关系说明</div>
|
||||
<div className="text-muted-foreground font-light text-center">
|
||||
<strong>{result.from.fullName}</strong> 是 <strong>{result.to.fullName}</strong> 的 <strong className="text-primary">{result.relationship.term}</strong>
|
||||
<strong><MemberNameWithStatus name={result.from.fullName} isDead={!!result.from.deathDate} /></strong> 是 <strong><MemberNameWithStatus name={result.to.fullName} isDead={!!result.to.deathDate} /></strong> 的 <strong className="text-primary">{result.relationship.term}</strong>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -230,7 +261,10 @@ export default function RelationshipTestPage() {
|
||||
<Card className="border-none shadow-sm bg-card/50 backdrop-blur">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-serif font-light">
|
||||
{treeData.members[fromId]?.fullName} 的直系亲属
|
||||
<MemberNameWithStatus
|
||||
name={treeData.members[fromId]?.fullName || ''}
|
||||
isDead={!!treeData.members[fromId]?.deathDate}
|
||||
/> 的直系亲属
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
@@ -244,13 +278,23 @@ export default function RelationshipTestPage() {
|
||||
{relatives.father && (
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="text-sm text-muted-foreground mb-1">父亲</div>
|
||||
<div className="font-medium">{relatives.father.fullName}</div>
|
||||
<div className="font-medium">
|
||||
<MemberNameWithStatus
|
||||
name={relatives.father.fullName}
|
||||
isDead={!!relatives.father.deathDate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{relatives.mother && (
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="text-sm text-muted-foreground mb-1">母亲</div>
|
||||
<div className="font-medium">{relatives.mother.fullName}</div>
|
||||
<div className="font-medium">
|
||||
<MemberNameWithStatus
|
||||
name={relatives.mother.fullName}
|
||||
isDead={!!relatives.mother.deathDate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{relatives.spouses.length > 0 && (
|
||||
@@ -258,7 +302,10 @@ export default function RelationshipTestPage() {
|
||||
<div className="text-sm text-muted-foreground mb-1">配偶</div>
|
||||
{relatives.spouses.map((spouse: any) => (
|
||||
<div key={spouse.id} className="font-medium">
|
||||
{spouse.fullName}
|
||||
<MemberNameWithStatus
|
||||
name={spouse.fullName}
|
||||
isDead={!!spouse.deathDate}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -271,7 +318,10 @@ export default function RelationshipTestPage() {
|
||||
<div className="space-y-1">
|
||||
{relatives.children.slice(0, 3).map((child: any) => (
|
||||
<div key={child.id} className="font-medium text-sm">
|
||||
{child.fullName}
|
||||
<MemberNameWithStatus
|
||||
name={child.fullName}
|
||||
isDead={!!child.deathDate}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{relatives.children.length > 3 && (
|
||||
@@ -296,7 +346,10 @@ export default function RelationshipTestPage() {
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{siblings.map((sibling: any) => (
|
||||
<Badge key={sibling.id} variant="outline">
|
||||
{sibling.fullName}
|
||||
<MemberNameWithStatus
|
||||
name={sibling.fullName}
|
||||
isDead={!!sibling.deathDate}
|
||||
/>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
@@ -328,13 +381,23 @@ export default function RelationshipTestPage() {
|
||||
{relatives.father && (
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="text-sm text-muted-foreground mb-1">父亲</div>
|
||||
<div className="font-medium">{relatives.father.fullName}</div>
|
||||
<div className="font-medium">
|
||||
<MemberNameWithStatus
|
||||
name={relatives.father.fullName}
|
||||
isDead={!!relatives.father.deathDate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{relatives.mother && (
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<div className="text-sm text-muted-foreground mb-1">母亲</div>
|
||||
<div className="font-medium">{relatives.mother.fullName}</div>
|
||||
<div className="font-medium">
|
||||
<MemberNameWithStatus
|
||||
name={relatives.mother.fullName}
|
||||
isDead={!!relatives.mother.deathDate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{relatives.spouses.length > 0 && (
|
||||
@@ -342,7 +405,10 @@ export default function RelationshipTestPage() {
|
||||
<div className="text-sm text-muted-foreground mb-1">配偶</div>
|
||||
{relatives.spouses.map((spouse: any) => (
|
||||
<div key={spouse.id} className="font-medium">
|
||||
{spouse.fullName}
|
||||
<MemberNameWithStatus
|
||||
name={spouse.fullName}
|
||||
isDead={!!spouse.deathDate}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -355,7 +421,10 @@ export default function RelationshipTestPage() {
|
||||
<div className="space-y-1">
|
||||
{relatives.children.slice(0, 3).map((child: any) => (
|
||||
<div key={child.id} className="font-medium text-sm">
|
||||
{child.fullName}
|
||||
<MemberNameWithStatus
|
||||
name={child.fullName}
|
||||
isDead={!!child.deathDate}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{relatives.children.length > 3 && (
|
||||
@@ -380,7 +449,10 @@ export default function RelationshipTestPage() {
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{siblings.map((sibling: any) => (
|
||||
<Badge key={sibling.id} variant="outline">
|
||||
{sibling.fullName}
|
||||
<MemberNameWithStatus
|
||||
name={sibling.fullName}
|
||||
isDead={!!sibling.deathDate}
|
||||
/>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user