Refactor dialog as a component

src/components/Posts/Dialog.astro

@@ -0,0 +1,118 @@
+<dialog id="image-preview-dialog" class="image-preview-dialog">
+    <button class="image-preview-close" aria-label="关闭图片预览">×</button>
+
+    <img id="image-preview-img" alt="" />
+
+    <a
+        id="image-preview-download"
+        class="image-preview-download"
+        href="#"
+        aria-label="下载图片"
+        title="下载图片"
+    >
+        <svg
+            width="26"
+            height="26"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+        >
+            <path
+                d="M12 3v12m0 0 5-5m-5 5-5-5M5 21h14"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"></path>
+        </svg>
+    </a>
+</dialog>
+<script is:inline>
+    function initImagePreview() {
+        const dialog = document.getElementById("image-preview-dialog");
+        const previewImg = document.getElementById("image-preview-img");
+        const closeBtn = dialog?.querySelector(".image-preview-close");
+        const downloadBtn = document.getElementById("image-preview-download");
+
+        if (!dialog || !previewImg || !closeBtn || !downloadBtn) return;
+
+        let currentImageUrl = "";
+
+        function getFileNameFromUrl(url) {
+            try {
+                const pathname = new URL(url, window.location.href).pathname;
+                return pathname.split("/").pop() || "image";
+            } catch {
+                return "image";
+            }
+        }
+
+        async function downloadImage(url) {
+            const response = await fetch(url, {
+                mode: "cors",
+                credentials: "omit",
+            });
+
+            if (!response.ok) {
+                throw new Error("Failed to fetch image");
+            }
+
+            const blob = await response.blob();
+            const blobUrl = URL.createObjectURL(blob);
+
+            const a = document.createElement("a");
+            a.href = blobUrl;
+            a.download = getFileNameFromUrl(url);
+            document.body.appendChild(a);
+            a.click();
+
+            a.remove();
+            URL.revokeObjectURL(blobUrl);
+        }
+
+        document.querySelectorAll("article img").forEach((img) => {
+            if (img.dataset.previewBound === "true") return;
+            img.dataset.previewBound = "true";
+
+            img.addEventListener("click", () => {
+                const imageUrl = img.currentSrc || img.src;
+
+                currentImageUrl = imageUrl;
+                previewImg.src = imageUrl;
+                previewImg.alt = img.alt || "";
+
+                dialog.showModal();
+            });
+        });
+
+        downloadBtn.addEventListener("click", async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (!currentImageUrl) return;
+
+            try {
+                await downloadImage(currentImageUrl);
+            } catch (error) {
+                // 如果 fetch 因为跨域失败，就退回到直接打开图片
+                window.open(currentImageUrl, "_blank", "noopener,noreferrer");
+            }
+        });
+
+        function closePreview() {
+            dialog.close();
+            previewImg.removeAttribute("src");
+            currentImageUrl = "";
+        }
+
+        closeBtn.addEventListener("click", closePreview);
+
+        dialog.addEventListener("click", (event) => {
+            if (event.target === dialog) {
+                closePreview();
+            }
+        });
+    }
+
+    document.addEventListener("DOMContentLoaded", initImagePreview);
+    document.addEventListener("astro:page-load", initImagePreview);
+</script>

src/layouts/MarkdownPostLayout.astro

@@ -3,6 +3,7 @@ import BaseLayout from "./BaseLayout.astro";
 import Remark42Embed from "@/components/Remark42Embed.astro";
 import PostNav from "@/components/Posts/PostNav.astro";
 import PostMenu from "@/components/Posts/PostMenu.astro";
+import Dialog from "@/components/Posts/Dialog.astro";
 import { fade } from "astro:transitions";
 import { getTranslations } from "@/i18n";
 import "@/styles/global.css";
@@ -81,10 +82,7 @@ const t = getTranslations(lang);
       <slot />
     </div>
 
-    <dialog id="image-preview-dialog" class="image-preview-dialog">
+    <Dialog />
-      <button class="image-preview-close" aria-label="关闭图片预览">×</button>
-      <img id="image-preview-img" alt="" />
-    </dialog>
 
     <PostNav post={post} lang={lang} />
 
@@ -121,42 +119,6 @@ const t = getTranslations(lang);
   })}
 />
 
-<script is:inline>
-  function initImagePreview() {
-    const dialog = document.getElementById("image-preview-dialog");
-    const previewImg = document.getElementById("image-preview-img");
-    const closeBtn = dialog?.querySelector(".image-preview-close");
-
-    if (!dialog || !previewImg || !closeBtn) return;
-
-    document.querySelectorAll("article img").forEach((img) => {
-      if (img.dataset.previewBound === "true") return;
-      img.dataset.previewBound = "true";
-
-      img.addEventListener("click", () => {
-        previewImg.src = img.currentSrc || img.src;
-        previewImg.alt = img.alt || "";
-        dialog.showModal();
-      });
-    });
-
-    closeBtn.addEventListener("click", () => {
-      dialog.close();
-      previewImg.removeAttribute("src");
-    });
-
-    dialog.addEventListener("click", (event) => {
-      if (event.target === dialog) {
-        dialog.close();
-        previewImg.removeAttribute("src");
-      }
-    });
-  }
-
-  document.addEventListener("DOMContentLoaded", initImagePreview);
-  document.addEventListener("astro:page-load", initImagePreview);
-</script>
-
 <script>
   const initFloatingActions = () => {
     const backButton = document.getElementById("back-button");

src/styles/dialog.css

@@ -54,4 +54,43 @@
 .markdown-body img,
 article img {
     cursor: zoom-in;
+}
+
+.image-preview-download {
+    position: fixed;
+    left: 50%;
+    bottom: max(1.5rem, env(safe-area-inset-bottom));
+    transform: translateX(-50%);
+
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    color: white;
+    background: transparent;
+    border: none;
+    padding: 0.4rem;
+    cursor: pointer;
+    text-decoration: none;
+    opacity: 0.88;
+
+    transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
+}
+
+.image-preview-download:hover {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-2px);
+}
+
+.image-preview-download:focus {
+    outline: none;
+}
+
+.image-preview-download:focus-visible {
+    outline: 2px solid rgba(125, 162, 255, 0.9);
+    outline-offset: 4px;
+    border-radius: 8px;
 }