vitepress-plugin-image-preview 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 sugar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,141 @@
+# vitepress-plugin-image-preview
+
+[English](https://github.com/ATQQ/sugar-blog/blob/master/packages/vitepress-plugin-image-preview/README-en.md) | 简体中文
+
+
+VitePress 图片预览插件，样式参考 [Element Plus Image Viewer](https://element-plus.org/zh-CN/component/image.html#image-preview)。
+
+![图片预览](image.png)
+
+## 安装
+
+```bash
+pnpm add vitepress-plugin-image-preview
+```
+
+## 使用
+
+在 `.vitepress/config.ts` 中引入插件：
+
+```ts
+import { defineConfig } from 'vitepress'
+import { ImagePreviewPlugin } from 'vitepress-plugin-image-preview'
+
+export default defineConfig({
+  vite: {
+    plugins: [
+      ImagePreviewPlugin()
+    ]
+  }
+})
+```
+
+## 选项
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| selector | 图片选择器 | `string` | `.content-container .main img,.VPPage img` |
+| wrapperId | 监听容器 ID | `string` | `#VPContent` |
+| slots | 插槽 | `string \| string[]` | `['doc-before','page-top']` |
+| showProgress | 是否在预览图片时显示进度条 | `boolean` | `true` |
+| infinite | 是否开启无限循环 | `boolean` | `false` |
+| zoomRatio | 缩放速率 | `number` | `1.2` |
+| hideOnClickModal | 点击 modal 时是否隐藏 | `boolean` | `false` |
+| minScale | 最小缩放比例 | `number` | `0.2` |
+| maxScale | 最大缩放比例 | `number` | `7` |
+| toolbar | 工具栏 | `string[]` | `['zoomOut', 'zoomIn','reset', 'rotateLeft', 'rotateRight', 'download']` |
+
+## 高级用法
+
+```ts
+import { defineConfig } from 'vitepress'
+import { ImagePreviewPlugin } from 'vitepress-plugin-image-preview'
+
+export default defineConfig({
+  vite: {
+    plugins: [
+      ImagePreviewPlugin({
+        // 自定义图片选择器
+        selector: '.content-container .main img',
+        // 自定义监听容器 ID
+        wrapperId: '#VPContent',
+        // 显示进度条
+        showProgress: true,
+        // 开启无限循环
+        infinite: true,
+        // 点击遮罩关闭
+        hideOnClickModal: true,
+        // 自定义缩放比率
+        zoomRatio: 1.1,
+        // 自定义工具栏
+        toolbar: ['zoomIn', 'zoomOut', 'reset', 'rotateLeft', 'rotateRight', 'download']
+      })
+    ]
+  }
+})
+```
+
+## 类型定义
+
+```ts
+export interface ImagePreviewOptions {
+  /**
+   * Image selector
+   * @default '.content-container .main img,.VPPage img'
+   */
+  selector?: string
+  /**
+   * Wrapper selector to attach event listener
+   * @default '#VPContent'
+   */
+  wrapperId?: string
+
+  /**
+   * Slots to attach event listener
+   * @default ['doc-before','page-top']
+   */
+  slots?: string | string[]
+
+  /**
+   * Show progress bar | 是否在预览图片时显示进度条
+   * @default true
+   */
+  showProgress?: boolean
+
+  /**
+   * Infinite loop | 是否开启无限循环
+   * @default false
+   */
+  infinite?: boolean
+
+  /**
+   * Zoom ratio | 缩放速率
+   * @default 1.2
+   */
+  zoomRatio?: number
+
+  /**
+   * Hide modal on click | 点击 modal 时是否隐藏
+   * @default false
+   */
+  hideOnClickModal?: boolean
+
+  /**
+   * Minimum scale | 最小缩放比例
+   * @default 0.2
+   */
+  minScale?: number
+
+  /**
+   * Maximum scale | 最大缩放比例
+   * @default 7
+   */
+  maxScale?: number
+
+  /**
+   * Toolbar | 工具栏
+   * @default ['zoomOut', 'zoomIn','reset', 'rotateLeft', 'rotateRight', 'download']
+   */
+  toolbar?: string[]
+}
+```

package/dist/components/ImagePreview.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+
+// @ts-expect-error
+import imagePreviewOptions from 'virtual:image-preview-options'
+import ImageViewer from './ImageViewer.vue'
+
+const show = ref(false)
+const previewImageInfo = reactive<{ url: string; list: string[]; idx: number }>(
+  {
+    url: '',
+    list: [],
+    idx: 0
+  }
+)
+
+function previewImage(e: Event) {
+  const target = e.target as HTMLElement
+  const currentTarget = e.currentTarget as HTMLElement
+  if (target.tagName.toLowerCase() === 'img') {
+    const selector = imagePreviewOptions?.selector || '.content-container .main img,.VPPage img'
+    const imgs = currentTarget.querySelectorAll<HTMLImageElement>(selector)
+    const idx = Array.from(imgs).findIndex(el => el === target)
+    const urls = Array.from(imgs).map(el => el.src)
+
+    const url = target.getAttribute('src')
+    previewImageInfo.url = url!
+    previewImageInfo.list = urls
+    previewImageInfo.idx = idx
+
+    // 兼容点击main之外的图片
+    if (idx === -1 && url) {
+      previewImageInfo.list.push(url)
+      previewImageInfo.idx = previewImageInfo.list.length - 1
+    }
+    show.value = true
+  }
+}
+
+onMounted(() => {
+  const wrapperId = imagePreviewOptions?.wrapperId || '#VPContent'
+  const docDomContainer = document.querySelector(wrapperId)
+  docDomContainer?.addEventListener('click', previewImage)
+})
+
+onUnmounted(() => {
+  const wrapperId = imagePreviewOptions?.wrapperId || '#VPContent'
+  const docDomContainer = document.querySelector(wrapperId)
+  docDomContainer?.removeEventListener('click', previewImage)
+})
+</script>
+
+<template>
+  <ImageViewer
+    v-if="show"
+    :infinite="imagePreviewOptions?.infinite ?? false"
+    :hide-on-click-modal="imagePreviewOptions?.hideOnClickModal ?? false"
+    :show-progress="imagePreviewOptions?.showProgress ?? true"
+    :zoom-ratio="imagePreviewOptions?.zoomRatio ?? 1.2"
+    :min-scale="imagePreviewOptions?.minScale ?? 0.2"
+    :max-scale="imagePreviewOptions?.maxScale ?? 7"
+    :toolbar="imagePreviewOptions?.toolbar ?? ['zoomOut', 'zoomIn', 'reset', 'rotateLeft', 'rotateRight', 'download']"
+    teleported
+    :url-list="previewImageInfo.list"
+    :initial-index="previewImageInfo.idx"
+    @close="show = false"
+  />
+</template>

package/dist/components/ImageViewer.vue

@@ -0,0 +1,450 @@
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { useScrollLock } from '@vueuse/core'
+
+const props = defineProps({
+  urlList: {
+    type: Array as () => string[],
+    default: () => [],
+  },
+  initialIndex: {
+    type: Number,
+    default: 0,
+  },
+  infinite: {
+    type: Boolean,
+    default: true,
+  },
+  hideOnClickModal: {
+    type: Boolean,
+    default: false,
+  },
+  teleported: {
+    type: Boolean,
+    default: false,
+  },
+  toolbar: {
+    type: Array as () => string[],
+    default: () => ['zoomOut', 'zoomIn', 'reset', 'rotateLeft', 'rotateRight', 'download'],
+  },
+  showProgress: {
+    type: Boolean,
+    default: true,
+  },
+  zoomRatio: {
+    type: Number,
+    default: 1.2,
+  },
+  minScale: {
+    type: Number,
+    default: 0.2,
+  },
+  maxScale: {
+    type: Number,
+    default: 7,
+  },
+})
+
+const emit = defineEmits(['close', 'switch'])
+
+const index = ref(props.initialIndex)
+const isLocked = useScrollLock(document.body)
+
+const currentImg = computed(() => props.urlList[index.value])
+const isSingle = computed(() => props.urlList.length <= 1)
+const isFirst = computed(() => index.value === 0)
+const isLast = computed(() => index.value === props.urlList.length - 1)
+
+const transform = reactive({
+  scale: 1,
+  deg: 0,
+  offsetX: 0,
+  offsetY: 0,
+  enableTransition: false,
+})
+
+const imgStyle = computed(() => ({
+  transform: `translate3d(${transform.offsetX}px, ${transform.offsetY}px, 0) scale(${transform.scale}) rotate(${transform.deg}deg)`,
+  transition: transform.enableTransition ? 'transform .3s' : '',
+}))
+
+function reset() {
+  transform.scale = 1
+  transform.deg = 0
+  transform.offsetX = 0
+  transform.offsetY = 0
+  transform.enableTransition = false
+}
+
+watch(index, () => {
+  reset()
+})
+
+function hide() {
+  isLocked.value = false
+  emit('close')
+}
+
+function prev() {
+  if (isFirst.value && !props.infinite)
+    return
+  const len = props.urlList.length
+  index.value = (index.value - 1 + len) % len
+  emit('switch', index.value)
+}
+
+function next() {
+  if (isLast.value && !props.infinite)
+    return
+  const len = props.urlList.length
+  index.value = (index.value + 1) % len
+  emit('switch', index.value)
+}
+
+function handleMaskClick() {
+  if (props.hideOnClickModal) {
+    hide()
+  }
+}
+
+// Actions
+function handleActions(action: string) {
+  transform.enableTransition = true
+  switch (action) {
+    case 'zoomOut':
+      if (transform.scale > props.minScale) {
+        transform.scale = parseFloat(Math.max(props.minScale, transform.scale / props.zoomRatio).toFixed(3))
+      }
+      break
+    case 'zoomIn':
+      if (transform.scale < props.maxScale) {
+        transform.scale = parseFloat(Math.min(props.maxScale, transform.scale * props.zoomRatio).toFixed(3))
+      }
+      break
+    case 'rotateRight':
+      transform.deg += 90
+      break
+    case 'rotateLeft':
+      transform.deg -= 90
+      break
+    case 'reset': // 1:1
+      reset()
+      break
+  }
+}
+
+function handleDownload() {
+  const a = document.createElement('a')
+  a.href = currentImg.value
+  a.target = '_blank'
+  a.download = ''
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
+
+// Drag Logic
+const isDragging = ref(false)
+let startX = 0
+let startY = 0
+let startOffsetX = 0
+let startOffsetY = 0
+
+function handleMouseDown(e: MouseEvent) {
+  if (e.button !== 0)
+    return
+  transform.enableTransition = false
+  isDragging.value = true
+  startX = e.clientX
+  startY = e.clientY
+  startOffsetX = transform.offsetX
+  startOffsetY = transform.offsetY
+  e.preventDefault()
+}
+
+function handleMouseMove(e: MouseEvent) {
+  if (!isDragging.value)
+    return
+  const deltaX = e.clientX - startX
+  const deltaY = e.clientY - startY
+  transform.offsetX = startOffsetX + deltaX
+  transform.offsetY = startOffsetY + deltaY
+  e.preventDefault()
+}
+
+function handleMouseUp() {
+  isDragging.value = false
+}
+
+// Wheel Zoom
+function handleWheel(e: WheelEvent) {
+  const delta = e.deltaY < 0 ? 1 : -1
+  const zoomRate = props.zoomRatio
+  const newScale = delta > 0
+    ? transform.scale * zoomRate
+    : transform.scale / zoomRate
+
+  if (newScale >= props.minScale && newScale <= props.maxScale) {
+    transform.scale = parseFloat(newScale.toFixed(3))
+  }
+}
+
+onMounted(() => {
+  isLocked.value = true
+  window.addEventListener('keydown', handleKeydown)
+  window.addEventListener('mouseup', handleMouseUp)
+  window.addEventListener('mousemove', handleMouseMove)
+})
+
+onUnmounted(() => {
+  isLocked.value = false
+  window.removeEventListener('keydown', handleKeydown)
+  window.removeEventListener('mouseup', handleMouseUp)
+  window.removeEventListener('mousemove', handleMouseMove)
+})
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    hide()
+  }
+  else if (e.key === 'ArrowLeft') {
+    prev()
+  }
+  else if (e.key === 'ArrowRight') {
+    next()
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body" :disabled="!teleported">
+    <transition name="viewer-fade">
+      <div class="vitepress-image-viewer__wrapper" tabindex="-1" @wheel.prevent="handleWheel">
+        <div class="vitepress-image-viewer__mask" @click="handleMaskClick" />
+
+        <!-- Close -->
+        <span class="vitepress-image-viewer__btn vitepress-image-viewer__close" @click="hide">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z" /></svg>
+        </span>
+
+        <!-- Arrows -->
+        <template v-if="!isSingle">
+          <span
+            class="vitepress-image-viewer__btn vitepress-image-viewer__prev"
+            :class="{ 'is-disabled': !infinite && isFirst }"
+            @click="prev"
+          >
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z" /></svg>
+          </span>
+          <span
+            class="vitepress-image-viewer__btn vitepress-image-viewer__next"
+            :class="{ 'is-disabled': !infinite && isLast }"
+            @click="next"
+          >
+            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z" /></svg>
+          </span>
+        </template>
+
+        <!-- Progress -->
+        <div v-if="showProgress" class="vitepress-image-viewer__progress">
+          {{ index + 1 }} / {{ urlList.length }}
+        </div>
+
+        <!-- Actions Toolbar -->
+        <div v-if="toolbar.length" class="vitepress-image-viewer__actions">
+          <!-- 图片进度展示当前图片索引和图片总数 -->
+          <div class="vitepress-image-viewer__actions__inner">
+            <svg v-if="toolbar.includes('zoomOut')" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" @click="handleActions('zoomOut')"><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704M352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64" /></svg>
+            <svg v-if="toolbar.includes('zoomIn')" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" @click="handleActions('zoomIn')"><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704m-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64z" /></svg>
+            <i v-if="toolbar.includes('zoomOut') || toolbar.includes('zoomIn')" class="vitepress-image-viewer__actions__divider" />
+            <svg v-if="toolbar.includes('reset')" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" @click="handleActions('reset')"><path fill="currentColor" d="M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88" /></svg>
+            <i v-if="toolbar.includes('reset')" class="vitepress-image-viewer__actions__divider" />
+            <svg v-if="toolbar.includes('rotateLeft')" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" @click="handleActions('rotateLeft')"><path fill="currentColor" d="M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z" /></svg>
+            <svg v-if="toolbar.includes('rotateRight')" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" @click="handleActions('rotateRight')"><path fill="currentColor" d="M771.776 794.88A384 384 0 0 1 128 512h64a320 320 0 0 0 555.712 216.448H654.72a32 32 0 1 1 0-64h149.056a32 32 0 0 1 32 32v148.928a32 32 0 1 1-64 0v-50.56zM276.288 295.616h92.992a32 32 0 0 1 0 64H220.16a32 32 0 0 1-32-32V178.56a32 32 0 0 1 64 0v50.56A384 384 0 0 1 896.128 512h-64a320 320 0 0 0-555.776-216.384z" /></svg>
+            <i v-if="toolbar.includes('rotateLeft') || toolbar.includes('rotateRight')" class="vitepress-image-viewer__actions__divider" />
+            <svg v-if="toolbar.includes('download')" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" @click="handleDownload"><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z" /></svg>
+          </div>
+        </div>
+
+        <!-- Canvas -->
+        <div class="vitepress-image-viewer__canvas">
+          <img
+            :src="currentImg"
+            :style="imgStyle"
+            class="vitepress-image-viewer__img"
+            @mousedown="handleMouseDown"
+          >
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.vitepress-image-viewer__wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vitepress-image-viewer__mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: .5;
+  background: #000;
+}
+
+.vitepress-image-viewer__btn {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  opacity: .8;
+  cursor: pointer;
+  box-sizing: border-box;
+  user-select: none;
+  background-color: #606266;
+  color: #fff;
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+
+  &:hover {
+    border-color: #fff;
+    background-color: #909399;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: .3;
+    background-color: #606266;
+  }
+}
+
+.vitepress-image-viewer__close {
+  top: 40px;
+  right: 40px;
+}
+
+.vitepress-image-viewer__prev {
+  top: 50%;
+  transform: translateY(-50%);
+  left: 40px;
+}
+
+.vitepress-image-viewer__next {
+  top: 50%;
+  transform: translateY(-50%);
+  right: 40px;
+}
+
+.vitepress-image-viewer__actions {
+  left: 50%;
+  bottom: 30px;
+  transform: translateX(-50%);
+  min-width: 282px;
+  height: 44px;
+  padding: 0 23px;
+  background-color: #606266;
+  border-color: #fff;
+  border-radius: 22px;
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: .8;
+  box-sizing: border-box;
+  user-select: none;
+
+  &__inner {
+    width: 100%;
+    height: 100%;
+    text-align: justify;
+    cursor: default;
+    font-size: 23px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: 12px;
+
+    svg {
+        cursor: pointer;
+    }
+  }
+
+  &__divider {
+    display: inline-block;
+    width: 1px;
+    height: 18px;
+    margin: 0 10px;
+    background: hsla(0,0%,100%,.5);
+    vertical-align: middle;
+  }
+}
+
+.vitepress-image-viewer__progress {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 80px;
+  font-size: 16px;
+  color: #fff;
+  user-select: none;
+  z-index: 10;
+  opacity: 0.8;
+}
+
+.vitepress-image-viewer__canvas {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.vitepress-image-viewer__img {
+  max-width: 100%;
+  max-height: 100%;
+  user-select: none;
+  pointer-events: auto;
+  cursor: grab;
+  transition: transform .3s;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.viewer-fade-enter-active {
+  animation: viewer-fade-in .3s;
+}
+
+.viewer-fade-leave-active {
+  animation: viewer-fade-out .3s;
+}
+
+@keyframes viewer-fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes viewer-fade-out {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+</style>

package/dist/index.d.mts

@@ -0,0 +1,56 @@
+interface ImagePreviewOptions {
+    /**
+     * Image selector
+     * @default '.content-container .main img,.VPPage img'
+     */
+    selector?: string;
+    /**
+     * Wrapper selector to attach event listener
+     * @default '#VPContent'
+     */
+    wrapperId?: string;
+    /**
+     * Slots to attach event listener
+     * @default ['doc-before','page-top']
+     */
+    slots?: string | string[];
+    /**
+     * Show progress bar | 是否在预览图片时显示进度条
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * Infinite loop | 是否开启无限循环
+     * @default false
+     */
+    infinite?: boolean;
+    /**
+     * Zoom ratio | 缩放速率
+     * @default 1.2
+     */
+    zoomRatio?: number;
+    /**
+     * Hide modal on click | 点击 modal 时是否隐藏
+     * @default false
+     */
+    hideOnClickModal?: boolean;
+    /**
+     * Minimum scale | 最小缩放比例
+     * @default 0.2
+     */
+    minScale?: number;
+    /**
+     * Maximum scale | 最大缩放比例
+     * @default 7
+     */
+    maxScale?: number;
+    /**
+     * Toolbar | 工具栏
+     * @default ['zoomOut', 'zoomIn','reset', 'rotateLeft', 'rotateRight', 'download']
+     */
+    toolbar?: string[];
+}
+
+declare function ImagePreviewPlugin(options?: ImagePreviewOptions): any;
+
+export { ImagePreviewOptions, ImagePreviewPlugin };

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+interface ImagePreviewOptions {
+    /**
+     * Image selector
+     * @default '.content-container .main img,.VPPage img'
+     */
+    selector?: string;
+    /**
+     * Wrapper selector to attach event listener
+     * @default '#VPContent'
+     */
+    wrapperId?: string;
+    /**
+     * Slots to attach event listener
+     * @default ['doc-before','page-top']
+     */
+    slots?: string | string[];
+    /**
+     * Show progress bar | 是否在预览图片时显示进度条
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * Infinite loop | 是否开启无限循环
+     * @default false
+     */
+    infinite?: boolean;
+    /**
+     * Zoom ratio | 缩放速率
+     * @default 1.2
+     */
+    zoomRatio?: number;
+    /**
+     * Hide modal on click | 点击 modal 时是否隐藏
+     * @default false
+     */
+    hideOnClickModal?: boolean;
+    /**
+     * Minimum scale | 最小缩放比例
+     * @default 0.2
+     */
+    minScale?: number;
+    /**
+     * Maximum scale | 最大缩放比例
+     * @default 7
+     */
+    maxScale?: number;
+    /**
+     * Toolbar | 工具栏
+     * @default ['zoomOut', 'zoomIn','reset', 'rotateLeft', 'rotateRight', 'download']
+     */
+    toolbar?: string[];
+}
+
+declare function ImagePreviewPlugin(options?: ImagePreviewOptions): any;
+
+export { ImagePreviewOptions, ImagePreviewPlugin };

package/dist/index.js

@@ -0,0 +1,95 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ImagePreviewPlugin: () => ImagePreviewPlugin
+});
+module.exports = __toCommonJS(src_exports);
+var import_node_path = __toESM(require("path"));
+var import_node_url = require("url");
+var import_javascript_stringify = require("javascript-stringify");
+var import_meta = {};
+function isESM() {
+  return typeof __filename === "undefined" || typeof __dirname === "undefined";
+}
+function getDirname() {
+  return isESM() ? import_node_path.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)) : __dirname;
+}
+var componentName = "ImagePreview";
+var componentFile = `${componentName}.vue`;
+var aliasComponentFile = `${getDirname()}/components/${componentFile}`;
+var virtualModuleId = "virtual:image-preview-options";
+var resolvedVirtualModuleId = `\0${virtualModuleId}`;
+function ImagePreviewPlugin(options = {}) {
+  const pluginOps = {
+    name: "vitepress-plugin-image-preview",
+    enforce: "pre",
+    config: () => {
+      return {
+        resolve: {
+          alias: {
+            [`./${componentFile}`]: aliasComponentFile
+          }
+        }
+      };
+    },
+    transform(code, id) {
+      if (id.endsWith("vitepress/dist/client/theme-default/Layout.vue")) {
+        let transformResult = code;
+        const slots = [options.slots || ["doc-before", "page-top"]].flat();
+        for (const slot of slots) {
+          const slotPosition = `<slot name="${slot}" />`;
+          transformResult = transformResult.replace(slotPosition, `${slotPosition}
+<ClientOnly><${componentName} /></ClientOnly>`);
+        }
+        const setupPosition = '<script setup lang="ts">';
+        transformResult = transformResult.replace(setupPosition, `${setupPosition}
+import ${componentName} from './${componentFile}'`);
+        return transformResult;
+      }
+    },
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return `export default ${(0, import_javascript_stringify.stringify)(options)}`;
+      }
+    }
+  };
+  return pluginOps;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImagePreviewPlugin
+});

