# Algorithm

**Repository Path**: yzli_dev/algorithm

## Basic Information

- **Project Name**: Algorithm
- **Description**: 用于展示算法的前端应用
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-09
- **Last Updated**: 2026-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 算法动画可视化

一个基于 React + TypeScript 构建的交互式算法动画展示应用，通过可视化动画演示各种经典算法的执行过程，并配有完整的 Java 代码示例，帮助编程学习者和开发者直观理解算法原理。

## 特性

- **12种经典算法**：涵盖排序、搜索、图论、动态规划四大类别
  - 排序：冒泡排序、选择排序、插入排序、快速排序、归并排序、堆排序
  - 搜索：线性搜索、二分搜索
  - 图论：深度优先搜索(DFS)、广度优先搜索(BFS)、Dijkstra最短路径
  - 动态规划：斐波那契数列

- **交互式动画**：通过柱状图动态展示算法每一步的执行状态
  - 比较中（红色）、交换中（黄色）、已排序/找到（绿色）、基准值（紫色）

- **控制面板**：播放/暂停、上一步/下一步、速度调节（0.5x ~ 3x）、重置

- **Java 代码展示**：每个算法都配有完整的 Java 实现代码，支持语法高亮

- **自定义输入**：支持输入自定义数组或随机生成数组，实时观察算法执行

- **搜索与分类**：按名称/标签搜索算法，按类别浏览算法列表

## 技术栈

| 技术 | 版本 |
|------|------|
| React | ^18.2.0 |
| TypeScript | ^5.2.2 |
| Vite | ^5.2.0 |
| TailwindCSS | ^3.4.14 |
| React Router DOM | ^6.22.3 |

## 项目架构

```
src/
├── components/           # 公共组件
│   ├── Navbar.tsx        # 顶部导航栏（搜索、返回首页）
│   ├── Sidebar.tsx       # 左侧侧边栏（算法分类、快速入口）
│   ├── AlgorithmCard.tsx # 算法卡片（首页/分类页展示）
│   ├── ControlPanel.tsx  # 动画控制面板（播放/暂停/步进/速度）
│   ├── CodeViewer.tsx    # Java 代码查看器（语法高亮）
│   └── AnimationCanvas.tsx # 动画画布（柱状图可视化）
│
├── pages/                # 页面级组件
│   ├── HomePage.tsx      # 首页（分类展示、热门推荐）
│   ├── AlgorithmPage.tsx # 算法详情页（动画 + 代码 + 控制）
│   └── CategoryPage.tsx  # 分类页（按类别展示算法列表）
│
├── algorithms/           # 算法引擎层（核心逻辑）
│   ├── sorting/          # 排序算法实现
│   │   ├── bubbleSort.ts
│   │   ├── selectionSort.ts
│   │   ├── insertionSort.ts
│   │   ├── quickSort.ts
│   │   ├── mergeSort.ts
│   │   └── heapSort.ts
│   ├── searching/        # 搜索算法实现
│   │   ├── linearSearch.ts
│   │   └── binarySearch.ts
│   ├── graph/            # 图论算法实现
│   │   ├── dfs.ts
│   │   ├── bfs.ts
│   │   └── dijkstra.ts
│   ├── dp/               # 动态规划实现
│   │   └── fibonacci.ts
│   └── index.ts          # 算法引擎注册中心
│
├── data/                 # 静态数据
│   └── algorithms.ts     # 算法元数据（名称、描述、复杂度等）
│
├── types/                # TypeScript 类型定义
│   └── index.ts          # 全局类型声明
│
├── App.tsx               # 根组件（路由配置）
├── main.tsx              # 应用入口
└── index.css             # 全局样式 + Tailwind 指令
```

### 核心设计

- **算法引擎**：每个算法独立为一个模块，导出 `generateSteps`（生成动画步骤）和 `javaCode`（Java 代码字符串）
- **动画步骤**：每一步记录数组状态、比较/交换索引、排序进度、消息提示等信息
- **状态驱动渲染**：`AlgorithmPage` 组件管理播放状态，通过 `setInterval` 按速度递进步骤索引，驱动 `AnimationCanvas` 重新渲染

## 环境要求

- Node.js >= 18
- npm >= 9

## 部署与启动

### 1. 克隆项目

```bash
git clone <仓库地址>
cd Algorithm
```

### 2. 安装依赖

```bash
npm install
```

### 3. 本地开发启动

```bash
npm run dev
```

启动后访问 http://localhost:5173/

### 4. 生产构建

```bash
npm run build
```

构建产物输出至 `dist/` 目录，可直接部署到任意静态托管服务（如 Vercel、Netlify、GitHub Pages、Nginx 等）。

### 5. 预览生产构建

```bash
npm run preview
```

## 自定义扩展算法

1. 在 `src/algorithms/<category>/` 目录下新建算法文件（如 `newAlgo.ts`）
2. 实现 `generateSteps(input)` 函数，返回 `AnimationStep[]` 数组
3. 导出 `javaCode` 字符串
4. 在 `src/algorithms/index.ts` 中注册引擎
5. 在 `src/data/algorithms.ts` 中添加算法元数据

## 许可证

MIT