思维导图点击

src/components/CommonPreview.vue

@@ -179,7 +179,6 @@ export default {
       remark_list: [],
       remark_list_obj: {}, // 存放以组件为对象的数组
       visible: false,
-
       remark_content: '',
       submit_loading: false,
       isTrue,
@@ -376,8 +375,22 @@ export default {
       });
       this.visibleMindMap = true;
     },
-    handleNodeClick(data) {
-      console.log('子组件触发了事件', data); // 节点UID
+
+    async handleNodeClick(data) {
+      let [nodeId, componentId] = data.split('#');
+      if (nodeId) this.selectNode(nodeId);
+      if (componentId) {
+        let node = await this.$refs.courserware.findChildComponentByKey(componentId);
+        if (node) {
+          await this.$nextTick();
+          this.$refs.previewMain.scrollTo({
+            top: node.offsetTop - 50,
+            left: node.offsetLeft - 50,
+            behavior: 'smooth',
+          });
+        }
+      }
+      this.visibleMindMap = false;
     },
   },
 };

src/components/MindMap.vue

@@ -114,6 +114,8 @@ export default {
       if (!this.isEdit) {
         // 监听所有节点点击事件
         this.mindMap.on('node_click', (node) => {
+          console.log(node);
+
           // console.log('点击的节点:', node?.nodeData?.data?.text || '文本');
           this.$emit('child-click', `${node.uid}`);
         });

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -21,7 +21,12 @@
           <div :key="j" :class="['col', `col-${i}-${j}`]" :style="computedColStyle(col)">
             <!-- 网格 -->
             <template v-for="(grid, k) in col.grid_list">
-              <div :key="k" @contextmenu.prevent="handleContextMenu($event, grid.id)">
+              <div
+                :key="k"
+                ref="component"
+                :data-id="grid.id"
+                @contextmenu.prevent="handleContextMenu($event, grid.id)"
+              >
                 <component
                   :is="previewComponentList[grid.type]"
                   ref="preview"
@@ -300,6 +305,15 @@ export default {
         this.showMenu = false;
       }
     },
+    /**
+     * 查找子组件
+     * @param {string} id 组件的唯一标识符
+     * @returns {Promise<HTMLElement|null>} 返回找到的子组件或 null
+     */
+    async findChildComponentByKey(id) {
+      await this.$nextTick();
+      return this.$refs.component.find((child) => child.dataset.id === id);
+    },
   },
 };
 </script>
@@ -343,7 +357,7 @@ export default {
 
   .custom-context-menu {
     padding-left: 30px;
-    background: url("../../../../assets/icon-publish.png") left center no-repeat;
+    background: url('../../../../assets/icon-publish.png') left center no-repeat;
     background-size: 24px;
   }
 }