# mindmap-project

**Repository Path**: tsrsss/mindmap-project

## Basic Information

- **Project Name**: mindmap-project
- **Description**: 无阿斯蒂芬v你们是地方不能 

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-04-28
- **Last Updated**: 2026-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XMind 脑图应用

一个基于 Vue 3 + Spring Boot 的脑图编辑应用。

## 🎯 功能特性

### 已实现功能

| 功能 | 状态 | 描述 |
|------|------|------|
| 用户注册 | ✅ | 支持用户名、密码、昵称注册 |
| 用户登录 | ✅ | JWT认证登录 |
| 主题切换 | ✅ | 亮色(浅粉色)/暗色主题切换 |
| 自由画布 | ✅ | 自由拖拽节点，创意发散模式 |
| 逻辑图 | ✅ | 结构化布局，同级节点自动对齐 |
| 模板选择 | ✅ | 新建脑图时选择模板类型 |
| 节点编辑 | ✅ | 点击节点编辑内容 |
| 节点样式 | ✅ | 支持背景色、边框色、文字颜色设置 |
| 添加子分支 | ✅ | 为选中节点添加子分支 |
| 删除节点 | ✅ | 删除选中节点（根节点不可删除） |
| 画布缩放 | ✅ | Ctrl+滚轮缩放画布 |
| 画布平移 | ✅ | Shift+拖拽平移画布 |
| 草稿箱 | ✅ | 未保存脑图自动保存到草稿箱 |
| 发布草稿 | ✅ | 将草稿转为正式脑图 |
| 脑图列表 | ✅ | 展示用户所有脑图 |
| 复制脑图 | ✅ | 复制已有脑图 |
| 删除脑图 | ✅ | 删除脑图（软删除） |
| 导出PDF | ✅ | 将脑图导出为PDF文件 |
| 模板标签 | ✅ | 在列表中显示模板类型 |
| 精确时间 | ✅ | 显示创建/更新时间到时分秒 |

### 待实现功能

| 功能 | 状态 | 描述 |
|------|------|------|
| 分享脑图 | ⏳ | 生成分享链接 |
| 协作编辑 | ⏳ | 多人实时协作 |
| 脑图导出 | ⏳ | 支持多种格式导出 |
| 脑图导入 | ⏳ | 支持多种格式导入 |
| 节点图标 | ⏳ | 为节点添加图标 |
| 节点连线样式 | ⏳ | 自定义连线样式 |

## 🛠️ 技术栈

### 前端
- Vue 3.5 + TypeScript
- Vite 8.0
- Element Plus
- Pinia（状态管理）
- Vue Router
- @antv/x6（脑图画布）
- html2canvas + jspdf（PDF导出）

### 后端
- Spring Boot 4.1.0
- Spring Security
- Spring Data JPA
- MySQL
- JWT（认证）
- Lombok

## 📁 项目结构

```
mindmap/
├── mind-frontend/           # 前端应用
│   ├── src/
│   │   ├── components/      # 公共组件
│   │   ├── pinia/           # 状态管理
│   │   ├── router/          # 路由配置
│   │   ├── views/           # 页面视图
│   │   ├── App.vue          # 根组件
│   │   ├── main.ts          # 入口文件
│   │   └── style.css        # 全局样式
│   ├── package.json
│   └── vite.config.ts
└── mind-backend/            # 后端应用
    ├── src/main/java/
    │   ├── controller/      # REST控制器
    │   ├── service/         # 业务逻辑
    │   ├── repository/      # 数据访问
    │   ├── entity/          # 实体类
    │   ├── dto/             # 数据传输对象
    │   ├── security/        # 安全配置
    │   └── util/            # 工具类
    ├── src/main/resources/
    │   └── application.properties
    └── pom.xml
```

## 🚀 快速开始

### 环境要求
- Node.js >= 18
- Java >= 21
- MySQL >= 8.0

### 前端启动

```bash
cd mind-frontend
npm install
npm run dev
```

访问 http://localhost:5173

### 后端启动

1. 创建数据库
```sql
CREATE DATABASE example_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

2. 配置数据库连接（application.properties）
```properties
spring.datasource.url=jdbc:mysql://localhost:3306/example_db
spring.datasource.username=your_username
spring.datasource.password=your_password
```

3. 启动应用
```bash
cd mind-backend
mvn spring-boot:run
```

后端服务运行在 http://localhost:8080

## 🔌 API接口

### 用户认证

| 接口 | 方法 | 描述 |
|------|------|------|
| `/api/auth/register` | POST | 用户注册 |
| `/api/auth/login` | POST | 用户登录 |

### 脑图管理

| 接口 | 方法 | 描述 |
|------|------|------|
| `/api/mindmaps` | GET | 获取用户脑图列表 |
| `/api/mindmaps` | POST | 创建脑图 |
| `/api/mindmaps/{id}` | GET | 获取脑图详情 |
| `/api/mindmaps/{id}` | PUT | 更新脑图 |
| `/api/mindmaps/{id}` | DELETE | 删除脑图 |
| `/api/mindmaps/drafts` | GET | 获取草稿列表 |
| `/api/mindmaps/{id}/publish` | POST | 发布草稿 |

## 📝 需求清单自检

### 用户模块
- [x] 登录页面
- [x] 注册页面
- [x] 个人信息展示

### 主题模块
- [x] 亮色主题（浅粉色）
- [x] 暗色主题（TraE风格）
- [x] 主题切换按钮

### 布局模块
- [x] 顶部导航栏（标题：XMind）
- [x] 侧边控制台（我的脑图、草稿箱、新建脑图）

### 脑图编辑器
- [x] 自由画布模板
- [x] 逻辑图模板（仿XMind）
- [x] 模板选择页面
- [x] 节点创建/删除
- [x] 节点内容编辑
- [x] 节点样式编辑（背景色、边框色、文字色）
- [x] 画布缩放
- [x] 画布平移（Shift+拖拽）
- [x] 导出PDF

### 草稿箱
- [x] 草稿列表展示
- [x] 编辑草稿
- [x] 发布草稿
- [x] 删除草稿

### 脑图列表
- [x] 脑图卡片展示
- [x] 模板标签显示
- [x] 创建时间（精确到秒）
- [x] 编辑/复制/删除操作

### 后端API
- [x] 用户注册接口
- [x] 用户登录接口
- [x] 脑图CRUD接口
- [x] 草稿管理接口
- [x] JWT认证
- [x] CORS配置

## 📄 License

MIT License