From 53ca7025407870d0cc27103e0bc2728adc29cb10 Mon Sep 17 00:00:00 2001
From: KazooTTT <work@kazoottt.top>
Date: Thu, 6 Feb 2025 01:14:12 +0800
Subject: [PATCH] fix: style error

---
 src/components/BaseHead.astro  |   5 +-
 src/components/note/Note.astro | 116 +++++++++++++++++++++++++++++++--
 2 files changed, 113 insertions(+), 8 deletions(-)

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 5620189..a8dadd7 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -15,7 +15,10 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
 ---
 
 <meta charset="utf-8" />
-<meta content="width=device-width, initial-scale=1.0" name="viewport" />
+<meta
+	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+	name="viewport"
+/>
 <title>{siteTitle}</title>
 
 {/* Icons */}
diff --git a/src/components/note/Note.astro b/src/components/note/Note.astro
index 1816c4d..6e1c64b 100644
--- a/src/components/note/Note.astro
+++ b/src/components/note/Note.astro
@@ -3,8 +3,7 @@ import { type CollectionEntry, render } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
 import type { HTMLTag, Polymorphic } from "astro/types";
 import GiscusComment from "@/components/componentsBefore/GiscusComment";
-import ArticleContainer from "../ArticleContainer.astro";
-
+import { Icon } from "astro-icon/components";
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 	note: CollectionEntry<"note">;
 	isPreview?: boolean | undefined;
@@ -34,10 +33,12 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
 }
 ---
 
-<ArticleContainer
-	className={isPreview &&
-		"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]"}
-	dataPagefindBody={isPreview ? false : true}
+<article
+	class:list={[
+		isPreview &&
+			"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]",
+	]}
+	data-pagefind-body={isPreview ? false : true}
 >
 	<Tag class="title" class:list={{ "text-base": isPreview }}>
 		{
@@ -66,6 +67,107 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
 	</div>
 	<div class="prose prose-sm prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0">
 		<Content />
+		<div id="myModal" class="modal">
+			<span class="close">
+				<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:close" />
+			</span>
+			<img class="modal-content" id="img01" />
+			<div id="caption"></div>
+		</div>
 	</div>
 	{!isPreview && <GiscusComment client:load />}
-</ArticleContainer>
+</article>
+<style>
+	.modal {
+		display: none;
+		position: fixed;
+		z-index: 100;
+		margin: auto;
+		padding: 50px;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+		background-color: rgba(0, 0, 0, 0.9);
+		align-items: center;
+		justify-content: center;
+	}
+
+	.modal-content {
+		margin: auto;
+		display: block;
+		width: 80%;
+	}
+
+	.close {
+		position: fixed;
+		top: 15px;
+		right: 35px;
+		color: #f1f1f1;
+		font-size: 40px;
+		font-weight: bold;
+		transition: 0.3s;
+	}
+
+	.close:hover,
+	.close:focus {
+		color: #bbb;
+		text-decoration: none;
+		cursor: pointer;
+	}
+
+	/* 修改图片相关样式 */
+	:global(article img) {
+		opacity: 0;
+		position: relative;
+		background-color: #f0f0f0;
+		transition: all 0.5s ease-in-out;
+	}
+
+	:global(article img.loading) {
+		opacity: 1;
+		filter: blur(10px);
+	}
+
+	:global(article img.loaded) {
+		opacity: 1;
+		filter: blur(0);
+	}
+</style>
+
+<script>
+	const modal = document.getElementById("myModal");
+	const modalImg = document.getElementById("img01") as HTMLImageElement;
+	const imgs = document.querySelectorAll("article img") as NodeListOf<HTMLImageElement>;
+
+	imgs.forEach(function (img) {
+		// 检查图片是否已经加载完成
+		if (img.complete) {
+			img.classList.add("loaded");
+		} else {
+			img.classList.add("loading");
+			img.onload = () => {
+				img.classList.remove("loading");
+				img.classList.add("loaded");
+			};
+		}
+
+		img.style.cursor = "pointer";
+
+		img.addEventListener("click", () => {
+			if (modal && modalImg) {
+				modal.style.display = "flex";
+				document.body.style.overflow = "hidden";
+				modalImg.src = img.src;
+			}
+		});
+	});
+
+	const span = document.getElementsByClassName("close")[0];
+	span?.addEventListener("click", () => {
+		if (modal) {
+			modal.style.display = "none";
+			document.body.style.overflow = "auto";
+		}
+	});
+</script>