新的图片组件,支持 figuration

Author: CatCodeMe

public/styles/global.css

@@ -1,4 +1,3 @@
-/* @import url("https://chinese-fonts-cdn.deno.dev/packages/lywkpmydb/dist/LXGWWenKaiMonoScreen/result.css"); */
 @import url("https://chinese-fonts-cdn.deno.dev/packages/GuanKiapTsingKhai/dist/GuanKiapTsingKhai/result.css");
 
 body {

src/components/Figure.astro

@@ -0,0 +1,189 @@
+---
+// src/components/Figure.astro
+import { Image} from 'astro:assets';
+
+type Layout = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-hover' | 'left' | 'right';
+
+interface Props {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  class?: string;
+  loading?: 'eager' | 'lazy';
+  quality?: number | 'low' | 'mid' | 'high' | 'max';
+  format?: 'avif' | 'png' | 'jpeg' | 'svg' | 'webp';
+  figureClass?: string;
+  layout?: Layout;
+  zoomable?: boolean;
+}
+
+const {
+  figureClass,
+  layout = 'bottom-center',
+  zoomable = false,
+  src,
+  alt,
+  width,
+  height,
+  class: className,
+  loading,
+  quality,
+  format,
+} = Astro.props;
+
+const isRowLayout = layout === 'left' || layout === 'right';
+---
+
+<figure
+  class:list={[
+    'group',
+    figureClass,
+    {
+      'relative': !isRowLayout,
+      'flex items-center gap-4': isRowLayout,
+      'flex-row-reverse': layout === 'left',
+      'flex-row': layout === 'right',
+    },
+  ]}
+  data-zoomable={zoomable ? 'true' : undefined}
+>
+  {isRowLayout ? (
+    <div class="flex-shrink-0 w-1/2">
+      <Image {src} {alt} {width} {height} class={className} {loading} {quality} {format} />
+    </div>
+  ) : (
+    <Image {src} {alt} {width} {height} class={className} {loading} {quality} {format} />
+  )}
+
+  {Astro.slots.has('caption') && (
+    <figcaption
+      class:list={[
+        'transition-all duration-300',
+        {
+          'mt-2 text-sm': layout.startsWith('bottom'),
+          'text-center': layout === 'bottom-center',
+          'text-left': layout === 'bottom-left',
+          'text-right': layout === 'bottom-right',
+          'flex-1': isRowLayout,
+          'absolute inset-0 flex items-center justify-center p-4 bg-black/60 text-white opacity-0 group-hover:opacity-100': layout === 'top-hover',
+        },
+      ]}
+    >
+      <slot name="caption" />
+    </figcaption>
+  )}
+</figure>
+
+<script>
+  function initializeImageViewer() {
+    const figures = document.querySelectorAll('figure[data-zoomable="true"]');
+
+    figures.forEach(figure => {
+      const img = figure.querySelector('img');
+      if (img instanceof HTMLElement) {
+        if (img.dataset.viewerInitialized) return;
+        img.dataset.viewerInitialized = 'true';
+        img.style.cursor = 'zoom-in';
+
+        img.addEventListener('click', () => openViewer(img as HTMLImageElement));
+      }
+    });
+
+    function openViewer(img: HTMLImageElement) {
+      const overlay = document.createElement('div');
+      overlay.id = 'image-viewer-overlay';
+
+      const content = document.createElement('img');
+      content.id = 'image-viewer-content';
+      content.src = img.src;
+
+      overlay.appendChild(content);
+      document.body.appendChild(overlay);
+      document.body.style.overflow = 'hidden'; // Keep this to prevent background scroll
+
+      let scale = 1;
+      let isDragging = false;
+      let startX = 0, startY = 0;
+      let translateX = 0, translateY = 0;
+
+      const updateTransform = () => {
+        content.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+      };
+
+      const wheelHandler = (e: WheelEvent) => {
+        e.preventDefault();
+        const scaleAmount = e.deltaY > 0 ? -0.1 : 0.1;
+        scale = Math.max(0.5, Math.min(scale + scaleAmount, 5));
+        updateTransform();
+      };
+
+      const mouseDownHandler = (e: MouseEvent) => {
+        e.preventDefault();
+        isDragging = true;
+        startX = e.clientX - translateX;
+        startY = e.clientY - translateY;
+        content.style.cursor = 'grabbing';
+      };
+
+      const mouseMoveHandler = (e: MouseEvent) => {
+        if (!isDragging) return;
+        translateX = e.clientX - startX;
+        translateY = e.clientY - startY;
+        updateTransform();
+      };
+
+      const mouseUpHandler = () => {
+        isDragging = false;
+        content.style.cursor = 'grab';
+      };
+
+      const closeModal = () => {
+        document.body.style.overflow = 'auto';
+        overlay.remove();
+        window.removeEventListener('mousemove', mouseMoveHandler);
+        window.removeEventListener('mouseup', mouseUpHandler);
+      };
+
+      overlay.addEventListener('click', closeModal);
+      content.addEventListener('click', (e) => e.stopPropagation());
+      overlay.addEventListener('wheel', wheelHandler);
+      content.addEventListener('mousedown', mouseDownHandler);
+      window.addEventListener('mousemove', mouseMoveHandler);
+      window.addEventListener('mouseup', mouseUpHandler);
+    }
+  }
+
+  initializeImageViewer();
+  document.addEventListener('astro:after-swap', initializeImageViewer);
+</script>
+
+<style is:global>
+  #image-viewer-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background-color: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(8px);
+    /* Removed transition for opacity */
+  }
+
+  html.dark #image-viewer-overlay {
+    background-color: rgba(10, 10, 10, 0.85);
+  }
+
+  #image-viewer-content {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    transform-origin: center center;
+    transition: transform 0.15s linear;
+    cursor: grab;
+  }
+</style>