d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-05 07:26:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

slug 调整兼容已有主题

Browse Source
This commit is contained in:
tangly1024.com
2024-05-08 16:22:14 +08:00
parent 65eff434ec
commit 9b78eb499c
56 changed files with 1318 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
themes/plog/components/Modal.js
View File

@@ -1,12 +1,10 @@
import { Fragment, useRef, useState } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { usePlogGlobal } from '..'
import { ArrowPath, ChevronLeft, ChevronRight } from '@/components/HeroIcons'
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'
import { Dialog, Transition } from '@headlessui/react'
import Link from 'next/link'
import { Fragment, useRef, useState } from 'react'
import { usePlogGlobal } from '..'
/**
* 弹出框
@@ -24,10 +22,6 @@ export default function Modal(props) {
)
const imgRef = useRef(null)
const url = checkContainHttp(modalContent?.slug)
? sliceUrlFromHttp(modalContent?.slug)
: `${siteConfig('SUB_PATH', '')}/${modalContent?.slug}`
// 添加loading状态
const [loading, setLoading] = useState(true)
@@ -66,48 +60,44 @@ export default function Modal(props) {
return (
<Transition.Root show={showModal} as={Fragment}>
<Dialog
as="div"
className="relative z-20"
as='div'
className='relative z-20'
initialFocus={cancelButtonRef}
onClose={handleClose}
>
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"
>
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"
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">
<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"
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 ">
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'}`}
>
<ArrowPath className="w-10 h-10 animate-spin text-gray-200" />
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>
<Link href={url}>
<Link href={modalContent?.href}>
<LazyImage
onLoad={handleImageLoad}
src={img}
@@ -119,12 +109,11 @@ export default function Modal(props) {
{!loading && (
<>
<div className="absolute bottom-0 left-0 m-4 z-20">
<div className="flex">
<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"
>
className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>
{modalContent?.title}
</h2>
</div>
@@ -132,17 +121,15 @@ export default function Modal(props) {
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">
<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"
>
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>
@@ -151,15 +138,13 @@ export default function Modal(props) {
{/* <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" />
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" />
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> */}
</>