package/dist/index.mjs

@@ -0,0 +1,59 @@
+// src/index.ts
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { stringify } from "javascript-stringify";
+function isESM() {
+  return typeof __filename === "undefined" || typeof __dirname === "undefined";
+}
+function getDirname() {
+  return isESM() ? path.dirname(fileURLToPath(import.meta.url)) : __dirname;
+}
+var componentName = "ImagePreview";
+var componentFile = `${componentName}.vue`;
+var aliasComponentFile = `${getDirname()}/components/${componentFile}`;
+var virtualModuleId = "virtual:image-preview-options";
+var resolvedVirtualModuleId = `\0${virtualModuleId}`;
+function ImagePreviewPlugin(options = {}) {
+  const pluginOps = {
+    name: "vitepress-plugin-image-preview",
+    enforce: "pre",
+    config: () => {
+      return {
+        resolve: {
+          alias: {
+            [`./${componentFile}`]: aliasComponentFile
+          }
+        }
+      };
+    },
+    transform(code, id) {
+      if (id.endsWith("vitepress/dist/client/theme-default/Layout.vue")) {
+        let transformResult = code;
+        const slots = [options.slots || ["doc-before", "page-top"]].flat();
+        for (const slot of slots) {
+          const slotPosition = `<slot name="${slot}" />`;
+          transformResult = transformResult.replace(slotPosition, `${slotPosition}
+<ClientOnly><${componentName} /></ClientOnly>`);
+        }
+        const setupPosition = '<script setup lang="ts">';
+        transformResult = transformResult.replace(setupPosition, `${setupPosition}
+import ${componentName} from './${componentFile}'`);
+        return transformResult;
+      }
+    },
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return `export default ${stringify(options)}`;
+      }
+    }
+  };
+  return pluginOps;
+}
+export {
+  ImagePreviewPlugin
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "vitepress-plugin-image-preview",
+  "version": "0.1.0",
+  "description": "vitepress plugin, Image Preview, 图片预览",
+  "author": "sugar",
+  "license": "MIT",
+  "homepage": "https://github.com/ATQQ/sugar-blog/tree/master/packages/vitepress-plugin-image-preview",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ATQQ/sugar-blog.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ATQQ/sugar-blog/issues"
+  },
+  "keywords": [
+    "vitepress",
+    "plugin",
+    "image",
+    "preview",
+    "viewer",
+    "图片预览"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vitepress": "^1 || ^2"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.1.0",
+    "javascript-stringify": "^2.1.0"
+  },
+  "devDependencies": {
+    "chokidar": "^3.6.0",
+    "fs-extra": "^11.1.1",
+    "tinyglobby": "^0.2.6",
+    "tsup": "^7.2.0",
+    "typescript": "^5.5.4",
+    "vite": "^5",
+    "vitepress": "2.0.0-alpha.15",
+    "vue": "^3.5.24"
+  },
+  "scripts": {
+    "dev": "pnpm run /^dev:.*/",
+    "dev:plugin": "npx tsup src/index.ts --dts --watch --format esm,cjs --external vitepress",
+    "dev:component": "node scripts/watchAndCopy.mjs",
+    "dev:watch": "node scripts/watchAndCopy.mjs",
+    "build": "pnpm run /^build:.*/",
+    "build:plugin": "npx tsup src/index.ts --dts --format esm,cjs --external vitepress --silent",
+    "build:component": "node scripts/copyComponents.mjs"
+  }
+}