97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
export type BackstoryUnlockedChapter = {
|
|
id: string;
|
|
title: string;
|
|
content: string;
|
|
};
|
|
|
|
export type BackstoryLockedChapter = {
|
|
id: string;
|
|
title: string;
|
|
teaser: string;
|
|
affinityRequired: number;
|
|
};
|
|
|
|
interface BackstoryArchiveProps {
|
|
publicSummary?: string | null;
|
|
unlockedChapters: BackstoryUnlockedChapter[];
|
|
lockedChapters: BackstoryLockedChapter[];
|
|
}
|
|
|
|
export function BackstoryArchive({
|
|
publicSummary,
|
|
unlockedChapters,
|
|
lockedChapters,
|
|
}: BackstoryArchiveProps) {
|
|
const totalChapters = unlockedChapters.length + lockedChapters.length;
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<div className="text-[10px] uppercase tracking-[0.18em] text-zinc-500">
|
|
背景故事
|
|
</div>
|
|
{totalChapters > 0 ? (
|
|
<div className="text-[10px] tracking-[0.14em] text-zinc-500">
|
|
已解锁 {unlockedChapters.length} / {totalChapters}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{publicSummary ? (
|
|
<div className="rounded-xl border border-white/8 bg-black/25 px-4 py-3">
|
|
<div className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">
|
|
公开印象
|
|
</div>
|
|
<div className="mt-2 text-sm leading-relaxed text-zinc-200">
|
|
{publicSummary}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{unlockedChapters.map((chapter) => (
|
|
<div
|
|
key={`unlocked-backstory-${chapter.id}`}
|
|
className="rounded-xl border border-amber-300/18 bg-amber-500/[0.06] px-4 py-3"
|
|
>
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<div className="text-sm font-semibold text-white">
|
|
{chapter.title}
|
|
</div>
|
|
<span className="rounded-full border border-amber-300/18 bg-amber-400/10 px-2 py-0.5 text-[10px] tracking-[0.14em] text-amber-100">
|
|
已解锁
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 text-sm leading-relaxed text-zinc-200">
|
|
{chapter.content}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{lockedChapters.map((chapter) => (
|
|
<div
|
|
key={`locked-backstory-${chapter.id}`}
|
|
className="rounded-xl border border-white/8 bg-black/18 px-4 py-3"
|
|
>
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<div className="text-sm font-semibold text-zinc-200">
|
|
{chapter.title}
|
|
</div>
|
|
<span className="rounded-full border border-white/10 bg-black/20 px-2 py-0.5 text-[10px] tracking-[0.14em] text-zinc-400">
|
|
需好感 {chapter.affinityRequired}
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 text-sm leading-relaxed text-zinc-500">
|
|
{chapter.teaser}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{!publicSummary && totalChapters === 0 ? (
|
|
<div className="rounded-xl border border-white/8 bg-black/18 px-4 py-3 text-sm text-zinc-500">
|
|
暂无可整理的背景线索。
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|