+ {visibleCategoryOrder.map((category) => {
+ const rect = overviewRects.get(category);
+ const categoryResources = resourcesByCategory.get(category) ?? [];
+ const stacks = groupResourceBookStacks(categoryResources);
+ const active = showChildCards && sceneCategory === category;
+ const renderTransitionCards = showOverviewCards;
+ const renderCards = cardsReady && (renderTransitionCards || active);
+ const titleLayout = active
+ ? { left: 0, top: 0, width: '100%', opacity: 1 }
+ : {
+ left: rect?.left ?? 0,
+ top: rect?.top ?? 0,
+ width: `${rect?.width ?? 280}px`,
+ opacity: renderTransitionCards ? 1 : 0,
+ };
+ const titlebarTransform = active
+ ? `translate(${-safeViewport.x / safeViewport.scale}px, ${-safeViewport.y / safeViewport.scale}px) scale(${1 / safeViewport.scale})`
+ : undefined;
+ return (
+
+
+
+
+ {renderCards &&
+ stacks.flatMap(([_type, items], stackColumn) => {
+ const expanded = active;
+ // 总览只铺前几张，避免一个类型素材变多时把整摞堆到同一处；
+ // 数量由栏目标题栏的“N 项”表达，子画布仍然渲染全部资源。
+ const stackItems = expanded
+ ? items
+ : items
+ .filter((resource) =>
+ visibleResourceIds.has(resource.id),
+ )
+ .slice(0, RESOURCE_BOOK_OVERVIEW_STACK_LIMIT);
+ return stackItems.map((resource, stackIndex) => {
+ const position = positions.get(resource.id);
+ const size = cardSizes.get(resource.id) ?? {
+ width: 180,
+ height: 128,
+ };
+ const cardVisible =
+ visibleResourceIds.has(resource.id) &&
+ (renderTransitionCards || expanded);
+ const layout = expanded
+ ? resourceBookChildCardLayout({
+ position,
+ size,
+ })
+ : resourceBookOverviewCardLayout({
+ rect,
+ stackIndex,
+ stackColumn,
+ });
+ return (
+
+ {renderCard(resource, layout)}
+
+ );
+ });
+ })}
+
+ );
+ })}
+