openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
KuroSago 2025-05-12 14:54:16 +08:00
parent 94d4e819e0
commit 52395c43ff
8 changed files with 87 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web3/apps/web/src/views/Home.vue
View File

@ -1,15 +1,30 @@
<template>
<div class="h-screen p-6 bg-gradient-to-br from-gray-50 to-gray-100">
<MindMap />
<MindMap
@onDel="onDel"
@onAddChild="onAddChild"
@onEdit="onEdit"
/>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
import { MindMap } from "@mind-map/component";
import type { MindMapNode } from "@mind-map/component";
onMounted(() => {
console.log("Home view mounted");
});
function onDel (node : MindMapNode) {
console.log("Node deleted:", node);
};
function onAddChild (node : MindMapNode) {
console.log("Child node added:", node);
};
function onEdit (node : MindMapNode) {
console.log("Node edited:", node);
};
</script>

1
web3/packages/mind-map/src/components/ToolBar/LayoutGroup.vue
View File

@ -1,7 +1,6 @@
<!-- 布局 -->
<template>
<div>
{{ currentLayout }}
<select
v-model="currentLayout"
@change="

14
web3/packages/mind-map/src/index.ts
View File

@ -1,14 +1,18 @@
import { App } from 'vue';
// import { App } from 'vue';
// import pinia from './store';
import MindMap from './views/index.vue';
import pinia from './store';
import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMapNode";
export { MindMap };
export * from './store';
export type { MindMapNode };
export function installMindMap(app: App) {
app.use(pinia);
}
// export function installMindMap(app: App) {
// app.use(pinia);
// }

54
web3/packages/mind-map/src/store/helpers/keyCommand.ts
View File

