如何通过Vue和jsmind实现思维导图的节点连接方式和层级关系的管理？

npm install vue

npm install jsmind

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/jsmind"></script>

<template>
  <div>
    <div ref="jsmindContainer"></div>
    <button @click="addChildNode">添加子节点</button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 创建jsmind实例
    const jsmindInstance = new jsmind(this.$refs.jsmindContainer);

    // 创建根节点
    const rootNode = {
      id: 'root',
      isroot: true,
      topic: '思维导图',
      children: [],
    }

    // 初始化jsmind
    jsmindInstance.show();
    jsmindInstance.shoot(rootNode);
  },
  methods: {
    addChildNode() {
      // 获取jsmind实例
      const jsmindInstance = jsmind.findInstance(this.$refs.jsmindContainer);

      // 获取根节点
      const rootNode = jsmindInstance.get_data('node_tree');

      // 创建新的子节点
      const newChildNode = {
        id: 'child1',
        topic: '子节点1',
        direction: 'right',
        children: [],
      };

      // 添加子节点
      jsmind.add_node(rootNode, newChildNode);

      // 刷新jsmind
      jsmindInstance.update_node();
    }
  }
}
</script>