Demo：支持添加附件内容（在线Demo不开放）

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1711536835850') format('woff2'),
+  src: url('iconfont.woff2?t=1711935414521') format('woff2'),
-       url('iconfont.woff?t=1711536835850') format('woff'),
+       url('iconfont.woff?t=1711935414521') format('woff'),
-       url('iconfont.ttf?t=1711536835850') format('truetype');
+       url('iconfont.ttf?t=1711935414521') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconfujian:before {
+  content: "\e88a";
+}
+
 .icongeshihua:before {
   content: "\e7a3";
 }

web/src/lang/en_us.js

@@ -259,6 +259,7 @@ export default {
     associativeLine: 'Associative line',
     painter: 'Painter',
     formula: 'Formula',
+    attachment: 'Attachment',
     more: 'More',
     selectFileTip: 'Please select a file',
     notSupportTip:
@@ -331,5 +332,8 @@ export default {
     formatErrorTip: 'The JSON format is incorrect. Please check and try again',
     copyTip: 'Copied to clipboard',
     formatTip: 'Format complete'
+  },
+  attachment: {
+    deleteAttachment: 'Delete attachment'
   }
 }

web/src/lang/zh_cn.js

@@ -256,6 +256,7 @@ export default {
     associativeLine: '关联线',
     painter: '格式刷',
     formula: '公式',
+    attachment: '附件',
     more: '更多',
     selectFileTip: '请选择文件',
     notSupportTip: '你的浏览器不支持该功能，或者当前页面非https协议',
@@ -325,5 +326,8 @@ export default {
     formatErrorTip: 'JSON格式有误，请检查后再试',
     copyTip: '已复制到剪贴板',
     formatTip: '格式化完成'
+  },
+  attachment: {
+    deleteAttachment: '删除附件'
   }
 }

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

