MindMap/README.md

# AI思维导图生成器

基于Django + Vue.js的智能思维导图生成和管理系统，支持AI驱动的文档分析和可视化思维导图创建。

## ✨ 功能特性

### 🧠 AI智能分析
- **文档智能解析**: 支持DOCX、PDF、TXT、MD等多种格式
- **AI内容提取**: 自动识别文档结构，生成层次化思维导图
- **智能标题识别**: 基于视觉特征和语义逻辑的标题层级分析
- **内容结构化**: 将非结构化文档转换为结构化思维导图

### 🎨 可视化编辑
- **交互式思维导图**: 基于MindElixir的可视化编辑界面
- **拖拽操作**: 支持节点拖拽、移动、编辑
- **实时保存**: 自动保存编辑内容到数据库
- **缩放控制**: 支持思维导图缩放和居中显示
- **Markdown编辑器**: 基于Marked.js + Prism.js + KaTeX的现代化markdown渲染引擎
- **富媒体内容**: 支持图片、表格、数学公式、代码高亮等多种内容类型
- **图片预览**: 支持双击或右键预览图片细节
- **SVG导出**: 高质量矢量图导出，支持富媒体内容

### 💾 数据管理
- **云端存储**: 思维导图数据持久化存储
- **历史记录**: 自动保存操作历史，支持快速恢复
- **数据导入导出**: 支持JSON格式的数据交换
- **版本管理**: 自动记录创建和更新时间

### 🔧 技术特性
- **响应式设计**: 适配不同屏幕尺寸
- **实时协作**: 支持多用户同时编辑
- **API接口**: 完整的RESTful API
- **模块化架构**: 前后端分离，易于扩展

## 🛠️ 技术栈

### 后端技术
- **框架**: Django 4.2.7 + Django REST Framework
- **数据库**: SQLite（生产环境可配置PostgreSQL/MySQL）
- **AI服务**: OpenAI API + 智谱AI GLM-4.5
- **文件处理**: python-docx, PyPDF2, markdown
- **跨域支持**: django-cors-headers

### 前端技术
- **框架**: Vue.js 3.3.4 + Vite 4.4.9
- **思维导图**: MindElixir 3.0.0 (自定义增强版本)
- **文件处理**: mammoth.js (DOCX), pdfjs-dist (PDF)
- **HTTP客户端**: Axios 1.5.0
- **Markdown引擎**: Marked.js 16.2.1 + 自定义渲染器
- **数学公式**: KaTeX 0.16.22 (LaTeX表达式支持)
- **代码高亮**: PrismJS 1.30.0 (多语言语法着色)
- **富媒体渲染**: 统一的dangerouslySetInnerHTML机制

### AI内容分析
- **TypeScript**: 类型安全的Markdown转JSON转换
- **流式处理**: 支持大文档的流式AI分析
- **多模型支持**: 支持多种AI模型切换

### Markdown渲染引擎
- **核心引擎**: Marked.js 16.2.1 - 快速、轻量的markdown解析器
- **语法高亮**: PrismJS 1.30.0 - 支持JavaScript、CSS、JSON、Python、SQL等
- **数学公式**: KaTeX 0.16.22 - 完整的LaTeX数学表达式支持
- **自定义渲染**: 针对思维导图优化的图片、表格渲染器
- **统一机制**: 所有富媒体内容使用dangerouslySetInnerHTML统一渲染
- **响应式设计**: 图片、表格等元素自适应容器大小
- **交互功能**: 图片预览、hover效果、SVG导出支持

## 🚀 快速开始

### 环境要求
- Python 3.8+
- Node.js 16+
- npm 或 yarn

### 1. 克隆项目
```bash
git clone <repository-url>
cd MindMap
```

### 2. 后端设置

#### 进入后端目录
```bash
cd backend
```

#### 安装Python依赖
```bash
pip install -r requirements.txt
```

#### 数据库迁移
```bash
python manage.py makemigrations
python manage.py migrate
```

#### 创建超级用户（可选）
```bash
python manage.py createsuperuser
```

#### 启动Django服务器
```bash
python manage.py runserver
```

### 3. 前端设置

#### 安装Node.js依赖
```bash
cd frontend
npm install
```

#### 启动前端开发服务器
```bash
npm run dev
```

