diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index 7ea1cc2ab..9103e5587 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -5634,18 +5634,14 @@ iframe.preview-frame {
pointer-events: none;
}
-.game-resource-book-loading {
+.game-resource-book-thumbnail-loading {
position: absolute;
- inset: 0;
- z-index: 40;
+ inset: 42px 0 0;
+ z-index: 3;
display: flex;
- flex-direction: column;
align-items: center;
justify-content: center;
- gap: 10px;
- background: rgb(255 253 250 / 78%);
- color: #a08073;
- font-size: 13px;
+ color: #c46a40;
pointer-events: none;
}
diff --git a/apps/ai-game-creator-shell/src/view/project-development/index.tsx b/apps/ai-game-creator-shell/src/view/project-development/index.tsx
index d24b0fc2b..c470d3fba 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/index.tsx
+++ b/apps/ai-game-creator-shell/src/view/project-development/index.tsx
@@ -912,6 +912,7 @@ function ResourceBookThumbnail({
resources,
onOpen,
registerElement,
+ loading = false,
}: {
category: ResourceCategory;
resources: ProjectResource[];
@@ -920,6 +921,7 @@ function ResourceBookThumbnail({
category: ResourceCategory,
element: HTMLElement | null,
) => void;
+ loading?: boolean;
}) {
const stacks = Array.from(
resources.reduce((groups, resource) => {
@@ -978,6 +980,15 @@ function ResourceBookThumbnail({
打开{categoryLabels[category]}
+ {loading ? (
+
+
+
+ ) : null}
);
}
@@ -2191,36 +2202,40 @@ export default function ProjectDevelopmentView({
sortMode,
visibleCategoryOrder,
]);
- const resourceBookOverviewReady = useMemo(
- () =>
- visibleCategoryOrder.every((category) => {
- const rect = resourceBookOverviewRects.get(category);
- return Boolean(rect && rect.width > 0 && rect.height > 0);
- }),
- [resourceBookOverviewRects, visibleCategoryOrder],
- );
- const resourceBookSettledPreviewCount = useMemo(() => {
- let settled = 0;
+ // 每个功能画布框内各自判断加载态:该栏目一张预览都没落地时转圈。
+ const resourceBookCategorySettledPreviews = useMemo(() => {
+ const counts = new Map<
+ ResourceCategory,
+ { previewable: number; settled: number }
+ >();
for (const resource of visibleResources) {
+ const kind = projectResourceCardPreviewKind(resource);
+ // 版本、占位和音频卡片本来就不请求卡片预览,不能计入加载等待。
+ if (kind === 'version' || kind === 'placeholder' || kind === 'audio') {
+ continue;
+ }
+ const entry = counts.get(resource.category) ?? {
+ previewable: 0,
+ settled: 0,
+ };
+ entry.previewable += 1;
const identity = resourceCardPreviews.identityByResourceId.get(
resource.id,
);
- if (!identity) continue;
- const status = resourceCardPreviews.previews.get(identity)?.status;
- if (status === 'loaded' || status === 'failed') settled += 1;
+ const status = identity
+ ? resourceCardPreviews.previews.get(identity)?.status
+ : undefined;
+ if (status === 'loaded' || status === 'failed') {
+ entry.settled += 1;
+ }
+ counts.set(resource.category, entry);
}
- return settled;
+ return counts;
}, [
resourceCardPreviews.identityByResourceId,
resourceCardPreviews.previews,
visibleResources,
]);
- const resourceBookLoading = resourceBookIsLoading({
- resourceCount: visibleResources.length,
- overviewReady: resourceBookOverviewReady,
- cardsReady: sortMode !== 'dependency' || resourceGraphInitializationReady,
- settledPreviewCount: resourceBookSettledPreviewCount,
- });
const setResourceCanvasViewport = useCallback(
(
category: ResourceCategory,
@@ -5622,20 +5637,6 @@ export default function ProjectDevelopmentView({
onWheel={handleResourceBookWheel}
/>