feat: 添加 NwImageViewer 组件并更新相关功能

.vitepress/config.mts

@@ -3,6 +3,8 @@ import themeConfig from "./theme.config";
 import { resolve } from "path";
 import { withMermaid } from "vitepress-plugin-mermaid";
 
+const markdownImageRegExp = /!\[(?<name>.*)\]\((?<url>_images(.*))\)/g;
+
 // https://vitepress.dev/reference/site-config
 export default withMermaid({
   title: "NitWikit",
@@ -34,17 +36,9 @@ export default withMermaid({
         enforce: "pre",
         transform(code, id) {
           if (id.endsWith(".md")) {
-            const reg = /!\[(?<name>.*)\]\((?<url>_images(.*))\)/g;
-            // TODO: Not working...
-            const list = code.match(reg)?.map((item) => reg.exec(item)?.groups);
-            console.info(code.match(reg));
-
-            code.match(reg)?.forEach((item) => {
-              console.info(item, reg.exec(item));
-            });
-            return code.replace(reg, (_match, name, url) => {
-              return `<nw-image src="${url}" alt="${name}" list="$2{list}" />`;
-            });
+            if (code.match(markdownImageRegExp)) {
+              return code + `\n<nw-image-viewer />`;
+            }
           }
         },
       },
@@ -79,7 +73,7 @@ export default withMermaid({
     "nitwikit/docs-bedrock/(.*)": "Bedrock/(.*)",
     "nitwikit/:pkg/(.*)": ":pkg/(.*)",
   },
-  // transformHtml: (code) => {
-  //   return code.replace(/import ([\s\S]+) from &#39;(@theme\/[\s\S]+)&#39;(;)/g, "");
-  // },
+  transformHtml: (code) => {
+    return code + "\n<nw-image-viewer />";
+  },
 });

.vitepress/theme/components/nitwikit-ui/index.ts

@@ -3,12 +3,14 @@ import { App } from "vue";
 import { Tabs, TabItem } from "./packages/tabs";
 import { DocCardList } from "./packages/doc-card-list";
 import { NwImage } from "./packages/image";
+import { NwImageViewer } from "./packages/image-viewer";
 
 export default {
   install: async function (app: App) {
     app.component("Tabs", Tabs);
     app.component("TabItem", TabItem);
     app.component("DocCardList", DocCardList);
     app.component("NwImage", NwImage);
+    app.component("NwImageViewer", NwImageViewer);
   },
 };

.vitepress/theme/components/nitwikit-ui/packages/image-viewer/image-viewer.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { onActivated, onMounted, onBeforeUnmount, ref } from 'vue'
+
+import Viewer from 'viewerjs';
+import 'viewerjs/dist/viewer.css'
+
+const instance = ref()
+
+onMounted(() => {
+  instance.value = new Viewer(document.querySelector('.vp-doc'));
+})
+
+onBeforeUnmount(() => {
+  instance.value?.destroy()
+})
+</script>

.vitepress/theme/components/nitwikit-ui/packages/image-viewer/index.ts

@@ -0,0 +1,3 @@
+import $NwImageViewer from "./image-viewer.vue";
+
+export const NwImageViewer = $NwImageViewer;

.vitepress/theme/components/nitwikit-ui/packages/image/image.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="nw-image">
-    <img ref="nwImageRef" :src="props.src" :alt="props.alt" />
+    <img class="nw-image__inner" ref="nwImageRef" :src="props.src" :alt="props.alt" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { withBase } from 'vitepress'
 
 import Viewer from 'viewerjs';
 import 'viewerjs/dist/viewer.css'
@@ -16,11 +17,7 @@ const props = withDefaults(defineProps<NwImageProps>(), {
 const nwImageRef = ref<HTMLImageElement | null>(null);
 
 onMounted(() => {
-  const viewer = new Viewer(nwImageRef.value, {
-    viewed() {
-      viewer.zoomTo(1);
-    },
-  });
+  const viewer = new Viewer(nwImageRef.value);
 })
 </script>