@@ -221,6 +221,7 @@ export default {
     this.$bus.$on('expand_btn_click', this.hide)
     this.$bus.$on('svg_mousedown', this.onMousedown)
     this.$bus.$on('mouseup', this.onMouseup)
+    this.$bus.$on('translate', this.hide)
   },
   beforeDestroy() {
     this.$bus.$off('node_contextmenu', this.show)
@@ -229,6 +230,7 @@ export default {
     this.$bus.$off('expand_btn_click', this.hide)
     this.$bus.$off('svg_mousedown', this.onMousedown)
     this.$bus.$off('mouseup', this.onMouseup)
+    this.$bus.$off('translate', this.hide)
   },
   methods: {
     ...mapMutations(['setLocalConfig']),

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

@@ -16,6 +16,7 @@
       v-if="mindMap"
       :mindMap="mindMap"
     ></NodeNoteContentShow>
+    <NodeAttachment v-if="mindMap" :mindMap="mindMap"></NodeAttachment>
     <NodeImgPreview v-if="mindMap" :mindMap="mindMap"></NodeImgPreview>
     <SidebarTrigger v-if="!isZenMode"></SidebarTrigger>
     <Search v-if="mindMap" :mindMap="mindMap"></Search>
@@ -85,6 +86,7 @@ import Scrollbar from './Scrollbar.vue'
 import exampleData from 'simple-mind-map/example/exampleData'
 import FormulaSidebar from './FormulaSidebar.vue'
 import SourceCodeEdit from './SourceCodeEdit.vue'
+import NodeAttachment from './NodeAttachment.vue'
 
 // 注册插件
 MindMap.usePlugin(MiniMap)
@@ -137,7 +139,8 @@ export default {
     OutlineEdit,
     Scrollbar,
     FormulaSidebar,
-    SourceCodeEdit
+    SourceCodeEdit,
+    NodeAttachment
   },
   data() {
     return {
@@ -491,7 +494,10 @@ export default {
         'painter_start',
         'painter_end',
         'scrollbar_change',
-        'scale'
+        'scale',
+        'translate',
+        'node_attachmentClick',
+        'node_attachmentContextmenu'
       ].forEach(event => {
         this.mindMap.on(event, (...args) => {
           this.$bus.$emit(event, ...args)

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

@@ -0,0 +1,133 @@
+<template>
+  <div
+    class="nodeAttachmentContextMenu"
+    :style="{
+      left: this.left + 'px',
+      top: this.top + 'px',
+      visibility: show ? 'visible' : 'hidden'
+    }"
+    @click.stop="deleteAttachment"
+  >
+    <div class="menuItem">{{ $t('attachment.deleteAttachment') }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    mindMap: {
+      type: Object,
+      default() {
+        return null
+      }
+    }
+  },
+  data() {
+    return {
+      show: false,
+      left: 0,
+      top: 0,
+      node: null,
+      icon: null
+    }
+  },
+  created() {
+    this.$bus.$on('node_attachmentClick', this.onNodeAttachmentClick)
+    this.$bus.$on('selectAttachment', this.onSelectAttachment)
+    this.$bus.$on(
+      'node_attachmentContextmenu',
+      this.onNodeAttachmentContextmenu
+    )
+    this.$bus.$on('hide', this.hide)
+    document.body.addEventListener('click', this.hide)
+    this.$bus.$on('node_active', this.hide)
+    this.$bus.$on('scale', this.onScale)
+    this.$bus.$on('translate', this.onScale)
+    this.$bus.$on('svg_mousedown', this.hide)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_attachmentClick', this.onNodeAttachmentClick)
+    this.$bus.$off('selectAttachment', this.onSelectAttachment)
+    this.$bus.$off(
+      'node_attachmentContextmenu',
+      this.onNodeAttachmentContextmenu
+    )
+    this.$bus.$off('hide', this.hide)
+    document.body.removeEventListener('click', this.hide)
+    this.$bus.$off('node_active', this.hide)
+    this.$bus.$off('scale', this.onScale)
+    this.$bus.$off('translate', this.onScale)
+    this.$bus.$off('svg_mousedown', this.hide)
+  },
+  methods: {
+    // 选择附件
+    onSelectAttachment(activeNodes) {
+      // activeNodes.forEach(node => {
+      //   node.setAttachment('/test.md', '我去')
+      // })
+    },
+
+    // 点击附件图标，一般用来打开或下载附件
+    onNodeAttachmentClick(node, e, icon) {
+      // console.log(node.getData('attachmentUrl'))
+    },
+
+    // 显示删除浮层
+    onNodeAttachmentContextmenu(node, e, icon) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.node = node
+      this.icon = icon
+      this.updatePosition()
+      this.show = true
+    },
+
+    // 更新位置
+    updatePosition() {
+      const iconSize = this.mindMap.themeConfig.iconSize
+      const { x, y } = this.icon.rbox()
+      this.left = x + iconSize
+      this.top = y
+    },
+
+    // 画布缩放事件
+    onScale() {
+      console.log(1)
+      if (!this.node || !this.show) return
+      this.updatePosition()
+    },
+
+    // 删除附件
+    deleteAttachment() {
+      if (!this.node || !this.show) return
+      this.node.setAttachment('', '')
+      this.hide()
+    },
+
+    // 隐藏浮层
+    hide() {
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.nodeAttachmentContextMenu {
+  position: fixed;
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+
+  .menuItem {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #1a1a1a;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+</style>

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

@@ -37,6 +37,7 @@ export default {
     document.body.addEventListener('click', this.hideNoteContent)
     this.$bus.$on('node_active', this.hideNoteContent)
     this.$bus.$on('scale', this.onScale)
+    this.$bus.$on('translate', this.onScale)
     this.$bus.$on('svg_mousedown', this.hideNoteContent)
   },
   mounted() {
@@ -48,6 +49,7 @@ export default {
     document.body.removeEventListener('click', this.hideNoteContent)
     this.$bus.$off('node_active', this.hideNoteContent)
     this.$bus.$off('scale', this.onScale)
+    this.$bus.$off('translate', this.onScale)
     this.$bus.$off('svg_mousedown', this.hideNoteContent)
   },
   methods: {
@@ -97,6 +99,8 @@ export default {
   border-radius: 5px;
   max-height: 300px;
   overflow-y: auto;
+  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.06);
 
   &::-webkit-scrollbar {
     width: 7px;

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

@@ -178,6 +178,7 @@ export default {
         'summary',
         'associativeLine',
         'formula'
+        // 'attachment'
       ],
       horizontalList: [],
       verticalList: [],

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

@@ -156,6 +156,17 @@
         <span class="icon iconfont icongongshi"></span>
         <span class="text">{{ $t('toolbar.formula') }}</span>
       </div>
+      <div
+        v-if="item === 'attachment'"
+        class="toolbarBtn"
+        :class="{
+          disabled: activeNodes.length <= 0 || hasGeneralization
+        }"
+        @click="selectAttachmentFile"
+      >
+        <span class="icon iconfont iconfujian"></span>
+        <span class="text">{{ $t('toolbar.attachment') }}</span>
+      </div>
     </template>
   </div>
 </template>
@@ -258,6 +269,11 @@ export default {
     // 打开公式侧边栏
     showFormula() {
       this.setActiveSidebar('formulaSidebar')
+    },
+
+    // 选择附件
+    selectAttachmentFile() {
+      this.$bus.$emit('selectAttachment', this.activeNodes)
     }
   }
 }