1

2026-04-20 21:06:48 +08:00
parent 1c72066bab
commit 75944b1f1f
102 changed files with 9648 additions and 1540 deletions
--- a/src/components/CustomWorldResultView.tsx
+++ b/src/components/CustomWorldResultView.tsx
@@ -54,6 +54,159 @@ type PendingGeneratedEntity = {

 type RecentGeneratedIds = Record<EntityGenerationKind, string[]>;

+type CustomWorldAssetDebugEntry = {
+  id: string;
+  label: string;
+  imageSrc: string;
+  kind: 'playable' | 'story' | 'landmark' | 'scene-act';
+};
+
+type AssetDebugLoadStatus = 'loading' | 'loaded' | 'error';
+
+const CUSTOM_WORLD_ASSET_DEBUG_QUERY_KEY = 'debugCustomWorldAssets';
+const CUSTOM_WORLD_ASSET_DEBUG_STORAGE_KEY =
+  'genarrative.debug.customWorldAssets';
+
+function shouldEnableCustomWorldAssetDebugPanel() {
+  if (!import.meta.env.DEV || typeof window === 'undefined') {
+    return false;
+  }
+
+  const searchParams = new URLSearchParams(window.location.search);
+  if (searchParams.get(CUSTOM_WORLD_ASSET_DEBUG_QUERY_KEY) === '1') {
+    return true;
+  }
+
+  return (
+    window.localStorage.getItem(CUSTOM_WORLD_ASSET_DEBUG_STORAGE_KEY) === '1'
+  );
+}
+
+function collectCustomWorldAssetDebugEntries(
+  profile: CustomWorldProfile,
+): CustomWorldAssetDebugEntry[] {
+  const playableEntries = profile.playableNpcs
+    .map((role) => {
+      const imageSrc = role.imageSrc?.trim() || '';
+      if (!imageSrc) {
+        return null;
+      }
+
+      return {
+        id: `playable:${role.id}`,
+        label: `${role.name}主形象`,
+        imageSrc,
+        kind: 'playable' as const,
+      };
+    })
+    .filter(
+      (entry): entry is CustomWorldAssetDebugEntry => Boolean(entry),
+    );
+  const storyEntries = profile.storyNpcs
+    .map((role) => {
+      const imageSrc = role.imageSrc?.trim() || '';
+      if (!imageSrc) {
+        return null;
+      }
+
+      return {
+        id: `story:${role.id}`,
+        label: `${role.name}场景角色主图`,
+        imageSrc,
+        kind: 'story' as const,
+      };
+    })
+    .filter(
+      (entry): entry is CustomWorldAssetDebugEntry => Boolean(entry),
+    );
+  const landmarkEntries = profile.landmarks
+    .map((landmark) => {
+      const imageSrc = landmark.imageSrc?.trim() || '';
+      if (!imageSrc) {
+        return null;
+      }
+
+      return {
+        id: `landmark:${landmark.id}`,
+        label: `${landmark.name}场景主图`,
+        imageSrc,
+        kind: 'landmark' as const,
+      };
+    })
+    .filter(
+      (entry): entry is CustomWorldAssetDebugEntry => Boolean(entry),
+    );
+  const sceneActEntries =
+    profile.sceneChapterBlueprints?.flatMap((chapter) =>
+      chapter.acts
+        .map((act) => {
+          const imageSrc = act.backgroundImageSrc?.trim() || '';
+          if (!imageSrc) {
+            return null;
+          }
+
+          return {
+            id: `scene-act:${chapter.id}:${act.id}`,
+            label: `${chapter.title || chapter.sceneId} / ${act.title}幕图`,
+            imageSrc,
+            kind: 'scene-act' as const,
+          };
+        })
+        .filter(
+          (entry): entry is CustomWorldAssetDebugEntry => Boolean(entry),
+        ),
+    ) ?? [];
+
+  return [
+    ...playableEntries,
+    ...storyEntries,
+    ...landmarkEntries,
+    ...sceneActEntries,
+  ];
+}
+
+function resolveAssetDebugStatusLabel(status: AssetDebugLoadStatus | undefined) {
+  if (status === 'loaded') {
+    return '已加载';
+  }
+  if (status === 'error') {
+    return '加载失败';
+  }
+  return '检测中';
+}
+
+function resolveAssetDebugSummary(profile: CustomWorldProfile) {
+  return [
+    {
+      label: '可扮演角色主图',
+      value: `${profile.playableNpcs.filter((role) => Boolean(role.imageSrc?.trim())).length}/${profile.playableNpcs.length}`,
+    },
+    {
+      label: '场景角色主图',
+      value: `${profile.storyNpcs.filter((role) => Boolean(role.imageSrc?.trim())).length}/${profile.storyNpcs.length}`,
+    },
+    {
+      label: '场景主图',
+      value: `${profile.landmarks.filter((landmark) => Boolean(landmark.imageSrc?.trim())).length}/${profile.landmarks.length}`,
+    },
+    {
+      label: '分幕图',
+      value: `${profile.sceneChapterBlueprints?.reduce(
+        (sum, chapter) =>
+          sum +
+          chapter.acts.filter((act) => Boolean(act.backgroundImageSrc?.trim()))
+            .length,
+        0,
+      ) ?? 0}/${
+        profile.sceneChapterBlueprints?.reduce(
+          (sum, chapter) => sum + chapter.acts.length,
+          0,
+        ) ?? 0
+      }`,
+    },
+  ];
+}
+
 function SmallButton({
  onClick,
  children,
@@ -236,6 +389,22 @@ export function CustomWorldResultView({
    null,
  );
  const pendingProgressTimerRef = useRef<number | null>(null);
+  const assetDebugEnabled = useMemo(
+    () => shouldEnableCustomWorldAssetDebugPanel(),
+    [],
+  );
+  const assetDebugEntries = useMemo(
+    () =>
+      assetDebugEnabled ? collectCustomWorldAssetDebugEntries(profile) : [],
+    [assetDebugEnabled, profile],
+  );
+  const assetDebugSummary = useMemo(
+    () => (assetDebugEnabled ? resolveAssetDebugSummary(profile) : []),
+    [assetDebugEnabled, profile],
+  );
+  const [assetDebugStatusMap, setAssetDebugStatusMap] = useState<
+    Record<string, AssetDebugLoadStatus>
+  >({});

  const createTarget = useMemo(
    () => getCreateTargetByTab(activeTab),
@@ -254,6 +423,59 @@ export function CustomWorldResultView({

  useEffect(() => () => stopPendingProgressTimer(), []);

+  useEffect(() => {
+    if (!assetDebugEnabled) {
+      setAssetDebugStatusMap({});
+      return;
+    }
+
+    if (assetDebugEntries.length === 0) {
+      setAssetDebugStatusMap({});
+      return;
+    }
+
+    let cancelled = false;
+    const cleanupList: Array<() => void> = [];
+
+    setAssetDebugStatusMap(
+      Object.fromEntries(
+        assetDebugEntries.map((entry) => [entry.id, 'loading' as const]),
+      ),
+    );
+
+    assetDebugEntries.forEach((entry) => {
+      const image = new Image();
+      const updateStatus = (status: AssetDebugLoadStatus) => {
+        if (cancelled) {
+          return;
+        }
+
+        setAssetDebugStatusMap((current) => {
+          if (current[entry.id] === status) {
+            return current;
+          }
+          return {
+            ...current,
+            [entry.id]: status,
+          };
+        });
+      };
+
+      image.onload = () => updateStatus('loaded');
+      image.onerror = () => updateStatus('error');
+      image.src = entry.imageSrc;
+      cleanupList.push(() => {
+        image.onload = null;
+        image.onerror = null;
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      cleanupList.forEach((cleanup) => cleanup());
+    };
+  }, [assetDebugEnabled, assetDebugEntries]);
+
  const startPendingProgress = (kind: EntityGenerationKind) => {
    stopPendingProgressTimer();
    setPendingGeneratedEntity(createPendingGeneratedEntity(kind));
@@ -445,6 +667,77 @@ export function CustomWorldResultView({
          {localGenerationError}
        </div>
      ) : null}
+      {assetDebugEnabled ? (
+        <div className="platform-surface platform-surface--soft mt-3 px-3.5 py-3">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <div className="text-xs font-bold tracking-[0.16em] text-white">
+                资产诊断
+              </div>
+              <div className="mt-1 text-xs leading-6 text-zinc-500">
+                仅开发模式显示，用来核对结果页当前拿到的图片字段和实际加载状态。
+              </div>
+            </div>
+            <div className="platform-pill platform-pill--neutral px-2.5 py-1 text-[10px]">
+              {assetDebugEntries.length}项
+            </div>
+          </div>
+          <div className="mt-3 grid grid-cols-2 gap-2 xl:grid-cols-4">
+            {assetDebugSummary.map((entry) => (
+              <div
+                key={entry.label}
+                className="platform-subpanel rounded-2xl px-3 py-2"
+              >
+                <div className="text-[11px] text-zinc-500">{entry.label}</div>
+                <div className="mt-1 text-sm font-semibold text-white">
+                  {entry.value}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-3 space-y-2">
+            {assetDebugEntries.length > 0 ? (
+              assetDebugEntries.map((entry) => (
+                <div
+                  key={entry.id}
+                  className="platform-subpanel rounded-2xl px-3 py-2"
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="text-sm font-semibold text-white">
+                        {entry.label}
+                      </div>
+                      <div className="mt-1 break-all text-[11px] leading-5 text-zinc-400">
+                        {entry.imageSrc}
+                      </div>
+                    </div>
+                    <div className="platform-pill platform-pill--neutral px-2.5 py-1 text-[10px]">
+                      {resolveAssetDebugStatusLabel(
+                        assetDebugStatusMap[entry.id],
+                      )}
+                    </div>
+                  </div>
+                  <div className="mt-2">
+                    <a
+                      href={entry.imageSrc}
+                      target="_blank"
+                      rel="noreferrer"
+                      aria-label={`打开 ${entry.label}`}
+                      className="text-xs font-semibold text-amber-200 underline decoration-white/20 underline-offset-2"
+                    >
+                      打开原图
+                    </a>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="platform-subpanel rounded-2xl px-3 py-3 text-sm text-zinc-400">
+                当前结果页 profile 里没有拿到任何可诊断的图片地址。
+              </div>
+            )}
+          </div>
+        </div>
+      ) : null}

      <div className="mt-4 flex flex-col gap-3">
        {profile.generationStatus === 'key_only' ? (