feat:更新图片预览插件

docs/.vitepress/theme/index.ts

@@ -4,9 +4,9 @@ import ArticleMetadata from "./components/ArticleMetadata.vue"
 import StatsChart from './components/StatsChart.vue'
 import MenuList from './components/MenuList.vue'
 import type { EnhanceAppContext } from 'vitepress'
-import { onMounted, watch, nextTick } from 'vue'
 import { useRoute } from 'vitepress'
-import mediumZoom from 'medium-zoom'
+import imageViewer from "vitepress-plugin-image-viewer";
+import "viewerjs/dist/viewer.min.css";
 import '../theme/style.css'
 import './style/var.css'
 import './style/vp-code.css'
@@ -17,18 +17,8 @@ export default {
   extends: DefaultTheme,
   Layout: MyLayout,
   setup() {
-    const route = useRoute()
-    const initZoom = () => {
-      // 为所有图片增加缩放功能
-      mediumZoom('.main img', { background: 'var(--vp-c-bg)' })
-    }
-    onMounted(() => {
-      initZoom()
-    })
-    watch(
-      () => route.path,
-      () => nextTick(() => initZoom())
-    )
+    const route = useRoute();
+    imageViewer(route);
   },
   enhanceApp({ app }: EnhanceAppContext) {
     app.component("Confetti", Confetti);

docs/.vitepress/theme/style/var.css

@@ -36,19 +36,6 @@
     border-top: none;
 }
 
-.medium-zoom-overlay {
-  background-color: var(--vp-c-bg) !important;
-  z-index: 100;
-}
-
-.medium-zoom-overlay ~ img {
-  z-index: 101;
-}
-
-.medium-zoom--opened .medium-zoom-overlay {
-  opacity: 0.9 !important;
-}
-
 strong {
   color: #bd34fe;
 }