# java-sort-visualization

**Repository Path**: Undest/java-sort-visualization

## Basic Information

- **Project Name**: java-sort-visualization
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-12
- **Last Updated**: 2026-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 排序算法可视化

基于 **Electron + React + TypeScript + Vite** 构建的排序算法可视化桌面应用。展示 6 种常见排序算法的执行动画，并同步显示对应的 Java 代码。

## 功能特性

- **6 种排序算法**：冒泡排序、选择排序、插入排序、归并排序、快速排序、堆排序
- **Canvas 动画**：柱状图实时展示排序过程，不同操作（比较 / 交换 / 已排序 / 基准值）使用不同颜色区分
- **代码同步高亮**：右侧同步显示 Java 代码，动画执行时高亮对应代码行
- **点击跳转**：点击代码某一行，动画自动跳转到该行对应的第一步
- **速度调节**：1x–20x 倍速滑动调节
- **数组规模**：10–50 个元素滑块调节
- **播放控制**：生成数组 / 播放 / 暂停 / 步进 / 重置
- **跨平台**：支持 macOS、Windows、Linux

## 颜色说明

| 颜色 | 含义 |
|------|------|
| 🟦 蓝色 `#4A90D9` | 默认状态 |
| 🟧 橙色 `#F5A623` | 正在比较 |
| 🟥 红色 `#E74C3C` | 正在交换 |
| 🟩 绿色 `#2ECC71` | 已排序 |
| 🟪 紫色 `#9B59B6` | 基准值（快速排序） |

## 技术栈

| 技术 | 用途 |
|------|------|
| Electron 32 | 桌面框架 |
| React 19 | UI 组件 |
| TypeScript | 类型安全 |
| Vite 6 | 前端构建 |
| Canvas API | 动画渲染 |
| electron-builder | 打包分发 |

## 快速开始

### 前置要求

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

### 安装与运行

```bash
# 克隆仓库
git clone https://gitee.com/Undest/java-sort-visualization.git
cd java-sort-visualization

# 安装依赖（国内用户使用镜像加速）
npm install --registry=https://registry.npmmirror.com

# 开发模式运行（启动 Vite + Electron）
npm run dev
```

### 构建发行版

```bash
# 构建当前平台安装包
npm run dist

# 构建产物在 release/ 目录下
```

**各平台产物：**

| 平台 | 文件格式 |
|------|----------|
| macOS | `.dmg` / `.zip` |
| Windows | `Setup.exe` (NSIS 安装包) |
| Linux | `.AppImage` / `.deb` |

> 在 macOS 上只能构建 macOS 版本。Windows 和 Linux 版本需要分别在对应平台上构建。

## 项目结构

```
├── electron/
│   ├── main.js              # Electron 主进程
│   └── preload.js           # 预加载脚本（contextBridge）
├── src/
│   ├── main.tsx             # React 入口
│   ├── App.tsx              # 根组件（状态管理 + 动画循环）
│   ├── App.css              # 全局样式
│   ├── components/
│   │   ├── Toolbar.tsx      # 顶栏：算法选择 + 控制按钮
│   │   ├── Visualizer.tsx   # Canvas 柱状图动画
│   │   ├── CodePanel.tsx    # Java 代码展示 + 行高亮
│   │   └── StatusBar.tsx    # 底部状态描述
│   ├── algorithms/
│   │   ├── types.ts         # SortStep 等类型定义
│   │   ├── registry.ts      # 算法注册表
│   │   ├── bubbleSort.ts    # 冒泡排序
│   │   ├── selectionSort.ts # 选择排序
│   │   ├── insertionSort.ts # 插入排序
│   │   ├── mergeSort.ts     # 归并排序
│   │   ├── quickSort.ts     # 快速排序
│   │   └── heapSort.ts      # 堆排序
│   └── javaCode/            # 各算法对应的 Java 代码字符串
├── index.html
├── vite.config.ts
├── tsconfig.json
├── electron-builder.yml     # 打包配置
└── package.json
```

## 操作说明

1. 从下拉菜单选择排序算法
2. 拖动滑块调整数组大小（10–50）
3. 点击 **生成数组** 生成随机数据
4. 点击 **▶ 播放** 开始排序动画
5. 使用速度滑块调节播放速度
6. 可随时 **暂停**、**单步前进**、**重置**
7. 点击右侧 Java 代码行可跳转到对应动画步骤

## 构建问题排查

### Windows 构建报错：Cannot create symbolic link

`electron-builder` 在打包 Windows 应用时会尝试下载 `winCodeSign` 工具，其 7z 压缩包内包含 macOS 的 `.dylib` 符号链接。Windows 上非管理员用户无法创建符号链接，导致解压失败。

**解决方案：** 在 `electron-builder.yml` 的 `win` 配置中设置 `signAndEditExecutable: false` 跳过代码签名和资源编辑步骤：

```yaml
win:
  target:
    - nsis
  signAndEditExecutable: false
```

> 此设置会跳过 exe 的版本信息嵌入和数字签名。本地使用无影响，若需分发签名版本，请在 macOS 上构建或使用管理员权限运行。

### 国内网络无法下载 NSIS / winCodeSign

`electron-builder` 构建 NSIS 安装包时需从 GitHub 下载 `nsis-3.0.4.1.7z` 及 `nsis-resources-3.4.1.7z`，国内网络可能无法直接访问。

**解决方案：** 通过代理构建：

```bash
# 设置代理（端口以实际为准）
export HTTP_PROXY=http://127.0.0.1:10809
export HTTPS_PROXY=http://127.0.0.1:10809

# 清理缓存后重新构建
rm -rf "$HOME/AppData/Local/electron-builder/Cache/nsis"
npm run dist
```

或者设置 `ELECTRON_BUILDER_BINARIES_MIRROR` 环境变量指向国内镜像（如有可用镜像）。

## 许可

MIT