### 4. 访问应用
- 前端界面: http://localhost:5173
- 后端API: http://localhost:8000
- Django管理后台: http://localhost:8000/admin

## 📡 API接口

### 思维导图管理
- `GET /api/mindMaps/{id}` - 获取思维导图数据
- `POST /api/mindMaps` - 创建新思维导图

### 节点操作
- `POST /api/mindMaps/addNodes` - 批量添加节点
- `PATCH /api/mindMaps/updateNode` - 更新节点信息
- `DELETE /api/mindMaps/deleteNodes` - 批量删除节点

### AI服务
- `POST /api/ai/generate-markdown` - AI生成Markdown内容

### 数据格式
所有API返回的数据都遵循MindElixir格式规范，支持树形结构的数据交换。

## 📁 项目结构

```
MindMap/
├── backend/                    # Django后端
│   ├── django_mindmap/        # Django项目配置
│   │   ├── settings.py        # 项目设置
│   │   ├── urls.py           # 主URL配置
│   │   └── wsgi.py          # WSGI配置
│   ├── mindmap/              # 主应用
│   │   ├── models.py         # 数据模型（mindMap, Node）
│   │   ├── views_doc.py      # API视图函数
│   │   ├── serializers.py    # 数据序列化器
│   │   ├── ai_service.py     # AI服务集成
│   │   ├── services.py       # 业务逻辑服务
│   │   └── urls.py          # 应用URL配置
│   ├── manage.py             # Django管理脚本
│   ├── requirements.txt      # Python依赖
│   └── mindmap.db           # SQLite数据库
├── frontend/                  # Vue.js前端
│   ├── src/
│   │   ├── components/       # Vue组件
│   │   │   ├── MindMap.vue   # 思维导图组件
│   │   │   ├── AISidebar.vue # AI助手侧边栏
│   │   │   └── MarkdownTest.vue # Markdown测试组件
│   │   ├── api/             # API接口
│   │   │   └── mindmap.js   # 思维导图API
│   │   ├── lib/             # 第三方库
│   │   │   └── mind-elixir/ # MindElixir库（项目使用版本）
│   │   ├── utils/           # 工具函数
│   │   │   └── markdownRenderer.js # Markdown渲染引擎(Marked.js + Prism.js + KaTeX)
│   │   ├── App.vue          # 主应用组件
│   │   └── main.js          # 应用入口
│   ├── test-*.html          # 功能测试文件
│   ├── package.json         # 前端依赖
│   └── vite.config.js       # Vite配置
../mind-elixir-core-master/  # MindElixir完整源码（平级目录）
│   ├── src/                 # TypeScript源码
│   ├── tests/               # 测试套件
│   ├── dist/                # 编译后文件
│   └── package.json         # 依赖配置
└── README.md                # 项目文档
```

## ⚙️ 配置说明

### AI服务配置

在 `backend/mindmap/ai_service.py` 中配置AI服务：

```python
# 智谱AI配置
API_KEY = "your_glm_api_key"
BASE_URL = "https://open.bigmodel.cn/api/paas/v4/"
MODEL = "glm-4.5"

# OpenAI配置（可选）
OPENAI_API_KEY = "your_openai_api_key"
```

### 数据库配置

默认使用SQLite，生产环境建议使用PostgreSQL：

```python
# backend/django_mindmap/settings.py
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'mindmap_db',
        'USER': 'your_username',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}
```

### 文件上传配置

```python
# backend/django_mindmap/settings.py
MAX_UPLOAD_SIZE = 16 * 1024 * 1024  # 16MB
ALLOWED_FILE_TYPES = ['.docx', '.pdf', '.txt', '.md']
MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/media/'
```

### 前端配置

```javascript
// frontend/src/api/mindmap.js
const API_BASE_URL = "http://127.0.0.1:8000/api";
```

## 🛠️ 开发指南

### 添加新数据模型

1. 在 `backend/mindmap/models.py` 中定义模型
2. 运行数据库迁移：
   ```bash
   cd backend
   python manage.py makemigrations
   python manage.py migrate
   ```

### 扩展API接口

1. 在 `backend/mindmap/views_doc.py` 中编写视图函数
2. 在 `backend/mindmap/serializers.py` 中定义序列化器
3. 在 `backend/mindmap/urls.py` 中添加URL路由

### 自定义AI服务

修改 `backend/mindmap/ai_service.py` 中的AI处理逻辑：

