store

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

@@ -1,12 +0,0 @@
-<template>
-  <div class="mind-map bg-black rounded-lg shadow-md p-4 w-full h-64">
-    <!-- 这是一个最小化的思维导图实现，只包含一个简单的div -->
-    <div class="flex items-center justify-center h-full text-gray-500">
-      Mind Map Component
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-// 组件逻辑可以在这里添加
-</script>

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

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

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

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

web3/packages/mind-map/src/store/index.ts

@@ -0,0 +1,14 @@
+import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+
+// 创建 pinia 实例
+const pinia = createPinia();
+
+// 使用持久化插件
+pinia.use(piniaPluginPersistedstate);
+
+// 导出 pinia 实例
+export default pinia;
+
+// 导出所有 store 模块
+export * from './modules/mindMap';

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

@@ -0,0 +1,44 @@
+import { defineStore } from "pinia";
+import { ref, Ref } from "vue";
+import { data } from "./mockData";
+import MindMap from "simple-mind-map";
+
+// 使用 defineStore 创建 store
+export const useMindMapStore = defineStore(
+  "mindMapStore",
+  () => {
+    const mindMapInstance = ref<MindMap | null>(null);
+
+    const mindMapData = ref(null);
+
+    function initMindMap(container: HTMLElement) {
+      mindMapInstance.value = new MindMap({
+        el: container,
+        data,
+        fit: false,
+        nodeTextEditZIndex: 1000,
+        nodeNoteTooltipZIndex: 1000,
+        openRealtimeRenderOnNodeTextEdit: true,
+        enableAutoEnterTextEditWhenKeydown: true,
+        demonstrateConfig: {
+          openBlankMode: true
+        },
+      });
+    }
+
+    
+    return {
+      mindMapInstance,
+      mindMapData,
+
+      // func
+      initMindMap,
+    };
+  },
+  {
+    // 持久化配置
+    persist: {
+      storage: window.localStorage,
+    },
+  }
+);

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

@@ -0,0 +1 @@
+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}}};