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)' }))
+    })
   }
 }