lixinran
/
MindMap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MindMap/frontend
History
lixinran beee48eb0c 🎉 优化SVG导出功能 
✨ 新功能：
- 实现表格转SVG原生元素转换器
- 支持rowspan和colspan的复杂表格布局
- 智能列宽计算，针对中文内容优化
- 动态行高计算，支持多行文本

🔧 修复：
- 解决SVG导出时图片压线问题
- 优化图片尺寸，增大显示但不压线
- 减少图片和文字距离，布局更紧凑
- 解决表格内容拥挤问题

📊 技术改进：
- 中文字符宽度：字体大小 × 1.0
- 英文字符宽度：字体大小 × 0.6
- 最小列宽：80px，最小行高：35px
- 支持多行文本的精确布局计算
 		2025-10-10 15:48:51 +08:00
..
.vite/deps_temp_442209d7 Initial commit: AI思维导图生成器项目 2025-09-04 13:47:42 +08:00
dist fix: 修复节点和连线错位问题 2025-10-10 14:40:19 +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 🎉 优化SVG导出功能 2025-10-10 15:48:51 +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，避免跨域问题
  • 所有操作都会实时同步到后端数据库