From 4ed9f088a85426ea7492c5415d139064f2ad3504 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Tue, 10 Jan 2023 17:32:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0MediumZoom=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E7=BC=A9=E6=94=BE=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/theme/index.css |  7 +++++++
 docs/.vitepress/theme/index.ts  | 12 ++++++++++++
 package.json                    |  3 +++
 pnpm-lock.yaml                  | 10 ++++++++++
 4 files changed, 32 insertions(+)
 create mode 100644 docs/.vitepress/theme/index.css

diff --git a/docs/.vitepress/theme/index.css b/docs/.vitepress/theme/index.css
new file mode 100644
index 00000000..e0bcac5e
--- /dev/null
+++ b/docs/.vitepress/theme/index.css
@@ -0,0 +1,7 @@
+.medium-zoom-overlay {
+  z-index: 20;
+}
+
+.medium-zoom-image {
+  z-index: 21;
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 08147407..3676a375 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/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)' }))
+    })
   }
 }
diff --git a/package.json b/package.json
index 24dba274..4cec10dc 100644
--- a/package.json
+++ b/package.json
@@ -7,5 +7,8 @@
   "devDependencies": {
     "vitepress": "1.0.0-alpha.35",
     "vue": "^3.2.45"
+  },
+  "dependencies": {
+    "medium-zoom": "^1.0.8"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c7006c4a..50d8e319 100644
--- a/pnpm-lock.yaml
+++ b/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