@aicoa/xmind-embed-viewer

.gitignore

@@ -2,4 +2,5 @@ node_modules
 dist
 cache
 .temp
-.DS_Store
+.DS_Store
+package-lock.json

docs/.vitepress/components/Xmind.vue

@@ -3,14 +3,14 @@
 </template>
 <script setup>
 import { onMounted, ref } from 'vue'
-// import { XMindEmbedViewer } from 'xmind-embed-viewer'
+// import { XMindEmbedViewer } from '@aicoa/xmind-embed-viewer'
 const props = defineProps({
   url: String,
 })
 
 onMounted(async () => {
   console.log('viewer-url', props?.url)
-  const { XMindEmbedViewer } = await import('xmind-embed-viewer')
+  const { XMindEmbedViewer } = await import('@aicoa/xmind-embed-viewer')
   const viewer = new XMindEmbedViewer({
     el: '#xmind-container', // HTMLElement | HTMLIFrameElement | string
     // 如果在中国大陆境内速度慢，可以添加的参数 `region: 'cn'` 改为使用 xmind.cn 的图库作为依赖。

docs/public/js/share-embed.c3df862d01.js

@@ -34834,13 +34834,13 @@ https://github.com/nodeca/pako/blob/master/LICENSE
                       staticClass:
                         "xmind-logo top-left-bar position-absolute d-flex justify-content-center align-items-center",
                     },
-                    [
-                      t("img", {
-                        staticClass: "xmind-logo__img",
-                        attrs: { src: r.manifests.xmindLogo },
-                        on: { click: r.handleGotoXmind },
-                      }),
-                    ]
+                    // [
+                    //   t("img", {
+                    //     staticClass: "xmind-logo__img",
+                    //     attrs: { src: r.manifests.xmindLogo },
+                    //     on: { click: r.handleGotoXmind },
+                    //   }),
+                    // ]
                   ),
                   e._v(" "),
                   r.isLoadingShareMap

document/@aicoa_xmind-embed-viewer.md

@@ -0,0 +1,96 @@
+# @aicoa/xmind-embed-viewer
+
+## Vitepress
+
+### 使用
+
+1. xmind-embed-viewer.zip 解压文件放到 Vitepress项目public文件夹
+
+2. 引用@aicoa/xmind-embed-viewer包
+
+   ```bash
+   npm install @aicoa/xmind-embed-viewer
+   ```
+
+
+
+3. 添加xmind组件
+
+    ```vue
+    <template>
+      <div id="xmind-container"></div>
+    </template>
+    <script setup>
+    import { onMounted, ref } from 'vue'
+    import { XMindEmbedViewer } from '@aicoa/xmind-embed-viewer'
+    const props = defineProps({
+      url: String,
+    })
+    
+    onMounted(async () => {
+      console.log('viewer-url', props?.url)
+      // const { XMindEmbedViewer } = await import('@aicoa/xmind-embed-viewer')
+      const viewer = new XMindEmbedViewer({
+        el: '#xmind-container', // HTMLElement | HTMLIFrameElement | string
+        // 如果在中国大陆境内速度慢，可以添加的参数 `region: 'cn'` 改为使用 xmind.cn 的图库作为依赖。
+        region: 'cn', //optinal, global(default) or cn
+        styles: { height: '100%', width: '100%' },
+        //默认引用网站根目录
+        // domain: 'http://localhost:5173',
+      })
+      // viewer.setStyles({
+      //   width: '100%',
+      //   height: '100%',
+      // })
+      const callback = () => {
+        viewer.removeEventListener('map-ready', callback)
+      }
+      viewer.addEventListener('map-ready', callback)
+      fetch(props?.url)
+        .then((res) => res.arrayBuffer())
+        .then((file) => {
+          viewer.load(file)
+        })
+        .catch((err) => {
+          console.err('加载xmind文件出错！')
+          viewer.removeEventListener('map-ready', callback)
+        })
+    })
+    </script>
+    <style>
+    #xmind-container {
+      display: flex;
+      height: 500px;
+      align-items: center;
+      justify-content: center;
+    }
+    </style>
+    
+    ```
+
+4. 注入xmind-embed-viewer组件
+
+   docs/.vitepress/theme/index.ts
+
+   ```js
+   ... 
+   export default {
+     ...
+     enhanceApp({ app }) {
+       app.component('Xmind', Xmind)
+     },
+   }
+   ```
+
+5. 预览，在markdown中添加
+
+    ```vue
+    <Xmind url="/EDA.xmind"/>
+    ```
+
+## html
+
+示例：`xmind-embed-viewer.zip`
+
+
+

document/Xmind.md

@@ -0,0 +1,5 @@
+# Xmind 预览
+
+```vue
+<Xmind url="/EDA.xmind"/>
+```

package.json

@@ -10,11 +10,11 @@
     "serve": "vitepress serve docs"
   },
   "dependencies": {
+    "@aicoa/xmind-embed-viewer": "^1.2.0",
     "@element-plus/icons-vue": "^2.3.1",
     "@sugarat/theme": "^0.5.2",
     "element-plus": "^2.7.2",
-    "vue": "3.5.12",
-    "xmind-embed-viewer": "^1.2.0"
+    "vue": "3.5.12"
   },
   "directories": {
     "doc": "docs"