| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Name | Name | Last commit date | ||
|---|---|---|---|---|
交互式算法可视化与练习平台
一个纯前端的中文算法可视化应用，覆盖排序、搜索、树、平衡树、图与网络等五大类共 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) | ✅ |
算法步骤生成器（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
设计理念：先成为一个练习平台，而非单纯的动画展示器。理解算法最好的方式，是亲手一步步走完它的执行路径。
| Back | FazBrowse Home | New Git URL |