MindMap Canvas

一个现代化的、交互式思维导图应用，基于 Vue 3 + TypeScript + Pinia 构建，支持实时编辑、数学公式渲染、拖拽布局和智能搜索。

✨ 核心特性

🎨 直观的交互体验

• 拖拽画布：鼠标拖拽平移视图，滚轮缩放画布（0.1x - 3x 缩放范围）
• 节点操作：拖拽节点自由布局，双击节点编辑内容
• 智能折叠：点击节点右侧的折叠按钮展开/收起子节点
• 双击创建：在画布任意位置双击创建新的根节点

🔍 智能搜索系统

• 实时搜索：输入关键词即时过滤节点
• 路径显示：搜索结果展示节点层级路径
• 一键聚焦：点击搜索结果自动定位并聚焦到对应节点
• 类型标识：区分根节点和子节点

🛠️ 丰富的编辑功能

• 数学公式支持：使用 $...$ 语法内嵌 LaTeX 公式（KaTeX 渲染）
• 样式自定义：
  • 6 种预设节点背景色
  • 字体大小调整（A+/A-）
  • 加粗/取消加粗
• 分支操作：复制/粘贴整棵子树
• 历史记录：完整的撤销/重做系统（Ctrl+Z / Ctrl+Y）

📐 智能布局与视图

• 自动布局：一键优化节点排列（🪄 魔法按钮）
• 视图控制：快速重置视图到初始状态（🎯 重置按钮）
• 响应式设计：节点大小自适应内容变化
• 网格背景：辅助对齐的极简网格系统

💾 数据管理（新增）

• JSON 导出：一键导出整个思维导图为 JSON 文件（💾 保存按钮）
• JSON 导入：从 JSON 文件恢复思维导图（📂 导入按钮）
• 数据持久化：完整的工作区保存与恢复功能

⌨️ 键盘快捷键

• Ctrl+Z / Cmd+Z：撤销
• Ctrl+Y / Cmd+Y：重做
• Enter：搜索框内按回车聚焦第一个结果

界面预览

🚀 技术栈

• 前端框架：Vue 3 + Composition API
• 状态管理：Pinia
• 语言：TypeScript
• 数学渲染：KaTeX
• 样式：Scoped CSS + 现代布局（Flexbox/Grid）
• 交互：原生 DOM 事件 + 自定义指令

🎯 设计理念

1. 简洁高效：所有核心功能集成在悬浮工具栏中，不遮挡工作区
2. 实时反馈：所有操作即时生效，无延迟的视觉反馈
3. 渐进式交互：基础功能零学习成本，高级功能易于发现
4. 视觉层次：通过颜色、阴影、动画建立清晰的视觉层级
5. 数据安全：完整的导入/导出系统，确保工作成果不丢失

📦 项目结构

src/
├── components/
│   └── MindMapCanvas.vue    # 主画布组件（本文件）
├── stores/
│   └── mindmap.ts          # Pinia store（节点数据、历史记录、导入导出逻辑）
└── ...

🎨 UI/UX 亮点

三胶囊工具栏布局

1. IO 胶囊：导入/导出功能组，确保数据安全
2. 搜索胶囊：智能搜索与快速定位
3. 核心功能胶囊：历史、布局、节点编辑的动态工具栏

视觉反馈

• 节点选中状态：蓝色边框 + 发光效果
• 悬停效果：按钮、节点、颜色点均有视觉反馈
• 平滑动画：下拉框、工具栏组件的入场动画
• 状态提示：导入/导出操作的成功/失败提示

辅助提示

• 底部操作提示：双击画布、拖拽节点、快捷键等
• 按钮悬停提示：显示功能说明和快捷键
• 搜索无结果友好提示：避免用户困惑

🔧 开发特色

1. 类型安全：完整的 TypeScript 类型定义
2. 响应式设计：使用 ResizeObserver 监听节点尺寸变化
3. 性能优化：
   • 虚拟连接线计算（仅渲染可见节点间的连线）
   • 防抖搜索（实时但高效）
   • 按需渲染（节点折叠时隐藏子树）
4. 可维护性：
   • 逻辑分离：视图逻辑、数据逻辑、工具逻辑清晰分离
   • 自定义指令：v-observe-size、v-focus 等复用指令
   • 计算属性：大量使用 computed 提高性能
5. 数据完整性：
   • JSON 序列化：完整的思维导图数据结构导出
   • 错误处理：导入时的 JSON 解析验证
   • 状态恢复：导入后自动重置视图

🎮 快速开始

1. 创建内容：双击画布创建第一个主题
2. 添加子节点：选中节点，点击“+”添加子节点
3. 样式调整：使用工具栏调整节点颜色、字体大小
4. 数学公式：输入 $E=mc^2$ 或 $\frac{a}{b}$ 试试公式渲染
5. 快速定位：搜索关键词快速定位节点
6. 保存工作：点击💾导出 JSON 保存进度
7. 恢复工作：点击📂导入之前保存的 JSON 文件

📱 适用场景

• 知识整理：学习笔记、概念图谱
• 项目规划：头脑风暴、任务分解
• 技术架构：系统设计图、依赖关系
• 学术研究：数学/物理公式笔记、论文大纲
• 会议记录：思路整理、决策树绘制

🔄 数据交换

导出功能

• 格式：标准 JSON
• 内容：完整节点数据 + 样式信息
• 用途：备份、分享、版本控制

导入功能

• 验证：JSON 格式校验
• 恢复：完整状态恢复
• 兼容性：支持跨会话工作恢复

---

工作流提示：

1. 开始新项目 → 创建思维导图
2. 定期保存 → 点击💾导出 JSON
3. 下次继续 → 点击📂导入 JSON
4. 分享协作 → 发送 JSON 文件给团队成员

---

一个为现代工作流设计的思维导图工具，让思维可视化变得简单而强大，同时确保您的工作成果安全可靠。