mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-03 15:10:19 +00:00
new-theme-plog
This commit is contained in:
tangly1024.com
@@ -1,15 +1,16 @@
|
||||
import { Fragment, useRef, useState } from 'react'
|
||||
import { Dialog, Transition } from '@headlessui/react'
|
||||
import { usePlogGlobal } from '..'
|
||||
import { ArrowPath } from '@/components/HeroIcons'
|
||||
import { ArrowPath, ChevronLeft, ChevronRight } from '@/components/HeroIcons'
|
||||
import Link from 'next/link'
|
||||
import BLOG from '@/blog.config'
|
||||
|
||||
/**
|
||||
* 弹出框
|
||||
*/
|
||||
export default function Modal(props) {
|
||||
const { showModal, setShowModal, modalContent } = usePlogGlobal()
|
||||
const { siteInfo } = props
|
||||
const { showModal, setShowModal, modalContent, setModalContent } = usePlogGlobal()
|
||||
const { siteInfo, posts } = props
|
||||
const cancelButtonRef = useRef(null)
|
||||
const img = modalContent?.pageCover || siteInfo?.pageCover
|
||||
const imgRef = useRef(null)
|
||||
@@ -18,7 +19,7 @@ export default function Modal(props) {
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
// 在图片加载完成时设置loading为false
|
||||
async function handleImageLoad() {
|
||||
function handleImageLoad() {
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
@@ -27,6 +28,28 @@ export default function Modal(props) {
|
||||
setShowModal(false)
|
||||
setLoading(true)
|
||||
}
|
||||
|
||||
// 修改当前显示的遮罩内容
|
||||
function prev() {
|
||||
const index = posts.findIndex(post => post.slug === modalContent.slug)
|
||||
if (index === 0) {
|
||||
setModalContent(posts[posts.length - 1])
|
||||
} else {
|
||||
setModalContent(posts[index - 1])
|
||||
}
|
||||
setLoading(true)
|
||||
}
|
||||
// 下一个
|
||||
const next = () => {
|
||||
const index = posts.findIndex(post => post.slug === modalContent.slug)
|
||||
if (index === posts.length - 1) {
|
||||
setModalContent(posts[0])
|
||||
} else {
|
||||
setModalContent(posts[index + 1])
|
||||
}
|
||||
setLoading(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<Transition.Root show={showModal} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={handleClose}>
|
||||
@@ -40,7 +63,7 @@ export default function Modal(props) {
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div style={{ backgroundColor: '#00000063' }} className="fixed inset-0 glassmorphism transition-opacity" />
|
||||
<div style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} className="fixed inset-0 glassmorphism transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
@@ -59,20 +82,37 @@ export default function Modal(props) {
|
||||
<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事件处理函数 */}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={img} ref={imgRef} className={'w-full max-w-7xl max-h-[90vh] shadow-xl'} onLoad={handleImageLoad} style={{ display: loading ? 'none' : 'block' }} />
|
||||
{!loading && <div className='absolute bottom-0 left-0 m-4'>
|
||||
<div className='flex'>
|
||||
<h2 style={{ textShadow: '0.1em 0.1em 0.2em black' }} className='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={'text-gray-50 rounded-lg p-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}
|
||||
<img src={img} ref={imgRef} className={`w-full max-w-7xl max-h-[90vh] shadow-xl ${!loading ? ' animate__animated animate__fadeIn' : ''}`} onLoad={handleImageLoad} style={{ display: loading ? 'none' : 'block' }} />
|
||||
|
||||
{!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-5xl text-white mb-4 px-2 py-1 rounded-lg'>{modalContent?.title}</h2>
|
||||
</div>
|
||||
|
||||
<Link href={`${BLOG.SUB_PATH}/${modalContent.slug}`}>
|
||||
<div style={{ textShadow: '0.1em 0.1em 0.2em black' }} className={'cursor-pointer text-gray-50 rounded-lg p-2'}>
|
||||
{modalContent?.summary}
|
||||
</div>
|
||||
</Link>
|
||||
</div>}
|
||||
</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}><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>
|
||||
|
||||
Reference in New Issue
Block a user