feat: 添加MediumZoom点击缩放图片

docs/.vitepress/theme/index.css

@@ -0,0 +1,7 @@
+.medium-zoom-overlay {
+  z-index: 20;
+}
+
+.medium-zoom-image {
+  z-index: 21;
+}

docs/.vitepress/theme/index.ts

@@ -1,5 +1,9 @@
 import DefaultTheme from 'vitepress/theme'
+import { onMounted, watch, nextTick, watchEffect } from 'vue'
+import { useRouter } from 'vitepress'
+import mediumZoom from 'medium-zoom'
 import Title from '../components/Title.vue'
+import './index.css'
 
 export default {
   ...DefaultTheme,
@@ -7,5 +11,13 @@ export default {
     DefaultTheme.enhanceApp(ctx)
     const { app } = ctx
     app.component('Title', Title)
+  },
+  setup() {
+    const router = useRouter()
+    watchEffect(() => {
+      // 将router.route.path作为依赖收集 首次访问即添加监听
+      const path = router.route.path
+      nextTick(() => mediumZoom('.main img', { background: 'var(--vp-c-bg)' }))
+    })
   }
 }

package.json

@@ -7,5 +7,8 @@
   "devDependencies": {
     "vitepress": "1.0.0-alpha.35",
     "vue": "^3.2.45"
+  },
+  "dependencies": {
+    "medium-zoom": "^1.0.8"
   }
 }

pnpm-lock.yaml

@@ -1,9 +1,13 @@
 lockfileVersion: 5.4
 
 specifiers:
+  medium-zoom: ^1.0.8
   vitepress: 1.0.0-alpha.35
   vue: ^3.2.45
 
+dependencies:
+  medium-zoom: registry.npmmirror.com/medium-zoom/1.0.8
+
 devDependencies:
   vitepress: registry.npmmirror.com/vitepress/1.0.0-alpha.35
   vue: registry.npmmirror.com/vue/3.2.45
@@ -757,6 +761,12 @@ packages:
       sourcemap-codec: registry.npmmirror.com/sourcemap-codec/1.4.8
     dev: true
 
+  registry.npmmirror.com/medium-zoom/1.0.8:
+    resolution: {integrity: sha512-CjFVuFq/IfrdqesAXfg+hzlDKu6A2n80ZIq0Kl9kWjoHh9j1N9Uvk5X0/MmN0hOfm5F9YBswlClhcwnmtwz7gA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/medium-zoom/-/medium-zoom-1.0.8.tgz}
+    name: medium-zoom
+    version: 1.0.8
+    dev: false
+
   registry.npmmirror.com/nanoid/3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz}
     name: nanoid