lixinran
/
MindMap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MindMap/frontend
History
lixinran f1ef56c3c4 feat: 深度修复节点对齐和SVG导出问题 
- 使用Flexbox和CSS containment确保节点内容完全居中对齐
- 修复图片加载失败时的布局问题，自动隐藏无效图片
- 优化长文本节点处理，强制换行避免节点宽度异常
- 增强SVG导出功能，支持表格和图片的正确渲染
- 添加节点稳定性样式，防止内容变化导致布局偏移
- 统一所有节点元素的对齐方式，确保连线精确连接
 		2025-10-10 13:53:42 +08:00
..
.vite/deps_temp_442209d7 Initial commit: AI思维导图生成器项目 2025-09-04 13:47:42 +08:00
dist feat: 深度修复节点对齐和SVG导出问题 2025-10-10 13:53:42 +08:00
node_modules feat: 优化思维导图功能 2025-10-09 14:20:51 +08:00
public Initial commit: AI思维导图生成器项目 2025-09-04 13:47:42 +08:00
src feat: 深度修复节点对齐和SVG导出问题 2025-10-10 13:53:42 +08:00
.DS_Store feat: 完善图片显示和性能优化 2025-10-09 16:02:23 +08:00
README.md Initial commit: AI思维导图生成器项目 2025-09-04 13:47:42 +08:00
index.html Initial commit: AI思维导图生成器项目 2025-09-04 13:47:42 +08:00
package-lock.json feat: 集成KaTeX库支持LaTeX数学公式渲染 2025-09-10 15:53:16 +08:00
package.json feat: 集成KaTeX库支持LaTeX数学公式渲染 2025-09-10 15:53:16 +08:00
vite.config.js Initial commit: AI思维导图生成器项目 2025-09-04 13:47:42 +08:00

README.md

思维导图前端应用

基于 Vue 3 + Mind Elixir 的思维导图前端应用，与 Django 后端 API 集成。

功能特性

  • ✅ 创建新思维导图
  • ✅ 加载现有思维导图
  • ✅ 添加子节点
  • ✅ 添加兄弟节点
  • ✅ 编辑节点（标题和描述）
  • ✅ 删除节点（软删除）
  • ✅ 拖拽操作
  • ✅ 实时数据同步

技术栈

  • Vue 3 - 前端框架
  • Mind Elixir 3.x - 思维导图核心库
  • Axios - HTTP 客户端
  • Vite - 构建工具

安装和运行

1. 安装依赖

cd frontend
npm install

2. 启动开发服务器

npm run dev

应用将在 http://localhost:3000 启动。

3. 构建生产版本

npm run build

API 集成

前端通过以下 API 与后端通信：

  • POST /api/mindMaps - 创建思维导图
  • GET /api/mindMaps/{id} - 获取思维导图
  • POST /api/mindMaps/addNodes - 添加节点
  • PATCH /api/mindMaps/updateNode - 更新节点
  • DELETE /api/mindMaps/deleteNodes - 删除节点

使用说明

  1. 创建思维导图: 点击"新建思维导图"按钮
  2. 加载思维导图: 点击"加载思维导图"并输入ID
  3. 添加节点: 选中节点后点击"添加子节点"或"添加兄弟节点"
  4. 编辑节点: 双击节点或右键选择编辑
  5. 删除节点: 选中节点后点击"删除节点"

项目结构

frontend/
├── src/
│   ├── api/
│   │   └── mindmap.js      # API 接口
│   ├── components/
│   │   └── MindMap.vue     # 思维导图组件
│   ├── App.vue             # 主应用组件
│   └── main.js             # 应用入口
├── index.html              # HTML 模板
├── package.json            # 项目配置
├── vite.config.js          # Vite 配置
└── README.md               # 项目说明

注意事项

  • 确保后端 Django 服务器在 http://localhost:8000 运行
  • 前端通过代理访问后端 API，避免跨域问题
  • 所有操作都会实时同步到后端数据库