Demo：1.接管模式新增读取和存储配置的方法；2.获取和保存区分思维导图数据和思维导图配置

simple-mind-map/example/exampleData.js

@@ -932,6 +932,5 @@ export default {
     "layout": "logicalStructure",
     // "layout": "mindMap",
     // "layout": "catalogOrganization"
-    // "layout": "organizationStructure",
+    // "layout": "organizationStructure"
-    "config": {}
 }

web/public/index.html

@@ -62,6 +62,7 @@
                 config: {},
                 view: null
               },
+              mindMapConfig: {},
               lang: 'zh',
               localConfig: null
             })
@@ -78,6 +79,14 @@
         window.takeOverAppMethods.saveMindMapData = data => {
           console.log(data)
         }
+        // 获取思维导图配置，也就是实例化时会传入的选项
+        window.takeOverAppMethods.getMindMapConfig = () => {
+          return data.mindMapConfig
+        }
+        // 保存思维导图配置
+        window.takeOverAppMethods.saveMindMapConfig = config => {
+          console.log(config)
+        }
         // 获取语言的函数
         window.takeOverAppMethods.getLanguage = () => {
           return data.lang

web/src/api/index.js

@@ -4,6 +4,7 @@ import Vue from 'vue'
 import vuexStore from '@/store'
 
 const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'
+const SIMPLE_MIND_MAP_CONFIG = 'SIMPLE_MIND_MAP_CONFIG'
 const SIMPLE_MIND_MAP_LANG = 'SIMPLE_MIND_MAP_LANG'
 const SIMPLE_MIND_MAP_LOCAL_CONFIG = 'SIMPLE_MIND_MAP_LOCAL_CONFIG'
 
@@ -11,10 +12,12 @@ let mindMapData = null
 
 // 获取缓存的思维导图数据
 export const getData = () => {
+  // 接管模式
   if (window.takeOverApp) {
     mindMapData = window.takeOverAppMethods.getMindMapData()
     return mindMapData
   }
+  // 操作本地文件模式
   if (vuexStore.state.isHandleLocalFile) {
     return Vue.prototype.getCurrentData()
   }
@@ -39,7 +42,13 @@ export const storeData = data => {
     } else {
       originData = getData()
     }
-    originData.root = data
+    if (!originData) {
+      originData = {}
+    }
+    originData = {
+      ...originData,
+      ...data
+    }
     if (window.takeOverApp) {
       mindMapData = originData
       window.takeOverAppMethods.saveMindMapData(originData)
@@ -49,37 +58,33 @@ export const storeData = data => {
     if (vuexStore.state.isHandleLocalFile) {
       return
     }
-    let dataStr = JSON.stringify(originData)
+    localStorage.setItem(SIMPLE_MIND_MAP_DATA, JSON.stringify(originData))
-    localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
   } catch (error) {
     console.log(error)
   }
 }
 
+// 获取思维导图配置数据
+export const getConfig = () => {
+  if (window.takeOverApp) {
+    window.takeOverAppMethods.getMindMapConfig()
+    return
+  }
+  let config = localStorage.getItem(SIMPLE_MIND_MAP_CONFIG)
+  if (config) {
+    return JSON.parse(config)
+  }
+  return null
+}
+
 // 存储思维导图配置数据
 export const storeConfig = config => {
   try {
-    let originData = null
     if (window.takeOverApp) {
-      originData = mindMapData
+      window.takeOverAppMethods.saveMindMapConfig(config)
-    } else {
-      originData = getData()
-    }
-    originData = {
-      ...originData,
-      ...config
-    }
-    if (window.takeOverApp) {
-      mindMapData = originData
-      window.takeOverAppMethods.saveMindMapData(originData)
       return
     }
-    Vue.prototype.$bus.$emit('write_local_file', originData)
+    localStorage.setItem(SIMPLE_MIND_MAP_CONFIG, JSON.stringify(config))
-    if (vuexStore.state.isHandleLocalFile) {
-      return
-    }
-    let dataStr = JSON.stringify(originData)
-    localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
   } catch (error) {
     console.log(error)
   }
@@ -107,12 +112,7 @@ export const getLang = () => {
   return 'zh'
 }
 
-/**
+// 存储本地配置
- * javascript comment
- * @Author: 王林25
- * @Date: 2022-11-14 18:57:31
- * @Desc: 存储本地配置
- */
 export const storeLocalConfig = config => {
   if (window.takeOverApp) {
     return window.takeOverAppMethods.saveLocalConfig(config)
@@ -120,12 +120,7 @@ export const storeLocalConfig = config => {
   localStorage.setItem(SIMPLE_MIND_MAP_LOCAL_CONFIG, JSON.stringify(config))
 }
 
-/**
+// 获取本地配置
- * javascript comment
- * @Author: 王林25
- * @Date: 2022-11-14 18:57:37
- * @Desc: 获取本地配置
- */
 export const getLocalConfig = () => {
   if (window.takeOverApp) {
     return window.takeOverAppMethods.getLocalConfig()

web/src/pages/Edit/Index.vue

@@ -13,7 +13,7 @@
 <script>
 import Toolbar from './components/Toolbar.vue'
 import Edit from './components/Edit.vue'
-import { mapState, mapActions, mapMutations } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 import { getLocalConfig } from '@/api'
 
 export default {
@@ -44,13 +44,11 @@ export default {
       lock: true,
       text: this.$t('other.loading')
     })
-    await this.getUserMindMapData()
     this.show = true
     loading.close()
     this.setBodyDark()
   },
   methods: {
-    ...mapActions(['getUserMindMapData']),
     ...mapMutations(['setLocalConfig']),
 
     // 初始化本地配置

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

@@ -1,6 +1,10 @@
 <template>
   <Sidebar ref="sidebar" :title="$t('baseStyle.title')">
-    <div class="sidebarContent customScrollbar" :class="{ isDark: isDark }" v-if="data">
+    <div
+      class="sidebarContent customScrollbar"
+      :class="{ isDark: isDark }"
+      v-if="data"
+    >
       <!-- 背景 -->
       <div class="title noTop">{{ $t('baseStyle.background') }}</div>
       <div class="row">
@@ -819,7 +823,7 @@ import {
   borderDasharrayList
 } from '@/config'
 import ImgUpload from '@/components/ImgUpload/index.vue'
-import { storeConfig } from '@/api'
+import { storeData, storeConfig } from '@/api'
 import { mapState } from 'vuex'
 import {
   supportLineStyleLayoutsMap,
@@ -838,8 +842,10 @@ export default {
   },
   props: {
     data: {
-      type: [Object, null],
+      type: [Object, null]
-      default: null
+    },
+    configData: {
+      type: Object
     },
     mindMap: {
       type: Object
@@ -1047,7 +1053,7 @@ export default {
       this.data.theme.config[key] = value
       this.$bus.$emit('showLoading')
       this.mindMap.setThemeConfig(this.data.theme.config)
-      storeConfig({
+      storeData({
         theme: {
           template: this.mindMap.getTheme(),
           config: this.data.theme.config
@@ -1059,7 +1065,6 @@ export default {
     updateRainbowLinesConfig(item) {
       this.rainbowLinesPopoverVisible = false
       this.curRainbowLineColorList = item.list || null
-      this.data.config = this.data.config || {}
       let newConfig = null
       if (item.list) {
         newConfig = {
@@ -1071,24 +1076,19 @@ export default {
           open: false
         }
       }
-      this.data.config.rainbowLinesConfig = newConfig
+      this.configData.rainbowLinesConfig = newConfig
       this.mindMap.rainbowLines.updateRainLinesConfig(newConfig)
-      storeConfig({
+      storeConfig(this.configData)
-        config: this.data.config
-      })
     },
 
     // 更新外框
     updateOuterFramePadding(prop, value) {
       this.outerFramePadding[prop] = value
-      this.data.config = this.data.config || {}
+      this.configData[prop] = value
-      this.data.config[prop] = value
       this.mindMap.updateConfig({
         [prop]: value
       })
-      storeConfig({
+      storeConfig(this.configData)
-        config: this.data.config
-      })
       this.mindMap.render()
     },
 
@@ -1100,7 +1100,7 @@ export default {
       }
       this.data.theme.config[this.marginActiveTab][type] = value
       this.mindMap.setThemeConfig(this.data.theme.config)
-      storeConfig({
+      storeData({
         theme: {
           template: this.mindMap.getTheme(),
           config: this.data.theme.config

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

@@ -16,7 +16,11 @@
     <NavigatorToolbar :mindMap="mindMap" v-if="!isZenMode"></NavigatorToolbar>
     <OutlineSidebar :mindMap="mindMap"></OutlineSidebar>
     <Style v-if="!isZenMode"></Style>
-    <BaseStyle :data="mindMapData" :mindMap="mindMap"></BaseStyle>
+    <BaseStyle
+      :data="mindMapData"
+      :configData="mindMapConfig"
+      :mindMap="mindMap"
+    ></BaseStyle>
     <AssociativeLineStyle
       v-if="mindMap"
       :mindMap="mindMap"
@@ -42,7 +46,7 @@
     <SourceCodeEdit v-if="mindMap" :mindMap="mindMap"></SourceCodeEdit>
     <NodeOuterFrame v-if="mindMap" :mindMap="mindMap"></NodeOuterFrame>
     <NodeTagStyle v-if="mindMap" :mindMap="mindMap"></NodeTagStyle>
-    <Setting :data="mindMapData" :mindMap="mindMap"></Setting>
+    <Setting :configData="mindMapConfig" :mindMap="mindMap"></Setting>
     <NodeImgPlacementToolbar
       v-if="mindMap"
       :mindMap="mindMap"
@@ -107,11 +111,11 @@ import ShortcutKey from './ShortcutKey.vue'
 import Contextmenu from './Contextmenu.vue'
 import RichTextToolbar from './RichTextToolbar.vue'
 import NodeNoteContentShow from './NodeNoteContentShow.vue'
-import { getData, storeData, storeConfig } from '@/api'
+import { getData, getConfig, storeData } from '@/api'
 import Navigator from './Navigator.vue'
 import NodeImgPreview from './NodeImgPreview.vue'
 import SidebarTrigger from './SidebarTrigger.vue'
-import { mapMutations, mapState } from 'vuex'
+import { mapState } from 'vuex'
 import icon from '@/config/icon'
 import CustomNodeContent from './CustomNodeContent.vue'
 import Color from './Color.vue'
@@ -199,6 +203,7 @@ export default {
       enableShowLoading: true,
       mindMap: null,
       mindMapData: null,
+      mindMapConfig: {},
       prevImg: '',
       storeConfigTimer: null,
       showDragMask: false
@@ -318,19 +323,19 @@ export default {
 
     // 获取思维导图数据，实际应该调接口获取
     getData() {
-      let storeData = getData()
+      this.mindMapData = getData()
-      this.mindMapData = storeData
+      this.mindMapConfig = getConfig() || {}
     },
 
     // 存储数据当数据有变时
     bindSaveEvent() {
       this.$bus.$on('data_change', data => {
-        storeData(data)
+        storeData({ root: data })
       })
       this.$bus.$on('view_data_change', data => {
         clearTimeout(this.storeConfigTimer)
         this.storeConfigTimer = setTimeout(() => {
-          storeConfig({
+          storeData({
             view: data
           })
         }, 300)
@@ -339,14 +344,14 @@ export default {
 
     // 手动保存
     manualSave() {
-      let data = this.mindMap.getData(true)
+      storeData(this.mindMap.getData(true))
-      storeConfig(data)
     },
 
     // 初始化
     init() {
       let hasFileURL = this.hasFileURL()
-      let { root, layout, theme, view, config } = this.mindMapData
+      let { root, layout, theme, view } = this.mindMapData
+      const config = this.mindMapConfig
       // 如果url中存在要打开的文件，那么思维导图数据、主题、布局都使用默认的
       if (hasFileURL) {
         root = {
@@ -614,7 +619,7 @@ export default {
       // 当正在编辑本地文件时通过该方法获取最新数据
       Vue.prototype.getCurrentData = () => {
         const fullData = this.mindMap.getData(true)
-        return { ...fullData, config: this.mindMapData.config }
+        return { ...fullData }
       }
       // 协同测试
       this.cooperateTest()

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

@@ -282,7 +282,9 @@ export default {
 
     // 保存
     save() {
-      storeData(this.getData())
+      storeData({
+        root: this.getData()
+      })
     }
   }
 }

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

@@ -3,7 +3,7 @@
     <div
       class="sidebarContent customScrollbar"
       :class="{ isDark: isDark }"
-      v-if="data"
+      v-if="configData"
     >
       <!-- 水印 -->
       <div class="row">
@@ -403,8 +403,8 @@ export default {
     Color
   },
   props: {
-    data: {
+    configData: {
-      type: [Object, null],
+      type: Object,
       default: null
     },
     mindMap: {
@@ -514,11 +514,8 @@ export default {
       this.mindMap.updateConfig({
         [key]: value
       })
-      this.data.config = this.data.config || {}
+      this.configData[key] = value
-      this.data.config[key] = value
+      storeConfig(this.configData)
-      storeConfig({
-        config: this.data.config
-      })
       if (
         [
           'alwaysShowExpandBtn',
@@ -539,13 +536,10 @@ export default {
         this.mindMap.watermark.updateWatermark({
           ...config
         })
-        this.data.config = this.data.config || {}
+        this.configData.watermarkConfig = this.mindMap.getConfig(
-        this.data.config.watermarkConfig = this.mindMap.getConfig(
           'watermarkConfig'
         )
-        storeConfig({
+        storeConfig(this.configData)
-          config: this.data.config
-        })
       }, 300)
     },
 

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

@@ -20,7 +20,7 @@
 <script>
 import Sidebar from './Sidebar.vue'
 import { layoutList } from 'simple-mind-map/src/constants/constant'
-import { storeConfig } from '@/api'
+import { storeData } from '@/api'
 import { mapState } from 'vuex'
 import { layoutImgMap } from '@/config/constant.js'
 
@@ -61,7 +61,7 @@ export default {
     useLayout(layout) {
       this.layout = layout.value
       this.mindMap.setLayout(layout.value)
-      storeConfig({
+      storeData({
         layout: layout.value
       })
     }

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

@@ -27,7 +27,7 @@
 
 <script>
 import Sidebar from './Sidebar.vue'
-import { storeConfig } from '@/api'
+import { storeData } from '@/api'
 import { mapState, mapMutations } from 'vuex'
 import themeImgMap from 'simple-mind-map-plugin-themes/themeImgMap'
 import themeList from 'simple-mind-map-plugin-themes/themeList'
@@ -175,7 +175,7 @@ export default {
     changeTheme(theme, config) {
       this.$bus.$emit('showLoading')
       this.mindMap.setTheme(theme.value)
-      storeConfig({
+      storeData({
         theme: {
           template: theme.value,
           config

web/src/store.js

@@ -1,13 +1,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import exampleData from 'simple-mind-map/example/exampleData'
 import { storeLocalConfig } from '@/api'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
-    mindMapData: null, // 思维导图数据
     isHandleLocalFile: false, // 是否操作的是本地文件
     localConfig: {
       // 本地配置
@@ -50,11 +48,6 @@ const store = new Vuex.Store({
     }
   },
   mutations: {
-    // 设置思维导图数据
-    setMindMapData(state, data) {
-      state.mindMapData = data
-    },
-
     // 设置操作本地文件标志位
     setIsHandleLocalFile(state, data) {
       state.isHandleLocalFile = data
@@ -146,23 +139,7 @@ const store = new Vuex.Store({
       state.isDragOutlineTreeNode = data
     }
   },
-  actions: {
+  actions: {}
-    // 设置初始思维导图数据
-    getUserMindMapData(ctx) {
-      try {
-        let { data } = {
-          data: {
-            data: {
-              mindMapData: exampleData
-            }
-          }
-        }
-        ctx.commit('setMindMapData', data.data)
-      } catch (error) {
-        console.log(error)
-      }
-    }
-  }
 })
 
 export default store