Split custom world generation into staged lightweight batches

src/components/CustomWorldEntityCatalog.tsx

@@ -1,5 +1,9 @@
-import { type ReactNode,useDeferredValue, useMemo, useState } from 'react';
+import { type ReactNode, useDeferredValue, useMemo, useState } from 'react';
 
+import {
+  getCustomWorldSceneRelativePositionLabel,
+  normalizeCustomWorldLandmarks,
+} from '../data/customWorldSceneGraph';
 import { AnimationState, Character, CustomWorldProfile } from '../types';
 import { getNineSliceStyle, UI_CHROME } from '../uiAssets';
 import { CharacterAnimator } from './CharacterAnimator';
@@ -137,10 +141,61 @@ function matchText(text: string, query: string) {
 function getSearchPlaceholder(tab: ResultTab) {
   if (tab === 'playable') return '搜索角色名称、称号、标签';
   if (tab === 'story') return '搜索场景角色名称、身份、动机';
-  if (tab === 'landmarks') return '搜索场景名称、描述';
+  if (tab === 'landmarks') return '搜索场景名称、描述、NPC、连接';
   return '搜索';
 }
 
+type CatalogRole =
+  | CustomWorldProfile['playableNpcs'][number]
+  | CustomWorldProfile['storyNpcs'][number];
+
+function buildRoleSearchText(role: CatalogRole) {
+  return [
+    role.name,
+    role.title,
+    role.role,
+    role.description,
+    role.backstory,
+    role.backstoryReveal.publicSummary,
+    role.personality,
+    role.motivation,
+    role.combatStyle,
+    ...role.backstoryReveal.chapters.flatMap((chapter) => [
+      chapter.title,
+      chapter.teaser,
+      chapter.content,
+      chapter.contextSnippet,
+    ]),
+    ...role.skills.flatMap((skill) => [skill.name, skill.summary, skill.style]),
+    ...role.initialItems.flatMap((item) => [
+      item.name,
+      item.category,
+      item.description,
+      ...item.tags,
+    ]),
+    ...role.relationshipHooks,
+    ...role.tags,
+  ].join(' ');
+}
+
+function buildLandmarkSearchText(
+  landmark: CustomWorldProfile['landmarks'][number],
+  storyNpcById: Map<string, CustomWorldProfile['storyNpcs'][number]>,
+  landmarkById: Map<string, CustomWorldProfile['landmarks'][number]>,
+) {
+  return [
+    landmark.name,
+    landmark.description,
+    landmark.dangerLevel,
+    ...landmark.sceneNpcIds.map((npcId) => storyNpcById.get(npcId)?.name ?? ''),
+    ...landmark.connections.flatMap((connection) => [
+      landmarkById.get(connection.targetLandmarkId)?.name ?? '',
+      getCustomWorldSceneRelativePositionLabel(connection.relativePosition),
+      connection.summary,
+    ]),
+  ].join(' ');
+}
+
 export function CustomWorldEntityCatalog({
   profile,
   previewCharacters,
@@ -154,6 +209,14 @@ export function CustomWorldEntityCatalog({
   const [searchDraft, setSearchDraft] = useState('');
   const deferredSearch = useDeferredValue(searchDraft.trim());
 
+  const storyNpcById = useMemo(
+    () => new Map(profile.storyNpcs.map((npc) => [npc.id, npc])),
+    [profile.storyNpcs],
+  );
+  const landmarkById = useMemo(
+    () => new Map(profile.landmarks.map((landmark) => [landmark.id, landmark])),
+    [profile.landmarks],
+  );
   const previewCharacterById = useMemo(
     () => new Map(profile.playableNpcs.map((role, index) => [role.id, previewCharacters[index] ?? null])),
     [previewCharacters, profile.playableNpcs],
@@ -162,21 +225,7 @@ export function CustomWorldEntityCatalog({
   const filteredPlayable = useMemo(
     () => profile.playableNpcs.filter(role =>
       !deferredSearch
-      || matchText(
-        [
-          role.name,
-          role.title,
-          role.role,
-          role.description,
-          role.backstory,
-          role.personality,
-          role.motivation,
-          role.combatStyle,
-          ...role.relationshipHooks,
-          ...role.tags,
-        ].join(' '),
-        deferredSearch,
-      ),
+      || matchText(buildRoleSearchText(role), deferredSearch),
     ),
     [deferredSearch, profile.playableNpcs],
   );
@@ -184,21 +233,7 @@ export function CustomWorldEntityCatalog({
   const filteredStory = useMemo(
     () => profile.storyNpcs.filter(npc =>
       !deferredSearch
-      || matchText(
-        [
-          npc.name,
-          npc.title,
-          npc.role,
-          npc.description,
-          npc.backstory,
-          npc.personality,
-          npc.motivation,
-          npc.combatStyle,
-          ...npc.relationshipHooks,
-          ...npc.tags,
-        ].join(' '),
-        deferredSearch,
-      ),
+      || matchText(buildRoleSearchText(npc), deferredSearch),
     ),
     [deferredSearch, profile.storyNpcs],
   );
@@ -206,9 +241,12 @@ export function CustomWorldEntityCatalog({
   const filteredLandmarks = useMemo(
     () => profile.landmarks.filter(landmark =>
       !deferredSearch
-      || matchText([landmark.name, landmark.description].join(' '), deferredSearch),
+      || matchText(
+        buildLandmarkSearchText(landmark, storyNpcById, landmarkById),
+        deferredSearch,
+      ),
     ),
-    [deferredSearch, profile.landmarks],
+    [deferredSearch, landmarkById, profile.landmarks, storyNpcById],
   );
 
   const counts = {
@@ -232,17 +270,34 @@ export function CustomWorldEntityCatalog({
 
   const removeStoryNpc = (id: string, name: string) => {
     if (!window.confirm(`确认删除场景角色「${name}」吗？`)) return;
+    const nextStoryNpcs = profile.storyNpcs.filter(npc => npc.id !== id);
     onProfileChange({
       ...profile,
-      storyNpcs: profile.storyNpcs.filter(npc => npc.id !== id),
+      storyNpcs: nextStoryNpcs,
+      landmarks: normalizeCustomWorldLandmarks({
+        landmarks: profile.landmarks.map((landmark) => ({
+          ...landmark,
+          sceneNpcIds: landmark.sceneNpcIds.filter((npcId) => npcId !== id),
+        })),
+        storyNpcs: nextStoryNpcs,
+      }),
     });
   };
 
   const removeLandmark = (id: string, name: string) => {
     if (!window.confirm(`确认删除场景「${name}」吗？`)) return;
+    const nextLandmarks = profile.landmarks.filter(landmark => landmark.id !== id);
     onProfileChange({
       ...profile,
-      landmarks: profile.landmarks.filter(landmark => landmark.id !== id),
+      landmarks: normalizeCustomWorldLandmarks({
+        landmarks: nextLandmarks.map((landmark) => ({
+          ...landmark,
+          connections: landmark.connections.filter(
+            (connection) => connection.targetLandmarkId !== id,
+          ),
+        })),
+        storyNpcs: profile.storyNpcs,
+      }),
     });
   };
 
@@ -293,7 +348,7 @@ export function CustomWorldEntityCatalog({
             </div>
           </Section>
 
-          <Section title="档案规模" subtitle="结果页只保留角色、场景角色与场景档案，预设物品已从自定义世界中移除。">
+          <Section title="档案规模" subtitle="结果页现在会同时维护场景角色归属和场景之间的相对位置连接关系。">
             <div className="grid grid-cols-1 gap-2 text-center text-[11px] text-zinc-300 sm:grid-cols-3">
               <div className="rounded-xl border border-white/8 bg-black/20 px-2 py-3">
                 <div className="text-xl font-black text-white">{profile.playableNpcs.length}</div>
@@ -347,6 +402,9 @@ export function CustomWorldEntityCatalog({
                       <div className="min-w-0 flex-1">
                         <div className="text-sm leading-6 text-zinc-300">{role.description}</div>
                         <div className="mt-2 text-xs leading-6 text-zinc-400">{role.backstory}</div>
+                        <div className="mt-3 rounded-xl border border-sky-300/12 bg-sky-500/8 px-3 py-2 text-xs leading-6 text-sky-50/95">
+                          公开背景：{role.backstoryReveal.publicSummary || '未填写'}
+                        </div>
                         <div className="mt-3 grid gap-2 sm:grid-cols-2">
                           <div className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">身份：{role.role}</div>
                           <div className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">初始好感：{role.initialAffinity}</div>
@@ -354,6 +412,36 @@ export function CustomWorldEntityCatalog({
                           <div className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">战斗：{role.combatStyle}</div>
                         </div>
                         <div className="mt-3 rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">动机：{role.motivation}</div>
+                        <div className="mt-3 rounded-xl border border-white/8 bg-black/20 px-3 py-3">
+                          <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-400">好感背景章节</div>
+                          <div className="mt-2 space-y-2">
+                            {role.backstoryReveal.chapters.map(chapter => (
+                              <div key={`${role.id}-${chapter.id}`} className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">
+                                {chapter.affinityRequired} 好感 · {chapter.title}：{chapter.teaser}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                        <div className="mt-3 rounded-xl border border-white/8 bg-black/20 px-3 py-3">
+                          <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-400">技能</div>
+                          <div className="mt-2 space-y-2">
+                            {role.skills.map(skill => (
+                              <div key={`${role.id}-${skill.id}`} className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">
+                                {skill.name} · {skill.style}：{skill.summary}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                        <div className="mt-3 rounded-xl border border-white/8 bg-black/20 px-3 py-3">
+                          <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-400">初始物品</div>
+                          <div className="mt-2 space-y-2">
+                            {role.initialItems.map(item => (
+                              <div key={`${role.id}-${item.id}`} className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">
+                                {item.name} x{item.quantity} · {item.category} · {item.rarity}：{item.description}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
                         <div className="mt-3 flex flex-wrap gap-2">
                           {role.tags.map(tag => (
                             <span key={`${role.id}-${tag}`} className="rounded-full border border-white/10 bg-black/20 px-2.5 py-1 text-[10px] text-zinc-300">
@@ -400,6 +488,9 @@ export function CustomWorldEntityCatalog({
                     />
                     <div className="min-w-0 space-y-3">
                       <div className="text-sm leading-6 text-zinc-300">{npc.description}</div>
+                      <div className="rounded-2xl border border-sky-300/12 bg-sky-500/8 px-3 py-3 text-sm leading-6 text-sky-50/95">
+                        公开背景：{npc.backstoryReveal.publicSummary || '未填写'}
+                      </div>
                       <div className="grid gap-2 sm:grid-cols-2">
                         <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3 text-sm leading-6 text-zinc-300">头衔：{npc.title}</div>
                         <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3 text-sm leading-6 text-zinc-300">初始好感：{npc.initialAffinity}</div>
@@ -410,6 +501,36 @@ export function CustomWorldEntityCatalog({
                         <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3 text-sm leading-6 text-zinc-300">背景：{npc.backstory}</div>
                       ) : null}
                       <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3 text-sm leading-6 text-zinc-300">动机：{npc.motivation}</div>
+                      <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3">
+                        <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-400">好感背景章节</div>
+                        <div className="mt-2 space-y-2">
+                          {npc.backstoryReveal.chapters.map(chapter => (
+                            <div key={`${npc.id}-${chapter.id}`} className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">
+                              {chapter.affinityRequired} 好感 · {chapter.title}：{chapter.teaser}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                      <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3">
+                        <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-400">技能</div>
+                        <div className="mt-2 space-y-2">
+                          {npc.skills.map(skill => (
+                            <div key={`${npc.id}-${skill.id}`} className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">
+                              {skill.name} · {skill.style}：{skill.summary}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                      <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3">
+                        <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-400">初始物品</div>
+                        <div className="mt-2 space-y-2">
+                          {npc.initialItems.map(item => (
+                            <div key={`${npc.id}-${item.id}`} className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">
+                              {item.name} x{item.quantity} · {item.category} · {item.rarity}：{item.description}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
                       <div className="flex flex-wrap gap-2">
                         {npc.relationshipHooks.map(hook => (
                           <span key={`${npc.id}-${hook}`} className="rounded-full border border-white/10 bg-black/20 px-2.5 py-1 text-[10px] text-zinc-300">
@@ -434,7 +555,7 @@ export function CustomWorldEntityCatalog({
       {activeTab === 'landmarks' ? (
         <div className="space-y-3">
           <div className="rounded-2xl border border-white/8 bg-black/20 px-4 py-3 text-sm text-zinc-300">
-            场景图会同步用于结果页和正式世界中的背景展示。
+            场景图会同步用于结果页和正式世界中的背景展示；这里还能看到每个场景承载的 NPC 和连接关系。
           </div>
           {filteredLandmarks.length === 0 ? (
             <EmptyState title="当前没有符合搜索条件的场景。" />
@@ -453,6 +574,38 @@ export function CustomWorldEntityCatalog({
                   <div className="space-y-3">
                     <ImageFrame src={landmark.imageSrc} alt={landmark.name} fallbackLabel={landmark.name.slice(0, 4) || '场景'} tone="landscape" />
                     <div className="text-sm leading-7 text-zinc-300">{landmark.description}</div>
+                    <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3 text-sm leading-6 text-zinc-300">
+                      危险度：{landmark.dangerLevel || '未填写'}
+                    </div>
+                    <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3">
+                      <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-400">场景内 NPC</div>
+                      <div className="mt-2 flex flex-wrap gap-2">
+                        {landmark.sceneNpcIds.length > 0 ? (
+                          landmark.sceneNpcIds.map((npcId) => (
+                            <span key={`${landmark.id}-npc-${npcId}`} className="rounded-full border border-sky-300/12 bg-sky-500/8 px-2.5 py-1 text-[10px] text-sky-100">
+                              {storyNpcById.get(npcId)?.name ?? '未匹配角色'}
+                            </span>
+                          ))
+                        ) : (
+                          <span className="text-xs text-zinc-500">尚未分配场景角色</span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="rounded-2xl border border-white/8 bg-black/20 px-3 py-3">
+                      <div className="text-[11px] font-bold tracking-[0.16em] text-zinc-400">连接关系</div>
+                      <div className="mt-2 space-y-2">
+                        {landmark.connections.length > 0 ? (
+                          landmark.connections.map((connection) => (
+                            <div key={`${landmark.id}-connection-${connection.targetLandmarkId}-${connection.relativePosition}`} className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs leading-6 text-zinc-300">
+                              {getCustomWorldSceneRelativePositionLabel(connection.relativePosition)} · {landmarkById.get(connection.targetLandmarkId)?.name ?? '未匹配场景'}
+                              {connection.summary ? `：${connection.summary}` : ''}
+                            </div>
+                          ))
+                        ) : (
+                          <div className="text-xs text-zinc-500">尚未配置连接关系</div>
+                        )}
+                      </div>
+                    </div>
                   </div>
                 </Section>
               </div>