作品简介
X-Mind Map 是一款基于纯原生 Web 技术构建的专业思维导图软件，无需安装任何依赖，单文件 HTML 即可在浏览器中运行。它支持 9 大类共计 25 种以上专业图表模板，涵盖思维导图、鱼骨图、时间轴、矩阵图、括号图、组织架构图、树形图、逻辑图等，每种布局均由独立的 Canvas 2D 渲染引擎驱动。应用提供完整的三页面结构（开始页、模板选择页、编辑器），支持彩虹分支配色、6 套主题方案、实时样式编辑、撤销重做、多格式导出等功能，是一款功能完备、开箱即用的生产力工具。
技术亮点
纯原生技术栈
HTML + CSS + JavaScript 三件套实现，零依赖、零框架，单文件仅 80KB，无需编译即可在任意浏览器打开使用。所有代码手写，不使用任何第三方库。
Canvas 2D 渲染引擎
从零构建图形渲染管线，包含脏矩形检测、分层渲染、贝塞尔曲线连线、4 种节点形状绘制（圆角矩形、矩形、椭圆、菱形）。所有节点和连线在 Canvas 上直接绘制，确保万级节点流畅渲染。
9 种布局算法
每种布局独立实现，互不耦合：
-
思维导图布局：中心节点向左右两侧对称展开，同层节点自动避让
-
鱼骨图布局：根节点在右侧（鱼头），主干线贯穿，分支交替上下 45 度角连接
-
水平时间轴布局：根在左，子节点沿水平主线等距排列，孙节点向下展开
-
垂直时间轴布局：根在上，子节点沿垂直主线等距排列，孙节点向右展开
-
括号图布局：水平展开子节点，下方用大括号样式连接孙节点
-
矩阵图布局：根在左上角，子节点按网格排列
-
组织架构图布局：从上到下逐级展开，同级节点均匀分布
-
逻辑图布局：向右展开，类似文件树结构
-
右侧导图/向下导图：所有节点单向展开
命令模式 + 撤销重做
所有状态变更（添加节点、删除节点、编辑文本、修改样式）封装为 Command 对象，支持 Undo/Redo 历史栈（最大 50 步）。连续文本编辑自动合并为一个命令，优化撤销体验。
彩虹分支系统
6 套配色方案（晨曦、海洋、森林、日落、商务、马卡龙），可一键切换。每条分支自动分配颜色，连线颜色与分支边框一致，可自由开关彩虹效果。
不可变数据模型
树形节点结构完整保存节点属性（形状、填充色、边框色、字体大小、颜色、粗斜体、删除线、下划线、对齐方式、折叠状态），支持 JSON 序列化/反序列化，完整保真所有数据。
核心功能
三页面架构
-
开始页：深色侧边栏（Logo、一键生成按钮、最近文件、打开本地文件），右侧最近文件缩略图网格
-
模板选择页：9 个分类标签（全部/思维导图/逻辑图/括号图/组织结构图/树形图/时间轴/鱼骨图/矩阵图），25+ 模板可选，每个模板有 Canvas 绘制的结构预览缩略图，支持分类过滤和分组折叠
-
编辑器页：顶部工具栏、左侧菜单（可展开）、中间白色画布、右侧属性面板（样式/画布两个标签页）、底部状态栏
编辑器功能
-
节点操作：单击选中、双击编辑、Tab 添加子主题、Enter 添加兄弟主题、Delete 删除、Ctrl+C/V 复制粘贴
-
画布交互：滚轮缩放（以鼠标位置为中心）、空格+拖拽平移、中键拖拽平移
-
折叠/展开：节点旁 +/- 按钮，一键折叠或展开子树
-
属性面板：形状选择（圆角矩形/矩形/椭圆/菱形）、填充色、边框色、文字色、字号、粗体/斜体/删除线/下划线、左中右对齐
-
画布面板：6 种配色方案切换、彩虹分支开关、背景色、10 种布局切换
-
右键菜单：添加子主题/兄弟主题、编辑、删除、复制、粘贴
-
演说模式：全屏黑底展示，自动聚焦导图中心
文件操作
-
新建导图、打开本地 JSON 文件、保存为 JSON
-
导出 PNG 高清图片（Canvas 渲染输出）
-
导出 SVG 矢量图形（完整路径生成）
-
导出 Markdown 文本大纲
-
打印支持
快捷键系统
-
Ctrl+Z / Ctrl+Y：撤销 / 重做
-
Ctrl+S：保存
-
Ctrl+O：打开本地文件
-
Ctrl+N：快速新建
-
Ctrl+C / Ctrl+V：复制 / 粘贴节点
-
Tab：添加子主题
-
Enter：添加兄弟主题
-
Delete：删除节点
-
F2：编辑节点文本
-
空格+拖拽：平移画布
-
滚轮：缩放画布
开发历程
本项目全程使用 TRAE 开发，从架构设计到功能实现，历经多轮迭代：
-
第一轮：完成系统架构设计文档，确立 Canvas 渲染引擎、数据模型、命令模式、布局引擎四层架构
-
第二轮：实现 XMind 风格三页面界面（开始页、模板选择页、编辑器页），包含完整 UI 组件
-
第三轮：修复功能可用性问题，重写核心逻辑，确保所有交互真正可用并经浏览器测试验证
-
第四轮：扩展 9 大类 25+ 模板，新增鱼骨图、时间轴、矩阵图、括号图等 7 种布局算法及对应连线绘制
所有代码由 TRAE 生成和调试，全程在 TRAE 工作区内完成开发。
Session ID
6a49c84897e6a050adbe2f6c
作品截图
（此处上传 4-5 张截图：开始页、模板选择页、编辑器思维导图、鱼骨图、时间轴）
作品附件
index (2).html (80.0 KB)