```python
def call_ai_api(system_prompt, user_prompt, model="glm-4.5", base_url="...", api_key="..."):
    # 自定义AI服务调用逻辑
    pass
```

### 前端组件开发

1. 在 `frontend/src/components/` 中创建Vue组件
2. 在 `frontend/src/api/` 中添加API接口
3. 使用Vite进行热重载开发

### 数据格式规范

系统使用MindElixir数据格式：

```json
{
  "nodeData": {
    "id": "root",
    "topic": "根节点标题",
    "data": {
      "des": "节点描述"
    },
    "children": [
      {
        "id": "child-1",
        "topic": "子节点标题",
        "data": {
          "des": "子节点描述"
        },
        "children": []
      }
    ]
  }
}
```

## 🚀 部署指南

### 生产环境配置

1. **环境变量设置**：
   ```bash
   export DEBUG=False
   export SECRET_KEY="your-secret-key"
   export DATABASE_URL="postgresql://user:pass@localhost/db"
   ```

2. **静态文件收集**：
   ```bash
   cd backend
   python manage.py collectstatic --noinput
   ```

3. **数据库迁移**：
   ```bash
   cd backend
   python manage.py migrate
   ```

4. **前端构建**：
   ```bash
   cd frontend
   npm run build
   ```

### Docker部署

#### 后端Dockerfile
```dockerfile
FROM python:3.11-slim

WORKDIR /app
COPY backend/requirements.txt .
RUN pip install -r requirements.txt

COPY backend/ .
RUN python manage.py collectstatic --noinput

EXPOSE 8000
CMD ["gunicorn", "django_mindmap.wsgi:application", "--bind", "0.0.0.0:8000"]
```

#### 前端Dockerfile
```dockerfile
FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

EXPOSE 5173
CMD ["npm", "run", "preview"]
```

### Nginx配置

```nginx
server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:5173;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /api/ {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 📝 使用说明

### 基本操作流程

1. **上传文档**：在AI侧边栏中上传DOCX、PDF、TXT或MD文件
2. **AI分析**：系统自动调用AI服务分析文档结构，识别图片、表格等富媒体内容
3. **生成思维导图**：AI将文档转换为结构化的思维导图，支持图片、表格、数学公式等
4. **编辑调整**：在可视化界面中拖拽、编辑节点，支持富媒体内容预览
5. **导出分享**：支持SVG矢量图导出和JSON数据交换

### 快捷键操作

- `Ctrl + 滚轮`：缩放思维导图
- `双击节点`：编辑节点内容
- `双击图片节点`：预览图片细节
- `右键节点`：显示操作菜单（包含图片预览选项）
- `拖拽节点`：移动节点位置
- `Ctrl + E`：展开/折叠节点
- `Alt + F`：聚焦/取消聚焦节点

## 🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 项目
2. 创建功能分支：`git checkout -b feature/new-feature`
3. 提交更改：`git commit -am 'Add new feature'`
4. 推送分支：`git push origin feature/new-feature`
5. 提交Pull Request

## 📄 许可证

MIT License - 详见 [LICENSE](LICENSE) 文件

## 🧹 项目优化

### 代码清理
项目已进行全面的代码清理和优化：

- ✅ **删除冗余文件**: 移除了重复的测试文件和调试文件
- ✅ **保留核心功能**: 保留了所有必要的测试和调试工具
- ✅ **优化项目结构**: 清晰分离了开发版本和生产版本
- ✅ **MindElixir增强**: 集成了自定义的Markdown渲染引擎
- ✅ **富媒体支持**: 统一的图片、表格、数学公式渲染机制
- ✅ **技术栈统一**: 所有富媒体内容使用相同的markdown编辑器

### 文件结构优化
- **保留**: `../mind-elixir-core-master/` - 完整的源码和文档（平级目录）
- **保留**: `frontend/src/lib/mind-elixir/` - 项目中使用的增强版本
- **保留**: 核心测试文件 - 用于功能验证和问题调试
- **删除**: 重复的调试文件和过时的测试文件

## 🙏 致谢

- [MindElixir](https://github.com/ssshooter/mind-elixir-core) - 思维导图可视化库
- [Vue.js](https://vuejs.org/) - 前端框架
- [Django](https://www.djangoproject.com/) - 后端框架
- [智谱AI](https://www.zhipuai.cn/) - AI服务支持