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

2026-02-17 14:04:47 +08:00 · 2025-03-12 09:59:14 +08:00
parent 45418d803c
commit 0f6f714303
11 changed files with 87 additions and 108 deletions
--- a/simple-mind-map/example/exampleData.js
+++ b/simple-mind-map/example/exampleData.js
@@ -932,6 +932,5 @@ export default {
    "layout": "logicalStructure",
    // "layout": "mindMap",
    // "layout": "catalogOrganization"
-    // "layout": "organizationStructure",
-    "config": {}
+    // "layout": "organizationStructure"
 }
--- a/web/public/index.html
+++ b/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
--- a/web/src/api/index.js
+++ b/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, dataStr)
+    localStorage.setItem(SIMPLE_MIND_MAP_DATA, JSON.stringify(originData))
  } 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
-    } else {
-      originData = getData()
-    }
-    originData = {
-      ...originData,
-      ...config
-    }
-    if (window.takeOverApp) {
-      mindMapData = originData
-      window.takeOverAppMethods.saveMindMapData(originData)
+      window.takeOverAppMethods.saveMindMapConfig(config)
      return
    }
-    Vue.prototype.$bus.$emit('write_local_file', originData)
-    if (vuexStore.state.isHandleLocalFile) {
-      return
-    }
-    let dataStr = JSON.stringify(originData)
-    localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
+    localStorage.setItem(SIMPLE_MIND_MAP_CONFIG, JSON.stringify(config))
  } 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()
--- a/web/src/pages/Edit/Index.vue
+++ b/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']),

    // 初始化本地配置
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/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],
-      default: null
+      type: [Object, 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({
-        config: this.data.config
-      })
+      storeConfig(this.configData)
    },

    // 更新外框
    updateOuterFramePadding(prop, value) {
      this.outerFramePadding[prop] = value
-      this.data.config = this.data.config || {}
-      this.data.config[prop] = value
+      this.configData[prop] = value
      this.mindMap.updateConfig({
        [prop]: value
      })
-      storeConfig({
-        config: this.data.config
-      })
+      storeConfig(this.configData)
      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
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/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 = storeData
+      this.mindMapData = getData()
+      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)
-      storeConfig(data)
+      storeData(this.mindMap.getData(true))
    },

    // 初始化
    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()
--- a/web/src/pages/Edit/components/OutlineEdit.vue
+++ b/web/src/pages/Edit/components/OutlineEdit.vue
@@ -282,7 +282,9 @@ export default {

    // 保存
    save() {
-      storeData(this.getData())
+      storeData({
+        root: this.getData()
+      })
    }
  }
 }
--- a/web/src/pages/Edit/components/Setting.vue
+++ b/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: {
-      type: [Object, null],
+    configData: {
+      type: Object,
      default: null
    },
    mindMap: {
@@ -514,11 +514,8 @@ export default {
      this.mindMap.updateConfig({
        [key]: value
      })
-      this.data.config = this.data.config || {}
-      this.data.config[key] = value
-      storeConfig({
-        config: this.data.config
-      })
+      this.configData[key] = value
+      storeConfig(this.configData)
      if (
        [
          'alwaysShowExpandBtn',
@@ -539,13 +536,10 @@ export default {
        this.mindMap.watermark.updateWatermark({
          ...config
        })
-        this.data.config = this.data.config || {}
-        this.data.config.watermarkConfig = this.mindMap.getConfig(
+        this.configData.watermarkConfig = this.mindMap.getConfig(
          'watermarkConfig'
        )
-        storeConfig({
-          config: this.data.config
-        })
+        storeConfig(this.configData)
      }, 300)
    },

--- a/web/src/pages/Edit/components/Structure.vue
+++ b/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
      })
    }
--- a/web/src/pages/Edit/components/Theme.vue
+++ b/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
--- a/web/src/store.js
+++ b/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: {
-    // 设置初始思维导图数据
-    getUserMindMapData(ctx) {
-      try {
-        let { data } = {
-          data: {
-            data: {
-              mindMapData: exampleData
-            }
-          }
-        }
-        ctx.commit('setMindMapData', data.data)
-      } catch (error) {
-        console.log(error)
-      }
-    }
-  }
+  actions: {}
 })

 export default store