diff --git a/src/components/creation-home/CreationLandingView.test.tsx b/src/components/creation-home/CreationLandingView.test.tsx index a403c7f45..b2333be8c 100644 --- a/src/components/creation-home/CreationLandingView.test.tsx +++ b/src/components/creation-home/CreationLandingView.test.tsx @@ -611,10 +611,42 @@ describe('CreationLandingView', () => { '.creation-landing__asset-preview', ) as HTMLElement | null; expect(firstPreview?.style.aspectRatio).toBe('512 / 640'); + expect(firstPreview?.className).not.toContain( + 'creation-landing__asset-preview--campaign', + ); expect(screen.queryByText('经典 RPG 体验')).toBeNull(); expect(screen.queryByText('拼图关卡创作')).toBeNull(); }); + it('renders campaign card previews with centered contain media', async () => { + listEditorProjectsMock.mockResolvedValue(projectItems); + listPublicEditorProjectResourcesMock.mockResolvedValue({ + resources: [], + nextCursor: null, + campaign: { + enabled: true, + title: '活动精选', + imageSrc: '/campaign.png', + imageWidth: 900, + imageHeight: 1200, + prompt: '活动提示词', + author: '运营', + costText: '50泥点', + }, + }); + + const { container } = renderCreationLanding(); + + expect(await screen.findByText('活动精选')).toBeTruthy(); + const campaignPreview = container.querySelector( + '.creation-landing__asset-preview', + ) as HTMLElement | null; + expect(campaignPreview?.className).toContain( + 'creation-landing__asset-preview--campaign', + ); + expect(campaignPreview?.style.aspectRatio).toBe('900 / 1200'); + }); + it('loads more featured resources when the waterfall reaches the end', async () => { const observers = installIntersectionObserverMock(); listEditorProjectsMock.mockResolvedValueOnce(projectItems); diff --git a/src/components/creation-home/CreationLandingView.tsx b/src/components/creation-home/CreationLandingView.tsx index ec07c8e04..ea7b08279 100644 --- a/src/components/creation-home/CreationLandingView.tsx +++ b/src/components/creation-home/CreationLandingView.tsx @@ -282,6 +282,13 @@ function ShowcaseVideoPreview({ function ShowcaseBundlePreview({ item }: { item: ShowcaseAssetItem }) { const visiblePreviews = item.previews.slice(0, 4); const primaryPreview = visiblePreviews[0]; + const previewClassName = [ + 'creation-landing__asset-preview', + item.previews.length > 1 ? 'creation-landing__asset-preview--bundle' : '', + item.campaign ? 'creation-landing__asset-preview--campaign' : '', + ] + .filter(Boolean) + .join(' '); if (!primaryPreview) { return null; @@ -289,11 +296,7 @@ function ShowcaseBundlePreview({ item }: { item: ShowcaseAssetItem }) { return (
1 - ? 'creation-landing__asset-preview creation-landing__asset-preview--bundle' - : 'creation-landing__asset-preview' - } + className={previewClassName} style={{ aspectRatio: getPreviewAspectRatio(primaryPreview), }} diff --git a/src/index.css b/src/index.css index 6e01a877e..0173569e9 100644 --- a/src/index.css +++ b/src/index.css @@ -3913,6 +3913,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { display: grid; width: 100%; min-height: 9.5rem; + max-height: 23rem; overflow: hidden; place-items: stretch; background: linear-gradient(180deg, #fffdfa, #fff4ea); @@ -3933,6 +3934,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { object-position: center; } +.creation-landing__asset-preview--campaign { + place-items: center; +} + +.creation-landing__asset-preview--campaign .creation-landing__asset-preview-media { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: contain; +} + .creation-landing__asset-preview--bundle { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;