From 2fe804880f5b14997b350b2710da7beee23a5d5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Tue, 16 Jan 2024 18:30:41 +0800
Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E7=9A=84=E4=BD=BF=E7=94=A8=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/package-lock.json             |  4 +-
 web/src/lang/en_us.js                         |  3 +-
 web/src/lang/zh_cn.js                         |  3 +-
 web/src/pages/Edit/components/Export.vue      | 93 +++++++++++++------
 web/src/pages/Edit/components/Navigator.vue   | 28 +++++-
 .../Edit/components/NavigatorToolbar.vue      | 13 +++
 .../pages/Edit/components/NodeHyperlink.vue   |  8 +-
 web/src/pages/Edit/components/NodeImage.vue   |  8 +-
 web/src/pages/Edit/components/NodeNote.vue    |  7 +-
 web/src/pages/Edit/components/NodeTag.vue     |  8 +-
 web/src/pages/Edit/components/Toolbar.vue     |  2 +-
 11 files changed, 131 insertions(+), 46 deletions(-)

diff --git a/simple-mind-map/package-lock.json b/simple-mind-map/package-lock.json
index e3949191..03b053a2 100644
--- a/simple-mind-map/package-lock.json
+++ b/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",
diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 7cc647c1..c76ecfad 100644
--- a/web/src/lang/en_us.js
+++ b/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',
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index c5b7a41b..e3a43a21 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -141,7 +141,8 @@ export default {
     openMiniMap: '开启小地图',
     closeMiniMap: '关闭小地图',
     readonly: '切换为只读模式',
-    edit: '切换为编辑模式'
+    edit: '切换为编辑模式',
+    backToRoot: '回到根节点'
   },
   nodeHyperlink: {
     title: '超链接',
diff --git a/web/src/pages/Edit/components/Export.vue b/web/src/pages/Edit/components/Export.vue
index 9b114eab..726c47db 100644
--- a/web/src/pages/Edit/components/Export.vue
+++ b/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>
-        <el-input
-          style="width: 100px"
-          v-model="paddingX"
-          size="mini"
-          @change="onPaddingChange"
-          @keydown.native.stop
-        ></el-input>
-        <span class="name" style="margin-left: 10px;">{{
-          $t('export.paddingY')
-        }}</span>
-        <el-input
-          style="width: 100px"
-          v-model="paddingY"
-          size="mini"
-          @change="onPaddingChange"
-          @keydown.native.stop
-        ></el-input>
-        <el-checkbox
-          v-show="['png', 'pdf'].includes(exportType)"
-          v-model="isTransparent"
-          style="margin-left: 12px"
-          >{{ $t('export.isTransparent') }}</el-checkbox
-        >
+        <div class="paddingInputGroup">
+          <span class="name">{{ $t('export.paddingX') }}</span>
+          <el-input
+            style="max-width: 100px"
+            v-model="paddingX"
+            size="mini"
+            @change="onPaddingChange"
+            @keydown.native.stop
+          ></el-input>
+        </div>
+        <div class="paddingInputGroup">
+          <span class="name">{{ $t('export.paddingY') }}</span>
+          <el-input
+            style="width: 100px"
+            v-model="paddingY"
+            size="mini"
+            @change="onPaddingChange"
+            @keydown.native.stop
+          ></el-input>
+        </div>
+        <div class="paddingInputGroup">
+          <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; /* 垂直方向上的换行 */
         }
       }
     }
diff --git a/web/src/pages/Edit/components/Navigator.vue b/web/src/pages/Edit/components/Navigator.vue
index 1b8a7553..0a8d8dbc 100644
--- a/web/src/pages/Edit/components/Navigator.vue
+++ b/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;
diff --git a/web/src/pages/Edit/components/NavigatorToolbar.vue b/web/src/pages/Edit/components/NavigatorToolbar.vue
index 9b0fbaa9..2ac228aa 100644
--- a/web/src/pages/Edit/components/NavigatorToolbar.vue
+++ b/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()
     }
   }
 }
diff --git a/web/src/pages/Edit/components/NodeHyperlink.vue b/web/src/pages/Edit/components/NodeHyperlink.vue
index 1207b967..9d31d298 100644
--- a/web/src/pages/Edit/components/NodeHyperlink.vue
+++ b/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() {
diff --git a/web/src/pages/Edit/components/NodeImage.vue b/web/src/pages/Edit/components/NodeImage.vue
index 494b53d2..1d7eb577 100644
--- a/web/src/pages/Edit/components/NodeImage.vue
+++ b/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() {
diff --git a/web/src/pages/Edit/components/NodeNote.vue b/web/src/pages/Edit/components/NodeNote.vue
index a58549ac..18c4bbec 100644
--- a/web/src/pages/Edit/components/NodeNote.vue
+++ b/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() {
diff --git a/web/src/pages/Edit/components/NodeTag.vue b/web/src/pages/Edit/components/NodeTag.vue
index 91809fbd..b58fa707 100644
--- a/web/src/pages/Edit/components/NodeTag.vue
+++ b/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() {
diff --git a/web/src/pages/Edit/components/Toolbar.vue b/web/src/pages/Edit/components/Toolbar.vue
index 769004ca..d5d33a6e 100644
--- a/web/src/pages/Edit/components/Toolbar.vue
+++ b/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"