feat: 集成xmind，支持思维导图在线预览

docs/.vuepress/components/HelloWorld.vue

@@ -0,0 +1,12 @@
+<template>
+  <h1>HelloWorld</h1>
+  dq24qwer
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+
+</style>

docs/.vuepress/components/XMindManager.vue

@@ -0,0 +1,208 @@
+<!--
+  参考链接：
+    - https://www.npmjs.com/package/xmind-embed-viewer
+    - https://xmindltd.github.io/xmind-embed-viewer/
+-->
+<template>
+  <div class="x-mind-container">
+    <!-- xmind思维导图管理器 -->
+    <div id="x-mind-manager-container">
+    </div>
+    <div class="btn-container">
+      <button id="openLocalBtn" @click="handleOpenLocalBtnClick">打开本地</button>
+      <button id="zoomScaleBtn" @click="handleZoomScaleRevertBtnClick">还原缩放</button>
+
+      <div class="select">
+        <select v-model="xmindIndex">
+          <option v-for="(xmind, index) in xmindFileList" :key="index" :value="index">
+            {{ xmind }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {XMindEmbedViewer} from "xmind-embed-viewer"
+import mapData from "../public/mark-map/index.json"
+
+
+export default {
+
+  /**
+   * 监听下来列表变更
+   */
+  watch: {
+    xmindIndex: async function (newIndex, oldVal) {
+      const {xMindPath} = mapData[newIndex]
+
+      // 打开指定
+      const xmindResponse = await fetch(xMindPath)
+      const data = await xmindResponse.arrayBuffer()
+      this.viewer.setZoomScale(100)
+      this.viewer.load(data)
+    }
+  },
+  data() {
+    return {
+      viewer: {},
+      xmindIndex: 0,
+      xmindFileList: [],
+      xmindFile: mapData.length > 0 ? mapData[0].xMindPath : '../mark-map/操作系统发展历程.xmind'
+    }
+  },
+  created() {
+    this.xmindFileList = mapData.map(({name}) => name)
+  },
+  mounted() {
+    (async () => {
+      const res = await fetch(this.xmindFile)
+
+      this.viewer = new XMindEmbedViewer({
+        el: '#x-mind-manager-container',
+        file: await res.arrayBuffer(),
+        // 国内：cn 全球：global
+        region: 'cn',
+        styles: {
+          width: '100%',
+          minHeight: "600px",
+          height: 'auto',
+          maxHeight: '1200px'
+        }
+      })
+    })()
+  },
+
+  methods: {
+    /**
+     * 打开本地思维导图文件
+     */
+    async handleOpenLocalBtnClick() {
+      const fileSelector = document.createElement('input')
+      fileSelector.style.display = 'none'
+      document.body.appendChild(fileSelector)
+      await new Promise(resolve => {
+        fileSelector.setAttribute('type', 'file')
+        fileSelector.setAttribute('accept', '.xmind')
+        fileSelector.addEventListener('change', () => {
+          resolve()
+        })
+        fileSelector.click()
+      }).finally(() => {
+        document.body.removeChild(fileSelector)
+      })
+      if (!fileSelector.files || !fileSelector.files.length) {
+        return
+      }
+      const file = fileSelector.files[0]
+      if (!file)
+        return
+
+      const data = await file.arrayBuffer()
+      this.viewer.load(data)
+    },
+    /**
+     * 恢复缩放比例
+     */
+    async handleZoomScaleRevertBtnClick() {
+      this.viewer.setFitMap()
+    },
+  }
+}
+</script>
+
+
+<style scoped>
+
+.btn-container {
+  margin: 50px 0;
+  text-align: center;
+}
+
+.select {
+  display: inline-block;
+  width: 200px;
+  position: relative;
+  vertical-align: middle;
+  padding: 0;
+  overflow: hidden;
+  background-color: #fff;
+  color: #555;
+  border: 1px solid #aaa;
+  text-shadow: none;
+  border-radius: 4px;
+  transition: box-shadow 0.25s ease;
+  z-index: 1;
+}
+
+.select:hover {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+.select:before {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+  border-top-color: #ccc;
+  top: 14px;
+  right: 10px;
+  cursor: pointer;
+  z-index: -2;
+}
+
+.select select {
+  cursor: pointer;
+  padding: 10px;
+  width: 100%;
+  border: none;
+  background: transparent none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.select select:focus {
+  outline: none;
+}
+
+#x-mind-manager-container {
+  width: 100%;
+  height: 600px;
+}
+
+button {
+  background: #eb94d0;
+  /* 创建渐变 */
+  background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);
+  background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
+  background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
+  background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
+  background-image: linear-gradient(to bottom, #eb94d0, #2079b0);
+  /* 给按钮添加圆角 */
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 10px;
+  -moz-box-shadow: 6px 5px 24px #666666;
+  font-family: Arial, serif;
+  margin: 5px;
+  color: #fafafa;
+  font-size: 14px;
+  padding: 5px;
+  text-decoration: none;
+}
+
+/* 悬停样式 */
+button:hover {
+  cursor: pointer;
+  background: #2079b0;
+  background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
+  background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
+  text-decoration: none;
+}
+
+</style>
+
+

docs/.vuepress/config/plugins.config.ts

@@ -1,11 +1,20 @@
 import {searchProPlugin} from "vuepress-plugin-search-pro";
-import {mdEnhancePlugin} from "vuepress-plugin-md-enhance";
+import {path} from "@vuepress/utils";
+import {registerComponentsPlugin} from "@vuepress/plugin-register-components";
 
+console.log(path.resolve(__dirname, './components/HelloWorld.vue'))
 /**
  * 插件配置
  */
 export default {
   plugins: [
+    // 组件注册，参考：https://v2.vuepress.vuejs.org/zh/reference/plugin/register-components.html
+    registerComponentsPlugin({
+      componentsDir: path.resolve(__dirname, '../components'),
+      // components: {
+      //   HelloWorld: path.resolve(__dirname, '../components/HelloWorld.vue')
+      // }
+    }),
     searchProPlugin({
       // 索引全部内容
       indexContent: true,

docs/.vuepress/config/theme.config.ts

@@ -104,6 +104,8 @@ export default {
         container: true,
         // mermaid
         mermaid: true,
+        // 自定义对齐
+        align: true,
       },
       components: {
         // 插件选项

docs/.vuepress/public/mark-map/ccp-map.html

@@ -16,11 +16,11 @@
   height: 100vh;
 }
 </style>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css">
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css">
 </head>
 <body>
 <svg id="mindmap"></svg>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script><script>(r => {
+<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script><script src="https://unpkg.com/[email protected]/dist/browser/index.js"></script><script src="https://unpkg.com/[email protected]/dist/index.js"></script><script>(r => {
           setTimeout(r);
         })(() => {
   const {

docs/.vuepress/public/mark-map/cn-map.html

@@ -16,11 +16,11 @@
   height: 100vh;
 }
 </style>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css">
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css">
 </head>
 <body>
 <svg id="mindmap"></svg>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script><script>(r => {
+<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script><script src="https://unpkg.com/[email protected]/dist/browser/index.js"></script><script src="https://unpkg.com/[email protected]/dist/index.js"></script><script>(r => {
           setTimeout(r);
         })(() => {
   const {

docs/.vuepress/public/mark-map/ds-map.html

@@ -16,11 +16,11 @@
   height: 100vh;
 }
 </style>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css">
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css">
 </head>
 <body>
 <svg id="mindmap"></svg>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script><script>(r => {
+<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script><script src="https://unpkg.com/[email protected]/dist/browser/index.js"></script><script src="https://unpkg.com/[email protected]/dist/index.js"></script><script>(r => {
           setTimeout(r);
         })(() => {
   const {

docs/.vuepress/public/mark-map/index.json

@@ -0,0 +1,30 @@
+[
+  {
+    "name": "数据结构",
+    "originXmindFileName": "数据结构.xmind",
+    "targetXmindFileName": "ds.xmind",
+    "xMindPath": "../mark-map/ds.xmind",
+    "mdPath": "../mark-map/ds-map.md"
+  },
+  {
+    "name": "操作系统",
+    "originXmindFileName": "操作系统.xmind",
+    "targetXmindFileName": "os.xmind",
+    "xMindPath": "../mark-map/os.xmind",
+    "mdPath": "../mark-map/os-map.md"
+  },
+  {
+    "name": "计算机组成原理",
+    "originXmindFileName": "计算机组成原理.xmind",
+    "targetXmindFileName": "cpp.xmind",
+    "xMindPath": "../mark-map/cpp.xmind",
+    "mdPath": "../mark-map/ccp-map.md"
+  },
+  {
+    "name": "计算机网络",
+    "originXmindFileName": "计算机网络.xmind",
+    "targetXmindFileName": "cn.xmind",
+    "xMindPath": "../mark-map/cn.xmind",
+    "mdPath": "../mark-map/cn-map.md"
+  }
+]

docs/.vuepress/public/mark-map/os-map.html

@@ -16,11 +16,11 @@
   height: 100vh;
 }
 </style>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css">
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css">
 </head>
 <body>
 <svg id="mindmap"></svg>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script><script>(r => {
+<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script><script src="https://unpkg.com/[email protected]/dist/browser/index.js"></script><script src="https://unpkg.com/[email protected]/dist/index.js"></script><script>(r => {
           setTimeout(r);
         })(() => {
   const {

docs/.vuepress/public/mark-map/readme.html

@@ -16,11 +16,11 @@
   height: 100vh;
 }
 </style>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css">
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css">
 </head>
 <body>
 <svg id="mindmap"></svg>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script><script>(r => {
+<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script><script src="https://unpkg.com/[email protected]/dist/browser/index.js"></script><script src="https://unpkg.com/[email protected]/dist/index.js"></script><script>(r => {
           setTimeout(r);
         })(() => {
   const {

docs/manuscripts/mark-map/index.json

@@ -0,0 +1,30 @@
+[
+  {
+    "name": "数据结构",
+    "originXmindFileName": "数据结构.xmind",
+    "targetXmindFileName": "ds.xmind",
+    "xMindPath": "../mark-map/ds.xmind",
+    "mdPath": "../mark-map/ds-map.md"
+  },
+  {
+    "name": "操作系统",
+    "originXmindFileName": "操作系统.xmind",
+    "targetXmindFileName": "os.xmind",
+    "xMindPath": "../mark-map/os.xmind",
+    "mdPath": "../mark-map/os-map.md"
+  },
+  {
+    "name": "计算机组成原理",
+    "originXmindFileName": "计算机组成原理.xmind",
+    "targetXmindFileName": "cpp.xmind",
+    "xMindPath": "../mark-map/cpp.xmind",
+    "mdPath": "../mark-map/ccp-map.md"
+  },
+  {
+    "name": "计算机网络",
+    "originXmindFileName": "计算机网络.xmind",
+    "targetXmindFileName": "cn.xmind",
+    "xMindPath": "../mark-map/cn.xmind",
+    "mdPath": "../mark-map/cn-map.md"
+  }
+]

docs/manuscripts/mark-map/readme.md

@@ -8,4 +8,6 @@
 - <a href="../../mark-map/cn-map.html" target="_blank">计算机网络</a>
 
 
+<XMindManager></XMindManager>
+