交互式算法可视化与练习平台
一个纯前端的中文算法可视化应用，覆盖排序、搜索、树、平衡树、图与网络等五大类共 30+ 常用算法。以"步骤流"为核心设计理念，将算法逻辑与可视化渲染解耦，让每一步执行过程清晰可见。
本地运行：
npm install
npm run dev| 功能 | 说明 |
|---|---|
| 步骤级可视化 | 算法以步骤事件流输出，播放器精确控制每一步的渲染 |
| 伪代码同步高亮 | 执行流与左侧伪代码实时对齐，当前行高亮显示 |
| 中文步骤解释 | 每一步均附有中文文字说明，帮助理解"发生了什么" |
| 播放控制 | 播放 / 暂停 / 单步前进 / 单步后退 / 重置 |
| 自定义输入 | 支持手动输入逗号分隔的数字序列（最多 15 个） |
| 随机数据生成 | 一键生成不重复的随机数列 |
| 实时统计面板 | 显示比较次数、交换次数、当前范围等指标 |
| 多种视图组件 | 柱状图、树图、图网络、TCP 流程图等多种可视化形态 |
| 算法 | 时间复杂度（平均） | 稳定 |
|---|---|---|
| 冒泡排序 | O(n²) | ✅ |
| 选择排序 | O(n²) | ❌ |
| 插入排序 | O(n²) | ✅ |
| 希尔排序 | O(n log² n) | ❌ |
| 快速排序 | O(n log n) | ❌ |
| 归并排序 | O(n log n) | ✅ |
| 堆排序 | O(n log n) | ❌ |
| 基数排序 | O(nk) | ✅ |
- 线性查找
- 二分查找
- BST 插入 / BST 查找
- 前序遍历 / 中序遍历 / 后序遍历
- 深度优先搜索（DFS）
- 广度优先搜索（BFS）
- 层序遍历
- AVL 树：插入 / 查找 / 删除（含旋转动画）
- 红黑树：插入 / 查找 / 删除（含重新着色与旋转）
- 最短路径：Dijkstra / Bellman-Ford / SPFA / Floyd-Warshall
- 最小生成树：Prim / Kruskal
- 网络协议：TCP 三次握手 / TCP 四次挥手
算法步骤生成器（src/algorithms/steps/*）
│
▼ Step[] 预计算步骤数组
┌─────────────┐
│ PlayerEngine │ 定时器驱动播放控制
└─────────────┘
│
▼ onStepChange 回调
┌─────────────┐
│ usePlayer │ 统一状态管理层（60+ 分支处理）
└─────────────┘
│
▼ React 状态
┌──────────────────────────────────────────┐
│ 可视化组件层 │
│ ArrayBars │ TreeVisualizer │ GraphView │
└──────────────────────────────────────────┘
核心原则：算法模块只负责"发生了什么"，播放器决定"何时推进"，可视化层决定"如何呈现"——三者完全解耦。
| 类别 | 技术 |
|---|---|
| 框架 | React 18 + TypeScript 5.6 |
| 构建 | Vite 6 |
| 样式 | Tailwind CSS 3 |
| 路由 | React Router v6 |
| 语言 | 纯 TypeScript / TSX，无状态管理库 |
# 安装依赖
npm install
# 启动开发服务器（http://localhost:5173）
npm run dev
# 构建生产版本
npm run build在可视化中，不同颜色代表不同的操作状态：
| 颜色 | 含义 |
|---|---|
| 靛蓝 | 当前选中 / 激活元素 |
| 琥珀 | 正在比较的元素 |
| 红色 | 正在交换的元素 |
| 绿色 | 已排序 / 已找到 |
| 紫色 | 基准元素（Pivot） |
| 青色 | 指针位置 |
| 灰蓝 | 已排除区间 |
algorithm_visualizer/
├── src/
│ ├── algorithms/steps/ # 各算法的步骤生成器
│ ├── components/ # React 组件
│ │ ├── Home/ # 首页
│ │ └── AlgorithmPage/ # 算法页（控制面板 + 可视化）
│ ├── constants/algorithms.ts # 算法元数据注册表
│ ├── engine/PlayerEngine.ts # 播放引擎
│ ├── hooks/usePlayer.ts # 核心状态钩子
│ ├── types/ # TypeScript 类型定义
│ └── utils/ # 工具函数
├── docs/ # 设计文档
├── index.html
├── package.json
└── vite.config.ts
- 链表增删改查可视化
- 栈与队列操作可视化
- 更多图算法（拓扑排序、最大流等）
- 多语言代码对比（C / Python / Java）
- 用户登录与学习进度记录
设计理念：先成为一个练习平台，而非单纯的动画展示器。理解算法最好的方式，是亲手一步步走完它的执行路径。