Demo：优化移动端的使用体验

simple-mind-map/package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "simple-mind-map",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.9.2",
+      "version": "0.9.4",
       "license": "MIT",
       "dependencies": {
         "@svgdotjs/svg.js": "^3.0.16",

web/src/lang/en_us.js

@@ -143,7 +143,8 @@ export default {
     openMiniMap: 'Open mini map',
     closeMiniMap: 'Close mini map',
     readonly: 'Change to eadonly',
-    edit: 'Change to edit'
+    edit: 'Change to edit',
+    backToRoot: 'Back to root node'
   },
   nodeHyperlink: {
     title: 'Link',

web/src/lang/zh_cn.js

@@ -141,7 +141,8 @@ export default {
     openMiniMap: '开启小地图',
     closeMiniMap: '关闭小地图',
     readonly: '切换为只读模式',
-    edit: '切换为编辑模式'
+    edit: '切换为编辑模式',
+    backToRoot: '回到根节点'
   },
   nodeHyperlink: {
     title: '超链接',

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

@@ -3,17 +3,18 @@
     class="nodeExportDialog"
     :title="$t('export.title')"
     :visible.sync="dialogVisible"
-    width="700px"
     v-loading.fullscreen.lock="loading"
     :element-loading-text="loadingText"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
+    :width="isMobile ? '90%' : '50%'"
+    :top="isMobile? '20px' : '15vh'"
   >
     <div class="exportContainer" :class="{ isDark: isDark }">
       <div class="nameInputBox">
         <span class="name">{{ $t('export.filename') }}</span>
         <el-input
-          style="width: 300px"
+          style="max-width: 300px"
           v-model="fileName"
           size="mini"
           @keydown.native.stop
@@ -29,30 +30,33 @@
         class="paddingInputBox"
         v-show="['svg', 'png', 'pdf'].includes(exportType)"
       >
-        <span class="name">{{ $t('export.paddingX') }}</span>
+        <div class="paddingInputGroup">
-        <el-input
+          <span class="name">{{ $t('export.paddingX') }}</span>
-          style="width: 100px"
+          <el-input
-          v-model="paddingX"
+            style="max-width: 100px"
-          size="mini"
+            v-model="paddingX"
-          @change="onPaddingChange"
+            size="mini"
-          @keydown.native.stop
+            @change="onPaddingChange"
-        ></el-input>
+            @keydown.native.stop
-        <span class="name" style="margin-left: 10px;">{{
+          ></el-input>
-          $t('export.paddingY')
+        </div>
-        }}</span>
+        <div class="paddingInputGroup">
-        <el-input
+          <span class="name">{{ $t('export.paddingY') }}</span>
-          style="width: 100px"
+          <el-input
-          v-model="paddingY"
+            style="width: 100px"
-          size="mini"
+            v-model="paddingY"
-          @change="onPaddingChange"
+            size="mini"
-          @keydown.native.stop
+            @change="onPaddingChange"
-        ></el-input>
+            @keydown.native.stop
-        <el-checkbox
+          ></el-input>
-          v-show="['png', 'pdf'].includes(exportType)"
+        </div>
-          v-model="isTransparent"
+        <div class="paddingInputGroup">
-          style="margin-left: 12px"
+          <el-checkbox
-          >{{ $t('export.isTransparent') }}</el-checkbox
+            v-show="['png', 'pdf'].includes(exportType)"
-        >
+            v-model="isTransparent"
+            >{{ $t('export.isTransparent') }}</el-checkbox
+          >
+        </div>
       </div>
       <div class="downloadTypeList">
         <div
@@ -83,6 +87,7 @@
 <script>
 import { mapState } from 'vuex'
 import { downTypeList } from '@/config'
+import { isMobile } from 'simple-mind-map/src/utils/index'
 
 /**
  * @Author: 王林
@@ -101,7 +106,8 @@ export default {
       loading: false,
       loadingText: '',
       paddingX: 10,
-      paddingY: 10
+      paddingY: 10,
+      isMobile: isMobile()
     }
   },
   computed: {
@@ -176,7 +182,13 @@ export default {
           this.isTransparent
         )
       } else if (this.exportType === 'pdf') {
-        this.$bus.$emit('export', this.exportType, true, this.fileName, this.isTransparent)
+        this.$bus.$emit(
+          'export',
+          this.exportType,
+          true,
+          this.fileName,
+          this.isTransparent
+        )
       } else {
         this.$bus.$emit('export', this.exportType, true, this.fileName)
       }
@@ -221,7 +233,18 @@ export default {
   }
 
   .paddingInputBox {
-    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .paddingInputGroup {
+      margin-right: 12px;
+      margin-bottom: 12px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
 
     .name {
       margin-right: 10px;
@@ -260,6 +283,7 @@ export default {
       .icon {
         font-size: 30px;
         margin-right: 10px;
+        flex-shrink: 0;
 
         &.png {
           color: #ffc038;
@@ -287,15 +311,26 @@ export default {
       }
 
       .info {
+        width: 100%;
+        overflow: hidden;
+
         .name {
           color: #1a1a1a;
           font-size: 15px;
           margin-bottom: 5px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
 
         .desc {
           color: #999;
           font-size: 12px;
+          display: -webkit-box; /* 必须设置display属性为-webkit-box */
+          overflow: hidden; /* 超出部分隐藏 */
+          text-overflow: ellipsis; /* 显示省略号 */
+          -webkit-line-clamp: 2; /* 限制显示两行 */
+          -webkit-box-orient: vertical; /* 垂直方向上的换行 */
         }
       }
     }

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

