Demo:支持添加和删除节点链接

web/src/lang/en_us.js

@@ -139,7 +139,10 @@ export default {
     unExpandNodeChild: 'Un expand all sub nodes',
     addToDo: 'Add toDo',
     removeToDo: 'Remove toDo',
-    aiCreate: 'AI Continuation'
+    aiCreate: 'AI Continuation',
+    modifyNodeLink: 'Modify node link',
+    linkToNode: 'Link to node',
+    removeNodeLink: 'Remove node link'
   },
   count: {
     words: 'Words',
@@ -172,7 +175,8 @@ export default {
     addFooterText: 'Add text at the footer',
     desc: 'Desc',
     options: 'Options',
-    isFitBg: 'Whether to display the complete background image (effective when a background image is used)',
+    isFitBg:
+      'Whether to display the complete background image (effective when a background image is used)',
     format: 'Format'
   },
   fullscreen: {
@@ -511,5 +515,14 @@ export default {
   },
   note: {
     title: 'Note'
+  },
+  nodeLink: {
+    linkToNode: 'Link to node',
+    addReturn: 'Weather to add a backlink',
+    tip1: 'Please select the node to link to',
+    tip2: 'Cannot link to oneself',
+    tip3: 'Link successful',
+    tip4: 'Delete successful',
+    tip5: 'The link node does not exist. Weather to delete the link?'
   }
 }

web/src/lang/zh_cn.js

@@ -135,7 +135,10 @@ export default {
     unExpandNodeChild: '收起所有下级节点',
     addToDo: '添加待办',
     removeToDo: '删除待办',
-    aiCreate: 'AI续写'
+    aiCreate: 'AI续写',
+    modifyNodeLink: '修改节点链接',
+    linkToNode: '链接到指定节点',
+    removeNodeLink: '删除节点链接'
   },
   count: {
     words: '字数',
@@ -493,5 +496,14 @@ export default {
   },
   note: {
     title: '备注'
+  },
+  nodeLink: {
+    linkToNode: '链接到指定节点',
+    addReturn: '是否添加反向链接',
+    tip1: '请选择要链接到的节点',
+    tip2: '不能链接自己',
+    tip3: '链接成功',
+    tip4: '删除成功',
+    tip5: '链接节点不存在，是否删除该链接？'
   }
 }

web/src/lang/zh_tw.js

@@ -136,7 +136,10 @@ export default {
     unExpandNodeChild: '收起所有下級節點',
     addToDo: '添加待辦',
     removeToDo: '刪除待辦',
-    aiCreate: 'AI續寫'
+    aiCreate: 'AI續寫',
+    modifyNodeLink: '修改節點鏈接',
+    linkToNode: '鏈接到指定節點',
+    removeNodeLink: '刪除節點鏈接'
   },
   count: {
     words: '字數',
@@ -493,5 +496,14 @@ export default {
   },
   note: {
     title: '備註'
+  },
+  nodeLink: {
+    linkToNode: '鏈接到指定節點',
+    addReturn: '是否添加反向鏈接',
+    tip1: '請選擇要鏈接到的節點',
+    tip2: '不能鏈接自己',
+    tip3: '鏈接成功',
+    tip4: '刪除成功',
+    tip5: '鏈接節點不存在，是否刪除該鏈接？'
   }
 }

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

@@ -135,7 +135,14 @@
         <span class="name">{{ $t('contextmenu.removeNote') }}</span>
       </div>
       <div class="item" @click="exec('LINK_NODE')">
-        <span class="name">链接到指定节点</span>
+        <span class="name">{{
+          hasNodeLink
+            ? $t('contextmenu.modifyNodeLink')
+            : $t('contextmenu.linkToNode')
+        }}</span>
+      </div>
+      <div class="item" @click="exec('REMOVE_LINK_NODE')" v-if="hasNodeLink">
+        <span class="name">{{ $t('contextmenu.removeNodeLink') }}</span>
       </div>
       <div class="item" @click="exec('REMOVE_CUSTOM_STYLES')">
         <span class="name">{{ $t('contextmenu.removeCustomStyles') }}</span>
@@ -338,6 +345,9 @@ export default {
     },
     hasCheckbox() {
       return !!this.node.getData('checkbox')
+    },
+    hasNodeLink() {
+      return !!this.node.getData('nodeLink')
     }
   },
   created() {
@@ -485,6 +495,9 @@ export default {
           this.$bus.$emit('show_link_node', this.node)
           this.hide()
           break
+        case 'REMOVE_LINK_NODE':
+          this.$bus.$emit('execCommand', 'SET_NODE_LINK', this.node, null)
+          break
         case 'EXPORT_CUR_NODE_TO_PNG':
           this.mindMap.export(
             'png',

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

@@ -1,15 +1,15 @@
 <template>
   <el-dialog
     class="nodeLinkSelectDialog"
-    title="链接到指定节点"
+    :title="$t('nodeLink.linkToNode')"
     :visible.sync="dialogVisible"
     :show-close="false"
     append-to-body
     width="400px"
   >
-    <div class="nodeTreeWrap">
+    <div class="nodeTreeWrap customScrollbar">
       <el-tree
-        ref="tree"
+        ref="treeRef"
         class="outlineTree"
         node-key="uid"
         default-expand-all
@@ -23,10 +23,10 @@
       </el-tree>
     </div>
     <div slot="footer" class="footer">
-      <el-checkbox v-model="isAddReturn" style="margin-right: auto;">是否添加反向链接</el-checkbox>
+      <el-checkbox v-model="isAddReturn" style="margin-right: auto;">{{
-      <el-button  @click="cancel">{{
+        $t('nodeLink.addReturn')
-        $t('dialog.cancel')
+      }}</el-checkbox>
-      }}</el-button>
+      <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
       <el-button type="primary" @click="confirm">{{
         $t('dialog.confirm')
       }}</el-button>
@@ -66,9 +66,11 @@ export default {
   },
   created() {
     this.$bus.$on('show_link_node', this.onShowDialog)
+    this.mindMap.on('node_link_not_find', this.onNodeLinkNotFind)
   },
   beforeDestroy() {
     this.$bus.$off('show_link_node', this.onShowDialog)
+    this.mindMap.off('node_link_not_find', this.onNodeLinkNotFind)
   },
   methods: {
     onShowDialog(node) {
@@ -91,6 +93,12 @@ export default {
       walk(data)
       this.treeData = [data]
       this.dialogVisible = true
+      this.$nextTick(() => {
+        const linkUid = node.getData('nodeLink')
+        if (linkUid) {
+          this.$refs.treeRef.setCurrentKey(linkUid)
+        }
+      })
     },
 
     close() {
@@ -112,11 +120,11 @@ export default {
 
     confirm() {
       if (!this.currentNodeData) {
-        this.$message.warning('请选择要链接到的节点')
+        this.$message.warning(this.$t('nodeLink.tip1'))
         return
       }
       if (this.currentNodeData.uid === this.node.getData('uid')) {
-        this.$message.warning('不能链接自己')
+        this.$message.warning(this.$t('nodeLink.tip2'))
         return
       }
       this.$bus.$emit(
@@ -126,8 +134,22 @@ export default {
         this.currentNodeData.uid,
         this.isAddReturn
       )
-      this.$message.success('链接成功')
+      this.$message.success(this.$t('nodeLink.tip3'))
       this.close()
+    },
+
+    onNodeLinkNotFind(node) {
+      this.$confirm(this.$t('nodeLink.tip5'), this.$t('edit.tip'), {
+        confirmButtonText: this.$t('setting.confirm'),
+        cancelButtonText: this.$t('setting.cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$bus.$emit('execCommand', 'SET_NODE_LINK', node, null)
+        this.$message({
+          type: 'success',
+          message: this.$t('nodeLink.tip4')
+        })
+      })
     }
   }
 }

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

@@ -49,11 +49,24 @@ export default {
   computed: {
     ...mapState({
       isDark: state => state.localConfig.isDark,
-      activeSidebar: state => state.activeSidebar
+      activeSidebar: state => state.activeSidebar,
+      supportRightFishbone: state => state.supportRightFishbone
     }),
 
     layoutGroupList() {
-      return layoutGroupList[this.$i18n.locale] || layoutGroupList.zh
+      const groupList = layoutGroupList[this.$i18n.locale] || layoutGroupList.zh
+      return groupList.map(group => {
+        let list = [...group.list]
+        if (!this.supportRightFishbone) {
+          list = list.filter(item => {
+            return !['rightFishbone', 'rightFishbone2'].includes(item)
+          })
+        }
+        return {
+          name: group.name,
+          list
+        }
+      })
     }
   },
   watch: {