Demo：新增演示模式

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1711935414521') format('woff2'),
-       url('iconfont.woff?t=1711935414521') format('woff'),
-       url('iconfont.ttf?t=1711935414521') format('truetype');
+  src: url('iconfont.woff2?t=1713438156457') format('woff2'),
+       url('iconfont.woff?t=1713438156457') format('woff'),
+       url('iconfont.ttf?t=1713438156457') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconyanshibofang:before {
+  content: "\e648";
+}
+
 .iconfujian:before {
   content: "\e88a";
 }

web/src/lang/en_us.js

@@ -139,6 +139,9 @@ export default {
     fullscreenShow: 'Full screen show',
     fullscreenEdit: 'Full screen edit'
   },
+  demonstrate: {
+    demonstrate: 'Enter demonstration mode'
+  },
   import: {
     title: 'Import',
     selectFile: 'Select file',

web/src/lang/zh_cn.js

@@ -137,6 +137,9 @@ export default {
     fullscreenShow: '全屏查看',
     fullscreenEdit: '全屏编辑'
   },
+  demonstrate: {
+    demonstrate: '进入演示模式'
+  },
   import: {
     title: '导入',
     selectFile: '选取文件',

web/src/pages/Edit/components/Demonstrate.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="demonstrateContainer" :class="{ isDark: isDark }">
+    <el-tooltip
+      class="item"
+      effect="dark"
+      :content="$t('demonstrate.demonstrate')"
+      placement="top"
+    >
+      <div class="btn iconfont iconyanshibofang" @click="enterDemoMode"></div>
+    </el-tooltip>
+    <div
+      class="exitDemonstrateBtn"
+      @click="exit"
+      ref="exitDemonstrateBtnRef"
+      v-if="isEnterDemonstrate"
+    >
+      <span class="icon iconfont iconguanbi"></span>
+    </div>
+    <div class="stepBox" ref="stepBoxRef" v-if="isEnterDemonstrate">
+      <div class="jump" @click="prev" :class="{ disabled: curStepIndex <= 0 }">
+        <span class="icon el-icon-back"></span>
+      </div>
+      <div class="step">{{ curStepIndex + 1 }} / {{ totalStep }}</div>
+      <div
+        class="jump"
+        @click="next"
+        :class="{ disabled: curStepIndex >= totalStep - 1 }"
+      >
+        <span class="icon el-icon-right"></span>
+      </div>
+      <div class="input">
+        <input
+          type="text"
+          v-model="inputStep"
+          @keyup.enter.stop="onEnter"
+          @keydown.stop
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    mindMap: {
+      type: Object
+    },
+    isDark: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      isEnterDemonstrate: false,
+      curStepIndex: 0,
+      totalStep: 0,
+      inputStep: ''
+    }
+  },
+  created() {
+    this.$bus.$on('demonstrate_jump', this.onJump)
+    this.$bus.$on('exit_demonstrate', this.onExit)
+  },
+  methods: {
+    enterDemoMode() {
+      this.isEnterDemonstrate = true
+      this.$nextTick(() => {
+        const el = document.querySelector('#mindMapContainer')
+        el.appendChild(this.$refs.exitDemonstrateBtnRef)
+        el.appendChild(this.$refs.stepBoxRef)
+      })
+      this.mindMap.demonstrate.enter()
+    },
+
+    exit() {
+      this.mindMap.demonstrate.exit()
+    },
+
+    onExit() {
+      this.isEnterDemonstrate = false
+      this.curStepIndex = 0
+      this.totalStep = 0
+    },
+
+    onJump(index, total) {
+      this.curStepIndex = index
+      this.totalStep = total
+    },
+
+    prev() {
+      this.mindMap.demonstrate.prev()
+    },
+
+    next() {
+      this.mindMap.demonstrate.next()
+    },
+
+    onEnter() {
+      const num = Number(this.inputStep)
+      if (Number.isNaN(num)) {
+        this.inputStep = ''
+      } else if (num >= 1 && num <= this.totalStep) {
+        this.mindMap.demonstrate.jump(num - 1)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.demonstrateContainer {
+  display: flex;
+  align-items: center;
+
+  &.isDark {
+    .btn {
+      color: hsla(0, 0%, 100%, 0.6);
+    }
+  }
+
+  .item {
+    margin-right: 12px;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  .btn {
+    cursor: pointer;
+    font-size: 24px;
+  }
+}
+
+.exitDemonstrateBtn {
+  position: absolute;
+  right: 40px;
+  top: 20px;
+  cursor: pointer;
+  z-index: 10001;
+
+  .icon {
+    font-size: 28px;
+    color: #fff;
+  }
+}
+
+.stepBox {
+  position: absolute;
+  right: 40px;
+  bottom: 20px;
+
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+
+  .step {
+    color: #fff;
+    margin: 0 12px;
+  }
+
+  .jump {
+    color: #fff;
+    cursor: pointer;
+
+    &.disabled {
+      cursor: not-allowed;
+      color: #999;
+    }
+  }
+
+  .input {
+    margin-left: 12px;
+    display: flex;
+    align-items: center;
+
+    input {
+      width: 50px;
+      height: 30px;
+      text-align: center;
+      background-color: transparent;
+      border: 1px solid #999;
+      outline: none;
+      color: #fff;
+    }
+  }
+}
+</style>

web/src/pages/Edit/components/Edit.vue

@@ -6,7 +6,11 @@
     @dragover.stop.prevent
     @drop.stop.prevent
   >
-    <div class="mindMapContainer" ref="mindMapContainer"></div>
+    <div
+      class="mindMapContainer"
+      id="mindMapContainer"
+      ref="mindMapContainer"
+    ></div>
     <Count :mindMap="mindMap" v-if="!isZenMode"></Count>
     <Navigator :mindMap="mindMap"></Navigator>
     <NavigatorToolbar :mindMap="mindMap" v-if="!isZenMode"></NavigatorToolbar>
@@ -63,6 +67,7 @@ import Painter from 'simple-mind-map/src/plugins/Painter.js'
 import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js'
 import Formula from 'simple-mind-map/src/plugins/Formula.js'
 import RainbowLines from 'simple-mind-map/src/plugins/RainbowLines.js'
+import Demonstrate from 'simple-mind-map/src/plugins/Demonstrate.js'
 // 协同编辑插件
 // import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js'
 // 手绘风格插件，该插件为付费插件，详情请查看开发文档
@@ -119,6 +124,7 @@ MindMap.usePlugin(MiniMap)
   .usePlugin(Painter)
   .usePlugin(Formula)
   .usePlugin(RainbowLines)
+  .usePlugin(Demonstrate)
 // .usePlugin(Cooperate) // 协同插件
 
 // 注册自定义主题
@@ -513,7 +519,9 @@ export default {
         'scale',
         'translate',
         'node_attachmentClick',
-        'node_attachmentContextmenu'
+        'node_attachmentContextmenu',
+        'demonstrate_jump',
+        'exit_demonstrate'
       ].forEach(event => {
         this.mindMap.on(event, (...args) => {
           this.$bus.$emit(event, ...args)

web/src/pages/Edit/components/NavigatorToolbar.vue

@@ -89,6 +89,9 @@
         <div class="btn iconfont iconyuanma" @click="openSourceCodeEdit"></div>
       </el-tooltip>
     </div>
+    <div class="item">
+      <Demonstrate :isDark="isDark" :mindMap="mindMap"></Demonstrate>
+    </div>
     <div class="item">
       <el-dropdown @command="handleCommand">
         <div class="btn iconfont iconbangzhu"></div>
@@ -114,6 +117,7 @@ import i18n from '@/i18n'
 import { storeLang, getLang } from '@/api'
 import { mapState, mapMutations } from 'vuex'
 import pkg from 'simple-mind-map/package.json'
+import Demonstrate from './Demonstrate.vue'
 
 /**
  * @Author: 王林
@@ -125,7 +129,8 @@ export default {
   components: {
     Scale,
     Fullscreen,
-    MouseAction
+    MouseAction,
+    Demonstrate
   },
   props: {
     mindMap: {