导入与导出

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

@@ -764,6 +764,7 @@ export default {
 
     // 动态设置思维导图数据
     setData(data) {
+      console.log('data ===>>>' , data)
       this.handleShowLoading()
       let rootNodeData = null
       if (data.root) {

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

@@ -235,6 +235,8 @@ export default {
 
     confirm() {
       this.setExtraTextOnExport(this.extraText)
+
+
       if (this.exportType === 'svg') {
         this.$bus.$emit(
           'export',
@@ -291,6 +293,15 @@ export default {
           }
         })
       } else {
+        
+      console.log('导出类型', {
+        exportType: this.exportType ,
+        fileName: this.fileName,
+        widthConfig: this.widthConfig,
+        isTransparent: this.isTransparent,
+      })
+
+      return
         this.$bus.$emit('export', this.exportType, true, this.fileName)
       }
       this.$notify.info({

web3/package.json

@@ -1,10 +1,12 @@
 {
 	"pnpm": {
 		"overrides": {
-			"simple-mind-map": "link:../../../../Library/pnpm/global/5/node_modules/simple-mind-map"
+			"simple-mind-map": "link:../../../../Library/pnpm/global/5/node_modules/simple-mind-map",
+			"@test/mind-map": "link:apps/web"
 		}
 	},
 	"dependencies": {
+		"@test/mind-map": "link:apps/web",
 		"pinia": "^2.1.6",
 		"pinia-plugin-persistedstate": "^4.2.0",
 		"simple-mind-map": "link:../../../../Library/pnpm/global/5/node_modules/simple-mind-map"

web3/packages/mind-map/src/components/ToolBar.vue

@@ -1,9 +1,13 @@
 <template>
     <div class="absolute w-full border flex flex-row gap-[24px]">
       <InsertChildNode/>
+      <ImportBtn/>
+      <ExportBtn/>
     </div>
 </template>
 
 <script lang="ts" setup>
 import InsertChildNode from "./ToolBar/InsertChildNode.vue";
+import ImportBtn from "./ToolBar/importBtn.vue";
+import ExportBtn from "./ToolBar/ExportBtn.vue";
 </script>

web3/packages/mind-map/src/components/ToolBar/ExportBtn.vue

@@ -0,0 +1,19 @@
+<!-- 插入子节点 -->
+<template>
+  <div
+    class="w-[80px] h-[80px] border flex flex-col items-center justify-center"
+    @click="
+      exportFile({
+        type: 'md',
+        fileName: 'mindMap',
+      })
+    "
+  >
+    导出
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMindMapStore } from "../../store/index";
+const { exportFile } = useMindMapStore();
+</script>

web3/packages/mind-map/src/components/ToolBar/ImportBtn.vue

@@ -0,0 +1,39 @@
+<!-- 导入文件 -->
+<template>
+  <div
+    class="w-[80px] h-[80px] border flex items-center justify-center cursor-pointer hover:bg-gray-100"
+    @click="triggerFileInput"
+  >
+    <input
+      ref="fileInputRef"
+      type="file"
+      class="hidden"
+      accept=".json,.xmind,.md,.txt"
+      @change="handleFileChange"
+    />
+    导入
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMindMapStore } from "../../store/index";
+
+import { ref } from "vue";
+
+const { importFile } = useMindMapStore();
+
+// 文件输入框引用
+const fileInputRef = ref<HTMLInputElement | null>(null);
+
+// 触发文件选择对话框
+const triggerFileInput = () => {
+  fileInputRef.value?.click();
+};
+
+// 处理文件选择变化
+async function handleFileChange(event: Event) {
+  const input = event.target as HTMLInputElement;
+  input.files?.[0] && (await importFile(input.files[0]));
+  input.value = "";
+}
+</script>

web3/packages/mind-map/src/components/ToolBar/InsertChildNode.vue

@@ -1,8 +1,6 @@
 <!-- 插入子节点 -->
 <template>
-
-<div class="w-[80px] h-[80px] border">子节点</div>
-
+<div class="w-[80px] h-[80px] border">新增子节点</div>
 </template>
 
 <script lang="ts" setup>

web3/packages/mind-map/src/store/helpers/export.ts

@@ -0,0 +1,15 @@
+import { useMindMapStore } from "../../store/index";
+
+// 导出文件
+
+export function exportFile(params: {
+    fileName: string, type : string
+}) {
+    if ( params.type === 'md' ) exportMarkdownFile(params.fileName);
+}
+
+// 导出 Markdown 文件
+export function exportMarkdownFile(fileName: string) {
+    const { getMindMapInstance } = useMindMapStore();
+    getMindMapInstance()?.export('md' , true , fileName);
+}

web3/packages/mind-map/src/store/helpers/import.ts

@@ -0,0 +1,49 @@
+// 导入文件
+
+import markdown from "simple-mind-map/src/parse/markdown";
+
+import { useMindMapStore } from "../../store/index";
+
+/**
+ * 导入文件
+ * @param file 要导入的文件对象
+ * @returns 文件内容
+ */
+export async function importFile(file: File) {
+    const fileType = file.type;
+    if (fileType === "text/markdown" || fileType === "text/plain") {
+        const data = await importMarkdownFile(file);
+        const { getMindMapInstance } = useMindMapStore();
+        getMindMapInstance()?.setData(data);
+    }
+}
+
+/**
+ * 导入 Markdown 文件
+ * @param file 要导入的文件对象
+ * @returns 文件内容
+ */
+export async function importMarkdownFile(file: File): Promise<string> {
+    
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const content = event.target?.result as string;
+        if (!content) {
+          return reject(new Error("文件内容为空"));
+        }
+        const data = markdown.transformMarkdownTo(content);
+        resolve(data);
+      } catch (error) {
+        console.error("Markdown 转换过程出错:", error);
+        reject(error || new Error("Markdown 转换失败"));
+      }
+    };
+    reader.onerror = (error) => {
+      console.error("文件读取失败:", error);
+      reject(error);
+    };
+    reader.readAsText(file);
+  });
+}

web3/packages/mind-map/src/store/helpers/usePlugin.ts

@@ -0,0 +1,14 @@
+// 注册插件
+
+import MindMap from "simple-mind-map";
+
+import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF'
+import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind'
+import Export from 'simple-mind-map/src/plugins/Export'
+
+export function usePlugins(MindMapConstructor: typeof MindMap) {
+  // 注册插件
+  MindMapConstructor.usePlugin(ExportPDF);
+  MindMapConstructor.usePlugin(ExportXMind);
+  MindMapConstructor.usePlugin(Export);
+}

web3/packages/mind-map/src/store/modules/mindMap.ts

@@ -1,20 +1,24 @@
 import { defineStore } from "pinia";
 import { ref, Ref } from "vue";
-import { data } from "./mockData";
+import { importFile } from "../helpers/import";
+import { exportFile } from "../helpers/export";
+import { usePlugins } from "../helpers/usePlugin";
 import MindMap from "simple-mind-map";
 
 // 使用 defineStore 创建 store
 export const useMindMapStore = defineStore(
   "mindMapStore",
   () => {
-    const mindMapInstance = ref<MindMap | null>(null);
+    let mindMapInstance : (MindMap | null) =null;
 
     const mindMapData = ref(null);
 
+    usePlugins(MindMap);
+
     function initMindMap(container: HTMLElement) {
-      mindMapInstance.value = new MindMap({
+      mindMapInstance = new MindMap({
         el: container,
-        data,
+        data : null,
         fit: false,
         nodeTextEditZIndex: 1000,
         nodeNoteTooltipZIndex: 1000,
@@ -27,9 +31,19 @@ export const useMindMapStore = defineStore(
     }
 
     
+
+    function getMindMapInstance (): MindMap | null {
+      return mindMapInstance;
+    }
+
+    
     return {
       mindMapInstance,
       mindMapData,
+      getMindMapInstance,
+
+      importFile,
+      exportFile,
 
       // func
       initMindMap,

web3/packages/mind-map/src/store/modules/mockData.ts

@@ -1 +0,0 @@
-export const data = {"root":{"data":{"text":"<p>根节点</p>","expand":true,"uid":"92261a2f-4e92-46c3-9da3-303974c8488c","richText":true,"isActive":false,"imgMap":{}},"children":[],"smmVersion":"0.14.0-fix.1"},"theme":{"template":"classic4","config":{}},"layout":"logicalStructure","view":{"transform":{"scaleX":1,"scaleY":1,"shear":0,"rotate":0,"translateX":-142,"translateY":-166,"originX":0,"originY":0,"a":1,"b":0,"c":0,"d":1,"e":-142,"f":-166},"state":{"scale":1,"x":-142,"y":-166,"sx":-142,"sy":-166}}};

web3/pnpm-lock.yaml

@@ -6,11 +6,15 @@ settings:
 
 overrides:
   simple-mind-map: link:../../../../Library/pnpm/global/5/node_modules/simple-mind-map
+  '@test/mind-map': link:apps/web
 
 importers:
 
   .:
     dependencies:
+      '@test/mind-map':
+        specifier: link:apps/web
+        version: link:apps/web
       pinia:
         specifier: ^2.1.6
         version: 2.3.1(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))