📊 SortAlgo Visualizer (排序算法可视化器)

这是一个基于 React 19 和 TypeScript 构建的现代化、交互式排序算法可视化工具。它旨在通过直观的 2D 动画和同步的伪代码高亮，帮助用户理解经典排序算法的运行机制。

✨ 主要功能

• 2D 可视化引擎：使用 CSS 动画和 Flexbox 布局实现流畅的柱状图排序动画。
• 10 种经典算法：涵盖基础排序、进阶排序以及非比较类排序算法。
• 同步教学模式：
  • 伪代码高亮：右侧面板实时显示当前算法的伪代码，并高亮正在执行的代码行。
  • 状态描述：左上角实时显示当前操作的文字解说（如"正在比较索引 3 和 4"）。
• 完全交互控制：
  • 播放、暂停、重置。
  • 单步执行：支持一步步手动执行算法，通过"下一步"按钮深入研究细节。
  • 速度调节：从极慢到极快，随意拖动滑块控制动画速度。
• 灵活的数据输入：
  • 随机生成：支持调整数组大小（5 - 50 个元素）。
  • 自定义输入：支持用户输入特定的 CSV 数据（例如 10, 5, 8, 3）来测试特定场景。
• 响应式设计：适配桌面端和移动端，控制面板可折叠以最大化演示区域。

🧠 支持的算法

1. Bubble Sort (冒泡排序)
2. Selection Sort (选择排序)
3. Insertion Sort (插入排序)
4. Shell Sort (希尔排序)
5. Quick Sort (快速排序)
6. Merge Sort (归并排序)
7. Heap Sort (堆排序)
8. Counting Sort (计数排序)
9. Bucket Sort (桶排序)
10. Radix Sort (基数排序)

🎨 颜色图例

在可视化过程中，柱子的颜色代表了元素当前的状态：

• 🟦 蓝色 (Default): 默认状态，未被选中。
• 🟨 黄色 (Compare): 正在进行比较的两个元素。
• 🟥 红色 (Swap/Write): 正在发生交换 (Swap) 或被重写值。
• 🟪 紫色 (Overwrite): 用于非比较排序（如归并排序），表示从辅助数组写回原数组。
• 🟩 绿色 (Sorted): 该位置的元素已完成排序，处于最终位置。

🛠️ 技术栈

• Frontend Framework: React 19 (Hooks, Functional Components)
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: SVG Icons
• Architecture:
  • 基于 Trace (轨迹) 的渲染机制：先预计算算法的每一步状态，再通过定时器重现，确保性能和可控性。

🚀 快速开始

1. 安装依赖

该项目依赖 React 和 Tailwind CSS。由于项目结构使用了 CDN importmap (在 index.html 中)，你可以直接通过简单的静态文件服务器运行，或者将其迁移到 Vite 环境中。

如果使用标准开发环境 (推荐):

# 安装依赖 (假设你已将其迁移到 standard create-react-app 或 vite 结构)
npm install

# 启动开发服务器
npm run dev

2. 核心文件结构

• services/sortingAlgorithms.ts: 包含所有排序算法的核心逻辑，负责生成可视化所需的 Trace 步骤。
• components/Bar2D.tsx: 单个柱状图组件，处理高度和颜色的平滑过渡。
• components/Controls.tsx: 底部控制栏，包含播放控制、滑块和输入框。
• components/CodePanel.tsx: 右侧伪代码显示面板。
• App.tsx: 主应用入口，协调状态管理。

---

Made with ❤️ by SortAlgo Team