From 7c449f0596d8c7bb0226767c7c31836d2662e506 Mon Sep 17 00:00:00 2001 From: kdletters Date: Mon, 6 Jul 2026 14:44:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E9=9F=B3=E9=A2=91=E7=B4=A0?= =?UTF-8?q?=E6=9D=90=E5=B0=81=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 使用用户提供的透明 PNG 替换自绘 SVG 音频封面 统一后台素材查询、精选审核、创作主页和画板素材库的音频封面引用 补齐画板图层列表音频图层封面展示 更新相关测试覆盖 --- .../pages/AdminEditorAssetQueryPage.test.tsx | 2 +- .../src/pages/AdminEditorAssetQueryPage.tsx | 2 +- .../AdminEditorShowcaseReviewPage.test.tsx | 2 +- .../pages/AdminEditorShowcaseReviewPage.tsx | 2 +- public/creation-home/audio-asset-cover.png | Bin 0 -> 6968 bytes public/creation-home/audio-asset-cover.svg | 19 --------------- .../CreationLandingView.test.tsx | 2 +- .../creation-home/CreationLandingView.tsx | 2 +- .../creationShowcaseModel.test.ts | 2 +- .../creation-home/creationShowcaseModel.ts | 2 +- .../ImageCanvasAssetRowView.test.tsx | 2 +- .../image-editor/ImageCanvasAssetRowView.tsx | 2 +- .../ImageCanvasLayerPanelView.tsx | 10 ++++++-- .../ImageCanvasSidebarView.test.tsx | 22 ++++++++++++++++++ 14 files changed, 40 insertions(+), 31 deletions(-) create mode 100644 public/creation-home/audio-asset-cover.png delete mode 100644 public/creation-home/audio-asset-cover.svg diff --git a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx index 3d075d2ed..346a7335d 100644 --- a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx +++ b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx @@ -154,7 +154,7 @@ test('后台素材查询音频素材使用统一封面缩略图', async () => { const image = await screen.findByRole('img', { name: '素材：胜利音效' }); expect(image.getAttribute('src')).toBe( - '/creation-home/audio-asset-cover.svg', + '/creation-home/audio-asset-cover.png', ); expect(getAdminAssetReadUrl).not.toHaveBeenCalled(); }); diff --git a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx index 50f588c25..177865f24 100644 --- a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx +++ b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx @@ -19,7 +19,7 @@ interface AdminEditorAssetQueryPageProps { } const ADMIN_ASSET_READ_EXPIRE_SECONDS = 300; -const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.svg'; +const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.png'; export function AdminEditorAssetQueryPage({ token, diff --git a/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.test.tsx b/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.test.tsx index ac11c94bd..90cd99289 100644 --- a/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.test.tsx +++ b/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.test.tsx @@ -200,7 +200,7 @@ test('后台精选审核音频素材使用统一封面缩略图', async () => { const image = await screen.findByRole('img', { name: '精选素材：胜利音效' }); expect(image.getAttribute('src')).toBe( - '/creation-home/audio-asset-cover.svg', + '/creation-home/audio-asset-cover.png', ); expect(getAdminAssetReadUrl).not.toHaveBeenCalled(); }); diff --git a/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.tsx b/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.tsx index 302d4d074..1988dfab4 100644 --- a/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.tsx +++ b/apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.tsx @@ -24,7 +24,7 @@ interface AdminEditorShowcaseReviewPageProps { } const ADMIN_SHOWCASE_READ_EXPIRE_SECONDS = 300; -const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.svg'; +const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.png'; const showcaseCategoryOptions = [ { value: 'packs', label: '素材包' }, diff --git a/public/creation-home/audio-asset-cover.png b/public/creation-home/audio-asset-cover.png new file mode 100644 index 0000000000000000000000000000000000000000..893e476ab76a2037e5068a53d8c31901f26474cc GIT binary patch literal 6968 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 - - - - - - - diff --git a/src/components/creation-home/CreationLandingView.test.tsx b/src/components/creation-home/CreationLandingView.test.tsx index b80a8d7f6..e54762ba5 100644 --- a/src/components/creation-home/CreationLandingView.test.tsx +++ b/src/components/creation-home/CreationLandingView.test.tsx @@ -547,7 +547,7 @@ describe('CreationLandingView', () => { name: '背景音乐', }); expect(image.getAttribute('src')).toBe( - '/creation-home/audio-asset-cover.svg', + '/creation-home/audio-asset-cover.png', ); }); diff --git a/src/components/creation-home/CreationLandingView.tsx b/src/components/creation-home/CreationLandingView.tsx index 833e6f490..64f8a2cf1 100644 --- a/src/components/creation-home/CreationLandingView.tsx +++ b/src/components/creation-home/CreationLandingView.tsx @@ -191,7 +191,7 @@ function ShowcaseAudioPreview({ objectKey: preview.objectKey, }); const coverSrc = - preview.coverSrc?.trim() || '/creation-home/audio-asset-cover.svg'; + preview.coverSrc?.trim() || '/creation-home/audio-asset-cover.png'; return (
diff --git a/src/components/creation-home/creationShowcaseModel.test.ts b/src/components/creation-home/creationShowcaseModel.test.ts index 99a53de5d..e108cb496 100644 --- a/src/components/creation-home/creationShowcaseModel.test.ts +++ b/src/components/creation-home/creationShowcaseModel.test.ts @@ -459,7 +459,7 @@ describe('creationShowcaseModel', () => { expect(items).toHaveLength(1); expect(items[0]?.previews[0]?.mediaType).toBe('audio'); expect(items[0]?.previews[0]?.coverSrc).toBe( - '/creation-home/audio-asset-cover.svg', + '/creation-home/audio-asset-cover.png', ); expect(items[0]?.author).toBe('当前用户'); expect(items[0]?.cost).toBe('5泥点'); diff --git a/src/components/creation-home/creationShowcaseModel.ts b/src/components/creation-home/creationShowcaseModel.ts index 4001a2f0a..68dd913a3 100644 --- a/src/components/creation-home/creationShowcaseModel.ts +++ b/src/components/creation-home/creationShowcaseModel.ts @@ -56,7 +56,7 @@ type ShowcaseAssetGroup = { }; const UNKNOWN_META_VALUE = '-'; -const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.svg'; +const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.png'; const SHOWCASE_COST_KEYS = [ 'priceMudPoints', diff --git a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx index 2ca914786..dec4bac5e 100644 --- a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx +++ b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx @@ -249,7 +249,7 @@ describe('ImageCanvasAssetRowView', () => { expect(screen.getByText('音频')).toBeTruthy(); const image = screen.getByRole('img', { name: '素材：胜利音效.mp3' }); expect(image.getAttribute('src')).toBe( - '/creation-home/audio-asset-cover.svg', + '/creation-home/audio-asset-cover.png', ); expect( document.querySelector('.image-canvas-editor__asset-media-overlay'), diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx index c6bd2093a..32f387cbb 100644 --- a/src/components/image-editor/ImageCanvasAssetRowView.tsx +++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx @@ -24,7 +24,7 @@ import { getCanvasMediaPreviewMarker, } from './ImageCanvasMediaModel'; -const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.svg'; +const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.png'; export type ImageCanvasAssetRowViewProps = { asset: EditorAsset; diff --git a/src/components/image-editor/ImageCanvasLayerPanelView.tsx b/src/components/image-editor/ImageCanvasLayerPanelView.tsx index aa03a6150..bf4a9941d 100644 --- a/src/components/image-editor/ImageCanvasLayerPanelView.tsx +++ b/src/components/image-editor/ImageCanvasLayerPanelView.tsx @@ -7,6 +7,8 @@ import type { ImageContextMenuState, } from './ImageCanvasEditorTypes'; +const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.png'; + export type ImageCanvasLayerPanelViewProps = { layers: CanvasLayer[]; selectedLayerId: string | null; @@ -52,8 +54,12 @@ export function ImageCanvasLayerPanelView({ ] .filter(Boolean) .join(' · ')} - imageSrc={layer.src} - objectKey={layer.mediaType === 'image' ? layer.objectKey : undefined} + imageSrc={ + layer.mediaType === 'audio' ? AUDIO_ASSET_COVER_SRC : layer.src + } + objectKey={ + layer.mediaType === 'image' ? layer.objectKey : undefined + } imageAlt={`图层缩略图：${layer.title}`} selected={selectedLayerId === layer.id} primaryLabel={`选择图层${layer.title}`} diff --git a/src/components/image-editor/ImageCanvasSidebarView.test.tsx b/src/components/image-editor/ImageCanvasSidebarView.test.tsx index 83300590f..5b479b6e8 100644 --- a/src/components/image-editor/ImageCanvasSidebarView.test.tsx +++ b/src/components/image-editor/ImageCanvasSidebarView.test.tsx @@ -297,6 +297,28 @@ describe('ImageCanvasSidebarView', () => { ).toBeTruthy(); }); + it('uses the transparent audio cover for audio layer thumbnails', () => { + render( + , + ); + + const image = screen.getByAltText('图层缩略图：胜利音效'); + expect(image.getAttribute('src')).toBe( + '/creation-home/audio-asset-cover.png', + ); + }); + it('filters canvas layers from the sidebar search field', () => { render(