基于React + TypeScript + Vite + Zustand开发的网页版思维导图工具，支持节点编辑、样式调整、关系连线、节点引用、背景设置等功能。
WebXmind是一款轻量级网页思维导图工具，无需安装，即开即用。它支持直观的拖拽操作、快捷键控制，提供了丰富的思维导图编辑功能，适合用于学习规划、知识整理、项目管理等场景。
- 节点的添加、删除、编辑
- 左右布局支持
- 节点展开/折叠
- 缩放和平移
- 撤销/重做
- 导出PNG图片
- 保存与加载思维导图
- 节点样式设置：自定义节点背景色、文字颜色
- 节点备注：支持为节点添加备注信息
- 节点图标：支持为节点添加各种图标
- 节点图片：支持为节点添加图片
- 关系连线：创建任意两个节点之间的自定义关系连线，可设置线条样式和关系描述
- 节点引用：支持节点引用功能，一个节点可在不同位置被引用，保持数据同步
- 背景设置：支持设置思维导图背景，包括纯色背景和图片背景
- 可调整背景不透明度
- 支持本地图片上传和网络图片URL
- 背景设置会自动保存到本地数据库
- 支持通过JSON导出导入，完整保留背景设置
- 模板功能：支持将思维导图保存为模板，并从模板快速创建
- 背景设置也会被保存到模板中并在创建时应用
- JSON导入导出：支持以JSON格式导入导出思维导图数据
- 导出的JSON包含完整数据，包括节点、关系连线和背景设置
- 使用IndexedDB本地存储思维导图
- 支持多个思维导图的管理
- 模板库存储
- 完整保存背景设置信息
- Ctrl+N: 新建空白思维导图
- Ctrl+S: 保存当前思维导图
- Ctrl+Shift+E: 导出为JSON
- Ctrl+Shift+O: 导入JSON
- Ctrl+P: 导出为图片
- Ctrl+T: 从模板创建
- Ctrl+Shift+S: 保存为模板
- Ctrl+M: 打开文件菜单
- Tab: 添加子节点
- Shift+Tab: 添加兄弟节点
- Delete/Backspace: 删除节点
- Ctrl+E/F2: 编辑节点
- Ctrl+B: 打开节点背景色选择器
- Ctrl+C: 打开节点文字颜色选择器（当没有文本选中时）
- Ctrl+Z: 撤销
- Ctrl+Y/Ctrl+Shift+Z: 重做
- Ctrl++: 放大
- Ctrl+-: 缩小
- 前端框架: React 18
- 语言: TypeScript
- 构建工具: Vite
- UI库: Ant Design
- 样式: Styled Components
- 状态管理: Zustand
- 数据存储: IndexedDB
- 图形渲染: SVG
- 图片导出: html2canvas
- Node.js 14.0+
- npm 7.0+ 或 yarn 1.22+
# 使用npm
npm install
# 或使用yarn
yarn install# 使用npm
npm run dev
# 或使用yarn
yarn dev应用将会在 http://localhost:5173 运行
WebXmind内置了一些调试工具，可通过以下快捷键开启：
- F12+Shift: 开启/关闭键盘事件调试（在控制台查看键盘事件日志）
- F12+Ctrl: 开启/关闭快捷键调试（在控制台查看快捷键详细信息）
- F12+Alt: 开启/关闭模板功能调试
开启调试模式后，界面右下角会出现调试按钮，可以测试节点添加和吸附功能。
# 使用npm
npm run build
# 或使用yarn
yarn build构建后的文件将生成在 dist 目录中，可直接部署到任何静态文件服务器。
src/
├─ components/ # 组件
│ ├─ MindMap/ # 思维导图相关组件
│ │ ├─ index.tsx # 主组件
│ │ ├─ Node.tsx # 节点组件
│ │ ├─ Connection.tsx # 连接线组件
│ │ ├─ RelationshipLine.tsx # 关系连线组件
│ │ ├─ NodeMenu.tsx # 节点菜单组件
│ │ ├─ NodeReferenceMenu.tsx # 节点引用菜单
│ │ ├─ SimpleNode.tsx # 简化节点组件
│ │ └─ NodeDragLayer.tsx # 节点拖拽层
│ ├─ Toolbar/ # 工具栏组件
│ └─ Sidebar/ # 侧边栏组件
├─ core/ # 核心逻辑
│ ├─ models/ # 数据模型
│ │ └─ mindmap.ts # 思维导图模型
│ ├─ operations/ # 操作函数
│ │ └─ node-operations.ts # 节点操作函数
│ ├─ layouts/ # 布局算法
│ │ └─ mindmap-layout.ts # 思维导图布局算法
│ └─ utils/ # 工具函数
│ └─ drag-utils.ts # 拖拽相关工具函数
├─ store/ # 状态管理
│ └─ index.ts # Zustand状态库
├─ types/ # 类型定义
│ └─ mindmap.d.ts # 思维导图类型定义
└─ styles/ # 全局样式
├─ global.ts # 全局样式
└─ mindmap.css # 思维导图样式
- 单击节点选中，Ctrl+单击可以多选
- 双击节点可以编辑内容
- 拖拽节点可以改变位置
- 拖拽节点靠近其他节点时会有吸附效果，释放后将成为其子节点
- 鼠标滚轮可以缩放视图，按住鼠标拖拽背景可以平移视图
- 点击工具栏中的背景图标打开背景设置
- 选择纯色背景或图片背景
- 纯色背景可以选择颜色，图片背景可以输入URL或上传本地图片
- 调整不透明度
- 点击确定应用设置
- 使用Ctrl+Shift+S保存当前思维导图为模板
- 使用Ctrl+T从已保存的模板创建新思维导图
- 可以管理模板，包括删除不需要的模板
我们欢迎任何形式的贡献，无论是新功能、bug修复、文档改进还是UI优化。
- 本项目用于练习使用 AI Code 工具，所有内容完全由 AI 生成，不接收 MR
- 遵循TypeScript和React的最佳实践
- 使用ESLint和Prettier保持代码风格一致
- 组件使用函数式组件和React Hooks
- 保持代码简洁、注释清晰
- 背景设置功能：支持纯色背景和图片背景
- 本地图片上传功能
- 背景设置信息本地缓存支持
- 背景设置信息JSON导出导入支持
- 背景设置信息模板保存和应用
- 快捷键系统优化：统一使用Ctrl键
- 修复了文件操作快捷键无响应问题
- 优化了节点编辑和拖拽交互
- 优化布局算法
- 添加主题支持
- 增加多画布管理
- 添加协作功能
- 云端存储支持
- 添加更多导出格式
- 移动端适配
MIT