@ -8,10 +8,52 @@ export function keyCommand(MindMapConstructor: MindMap) {
// 移除指令
export function removeKeyCommand(MindMapConstructor: MindMap) {
// console.log('移除指令 =>' , keyMap)
// Backspace // Tab // Enter
MindMapConstructor?.keyCommand?.removeShortcut('Tab' , null)
MindMapConstructor?.keyCommand?.removeShortcut('Enter' , null)
MindMapConstructor?.keyCommand?.removeShortcut('Backspace' , null)
// MindMapConstructor?.keyCommand?.pause();
// console.log('移除指令 =>' , keyMap)
MindMapConstructor?.keyCommand?.removeShortcut("Tab", null);
MindMapConstructor?.keyCommand?.removeShortcut("Enter", null);
MindMapConstructor?.keyCommand?.removeShortcut("Backspace", null);
// 移除回退快捷键
// name: '回退', value: 'Control + z'
MindMapConstructor?.keyCommand?.removeShortcut("Control+z", null);
// 移除前进快捷键
// name: '前进', value: 'Control + y'
MindMapConstructor?.keyCommand?.removeShortcut("Control+y", null);
// 移除剪切节点快捷键
// name: '剪切节点', value: 'Control + x'
MindMapConstructor?.keyCommand?.removeShortcut("Control+x", null);
// 移除复制节点快捷键
// name: '复制节点', value: 'Control + c'
MindMapConstructor?.keyCommand?.removeShortcut("Control+c", null);
// 移除粘贴节点快捷键
// name: '粘贴节点', value: 'Control + v'
MindMapConstructor?.keyCommand?.removeShortcut("Control+v", null);
// 移除仅删除当前节点快捷键
// name: '仅删除当前节点', value: 'Shift + Backspace'
MindMapConstructor?.keyCommand?.removeShortcut("Shift+Backspace", null);
// 移除删除节点快捷键
// name: '删除节点', value: 'Delete | Backspace'
MindMapConstructor?.keyCommand?.removeShortcut("Del", null);
MindMapConstructor?.keyCommand?.removeShortcut("Backspace", null);
// 移除插入父节点快捷键
// name: '插入父节点', value: 'Shift + Tab'
MindMapConstructor?.keyCommand?.removeShortcut("Shift+Tab", null);
// 移除上移节点快捷键
// name: '上移节点', value: 'Control + Up'
MindMapConstructor?.keyCommand?.removeShortcut("Control+Up", null);
// 移除下移节点快捷键
// name: '下移节点', value: 'Control + Down'
MindMapConstructor?.keyCommand?.removeShortcut("Control+Down", null);
}

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

@ -72,7 +72,7 @@ function defineStoreImplementation() {
createNewNodeBehavior: "activeOnly", // 插入新节点的行为 // activeOnly - 只新建激活不编辑
isUseCustomNodeContent: true, // 是否使用自定义节点内容
// 添加自定义节点内容
addCustomContentToNode: getCustomNodeContent({
allowRemoveWithChildren: false,
del: (node: MindMapNode) => {
@ -170,15 +170,11 @@ function defineStoreImplementation() {
// 导出带有参数的 useMindMapStore 函数
export function useMindMapStore(options?: MindMapCallbacks) {
if (!storeInstance) {
storeInstance = defineStoreImplementation();
}
if (!storeInstance) storeInstance = defineStoreImplementation();
const store = storeInstance();
if (options) {
store.setCallbacks(options);
}
if (options) store.setCallbacks(options);
return store;
}

76
web3/packages/mind-map/src/styles/theme.css
View File

@ -1,76 +0,0 @@
:root {
--background: 255, 255, 255; /* 白色背景 */
--foreground: 15, 23, 42; /* 深灰色文字 */
--border: 226, 232, 240; /* 浅灰色边框 */
--input: 226, 232, 240; /* 浅灰色输入框 */
--ring: 148, 163, 184; /* 中灰色环 */
/* 主色调 - 蓝色系 */
--primary: 37, 99, 235; /* 蓝色 */
--primary-foreground: 255, 255, 255; /* 白色文字在主色背景上 */
--primary-hover: 29, 78, 216; /* 深蓝色悬浮状态 */
--primary-active: 30, 64, 175; /* 更深蓝色点击状态 */
/* 次要色调 - 灰色系 */
--secondary: 241, 245, 249; /* 浅灰色 */
--secondary-foreground: 15, 23, 42; /* 深灰色文字 */
/* 销毁/错误色调 - 红色系 */
--destructive: 239, 68, 68; /* 红色 */
--destructive-foreground: 255, 255, 255; /* 白色文字 */
/* 柔和色调 - 灰色系 */
--muted: 241, 245, 249; /* 浅灰色 */
--muted-foreground: 100, 116, 139; /* 中灰色文字 */
/* 强调色调 - 灰蓝色 */
--accent: 243, 244, 246; /* 灰蓝色 */
--accent-foreground: 15, 23, 42; /* 深灰色文字 */
/* 弹出层 */
--popover: 255, 255, 255; /* 白色背景 */
--popover-foreground: 15, 23, 42; /* 深灰色文字 */
/* 卡片 */
--card: 255, 255, 255; /* 白色背景 */
--card-foreground: 15, 23, 42; /* 深灰色文字 */
}
/* 暗色主题 */
.dark {
--background: 15, 23, 42; /* 深蓝黑色背景 */
--foreground: 241, 245, 249; /* 浅灰色文字 */
--border: 51, 65, 85; /* 深灰色边框 */
--input: 51, 65, 85; /* 深灰色输入框 */
--ring: 148, 163, 184; /* 中灰色环 */
/* 主色调 - 蓝色系 */
--primary: 59, 130, 246; /* 蓝色 */
--primary-foreground: 255, 255, 255; /* 白色文字 */
--primary-hover: 96, 165, 250; /* 亮蓝色悬浮状态 */
--primary-active: 147, 197, 253; /* 更亮蓝色点击状态 */
/* 次要色调 - 深灰色系 */
--secondary: 51, 65, 85; /* 深灰色 */
--secondary-foreground: 241, 245, 249; /* 浅灰色文字 */
/* 销毁/错误色调 - 红色系 */
--destructive: 248, 113, 113; /* 亮红色 */
--destructive-foreground: 15, 23, 42; /* 深色文字 */
/* 柔和色调 - 深灰色系 */
--muted: 51, 65, 85; /* 深灰色 */
--muted-foreground: 148, 163, 184; /* 中灰色文字 */
/* 强调色调 - 深灰蓝色 */
--accent: 51, 65, 85; /* 深灰蓝色 */
--accent-foreground: 241, 245, 249; /* 浅灰色文字 */
/* 弹出层 */
--popover: 15, 23, 42; /* 深蓝黑色背景 */
--popover-foreground: 241, 245, 249; /* 浅灰色文字 */
/* 卡片 */
--card: 15, 23, 42; /* 深蓝黑色背景 */
--card-foreground: 241, 245, 249; /* 浅灰色文字 */
}

4
web3/packages/mind-map/src/types/index.d.ts vendored
View File

@ -2,7 +2,6 @@ declare module 'simple-mind-map' {
import MindMap from 'simple-mind-map/types/index';
export default MindMap
}
declare module 'simple-mind-map/src/plugins/ExportPDF' {
import ExportPDF from 'simple-mind-map/types/src/plugins/ExportPDF';
export default ExportPDF;
@ -12,12 +11,10 @@ declare module 'simple-mind-map/src/plugins/ExportXMind' {
import ExportXMind from 'simple-mind-map/types/src/plugins/ExportXMind';
export default ExportXMind;
}
declare module 'simple-mind-map/src/plugins/Export' {
import Export from 'simple-mind-map/types/src/plugins/Export';
export default Export;
}
declare module 'simple-mind-map/src/parse/markdown' {
import markdown from 'simple-mind-map/types/src/parse/markdown';
export default markdown;
@ -26,7 +23,6 @@ declare module 'simple-mind-map/src/plugins/MindMapLayoutPro' {
import MindMapLayoutPro from 'simple-mind-map/types/src/plugins/MindMapLayoutPro';
export default MindMapLayoutPro;
}
declare module 'simple-mind-map/src/utils' {
import * as utils from 'simple-mind-map/types/src/utils';
export = utils;

14
web3/packages/mind-map/src/views/index.vue
View File

@ -17,15 +17,23 @@ import ToolBar from "../components/ToolBar.vue";
import { useMindMapStore } from "../store/index";
import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMapNode";
type Emits = {
(e: "onDel", node: MindMapNode): void;
(e: "onAddChild", node: MindMapNode): void;
(e: "onEdit", node: MindMapNode): void;
}
const emits = defineEmits<Emits>();
const store = useMindMapStore({
onDel: (node: MindMapNode) => {
console.log("【Store回调】节点被删除了", node);
emits("onDel", node);
},
onAddChild: (node: MindMapNode) => {
console.log("【Store回调】添加了子节点到", node);
emits("onAddChild", node);
},
onEdit: (node: MindMapNode) => {
console.log("【Store回调】编辑节点", node);
emits("onEdit", node);
},
});