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;
 }

docs/Others/VitePress.md

@@ -533,3 +533,24 @@ graph TD
     D3 -->|驱动更新| C1
 '''
 ```
+
+## 3.5 图片预览
+### 3.5.1 安装
+```sh
+pnpm i vitepress-plugin-image-viewer viewerjs
+```
+
+### 3.5.2 配置
+  在`.vitepress/theme/index.ts`中配置：  
+```ts
+import imageViewer from "vitepress-plugin-image-viewer";
+import "viewerjs/dist/viewer.min.css";
+
+export default {
+  extends: DefaultTheme,
+  setup() {
+    const route = useRoute();
+    imageViewer(route);
+  }
+};
+```  

package.json

@@ -2,7 +2,6 @@
   "type": "module",
   "devDependencies": {
     "canvas-confetti": "^1.9.4",
-    "medium-zoom": "^1.1.0",
     "mermaid": "^11.12.2",
     "vitepress": "1.6.4",
     "vitepress-plugin-mermaid": "^2.0.17"
@@ -16,6 +15,8 @@
   "dependencies": {
     "echarts": "^6.0.0",
     "tippy.js": "^6.3.7",
+    "viewerjs": "^1.11.7",
+    "vitepress-plugin-image-viewer": "^1.1.6",
     "vue3-calendar-heatmap": "^2.0.5"
   }
 }

pnpm-lock.yaml

@@ -14,6 +14,12 @@ importers:
       tippy.js:
         specifier: ^6.3.7
         version: 6.3.7
+      viewerjs:
+        specifier: ^1.11.7
+        version: 1.11.7
+      vitepress-plugin-image-viewer:
+        specifier: ^1.1.6
+        version: 1.1.6
       vue3-calendar-heatmap:
         specifier: ^2.0.5
         version: 2.0.5(tippy.js@6.3.7)(vue@3.5.25)
@@ -21,9 +27,6 @@ importers:
       canvas-confetti:
         specifier: ^1.9.4
         version: 1.9.4
-      medium-zoom:
-        specifier: ^1.1.0
-        version: 1.1.0
       mermaid:
         specifier: ^11.12.2
         version: 11.12.2
@@ -1025,9 +1028,6 @@ packages:
   mdast-util-to-hast@13.2.1:
     resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
 
-  medium-zoom@1.1.0:
-    resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==}
-
   mermaid@11.12.2:
     resolution: {integrity: sha512-n34QPDPEKmaeCG4WDMGy0OT6PSyxKCfy2pJgShP+Qow2KLrvWjclwbc3yXfSIf4BanqWEhQEpngWwNp/XhZt6w==}
 
@@ -1207,6 +1207,9 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
+  viewerjs@1.11.7:
+    resolution: {integrity: sha512-0JuVqOmL5v1jmEAlG5EBDR3XquxY8DWFQbFMprOXgaBB0F7Q/X9xWdEaQc59D8xzwkdUgXEMSSknTpriq95igg==}
+
   vite@5.4.21:
     resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -1238,6 +1241,9 @@ packages:
       terser:
         optional: true
 
+  vitepress-plugin-image-viewer@1.1.6:
+    resolution: {integrity: sha512-ZfYy1s/bXju6vGVsE/5gPXT449+KaXZ6ZIPAvcmPM07VmC7Bv57bCvFar2II7C2EjexxfPQsxUh70vSBbe14kQ==}
+
   vitepress-plugin-mermaid@2.0.17:
     resolution: {integrity: sha512-IUzYpwf61GC6k0XzfmAmNrLvMi9TRrVRMsUyCA8KNXhg/mQ1VqWnO0/tBVPiX5UoKF1mDUwqn5QV4qAJl6JnUg==}
     peerDependencies:
@@ -2320,8 +2326,6 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
 
-  medium-zoom@1.1.0: {}
-
   mermaid@11.12.2:
     dependencies:
       '@braintree/sanitize-url': 7.1.1
@@ -2554,6 +2558,8 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
+  viewerjs@1.11.7: {}
+
   vite@5.4.21(@types/node@24.10.1):
     dependencies:
       esbuild: 0.21.5
@@ -2563,6 +2569,10 @@ snapshots:
       '@types/node': 24.10.1
       fsevents: 2.3.3
 
+  vitepress-plugin-image-viewer@1.1.6:
+    dependencies:
+      viewerjs: 1.11.7
+
   vitepress-plugin-mermaid@2.0.17(mermaid@11.12.2)(vitepress@1.6.4(@algolia/client-search@5.45.0)(@types/node@24.10.1)(postcss@8.5.6)(search-insights@2.17.3)):
     dependencies:
       mermaid: 11.12.2