Comment implémenter la personnalisation du style de nœud et le changement d'apparence des cartes mentales à l'aide de Vue et jsmind ?

<template>
  <div id="jsmind_container"></div>
</template>

<script>
import jsMind from 'jsmind'
import 'jsmind/style/jsmind.css'

export default {
  mounted() {
    const container = document.getElementById('jsmind_container')
    const options = {
      theme: 'default', // 初始皮肤
      container,
      editable: true,
      shortcut: { enable: false }
    }
    const jm = new jsMind(options)

    // 自定义节点样式
    const topicStyles = {
      root: { background: '#FFCC99' },
      business: { background: '#66CCFF' },
      development: { background: '#66FF99' },
      design: { background: '#FF99CC' }
    }

    // 皮肤切换
    const skinStyles = {
      default: {},
      dark: { background: '#333', color: '#fff' },
      light: { background: '#fff', color: '#333' },
      blue: { background: '#66CCFF', color: '#fff' }
    }

    jm.add_theme('custom', topicStyles)
    jm.add_theme('skins', skinStyles)

    jm.init()
    jm.show()
    this.jm = jm
  }
}
</script>

<template>
  <div id="jsmind_container"></div>
</template>

<script>
export default {
  mounted() {
    // 省略其他内容...
    const options = {
      // 省略其他配置...
      mode: 'full',
      default_event_handle: {
        enable_mousedown_handle: false
      },
      event_handle: {
        click_element_handle: (el) => {
          this.handleNodeClick(el)
        },
        mouse_over_handle: (el) => {
          this.handleNodeHover(el)
        },
        mouse_leave_handle: () => {
          this.handleNodeLeave()
        }
      }
    }

    // 省略其他内容...
  },
  methods: {
    handleNodeClick(el) {
      const nodeId = el.getAttribute('nodeid')
      const nodeData = this.jm.get_node(nodeId)
      // 处理节点点击事件...
    },
    handleNodeHover(el) {
      const nodeId = el.getAttribute('nodeid')
      const nodeData = this.jm.get_node(nodeId)
      // 处理节点悬停事件...
    },
    handleNodeLeave() {
      // 处理节点离开事件...
    }
  }
}
</script>