# 思维导图前端应用

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

## 功能特性

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

## 技术栈

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

## 安装和运行

### 1. 安装依赖

```bash
cd frontend
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

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

### 3. 构建生产版本

```bash
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，避免跨域问题
- 所有操作都会实时同步到后端数据库