lixinran
/
MindMap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MindMap/frontend
History
lixinran e3fedcbf0f ✨ 实现图片编辑功能，优化图片交互体验 
核心功能：
- 双击图片 → 进入编辑模式（替换图片）
- 右键图片 → 显示菜单（预览/编辑选项）
- 图片编辑器支持文件选择和替换
- 支持HTML图片和MindElixir原生图片两种类型

技术实现：
- 修改mouse.ts，双击图片触发showImageEditor事件
- 扩展contextMenu.ts，添加图片编辑菜单项
- 更新pubsub.ts，添加showImageEditor事件类型
- 在MindMap.vue中实现图片编辑器UI和逻辑
- 添加文件选择、格式验证、大小限制（5MB）
- 支持JPG/PNG/GIF格式

UI设计：
- 紫色主题编辑器（与品牌色一致）
- 当前图片预览 + 文件选择界面
- 响应式设计，支持大图片显示
- 优雅的模态框和交互体验
 		2025-10-11 14:19:41 +08:00
..
.vite/deps_temp_442209d7 Initial commit: AI思维导图生成器项目 2025-09-04 13:47:42 +08:00
dist ✨ 优化表格编辑器UI和用户体验 2025-10-11 14:07:16 +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 ✨ 实现图片编辑功能，优化图片交互体验 2025-10-11 14:19:41 +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 修复SVG导出文本居中问题 2025-10-10 16:29:32 +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，避免跨域问题
  • 所有操作都会实时同步到后端数据库