Fix：修复客户端导出的文件web端导入后节点贴纸显示不出来的问题

web/src/electron/fileHandle.js

@@ -50,7 +50,7 @@ export const bindFileHandleEvent = ({ mainWindow, initOpenFileQueue }) => {
       win.loadURL(
         process.env.WEBPACK_DEV_SERVER_URL + '/#/workbenche/edit/' + id
       )
-      // if (!process.env.IS_TEST) win.webContents.openDevTools()
+      if (!process.env.IS_TEST) win.webContents.openDevTools()
     } else {
       // Load the index.html when not in development
       win.loadURL('app://./index.html/#/workbenche/edit/' + id)

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

@@ -39,6 +39,7 @@ import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
 import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
 import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js'
 import SearchPlugin from 'simple-mind-map/src/plugins/Search.js'
+import { downloadFile, readBlob } from 'simple-mind-map/src/utils/index'
 import Outline from './Outline'
 import Style from './Style'
 import BaseStyle from './BaseStyle'
@@ -66,6 +67,7 @@ import i18n from '../../../i18n'
 import Search from './Search.vue'
 import NodeIconSidebar from './NodeIconSidebar.vue'
 import NodeIconToolbar from './NodeIconToolbar.vue'
+import { removeMindMapNodeStickerProtocol, addMindMapNodeStickerProtocol } from '@/utils'
 
 // 注册插件
 MindMap
@@ -148,6 +150,7 @@ export default {
     this.$bus.$on('execCommand', this.execCommand)
     this.$bus.$on('paddingChange', this.onPaddingChange)
     this.$bus.$on('export', this.export)
+    this.$bus.$on('exportJson', this.exportJson)
     this.$bus.$on('setData', this.setData)
     this.$bus.$on('startTextEdit', () => {
       this.mindMap.renderer.startTextEdit()
@@ -267,6 +270,7 @@ export default {
       let data = await window.electronAPI.getFileContent(this.$route.params.id)
       let storeData = null
       if (data) {
+        addMindMapNodeStickerProtocol(data.content.root)
         this.setFileName(data.name)
         storeData = data.content
       } else {
@@ -473,6 +477,17 @@ export default {
       }
     },
 
+    async exportJson(type, isDownload = true, name = '思维导图', withConfig) {
+      let data = this.mindMap.getData(withConfig)
+      removeMindMapNodeStickerProtocol(data.root ? data.root : data)
+      let str = JSON.stringify(data)
+      let blob = new Blob([str])
+      let res = await readBlob(blob)
+      if (isDownload) {
+        downloadFile(res, name + '.' + type)
+      }
+    },
+
     // 修改导出内边距
     onPaddingChange(data) {
       this.mindMap.updateConfig(data)
@@ -508,6 +523,7 @@ export default {
     async saveToLocal() {
       let id = this.$route.params.id
       let data = this.mindMap.getData(true)
+      removeMindMapNodeStickerProtocol(data.root)
       let res = await window.electronAPI.save(id, JSON.stringify(data), this.fileName)
       if (res) {
         this.isNewFile = false

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

@@ -135,7 +135,7 @@ export default {
      * @Date: 2021-06-06 22:28:20
      * @Desc:  确定
      */
-    confirm() {
+    async confirm() {
       if (this.exportType === 'svg') {
         this.$bus.$emit(
           'export',
@@ -150,7 +150,7 @@ export default {
         )
       } else if (['smm', 'json'].includes(this.exportType)) {
         this.$bus.$emit(
-          'export',
+          'exportJson',
           this.exportType,
           true,
           this.fileName,

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

@@ -34,7 +34,7 @@
 <script>
 import xmind from 'simple-mind-map/src/parse/xmind.js'
 import markdown from 'simple-mind-map/src/parse/markdown.js'
-import { fileToBuffer } from '@/utils'
+import { fileToBuffer, addMindMapNodeStickerProtocol } from '@/utils'
 import { read, utils } from 'xlsx'
 
 /**
@@ -133,6 +133,7 @@ export default {
           if (typeof data !== 'object') {
             throw new Error('文件内容有误')
           }
+          addMindMapNodeStickerProtocol(data.root ? data.root : data)
           this.$bus.$emit('setData', data)
           this.$message.success('导入成功')
         } catch (error) {

web/src/utils/index.js

@@ -47,3 +47,47 @@ export const fileToBuffer = file => {
     reader.readAsArrayBuffer(file)
   })
 }
+
+// 判断url是否是http协议或者data:url协议的
+const checkIsHttpOrDataUrl = (url) => {
+  return /^https?:\/\//.test(url) || /^data:/.test(url)
+}
+
+// 将贴纸地址统一转成web线上版
+// 客户端开发版：        img/a-7-xinzang.svg
+// 客户端线上版：app://./img/a-shuben2.svg
+// web线上版：   ./dist/img/-_1.svg
+// web本地版：
+export const removeMindMapNodeStickerProtocol = (data) => {
+  let walk = (root) => {
+    let image = root.data.image
+    if (image && !checkIsHttpOrDataUrl(image)) {
+      const res = image.match(/img\/[^/]+\.svg$/)
+      root.data.image = './dist/' + res[0]
+    }
+    if (root.children && root.children.length > 0) {
+      root.children.forEach((item) => {
+        walk(item)
+      })
+    }
+  }
+  walk(data)
+}
+
+// 将贴纸地址转成客户端需要的路径
+const dev = process.env.NODE_ENV === 'development'
+export const addMindMapNodeStickerProtocol = (data) => {
+  let walk = (root) => {
+    let image = root.data.image
+    if (image && !checkIsHttpOrDataUrl(image)) {
+      const res = image.match(/img\/[^/]+\.svg$/)
+      root.data.image = dev ? res[0] : 'app://./' + res[0]
+    }
+    if (root.children && root.children.length > 0) {
+      root.children.forEach((item) => {
+        walk(item)
+      })
+    }
+  }
+  walk(data)
+}