buyfakett/kazoottt-blog
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog.git synced 2025-06-24 03:01:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 优化体验

Browse Source
This commit is contained in:
KazooTTT
2024-11-25 23:16:29 +08:00
parent f0037acb91
commit 92fc8c7861
4 changed files with 168 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/layouts/BlogPost.astro
View File

@ -46,7 +46,9 @@ const { headings } = await post.render()
</div>
<div
id='blog-gallery'
class='prose prose-base prose-zinc mt-12 text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none'
class='prose prose-base prose-zinc mt-12 text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-code:bg-green-200
prose-th:before:content-none
prose-img:shadow'
>
<slot />
</div>
@ -77,7 +79,7 @@ const { headings } = await post.render()
id='image-modal'
class='pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 opacity-0 backdrop-blur-md transition-opacity duration-300 ease-in-out'
>
<div class='relative flex h-full w-full items-center justify-center p-4'>
<div class='relative flex h-full w-full items-center justify-center p-4' id='modal-container'>
<img
id='modal-image'
class='h-auto max-h-full w-auto max-w-full object-contain transition-transform duration-300 ease-in-out'
@ -125,13 +127,14 @@ const { headings } = await post.render()
// Image preview functionality
const imageModal = document.getElementById('image-modal')
const modalImage = document.getElementById('modal-image') as HTMLImageElement
const modalContainer = document.getElementById('modal-container')
function openModal() {
if (imageModal) {
imageModal.classList.remove('opacity-0', 'pointer-events-none')
modalImage.style.transform = 'scale(1)'
isZoomed = false
document.body.style.overflow = 'hidden' // 禁用滚动
document.body.style.overflow = 'hidden'
}
}
@ -142,7 +145,7 @@ const { headings } = await post.render()
modalImage.alt = ''
modalImage.style.transform = 'scale(1)'
isZoomed = false
document.body.style.overflow = '' // 恢复滚动
document.body.style.overflow = ''
}
}
@ -156,32 +159,34 @@ const { headings } = await post.render()
}
})
// 处理点击事件
if (imageModal) {
imageModal.addEventListener('click', (e) => {
if (e.target === imageModal) {
closeModal()
}
})
}
if (imageModal) {
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !imageModal.classList.contains('opacity-0')) {
const clickedElement = e.target as HTMLElement
// 如果点击的是 modal 背景或 modal-container（不是图片和关闭按钮）
if (clickedElement === imageModal || clickedElement === modalContainer) {
closeModal()
}
})
}
// 关闭按钮事件
const closeButton = document.getElementById('close-modal')
if (closeButton) {
closeButton.addEventListener('click', closeModal)
}
// 添加图片缩放功能
let isZoomed = false
// ESC 键关闭
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && imageModal && !imageModal.classList.contains('opacity-0')) {
closeModal()
}
})
modalImage.addEventListener('click', () => {
// 图片缩放功能
let isZoomed = false
modalImage.addEventListener('click', (e) => {
e.stopPropagation() // 阻止事件冒泡到 modal
if (isZoomed) {
modalImage.style.transform = 'scale(1)'
modalImage.classList.remove('zoomed')