7dc8d2a528
Some checks failed
CI Check / check (push) Has been cancelled
- 替换所有浏览器原生弹窗（confirm/alert/prompt） - 创建 ConfirmDialog、AlertDialog、PromptDialog 组件 - 创建 DialogProvider 和 useDialog Hook - 替换所有 admin 组件、首页、分享页面中的原生弹窗 - 素材预览面板统一 - 创建 MaterialPreviewModal 组件 - 使用统一弹窗组件，统一退出逻辑 - 首页UI统一到三层架构 - 迁移主要按钮和输入框样式 - 迁移筛选弹窗中的所有按钮样式 - 使用 useThemeStyles() Hook - 更新文档 - 更新优化记录、优化计划、后续修改、更新日志
61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import Image from 'next/image'
|
|
import Modal from './ui/Modal'
|
|
|
|
interface MaterialPreviewModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
imageUrl: string
|
|
title?: string
|
|
description?: string
|
|
}
|
|
|
|
export default function MaterialPreviewModal({
|
|
isOpen,
|
|
onClose,
|
|
imageUrl,
|
|
title,
|
|
description,
|
|
}: MaterialPreviewModalProps) {
|
|
const imageRef = useRef<HTMLDivElement>(null)
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
size="fullscreen"
|
|
closeOnOverlayClick={true}
|
|
closeOnEscape={true}
|
|
showCloseButton={true}
|
|
className="bg-black/90"
|
|
>
|
|
<div className="relative w-full h-full flex items-center justify-center p-4 -m-6">
|
|
<div className="text-center w-full max-w-7xl">
|
|
<div
|
|
ref={imageRef}
|
|
className="relative w-full max-w-5xl h-[80vh] mx-auto mb-4"
|
|
>
|
|
<Image
|
|
src={imageUrl}
|
|
alt={title || '素材预览'}
|
|
fill
|
|
unoptimized
|
|
sizes="(max-width: 768px) 100vw, 60vw"
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
{title && (
|
|
<p className="text-white text-lg font-medium">{title}</p>
|
|
)}
|
|
{description && (
|
|
<p className="text-white/80 text-sm mt-2">{description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|