From 62d0b0515eaddfa196e204ee7a817ac74bd09c7f Mon Sep 17 00:00:00 2001 From: Cxx0822 <1556464090@qq.com> Date: Thu, 26 Feb 2026 19:01:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=9B=B4=E6=96=B0=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/theme/index.ts | 18 ++++-------------- docs/.vitepress/theme/style/var.css | 13 ------------- docs/Others/VitePress.md | 21 +++++++++++++++++++++ package.json | 3 ++- pnpm-lock.yaml | 26 ++++++++++++++++++-------- 5 files changed, 45 insertions(+), 36 deletions(-) diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 20334ed..fecb03b 100644 --- a/docs/.vitepress/theme/index.ts +++ b/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); diff --git a/docs/.vitepress/theme/style/var.css b/docs/.vitepress/theme/style/var.css index 1beaa93..2901665 100644 --- a/docs/.vitepress/theme/style/var.css +++ b/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; } \ No newline at end of file diff --git a/docs/Others/VitePress.md b/docs/Others/VitePress.md index 2082085..5d79786 100644 --- a/docs/Others/VitePress.md +++ b/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); + } +}; +``` diff --git a/package.json b/package.json index f7da660..b3b39bd 100644 --- a/package.json +++ b/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" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c2b156..55eb7d0 100644 --- a/pnpm-lock.yaml +++ b/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