diff --git a/apps/admin-web/src/api/adminApiClient.ts b/apps/admin-web/src/api/adminApiClient.ts index e3087cfe3..89cb391db 100644 --- a/apps/admin-web/src/api/adminApiClient.ts +++ b/apps/admin-web/src/api/adminApiClient.ts @@ -342,9 +342,13 @@ export function updateAdminWorkVisibility( ); } -export function getAdminAssetReadUrl(query: AdminAssetReadUrlQuery) { +export function getAdminAssetReadUrl( + token: string, + query: AdminAssetReadUrlQuery, +) { return request( - `/api/assets/read-url${buildAssetReadUrlQuery(query)}`, + `/admin/api/assets/read-url${buildAssetReadUrlQuery(query)}`, + { token }, ); } diff --git a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx index 346a7335d..5786bc43c 100644 --- a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx +++ b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx @@ -7,6 +7,7 @@ import { waitFor, within, } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { beforeEach, expect, test, vi } from 'vitest'; import { @@ -127,12 +128,115 @@ test('后台素材查询缩略图使用 objectKey 换签后展示', async () => 'https://signed.example.com/generated-character-drafts/editor/spec.png', ); }); - expect(getAdminAssetReadUrl).toHaveBeenCalledWith({ + expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', { objectKey: 'generated-character-drafts/editor/spec.png', expireSeconds: 300, }); }); +test('后台素材查询将无 objectKey 的绝对 OSS 图片地址换签后展示', async () => { + vi.mocked(listAdminEditorAssets).mockResolvedValueOnce({ + entries: [ + { + ...generatedAsset, + imageSrc: + 'https://genarrative.oss-cn-shanghai.aliyuncs.com/generated-character-drafts/editor/absolute.png?x-oss-process=image/resize,w_320', + objectKey: null, + }, + ], + nextCursor: null, + }); + vi.mocked(getAdminAssetReadUrl).mockResolvedValue({ + read: { + objectKey: 'generated-character-drafts/editor/absolute.png', + signedUrl: 'https://signed.example.com/absolute.png', + expiresAt: '2026-07-04T11:00:00Z', + }, + }); + + render( + , + ); + + const image = await screen.findByRole('img', { name: '素材：角色形象 1' }); + await waitFor(() => { + expect(image.getAttribute('src')).toBe( + 'https://signed.example.com/absolute.png', + ); + }); + expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', { + legacyPublicPath: '/generated-character-drafts/editor/absolute.png', + expireSeconds: 300, + }); +}); + +test('后台素材查询点击图片缩略图可打开放大预览', async () => { + const user = userEvent.setup(); + + render( + , + ); + + await user.click( + await screen.findByRole('button', { name: '素材：角色形象 1' }), + ); + + const dialog = await screen.findByRole('dialog', { name: '素材预览' }); + const image = within(dialog).getByRole('img', { + name: '图片预览：角色形象 1', + }); + await waitFor(() => { + expect(image.getAttribute('src')).toBe( + 'https://signed.example.com/generated-character-drafts/editor/spec.png', + ); + }); +}); + +test('后台素材查询将角色动画首帧 PNG 作为图片预览', async () => { + const user = userEvent.setup(); + vi.mocked(listAdminEditorAssets).mockResolvedValueOnce({ + entries: [ + { + ...generatedAsset, + assetId: 'asset-character-animation-1', + label: '角色动作首帧', + imageSrc: '/generated-animations/editor/source-1/task-1/frame00.png', + objectKey: 'generated-animations/editor/source-1/task-1/frame00.png', + assetKind: 'character-animation', + thumbnailSrc: + '/generated-animations/editor/source-1/task-1/frame00.png', + }, + ], + nextCursor: null, + }); + vi.mocked(getAdminAssetReadUrl).mockResolvedValue({ + read: { + objectKey: 'generated-animations/editor/source-1/task-1/frame00.png', + signedUrl: 'https://signed.example.com/character-animation-frame00.png', + expiresAt: '2026-07-04T11:00:00Z', + }, + }); + + render( + , + ); + + await user.click( + await screen.findByRole('button', { name: '素材：角色动作首帧' }), + ); + + const dialog = await screen.findByRole('dialog', { name: '素材预览' }); + const image = within(dialog).getByRole('img', { + name: '图片预览：角色动作首帧', + }); + await waitFor(() => { + expect(image.getAttribute('src')).toBe( + 'https://signed.example.com/character-animation-frame00.png', + ); + }); + expect(within(dialog).queryByLabelText('视频预览：角色动作首帧')).toBeNull(); +}); + test('后台素材查询音频素材使用统一封面缩略图', async () => { vi.mocked(listAdminEditorAssets).mockResolvedValueOnce({ entries: [ @@ -159,6 +263,194 @@ test('后台素材查询音频素材使用统一封面缩略图', async () => { expect(getAdminAssetReadUrl).not.toHaveBeenCalled(); }); +test('后台素材查询点击音频缩略图后签名音频并展示播放器', async () => { + const user = userEvent.setup(); + + vi.mocked(listAdminEditorAssets).mockResolvedValueOnce({ + entries: [ + { + ...generatedAsset, + assetId: 'asset-audio-1', + label: '胜利音效', + imageSrc: '/generated-editor-audios/sfx.mp3', + objectKey: 'generated-editor-audios/sfx.mp3', + assetKind: 'sound-effect', + }, + ], + nextCursor: null, + }); + vi.mocked(getAdminAssetReadUrl).mockResolvedValue({ + read: { + objectKey: 'generated-editor-audios/sfx.mp3', + signedUrl: 'https://signed.example.com/generated-editor-audios/sfx.mp3', + expiresAt: '2026-07-04T11:00:00Z', + }, + }); + + render( + , + ); + + await user.click( + await screen.findByRole('button', { name: '素材：胜利音效' }), + ); + + const player = await screen.findByLabelText('音频预览：胜利音效'); + await waitFor(() => { + expect(player.getAttribute('src')).toBe( + 'https://signed.example.com/generated-editor-audios/sfx.mp3', + ); + }); + expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', { + objectKey: 'generated-editor-audios/sfx.mp3', + expireSeconds: 300, + }); +}); + +test('后台素材查询视频缩略图使用封面并在预览中播放视频', async () => { + const user = userEvent.setup(); + + vi.mocked(listAdminEditorAssets).mockResolvedValueOnce({ + entries: [ + { + ...generatedAsset, + assetId: 'asset-video-1', + label: '生成视频 1', + imageSrc: '/generated-editor-videos/task-1/preview.mp4', + objectKey: + 'generated-character-drafts/editor-videos/task-1/preview.mp4', + assetKind: 'editor_video', + thumbnailSrc: '/generated-editor-videos/task-1/cover.png', + }, + ], + nextCursor: null, + }); + vi.mocked(getAdminAssetReadUrl).mockImplementation(async (_token, request) => { + if ('legacyPublicPath' in request) { + return { + read: { + objectKey: 'generated-editor-videos/task-1/cover.png', + signedUrl: 'https://signed.example.com/video-cover.png', + expiresAt: '2026-07-04T11:00:00Z', + }, + }; + } + const objectKey = request.objectKey ?? ''; + return { + read: { + objectKey, + signedUrl: objectKey.endsWith('.mp4') + ? 'https://signed.example.com/video-preview.mp4' + : 'https://signed.example.com/video-cover-by-key.png', + expiresAt: '2026-07-04T11:00:00Z', + }, + }; + }); + + render( + , + ); + + const image = await screen.findByRole('img', { name: '素材：生成视频 1' }); + await waitFor(() => { + expect(image.getAttribute('src')).toBe( + 'https://signed.example.com/video-cover.png', + ); + }); + expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', { + legacyPublicPath: '/generated-editor-videos/task-1/cover.png', + expireSeconds: 300, + }); + expect(getAdminAssetReadUrl).not.toHaveBeenCalledWith('admin-token', { + objectKey: 'generated-character-drafts/editor-videos/task-1/preview.mp4', + expireSeconds: 300, + }); + + vi.mocked(getAdminAssetReadUrl).mockClear(); + await user.click(screen.getByRole('button', { name: '素材：生成视频 1' })); + + const video = await screen.findByLabelText('视频预览：生成视频 1'); + await waitFor(() => { + expect(video.getAttribute('src')).toBe( + 'https://signed.example.com/video-preview.mp4', + ); + }); + expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', { + objectKey: 'generated-character-drafts/editor-videos/task-1/preview.mp4', + expireSeconds: 300, + }); +}); + +test('后台素材查询将无 objectKey 的绝对 OSS 视频和封面分别换签', async () => { + const user = userEvent.setup(); + vi.mocked(listAdminEditorAssets).mockResolvedValueOnce({ + entries: [ + { + ...generatedAsset, + assetId: 'asset-video-2', + label: '生成视频 2', + imageSrc: + 'https://genarrative.oss-cn-shanghai.aliyuncs.com/generated-editor-videos/task-2/preview.mp4?versionId=video', + objectKey: null, + assetKind: 'editor_video', + thumbnailSrc: + 'https://genarrative.oss-cn-shanghai.aliyuncs.com/generated-editor-videos/task-2/cover.png?versionId=poster', + }, + ], + nextCursor: null, + }); + vi.mocked(getAdminAssetReadUrl).mockImplementation(async (_token, request) => { + const legacyPublicPath = request.legacyPublicPath ?? ''; + return { + read: { + objectKey: legacyPublicPath.replace(/^\//u, ''), + signedUrl: legacyPublicPath.endsWith('/cover.png') + ? 'https://signed.example.com/video-2-cover.png' + : 'https://signed.example.com/video-2-preview.mp4', + expiresAt: '2026-07-04T11:00:00Z', + }, + }; + }); + + render( + , + ); + + const thumbnail = await screen.findByRole('img', { + name: '素材：生成视频 2', + }); + await waitFor(() => { + expect(thumbnail.getAttribute('src')).toBe( + 'https://signed.example.com/video-2-cover.png', + ); + }); + expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', { + legacyPublicPath: '/generated-editor-videos/task-2/cover.png', + expireSeconds: 300, + }); + + vi.mocked(getAdminAssetReadUrl).mockClear(); + await user.click(screen.getByRole('button', { name: '素材：生成视频 2' })); + + const video = await screen.findByLabelText('视频预览：生成视频 2'); + await waitFor(() => { + expect(video.getAttribute('src')).toBe( + 'https://signed.example.com/video-2-preview.mp4', + ); + expect(video.getAttribute('poster')).toBe( + 'https://signed.example.com/video-2-cover.png', + ); + }); + expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', { + legacyPublicPath: '/generated-editor-videos/task-2/preview.mp4', + expireSeconds: 300, + }); + expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', { + legacyPublicPath: '/generated-editor-videos/task-2/cover.png', + expireSeconds: 300, + }); +}); + test('后台素材查询格式化微秒时间文本', async () => { vi.mocked(listAdminEditorAssets).mockResolvedValueOnce({ entries: [ diff --git a/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx b/apps/admin-web/src/pages/AdminEditorAssetQueryPage.tsx index 177865f24..25b9e17bc 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.png'; +const AUDIO_ASSET_COVER_SRC = `${import.meta.env.DEV ? import.meta.env.BASE_URL : '/'}creation-home/audio-asset-cover.png`; export function AdminEditorAssetQueryPage({ token, @@ -36,6 +36,8 @@ export function AdminEditorAssetQueryPage({ const [errorMessage, setErrorMessage] = useState(''); const [detailEntry, setDetailEntry] = useState(null); + const [previewEntry, setPreviewEntry] = + useState(null); const [promptPreview, setPromptPreview] = useState<{ title: string; prompt: string; @@ -168,11 +170,11 @@ export function AdminEditorAssetQueryPage({ {entry.label || '-'} @@ -233,7 +235,9 @@ export function AdminEditorAssetQueryPage({ {detailEntry ? ( setDetailEntry(null)} + onPreview={(entry) => setPreviewEntry(entry)} onPromptPreview={(entry, prompt) => setPromptPreview({ title: entry.label || entry.assetId, @@ -243,6 +247,14 @@ export function AdminEditorAssetQueryPage({ /> ) : null} + {previewEntry ? ( + setPreviewEntry(null)} + /> + ) : null} + {promptPreview ? (
void; + onPreview: (entry: AdminEditorAssetPayload) => void; onPromptPreview: (entry: AdminEditorAssetPayload, prompt: string) => void; }) { const promptText = entry.prompt || entry.actualPrompt || ''; @@ -332,7 +417,14 @@ function AdminAssetDetailDialog({
- +
{authorDisplayName(entry)} @@ -385,6 +477,114 @@ function AdminAssetDetailDialog({ ); } +function AdminAssetPreviewDialog({ + entry, + token, + onClose, +}: { + entry: AdminEditorAssetPayload; + token: string; + onClose: () => void; +}) { + return ( +
+
+
+
+

{entry.label || entry.assetId}

+ {entry.assetId} +
+ +
+ +
+
+ ); +} + +function AdminAssetPreviewMedia({ + entry, + token, +}: { + entry: AdminEditorAssetPayload; + token: string; +}) { + const mediaKind = resolveAdminAssetMediaKind(entry); + const isAudio = mediaKind === 'audio'; + const isVideo = mediaKind === 'video'; + const mediaSrc = useAdminResolvedAssetUrl( + token, + entry.imageSrc, + entry.objectKey, + ); + const posterSrc = useAdminResolvedAssetUrl( + token, + isVideo ? (entry.thumbnailSrc ?? '') : '', + null, + ); + const label = entry.label || entry.assetId; + + if (isAudio) { + return ( +
+ {`音频封面：${label}`} + {mediaSrc ? ( +