fenglee/miaojingAI
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use original image in creation detail preview

Browse Source
This commit is contained in:
FengLee
2026-05-13 16:24:42 +08:00
parent b263c26ac0
commit d5972ad14e
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/creation-detail-dialog.tsx
View File

@@ -15,7 +15,7 @@ import { Button } from '@/components/ui/button';
import { Download, Copy, FileSearch, ImageOff, Film, ImageIcon, Share2, CheckCircle2, Maximize2 } from 'lucide-react';
import { toast } from 'sonner';
import { FullscreenPreview } from '@/components/fullscreen-preview';
import { CachedPreviewImage } from '@/components/create/cached-preview-image';
import { ImageMetadataBadge } from '@/components/image-metadata-badge';
interface CreationDetailDialogProps {
record: CreationRecord | null;
@@ -393,8 +393,8 @@ export function CreationDetailDialog({ record, open, onClose, onPublishChange }:
? 'mt-2 flex min-w-0 items-start gap-5 overflow-hidden'
: 'mt-2 grid min-w-0 items-start gap-5 xl:grid-cols-[minmax(0,auto)_500px]';
const previewShellClassName = isSquarePreview
? 'mx-auto box-border flex max-w-full min-w-0 self-start flex-col items-center justify-start overflow-hidden rounded-xl bg-black/20'
: 'mx-auto box-border flex max-w-full min-w-0 self-start flex-col items-center justify-center space-y-4 overflow-hidden rounded-xl bg-black/20';
? 'mx-auto box-border flex max-w-full min-w-0 self-start flex-col items-center justify-start overflow-visible'
: 'mx-auto box-border flex max-w-full min-w-0 self-start flex-col items-center justify-center space-y-4 overflow-visible';
const contentPanelClassName = `flex min-w-0 self-start flex-col overflow-hidden rounded-xl border border-border bg-card/40 p-4 ${
isSquarePreview ? '' : ''
}`;
@@ -438,7 +438,7 @@ export function CreationDetailDialog({ record, open, onClose, onPublishChange }:
>
{/* Media Preview */}
<div
className="group relative flex max-w-full shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-black"
className="group relative flex max-w-full shrink-0 items-center justify-center overflow-hidden rounded-lg"
style={previewFrameStyle}
>
{isPlaceholderUrl ? (
@@ -447,11 +447,11 @@ export function CreationDetailDialog({ record, open, onClose, onPublishChange }:
<p className="text-sm">图片链接已过期</p>
</div>
) : record.type === 'image' ? (
<CachedPreviewImage
/* eslint-disable-next-line @next/next/no-img-element */
<img
src={record.url}
alt={record.prompt}
className="h-full w-full cursor-zoom-in object-contain"
badgeClassName="absolute right-3 top-3 z-20"
onLoad={(event) => {
const img = event.currentTarget;
if (img.naturalWidth > 0 && img.naturalHeight > 0) {
@@ -476,6 +476,9 @@ export function CreationDetailDialog({ record, open, onClose, onPublishChange }:
/>
)}
{/* Fullscreen button */}
{!isPlaceholderUrl && record.type === 'image' && (
<ImageMetadataBadge src={record.url} className="absolute right-3 top-3 z-20" />
)}
{!isPlaceholderUrl && record.type === 'image' && (
<button
onClick={() => setFullscreenSrc(record.url)}