@@ -4,6 +4,7 @@
     class="navigatorBox"
     :class="{ isDark: isDark }"
     ref="navigatorBox"
+    :style="{ width: width + 'px' }"
     @mousedown="onMousedown"
     @mousemove="onMousemove"
     @mouseup="onMouseup"
@@ -47,25 +48,31 @@ export default {
         bottom: 0,
         right: 0
       },
-      mindMapImg: ''
+      mindMapImg: '',
+      width: 0,
+      setSizeTimer: null
     }
   },
   computed: {
     ...mapState(['isDark'])
   },
   mounted() {
+    this.setSize()
+    window.addEventListener('resize', this.setSize)
     this.$bus.$on('toggle_mini_map', this.toggle_mini_map)
     this.$bus.$on('data_change', this.data_change)
     this.$bus.$on('view_data_change', this.data_change)
     this.$bus.$on('node_tree_render_end', this.data_change)
   },
   destroyed() {
+    window.removeEventListener('resize', this.setSize)
     this.$bus.$off('toggle_mini_map', this.toggle_mini_map)
     this.$bus.$off('data_change', this.data_change)
     this.$bus.$off('view_data_change', this.data_change)
     this.$bus.$off('node_tree_render_end', this.data_change)
   },
   methods: {
+    // 切换显示小地图
     toggle_mini_map(show) {
       this.showMiniMap = show
       this.$nextTick(() => {
@@ -77,6 +84,8 @@ export default {
         }
       })
     },
+
+    // 思维导图数据改变，更新小地图
     data_change() {
       if (!this.showMiniMap) {
         return
@@ -86,6 +95,22 @@ export default {
         this.drawMiniMap()
       }, 500)
     },
+
+    // 计算容器宽度
+    setSize() {
+      clearTimeout(this.setSizeTimer)
+      this.setSizeTimer = setTimeout(() => {
+        this.width = Math.min(window.innerWidth - 80, 370)
+        this.$nextTick(() => {
+          if (this.showMiniMap) {
+            this.init()
+            this.drawMiniMap()
+          }
+        })
+      }, 300)
+    },
+
+    // 获取宽高
     init() {
       let { width, height } = this.$refs.navigatorBox.getBoundingClientRect()
       this.boxWidth = width
@@ -128,7 +153,6 @@ export default {
 <style lang="less" scoped>
 .navigatorBox {
   position: absolute;
-  width: 350px;
   height: 220px;
   background-color: #fff;
   bottom: 80px;

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

@@ -15,6 +15,15 @@
         />
       </el-select>
     </div>
+    <div class="item">
+      <el-tooltip
+        effect="dark"
+        :content="$t('navigatorToolbar.backToRoot')"
+        placement="top"
+      >
+        <div class="btn iconfont icondingwei" @click="backToRoot"></div>
+      </el-tooltip>
+    </div>
     <div class="item">
       <div class="btn iconfont iconsousuo" @click="showSearch"></div>
     </div>
@@ -180,6 +189,10 @@ export default {
       a.href = url
       a.target = '_blank'
       a.click()
+    },
+
+    backToRoot() {
+      this.mindMap.renderer.setRootNodeCenter()
     }
   }
 }

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

@@ -3,7 +3,8 @@
     class="nodeHyperlinkDialog"
     :title="$t('nodeHyperlink.title')"
     :visible.sync="dialogVisible"
-    width="500"
+    :width="isMobile ? '90%' : '50%'"
+    :top="isMobile ? '20px' : '15vh'"
   >
     <div class="item">
       <span class="name">{{ $t('nodeHyperlink.link') }}</span>
@@ -41,6 +42,8 @@
 </template>
 
 <script>
+import { isMobile } from 'simple-mind-map/src/utils/index'
+
 /**
  * @Author: 王林
  * @Date: 2021-06-24 22:53:17
@@ -54,7 +57,8 @@ export default {
       link: '',
       linkTitle: '',
       activeNodes: [],
-      protocol: 'https'
+      protocol: 'https',
+      isMobile: isMobile()
     }
   },
   created() {

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

@@ -3,7 +3,8 @@
     class="nodeImageDialog"
     :title="$t('nodeImage.title')"
     :visible.sync="dialogVisible"
-    width="500"
+    :width="isMobile ? '90%' : '50%'"
+    :top="isMobile ? '20px' : '15vh'"
   >
     <div class="title">方式一</div>
     <ImgUpload
@@ -37,7 +38,7 @@
 
 <script>
 import ImgUpload from '@/components/ImgUpload'
-import { getImageSize } from 'simple-mind-map/src/utils/index'
+import { getImageSize, isMobile } from 'simple-mind-map/src/utils/index'
 
 /**
  * @Author: 王林
@@ -55,7 +56,8 @@ export default {
       img: '',
       imgUrl: '',
       imgTitle: '',
-      activeNodes: null
+      activeNodes: null,
+      isMobile: isMobile()
     }
   },
   created() {

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

@@ -3,7 +3,8 @@
     class="nodeNoteDialog"
     :title="$t('nodeNote.title')"
     :visible.sync="dialogVisible"
-    width="500"
+    :width="isMobile ? '90%' : '50%'"
+    :top="isMobile ? '20px' : '15vh'"
   >
     <!-- <el-input
       type="textarea"
@@ -26,6 +27,7 @@
 <script>
 import Editor from '@toast-ui/editor'
 import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style
+import { isMobile } from 'simple-mind-map/src/utils/index'
 
 /**
  * @Author: 王林
@@ -39,7 +41,8 @@ export default {
       dialogVisible: false,
       note: '',
       activeNodes: [],
-      editor: null
+      editor: null,
+      isMobile: isMobile()
     }
   },
   created() {

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

@@ -3,7 +3,8 @@
     class="nodeTagDialog"
     :title="$t('nodeTag.title')"
     :visible.sync="dialogVisible"
-    width="500"
+    :width="isMobile ? '90%' : '50%'"
+    :top="isMobile ? '20px' : '15vh'"
   >
     <el-input
       v-model="tag"
@@ -39,7 +40,7 @@
 </template>
 
 <script>
-import { generateColorByContent } from 'simple-mind-map/src/utils/index'
+import { generateColorByContent, isMobile } from 'simple-mind-map/src/utils/index'
 
 /**
  * @Author: 王林
@@ -54,7 +55,8 @@ export default {
       tagArr: [],
       tag: '',
       activeNodes: [],
-      max: 5
+      max: 5,
+      isMobile: isMobile()
     }
   },
   created() {

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

@@ -11,7 +11,7 @@
           width="120"
           trigger="hover"
           v-if="showMoreBtn"
-          style="margin-left: 20px;"
+          :style="{ marginLeft: horizontalList.length > 0 ? '20px' : 0 }"
         >
           <ToolbarNodeBtnList
             dir="v"