修复拼图结果页图片预览层级

关卡缩略图改为完整显示,避免生成图被裁切

关卡详情内主图预览支持提高层级,避免被详情弹窗遮挡

补充拼图结果页聚焦测试与 Hermes 踩坑记录
This commit is contained in:
2026-06-13 16:15:38 +08:00
parent 38babc592d
commit 5a1c1c88dd
4 changed files with 16 additions and 1 deletions

View File

@@ -52,6 +52,7 @@ export type CreativeImageInputPanelProps = {
uploadedImageSrc: string;
uploadedImageAlt: string;
uploadedImageRefreshKey?: string | number | null;
mainImagePreviewZIndexClassName?: string;
mainImageMeta?: ReactNode;
mainImageInputId: string;
mainImageAccept?: string;
@@ -100,6 +101,7 @@ export function CreativeImageInputPanel({
uploadedImageSrc,
uploadedImageAlt,
uploadedImageRefreshKey = null,
mainImagePreviewZIndexClassName = 'z-[82]',
mainImageMeta = null,
mainImageInputId,
mainImageAccept = DEFAULT_IMAGE_ACCEPT,
@@ -524,7 +526,7 @@ export function CreativeImageInputPanel({
}
closeVariant="profileCompact"
size="xl"
zIndexClassName="z-[82]"
zIndexClassName={mainImagePreviewZIndexClassName}
overlayClassName="px-4 py-6"
panelClassName="platform-remap-surface rounded-[1.35rem] p-3 shadow-[0_24px_70px_rgba(15,23,42,0.22)]"
headerClassName="mb-3 items-center border-b-0 px-1 py-0"

View File

@@ -274,6 +274,8 @@ describe('PuzzleResultView', () => {
const levelImage = screen.getByRole('img', { name: '雨夜猫街' });
const mediaFrame = levelImage.closest('div.relative');
expect(mediaFrame?.className).toContain('aspect-[4/3]');
expect(levelImage.className).toContain('object-contain');
expect(levelImage.className).not.toContain('object-cover');
expect(mediaFrame?.className).not.toContain(
'bg-[var(--platform-subpanel-fill)]',
);
@@ -552,6 +554,7 @@ describe('PuzzleResultView', () => {
const imagePreviewDialog = screen.getByRole('dialog', {
name: '查看关卡图片',
});
expect(imagePreviewDialog.parentElement?.className).toContain('z-[150]');
expect(within(imagePreviewDialog).getByAltText('暖灯猫街')).toBeTruthy();
fireEvent.click(
within(imagePreviewDialog).getByRole('button', {

View File

@@ -724,6 +724,7 @@ function PuzzleLevelDetailDialog({
promptReferenceImages={promptReferenceImages}
promptReferenceLimit={PUZZLE_LEVEL_PROMPT_REFERENCE_LIMIT}
imageLimitHint="图片≤6MB"
mainImagePreviewZIndexClassName="z-[150]"
imageModelPicker={
<PuzzleImageModelPicker
value={imageModel}
@@ -1069,6 +1070,7 @@ function PuzzleLevelListTab({
fallbackLabel="暂无正式图"
aspect="standard"
surface="none"
imageClassName="h-full w-full object-contain"
className="rounded-none"
fallbackClassName="tracking-normal text-[var(--platform-text-soft)]"
previewOverlay={