mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-04 07:26:47 +00:00
plog 点击图片跳转
This commit is contained in:
tangly1024.com
@@ -6,17 +6,28 @@ import Link from 'next/link'
|
||||
import { siteConfig } from '@/lib/config'
|
||||
import LazyImage from '@/components/LazyImage'
|
||||
import { compressImage } from '@/lib/notion/mapImage'
|
||||
import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
|
||||
|
||||
/**
|
||||
* 弹出框
|
||||
*/
|
||||
export default function Modal(props) {
|
||||
const { showModal, setShowModal, modalContent, setModalContent } = usePlogGlobal()
|
||||
const { showModal, setShowModal, modalContent, setModalContent } =
|
||||
usePlogGlobal()
|
||||
const { siteInfo, posts } = props
|
||||
const cancelButtonRef = useRef(null)
|
||||
const img = compressImage(modalContent?.pageCover || siteInfo?.pageCover, 1200, 85, 'webp')
|
||||
const img = compressImage(
|
||||
modalContent?.pageCover || siteInfo?.pageCover,
|
||||
1200,
|
||||
85,
|
||||
'webp'
|
||||
)
|
||||
const imgRef = useRef(null)
|
||||
|
||||
const url = checkContainHttp(modalContent?.slug)
|
||||
? sliceUrlFromHttp(modalContent?.slug)
|
||||
: `${siteConfig('SUB_PATH', '')}/${modalContent?.slug}`
|
||||
|
||||
// 添加loading状态
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
@@ -53,73 +64,111 @@ export default function Modal(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Transition.Root show={showModal} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-20" initialFocus={cancelButtonRef} onClose={handleClose}>
|
||||
{/* 遮罩 */}
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
<Transition.Root show={showModal} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-20"
|
||||
initialFocus={cancelButtonRef}
|
||||
onClose={handleClose}
|
||||
>
|
||||
{/* 遮罩 */}
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div
|
||||
style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
|
||||
className="fixed inset-0 glassmorphism transition-opacity"
|
||||
/>
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-30 overflow-y-auto">
|
||||
<div className="flex min-h-full justify-center p-4 text-center items-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 scale-50 w-0"
|
||||
enterTo={'opacity-100 translate-y-0 max-w-screen'}
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 scale-100 max-w-screen"
|
||||
leaveTo="opacity-0 translate-y-4 scale-50 w-0"
|
||||
>
|
||||
<Dialog.Panel className="group relative transform overflow-hidden rounded-xl text-left shadow-xl transition-all ">
|
||||
{/* 添加onLoad事件处理函数 */}
|
||||
{/* 添加loading状态 */}
|
||||
<div
|
||||
className={`bg-hexo-black-gray w-32 h-32 flex justify-center items-center ${loading ? '' : 'hidden'}`}
|
||||
>
|
||||
<div style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} className="fixed inset-0 glassmorphism transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-30 overflow-y-auto">
|
||||
<div className="flex min-h-full justify-center p-4 text-center items-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 scale-50 w-0"
|
||||
enterTo={'opacity-100 translate-y-0 max-w-screen'}
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 scale-100 max-w-screen"
|
||||
leaveTo="opacity-0 translate-y-4 scale-50 w-0"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-xl text-left shadow-xl transition-all ">
|
||||
{/* 添加loading状态 */}
|
||||
<div className={`bg-hexo-black-gray w-32 h-32 flex justify-center items-center ${loading ? '' : 'hidden'}`}>
|
||||
<ArrowPath className='w-10 h-10 animate-spin text-gray-200' />
|
||||
</div>
|
||||
|
||||
{/* 添加onLoad事件处理函数 */}
|
||||
<LazyImage onLoad={handleImageLoad} src={img} ref={imgRef} style={{ display: loading ? 'none' : 'block' }} className={`w-full max-w-7xl max-h-[90vh] shadow-xl ${!loading ? ' animate__animated animate__fadeIn' : ''}`} />
|
||||
|
||||
{!loading && (<>
|
||||
<div className='absolute bottom-0 left-0 m-4 z-20'>
|
||||
<Link href={`${siteConfig('SUB_PATH', '')}/${modalContent.slug}`}>
|
||||
<div className='flex'>
|
||||
<h2 style={{ textShadow: '0.1em 0.1em 0.2em black' }} className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>{modalContent?.title}</h2>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href={`${siteConfig('SUB_PATH', '')}/${modalContent.slug}`}>
|
||||
<div style={{ textShadow: '0.1em 0.1em 0.2em black' }} className={'line-clamp-3 md:line-clamp-none overflow-hidden cursor-pointer text-gray-50 rounded-lg m-2'}>
|
||||
{modalContent?.summary}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{modalContent?.category && (
|
||||
<div className='flex'>
|
||||
<Link href={`/category/${modalContent?.category}`} className='text-xs rounded-lg mt-3 px-2 py-1 bg-black bg-opacity-20 text-white hover:bg-blue-700 hover:text-white duration-200'>
|
||||
{modalContent?.category}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='z-10 absolute hover:opacity-50 opacity-0 duration-200 transition-opacity w-full top-0 left-0 px-4 h-full items-center flex justify-between'>
|
||||
<div onClick={prev}><ChevronLeft className='cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150' /></div>
|
||||
<div onClick={next}><ChevronRight className='cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150' /></div>
|
||||
</div>
|
||||
</>)}
|
||||
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
<ArrowPath className="w-10 h-10 animate-spin text-gray-200" />
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
|
||||
<Link href={url}>
|
||||
<LazyImage
|
||||
onLoad={handleImageLoad}
|
||||
src={img}
|
||||
ref={imgRef}
|
||||
style={{ display: loading ? 'none' : 'block' }}
|
||||
className={`w-full select-none max-w-7xl max-h-[90vh] shadow-xl ${!loading ? ' animate__animated animate__fadeIn' : ''}`}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{!loading && (
|
||||
<>
|
||||
<div className="absolute bottom-0 left-0 m-4 z-20">
|
||||
<div className="flex">
|
||||
<h2
|
||||
style={{ textShadow: '0.1em 0.1em 0.2em black' }}
|
||||
className="text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg"
|
||||
>
|
||||
{modalContent?.title}
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
style={{ textShadow: '0.1em 0.1em 0.2em black' }}
|
||||
className={
|
||||
'line-clamp-3 md:line-clamp-none overflow-hidden cursor-pointer text-gray-50 rounded-lg m-2'
|
||||
}
|
||||
>
|
||||
{modalContent?.summary}
|
||||
</div>
|
||||
|
||||
{modalContent?.category && (
|
||||
<div className="flex">
|
||||
<Link
|
||||
href={`/category/${modalContent?.category}`}
|
||||
className="text-xs rounded-lg mt-3 px-2 py-1 bg-black bg-opacity-20 text-white hover:bg-blue-700 hover:text-white duration-200"
|
||||
>
|
||||
{modalContent?.category}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* <div className="z-10 absolute hover:opacity-50 opacity-0 duration-200 transition-opacity w-full top-0 left-0 px-4 h-full items-center flex justify-between"> */}
|
||||
<div
|
||||
onClick={prev}
|
||||
className="z-10 absolute left-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity"
|
||||
>
|
||||
<ChevronLeft className="cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150" />
|
||||
</div>
|
||||
<div
|
||||
onClick={next}
|
||||
className="z-10 absolute right-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity"
|
||||
>
|
||||
<ChevronRight className="cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150" />
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</>
|
||||
)}
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user