Split custom world generation into staged lightweight batches

src/components/BackstoryArchive.tsx

@@ -0,0 +1,96 @@
+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>
+  );
+}