# 思维导图编辑器（vue3-mindmap-editor）

**Repository Path**: pcxadmin/mindmap

## Basic Information

- **Project Name**: 思维导图编辑器（vue3-mindmap-editor）
- **Description**: 基于 Vue 3 + TypeScript + Vite 完全自研的思维导图编辑器，不依赖任何第三方思维导图库。 支持 8 种结构布局、4 套主题、节点富样式定制，以及外框 / 概要 / 标注 / 图片 / 超链接 / 跨节点连线等进阶功能，并支持 JSON 导入导出 与 独立 HTML 单文件导出。


- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-05
- **Last Updated**: 2026-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🧠 思维导图编辑器（vue3-mindmap-editor）

> 基于 **Vue 3 + TypeScript + Vite** 完全自研的思维导图编辑器，不依赖任何第三方思维导图库。
> 支持 8 种结构布局、4 套主题、节点富样式定制，以及外框 / 概要 / 标注 / 图片 / 超链接 / 跨节点连线等进阶功能，并支持 **JSON 导入导出** 与 **独立 HTML 单文件导出**。

---

## 📋 目录

- [一、项目简介](#一项目简介)
- [二、技术栈](#二技术栈)
- [三、快速开始](#三快速开始)
- [四、目录结构](#四目录结构)
- [五、界面布局](#五界面布局)
- [六、功能总览](#六功能总览)
- [七、详细功能与操作方法](#七详细功能与操作方法)
  - [1. 文件操作](#1-文件操作)
  - [2. 画布操作](#2-画布操作)
  - [3. 节点基本操作](#3-节点基本操作)
  - [4. 节点结构操作](#4-节点结构操作)
  - [5. 折叠 / 展开](#5-折叠--展开)
  - [6. 节点样式设置](#6-节点样式设置)
  - [7. 节点进阶功能](#7-节点进阶功能)
  - [8. 布局结构与主题](#8-布局结构与主题)
  - [9. 历史记录（撤销 / 重做）](#9-历史记录撤销--重做)
  - [10. 标题编辑](#10-标题编辑)
- [八、快捷键速查表](#八快捷键速查表)
- [九、右键菜单说明](#九右键菜单说明)
- [十、数据格式说明（JSON）](#十数据格式说明json)
- [十一、独立 HTML 导出说明](#十一独立-html-导出说明)
- [十二、作为组件复用](#十二作为组件复用)

---

## 一、项目简介

本项目是一个运行在浏览器中的 **思维导图可视化编辑器**，从数据模型、布局算法到渲染与交互全部自主实现，核心设计参考了 llm-ui 项目的 FlowEditor 架构（基于 HTML + CSS transform 画布 + SVG 连线）。

主要能力：

| 能力 | 说明 |
| --- | --- |
| 多种结构 | 思维导图（平衡 / 右侧 / 左侧）、组织结构图、鱼骨图、时间轴、树形图、括号图、树形表格、矩阵图 |
| 节点编辑 | 增删改、兄弟节点、层级调整、拖拽改父级、复制 / 剪切 / 粘贴 |
| 样式定制 | 字体颜色、背景色、字号、加粗 / 斜体 / 下划线、6 种节点形状、连线颜色 / 样式 / 粗细 |
| 进阶功能 | 外框、概要（大括号）、标注、图片、超链接、跨节点连线 |
| 画布交互 | 缩放、平移、适应视图、节点折叠 / 展开 |
| 数据能力 | JSON 导入 / 导出、独立 HTML 单文件导出、撤销 / 重做（100 步） |
| 主题 | 浅色、深色、经典、多彩 4 套预设 |

---

## 二、技术栈

| 分类 | 技术 | 说明 |
| --- | --- | --- |
| 框架 | [Vue 3](https://vuejs.org/)（`^3.4.0`） | 组合式 API（`<script setup>`）+ TypeScript |
| 语言 | [TypeScript](https://www.typescriptlang.org/)（`^5.6.0`） | 全量类型约束 |
| 构建 | [Vite](https://vitejs.dev/)（`^5.4.0`） | 开发服务器端口 `5174`，构建产物在 `dist/` |
| 类型检查 | [vue-tsc](https://github.com/vuejs/language-tools)（`^2.1.0`） | `npm run type-check` |
| 运行时依赖 | **仅 `vue`** | 思维导图渲染、布局、交互全部为自研代码，无第三方图库 |
| 渲染架构 | HTML div + CSS `transform` + SVG | 画布平移缩放走 CSS transform，连线 / 外框 / 概要 / 跨节点连线走 SVG |

---

## 三、快速开始

```bash
# 1. 安装依赖
npm install

# 2. 启动开发服务器（自动打开浏览器，端口 5174）
npm run dev

# 3. 生产构建（输出到 dist/）
npm run build

# 4. 预览构建产物
npm run preview

# 5. 类型检查（vue-tsc --noEmit）
npm run type-check
```

> 页面标题为「思维导图编辑器」，favicon 为 🧠。

---

## 四、目录结构

```
mindmap_opencode/
├── index.html                  # 入口 HTML
├── package.json                # 依赖与脚本
├── vite.config.ts              # Vite 配置（端口 5174，自动打开）
├── tsconfig.json               # TypeScript 配置
├── tsconfig.node.json
└── src/
    ├── main.ts                 # 应用入口（挂载 App，全局错误处理）
    ├── App.vue                 # 根组件
    ├── env.d.ts
    ├── styles/
    │   └── main.css            # 全局样式
    ├── types/
    │   └── index.ts            # 全部类型定义、默认设置、主题与结构预设
    ├── composables/
    │   └── useMindmap.ts       # 核心业务逻辑（增删改、历史、导入导出、跨节点连线等）
    ├── utils/
    │   ├── layout.ts           # 布局引擎（8 种结构 + 外框 / 概要 / 跨节点连线定位）
    │   └── exportHtml.ts       # 独立 HTML 导出（内嵌数据 + 精简布局引擎 + 渲染）
    └── components/
        ├── MindmapEditor.vue   # 主编辑器（整合所有组件与交互）
        ├── ToolBar.vue         # 顶部工具栏
        ├── MindmapCanvas.vue   # 画布（平移缩放、SVG 连线、概要/跨节点连线交互）
        ├── MindmapNode.vue     # 单个节点（文本编辑、图片、标注、折叠手柄）
        ├── NodePanel.vue       # 右侧节点样式 / 功能面板
        ├── ContextMenu.vue     # 右键菜单
        ├── HyperlinkDialog.vue # 超链接设置对话框
        ├── ImageDialog.vue     # 图片设置对话框（上传 / URL）
        └── AnnotationDialog.vue# 标注设置对话框
```

---

## 五、界面布局

```
┌──────────────────────────────────────────────────────────────┐
│ 顶部工具栏：新建 | 导入 | JSON | 导出HTML | 撤销↶ 重做↷ |     │
│             适应 | 全部展开 | 全部折叠 | 结构▾ 布局▾ 主题▾ | 节点数 │
├──────────────────────────────────────────────┬───────────────┤
│                                              │  右侧节点面板  │
│              画布区域                         │  （样式 / 功能 │
│   · 网格背景 + 节点 + 连线                    │    / 结构操作）│
│   · 右下角缩放按钮 ＋ / 百分比 / －           │               │
│                                              │               │
│  左下角：可编辑标题输入框                      │               │
└──────────────────────────────────────────────┴───────────────┘
```

- **顶部工具栏**：文件操作、撤销 / 重做、视图操作、结构 / 布局 / 主题切换、节点总数统计。
- **画布区域**：思维导图主体，支持平移、缩放、框选（拖拽）等。
- **右侧节点面板**：选中节点 / 概要 / 跨节点连线后显示对应设置项。
- **左下角标题框**：编辑思维导图标题（导出时作为文件名与 HTML 标题）。
![主要操作界面](img/1.png)
![导出后的html](img/2.png)


---

## 六、功能总览

| 功能模块 | 具体能力 |
| --- | --- |
| 文件 | 新建、导入 JSON、导出 JSON、导出独立 HTML |
| 画布 | 拖拽空白平移、滚轮 / 按钮缩放（20% ~ 300%）、适应视图、网格背景 |
| 节点 | 添加子节点、添加兄弟节点、编辑文本、删除、复制 / 剪切 / 粘贴、多行文本批量粘贴 |
| 结构 | 上移 / 下移、缩进 / 凸出、拖拽改父级（reparent） |
| 折叠 | 单个节点折叠 / 展开（空格键）、全部展开、全部折叠 |
| 样式 | 字体颜色、背景色、字号（10~32px）、加粗 / 斜体 / 下划线、节点形状、连线颜色 / 样式 / 粗细、重置样式 |
| 进阶 | 外框、概要（可扩展范围 / 独立样式 / 子节点）、标注、图片（上传 / URL / 位置 / 旋转 / 缩放 / 预览）、超链接 |
| 连线 | 跨节点连线（贝塞尔曲线弧度可拖拽、标签、双向箭头、颜色 / 粗细 / 样式） |
| 布局 | 8 种结构类型；思维导图结构下 3 种方向（平衡 / 右侧 / 左侧） |
| 主题 | 浅色 / 深色 / 经典 / 多彩 |
| 历史 | 撤销 / 重做（最多 100 步） |

---

## 七、详细功能与操作方法

### 1. 文件操作

| 操作 | 方法 | 说明 |
| --- | --- | --- |
| **新建** | 工具栏 `📄 新建` | 弹出确认后重置为默认空白导图（含示例节点）。当前未保存内容将丢失 |
| **导入 JSON** | 工具栏 `📥 导入` | 选择本地 `.json` 文件导入。支持完整导图格式，也支持**仅含 `id/text/children` 的节点树**（自动套用默认设置）；格式无效会弹出「导入失败」提示 |
| **导出 JSON** | 工具栏 `📤 JSON` | 下载当前导图完整数据（含标题、根节点、全局设置、跨节点连线） |
| **导出 HTML** | 工具栏 `🌐 导出 HTML` | 生成**完全自包含的单文件 HTML**，内嵌数据与渲染引擎，脱离本项目即可打开浏览（详见[第十一节](#十一独立-html-导出说明)） |

### 2. 画布操作

| 操作 | 方法 |
| --- | --- |
| 平移 | 按住鼠标左键**拖拽画布空白处** |
| 缩放 | **鼠标滚轮**（以光标为中心），或使用右下角 `＋` / `－` 按钮 |
| 缩放范围 | 20% ~ 300%，右下角实时显示当前百分比 |
| 适应视图 | 工具栏 `⤢ 适应`，自动将全部内容居中适配到视口 |
| 取消选中 | 点击画布空白处 |

### 3. 节点基本操作

| 操作 | 方法 |
| --- | --- |
| 选中节点 | 单击节点（选中后有蓝色描边） |
| 编辑文本 | **双击节点**，或选中后按 `F2`，或在右键菜单 / 面板点「编辑文本」 |
| 添加子节点 | 选中节点后按 **`Tab`**，或右键「添加子节点」，或面板 `＋ 子节点`（新节点自动进入编辑） |
| 添加兄弟节点 | 选中节点后按 **`Enter`**，或右键「添加兄弟节点」，或面板 `＋ 兄弟`（根节点无兄弟） |
| 删除节点 | 选中后按 **`Delete` / `Backspace`**，或右键 / 面板「删除」（根节点不可删除，删除会自动清理相关跨节点连线） |
| 复制 / 剪切 / 粘贴 | `Ctrl+C`、`Ctrl+X`、`Ctrl+V`，或右键菜单（粘贴到选中节点下，自动检测并阻止循环引用，节点 id 自动重新生成） |
| 批量添加节点 | 选中节点后 `Ctrl+V` 粘贴**系统剪贴板中的多行文本**：每行会依次作为新兄弟节点添加，并自动编辑最后一个（不改动当前节点文字） |
| 修改文字 | 编辑模式中支持多行（`Shift+Enter` 换行） |

**文本编辑模式按键：**

| 按键 | 行为 |
| --- | --- |
| `Enter` | 提交文字并退出编辑（保持选中，不新建节点） |
| `Tab` | 提交文字并创建子节点（新节点进入编辑） |
| `Shift+Enter` | 换行 |
| `Esc` | 退出编辑 |

### 4. 节点结构操作

| 操作 | 方法 |
| --- | --- |
| 上移 / 下移 | 选中节点后 `Alt+↑` / `Alt+↓`，或面板 `↑ 上移` / `↓ 下移` |
| 缩进（成为前一个兄弟的子节点） | `Alt+→`，或面板 `→ 缩进` |
| 凸出（提升一级） | `Alt+←`，或面板 `← 凸出` |
| **拖拽改父级** | 按住节点**拖拽到另一个节点上**（目标节点出现绿色虚线框），松开即成为其子节点；拖拽中自动排除自身子树，无法放入自己的子孙节点 |
| 键盘导航 | `↑` / `↓` 在可见节点间移动选中；`←` 选中父节点；`→` 选中第一个子节点（已折叠则先展开） |

### 5. 折叠 / 展开

| 操作 | 方法 |
| --- | --- |
| 单个节点折叠 / 展开 | 点击节点右侧的圆形手柄（`−` 折叠，`+` 展开），或选中节点按 **`Space`** |
| 全部展开 | 工具栏 `⊕ 展开` |
| 全部折叠 | 工具栏 `⊖ 折叠`（根节点除外） |
| 折叠后提示 | 折叠节点手柄上会显示红色角标数字（子节点数量） |

### 6. 节点样式设置

选中节点后，右侧面板可实时调整（改完即生效，并计入历史可撤销）：

| 设置项 | 说明 |
| --- | --- |
| 字体颜色 | 取色器 + 十六进制输入 + 13 色快捷色板 |
| 背景颜色 | 同上（子主题默认透明背景，设置后显示圆角框） |
| 字号 | 滑块 10 ~ 32px |
| 加粗 / 斜体 / 下划线 | B / I / U 开关按钮 |
| 节点形状 | 圆角 `rounded`、矩形 `rect`、胶囊 `pill`、下划线 `underline`、气泡 `bubble`（子主题固定为下划线纯文字样式 `underline-only`） |
| 连线颜色 | 本节点从父节点连入的线条颜色（**子树继承**） |
| 连线样式 | 贝塞尔曲线 / 直线 / 折线 |
| 连线粗细 | 滑块 1 ~ 6px |
| 重置样式 | 面板顶部「重置」按钮，清除节点自定义样式，回退到主题继承值 |

> 样式为**继承式**：节点未设置的字段自动继承自父节点 / 全局设置，设置后仅影响本节点及其子树。

### 7. 节点进阶功能

#### 🔲 外框（Frame）
- 选中节点 → 右键「外框」或面板「▢ 开启外框」，为该节点及其全部子孙绘制虚线外框。
- 再次点击即可关闭。外框颜色固定为蓝色（数据中可自定义 `color/radius/padding`）。

#### ⌇ 概要（Summary，大括号分组）
- 选中节点 → 右键「概要」或面板「⌇ 开启概要」，在其子节点右侧绘制大括号并显示文字框。
- **编辑文字**：双击概要文字框（或选中概要后按 `Enter` / `F2`），支持多行。
- **选中概要**：单击概要文字框；再次点击可切换关闭；按 `Delete` / `Backspace` 删除概要。
- **扩展 / 收缩覆盖范围**：选中概要后，拖动大括号**上下两端的圆形手柄**，每拖动约 20px 步进一个兄弟节点（拖上端手柄改变起始节点，拖下端手柄改变结束节点）。
- **概要子节点**：选中概要且无子节点时，文字框右侧出现 `+` 按钮（或按 `Tab`），可为概要添加一个专属子节点。
- **独立样式**：选中概要时右侧面板切换为「概要设置」模式，可单独调整概要文字框的字体颜色、背景色、字号、粗斜下划线、形状、连线颜色等，**不影响节点本身**；还可设置概要文字框背景色 / 边框色 / 连线颜色。

#### 📝 标注（Annotation）
- 选中节点 → 右键「标注」或面板输入标注文字，在节点下方显示灰色小字说明。
- 支持设置颜色、字号（8~32）、字体族（默认 / 系统无衬线 / 苹方雅黑 / 衬线 / 等宽 / 楷体），可一键清除。

#### 🖼️ 图片（Image）
- 选中节点 → 右键「图片」或面板「🖼 上传图片」。
- **添加方式**：本地上传（转为 Base64 内嵌，支持 JPG/PNG/GIF/WebP）或粘贴网络图片 URL。
- **位置**：图片可放在节点文字的 左 / 右 / 上 / 下（默认下方）。
- **尺寸**：面板滑块（宽 40~300、高 30~300）或直接拖拽节点图片**右下角蓝色手柄**（40~400px）。
- **旋转**：面板滑块 -180° ~ 180°，或点击选中图片后在浮动工具栏拖动旋转滑杆。
- **预览**：**双击图片**弹出全屏预览，滚轮可放大（20% ~ 500%），点击任意处关闭。
- **清除**：面板「清除」或对话框「删除图片」。

#### 🔗 超链接（Hyperlink）
- 选中节点 → 右键「超链接」打开对话框，填写链接标题（悬停提示）与 URL，选择打开方式（新窗口 / 当前窗口）。
- 设置后节点文字末尾显示 🔗 图标，点击即可跳转（带 `noopener,noreferrer` 安全参数）。
- 对话框支持 `Esc` 关闭、`Enter` 保存，可随时删除链接。

#### 跨节点连接（Cross Link）
- **创建**：选中起点节点 → 右键「跨节点连接」（或面板 `🔗 跨节点连接`），进入连接模式（顶部出现蓝色提示条），**点击目标节点**完成连线，`Esc` 取消。
- **选中 / 取消**：单击连线选中（高亮），`Esc` 或点击空白取消。
- **标签**：**双击连线**进入文字编辑（也可选中后按 `F2`），显示在连线中点。
- **调整弧度**：选中连线后出现两个蓝色控制点，**拖拽控制点**可自由调整贝塞尔曲线弧度（控制点位置按连线中点相对偏移保存）。
- **样式**：选中连线后右侧面板可设置标签文字、颜色、样式（贝塞尔 / 直线 / 折线）、粗细（1~6px）、**双向箭头**。
- **删除**：选中后按 `Delete` / `Backspace`，或面板「🗑 删除连线」。

### 8. 布局结构与主题

**结构类型**（工具栏「结构」下拉框，切换后自动适应视图）：

| 结构 | 图标 | 说明 |
| --- | --- | --- |
| 思维导图 | 🧠 | 中心辐射，平衡布局（可在「布局」中选择 平衡 / 右侧 / 左侧） |
| 组织结构图 | 📊 | 自上而下的层级结构 |
| 鱼骨图 | 🐟 | 问题分析，因果关系 |
| 时间轴 | 📅 | 按时间顺序排列 |
| 树形图 | 🌳 | 垂直树形结构 |
| 括号图 | 🌿 | 大括号分组结构 |
| 树形表格 | 📋 | 表格化树形展示 |
| 矩阵图 | 🔲 | 矩阵式布局 |

**主题**（工具栏「主题」下拉框）：

| 主题 | 说明 |
| --- | --- |
| 浅色 | 默认，白底深字 |
| 深色 | 深灰底浅字 |
| 经典 | 米黄底棕字（复古纸感） |
| 多彩 | 白色底 + 品牌紫连线 |

> 主题改变的是默认字体色 / 背景色 / 连线色，未自定义样式的节点会整体跟随切换。

### 9. 历史记录（撤销 / 重做）

- `Ctrl+Z` 撤销、`Ctrl+Shift+Z` 或 `Ctrl+Y` 重做；工具栏 `↶` / `↷` 按钮（不可用时置灰）。
- 历史最多保留 **100 步**，超出后丢弃最旧记录。
- 样式调整、结构变化、文字提交、图片 / 概要 / 连线等操作均计入历史。

### 10. 标题编辑

左下角输入框为导图标题：直接修改，回车提交。导出 JSON / HTML 时作为文件名与 HTML 标题。

---

## 八、快捷键速查表

> 输入框 / 编辑状态下快捷键自动禁用，避免干扰输入。

| 快捷键 | 功能 |
| --- | --- |
| `Ctrl + Z` | 撤销 |
| `Ctrl + Shift + Z` / `Ctrl + Y` | 重做 |
| `Ctrl + C` | 复制选中节点（含子树） |
| `Ctrl + X` | 剪切选中节点 |
| `Ctrl + V` | 粘贴；若剪贴板为空则把系统剪贴板多行文本批量添加为兄弟节点 |
| `Tab` | 添加子节点（编辑状态下：提交并创建子节点） |
| `Enter` | 添加兄弟节点（编辑状态下：提交并退出编辑） |
| `F2` | 编辑文本 / 编辑选中连线标签 / 编辑概要文字 |
| `Delete` / `Backspace` | 删除节点 / 删除选中连线 / 删除选中概要 |
| `Space` | 折叠 / 展开选中节点 |
| `↑` / `↓` | 在可见节点间上下移动选中 |
| `←` / `→` | 选中父节点 / 选中第一个子节点 |
| `Alt + ↑` / `Alt + ↓` | 节点上移 / 下移 |
| `Alt + ←` / `Alt + →` | 节点凸出 / 缩进 |
| `Esc` | 取消连接模式 / 取消选中 / 退出编辑 |
| `Shift + Enter` | 编辑模式内换行 |
| 鼠标滚轮 | 画布缩放 |
| 拖拽空白 / 拖拽节点到目标 | 平移画布 / 改父级 |

---

## 九、右键菜单说明

**节点上右键**：

| 菜单项 | 快捷键 | 说明 |
| --- | --- | --- |
| 添加子节点 | Tab | 根节点同样适用 |
| 添加兄弟节点 | Enter | 根节点禁用 |
| 编辑文本 | F2 | |
| 复制 / 剪切 / 粘贴 | Ctrl+C / X / V | 根节点不可剪切 |
| 外框 / 概要 / 标注 / 图片 / 超链接 | - | 打开对应功能 |
| 跨节点连接 | - | 进入连线模式 |
| 折叠 / 展开 | Space | |
| 删除 | Del | 根节点禁用 |

**画布空白处右键**：仅显示「粘贴」（剪贴板非空时可用）。

---

## 十、数据格式说明（JSON）

完整导图 JSON 结构（导出格式即此结构）：

```jsonc
{
  "type": "mindmap",        // 数据类型标识，固定 "mindmap"
  "version": 1,             // 版本号
  "title": "思维导图",      // 标题
  "root": {                 // 根节点（递归结构）
    "id": "root",
    "text": "中心主题",
    "children": [
      {
        "id": "n_1",
        "text": "分支主题",
        "collapsed": false,                 // 是否折叠（可选）
        "note": "",                         // 备注（可选，当前 UI 未使用）
        "style": {                          // 节点样式（可选，缺失字段继承）
          "fontColor": "#1f2937",           // 字体颜色
          "bgColor": "#ffffff",             // 背景颜色
          "fontSize": 15,                   // 字号
          "bold": false, "italic": false, "underline": false,
          "shape": "rounded",               // rounded | rect | pill | underline | bubble
          "branchColor": "#6366f1",         // 连线颜色（子树继承）
          "lineStyle": "bezier",            // bezier | straight | elbow
          "lineWidth": 2
        },
        "extra": {                          // 进阶功能（可选）
          "frame":    { "enabled": true, "color": "#1890ff", "radius": 8, "padding": 16 },
          "summary":  {
            "enabled": true, "text": "概要",
            "color": "#fa8c16",
            "textBgColor": "#fffbe6",
            "textBorderColor": "#fa8c16",
            "startNodeId": "n_1",           // 覆盖范围起始兄弟
            "endNodeId": "n_2",             // 覆盖范围结束兄弟
            "children": [],                 // 概要子节点
            "style": { /* 概要独立样式，同 node.style */ }
          },
          "annotation": { "text": "标注", "color": "#8c8c8c", "fontSize": 12, "fontFamily": "" },
          "image":     { "url": "https://...", "width": 120, "height": 80,
                         "position": "bottom", "rotation": 0 },   // position: left|right|top|bottom
          "hyperlink": { "title": "官网", "url": "https://...", "target": "_blank" }  // target: _blank|_self
        },
        "children": []
      }
    ],
    "style": { /* 根节点同样可设置样式 */ }
  },
  "settings": {             // 全局设置
    "layout": "balanced",           // balanced | right | left（仅思维导图结构生效）
    "structure": "mindmap",         // mindmap | org-chart | fishbone | timeline | tree | brace | tree-table | matrix
    "theme": "light",               // light | dark | classic | colorful
    "defaultFontColor": "#1f2937",
    "defaultBgColor": "#ffffff",
    "defaultFontSize": 15,
    "defaultLineColor": "#94a3b8",
    "defaultLineWidth": 2,
    "defaultLineStyle": "bezier",
    "fontFamily": "-apple-system, ...",
    "gapX": 70,                     // 节点水平间距
    "gapY": 14,                     // 节点垂直间距
    "maxNodeWidth": 320             // 节点最大宽度（超出自动换行）
  },
  "crossLinks": [           // 跨节点连线（可选）
    {
      "id": "link_xxx",
      "from": "n_1", "to": "n_2",
      "color": "#ff4d4f", "lineStyle": "bezier", "lineWidth": 2,
      "label": "关联", "bidirectional": false,
      "labelColor": "#ff4d4f", "labelFontSize": 12,
      "cp1": { "x": 40, "y": 0 },   // 控制点 1（相对连线中点偏移）
      "cp2": { "x": -40, "y": 0 }   // 控制点 2
    }
  ]
}
```

**导入兼容性**：支持完整格式，也支持只含 `{ id, text, children }` 的简化节点树（自动补全默认设置）。

---

## 十一、独立 HTML 导出说明

点击工具栏「🌐 导出 HTML」会生成一个**完全自包含**的 `.html` 文件：

- 数据（导图 JSON）、布局引擎（精简版 layout.ts 算法）、渲染逻辑与样式全部内嵌，**双击即可在浏览器打开**，无需联网、无需本仓库。
- 支持的操作：
  - 工具栏：全部展开 / 全部折叠 / 适应视图 / `＋` `－` 缩放（20% ~ 300%）。
  - 滚轮缩放（以光标为中心）、拖拽空白平移。
  - 点击折叠手柄展开 / 折叠节点。
  - **点击节点复制其内容**（文字 + 链接）到剪贴板，带 Toast 提示。
  - **双击图片**全屏预览。
- 会完整渲染：节点文字与样式、图片、标注、超链接 🔗、外框、跨节点连线（含箭头、标签、弧度）。
- 左下角有操作提示浮层；底部导出文件名与标题一致。

> 说明：导出 HTML 是**只读浏览版**，不支持编辑，数据已内嵌于文件内，可任意分发。

---

## 十二、作为组件复用

`MindmapEditor` 暴露了 Props / Emits / 实例方法，可嵌入其他项目：

```vue
<template>
  <MindmapEditor
    :initial-data="myData"
    height="600px"
    @change="onChange"
    ref="editorRef"
  />
</template>

<script setup lang="ts">
import MindmapEditor from './components/MindmapEditor.vue'
import type { MindmapData } from './types'

const editorRef = ref<InstanceType<typeof MindmapEditor>>()

// Props：
//   initialData?: MindmapData  初始数据（含 root / settings / crossLinks）
//   height?: number | string   高度（默认 '100%'）

// Events：
//   change(data: MindmapData)  每次数据变更后触发（用于外部持久化）

// 实例方法（defineExpose）：
editorRef.value?.exportData()          // 获取完整数据
editorRef.value?.importAny(jsonStr)    // 导入任意 JSON
editorRef.value?.undo() / .redo()      // 撤销 / 重做
editorRef.value?.fitView()             // 适应视图
editorRef.value?.exportJson()          // 下载 JSON
editorRef.value?.exportHtml()          // 下载独立 HTML
</script>
```

---

## 📄 License

本仓库为内部 / 个人项目，无第三方运行时依赖。欢迎在保留版权说明的前提下自由使用与修改。