# algo-visual **Repository Path**: zxinrun/algo-visual ## Basic Information - **Project Name**: algo-visual - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-12 - **Last Updated**: 2026-03-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # AlgoVisual - 算法动画可视化学习平台 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![Vue Version](https://img.shields.io/badge/Vue-3.5.25-green.svg)](https://vuejs.org/) [![Node Version](https://img.shields.io/badge/Node-16+-orange.svg)](https://nodejs.org/) ## 项目介绍 ### 项目定位 基于 Vue 3 + TypeScript + Vite 实现常见算法的动态可视化，帮助开发者/学生直观理解算法执行流程的开源项目。 ### 核心特色 - **动画效果**：支持算法执行步骤逐帧播放/暂停/回退，关键节点高亮标注 - **算法覆盖**：已实现排序（10种）、查找（5种）、字符串（6种）、链表（5种）、树（11种）、图、动态规划、回溯、分治、贪心等 10+ 类别共 50+ 种算法 - **交互体验**：支持自定义算法参数（数组长度/数值范围）、切换动画速度、单步执行 - **技术亮点**：基于 Vue 3 Composition API + TypeScript 实现，响应式布局适配多端 ### 应用场景 - **算法学习**：帮助初学者理解抽象算法逻辑，告别纯文字/代码的枯燥学习 - **教学演示**：教师课堂上展示算法执行过程，提升教学效率 - **自我复盘**：开发者验证算法思路，快速定位逻辑漏洞 ## 效果预览 ### 核心功能展示 | 排序动画 | 查找动画 | |---------|---------| | 冒泡/选择/插入/希尔/归并/快速/堆/计数/桶/基数排序 | 顺序/二分/插值/斐波那契/哈希查找 | | 字符串匹配 | 树遍历 | |-----------|--------| | KMP/BM/Rabin-Karp/LCS/回文/编辑距离 | 前序/中序/后序/层序遍历 | ## 快速开始 ### 环境要求 - Node.js: 16.0.0+ - npm: 8.0.0+ (或 yarn 1.22.0+) - 浏览器: Chrome 90+ / Firefox 88+ / Edge 90+（建议现代浏览器） ### 安装与运行 ```bash # 克隆项目 git clone https://gitee.com/zxinrun/algo-visual.git # 进入项目目录 cd algo-visual # 安装依赖 npm install # 本地开发运行 npm run dev # 打包构建（输出 dist 目录） npm run build # 预览构建结果 npm run preview ``` ## 项目结构 ``` algo-visual/ ├── src/ │ ├── algorithms/ # 算法实现 │ │ ├── sorting/ # 排序算法 (10种) │ │ ├── searching/ # 查找算法 (5种) │ │ ├── string/ # 字符串算法 (6种) │ │ ├── linkedList/ # 链表算法 (5种) │ │ ├── tree/ # 树算法 (11种) │ │ ├── graph/ # 图算法 │ │ ├── dynamicProgramming/ # 动态规划 │ │ ├── greedy/ # 贪心算法 │ │ ├── backtracking/ # 回溯算法 │ │ ├── divideConquer/ # 分治算法 │ │ ├── mathBit/ # 数学位运算 │ │ ├── advanced/ # 高级算法 │ │ └── massiveData/ # 大数据处理 │ ├── components/ # Vue 组件 │ │ ├── AlgorithmDetailTemplate.vue # 通用详情页模板 │ │ ├── ArrayElement.vue # 数组元素组件 │ │ ├── LinkedListElement.vue # 链表元素组件 │ │ ├── TreeElement.vue # 树元素组件 │ │ ├── GraphElement.vue # 图元素组件 │ │ ├── ControlPanel.vue # 控制面板组件 │ │ ├── CodePanel.vue # 代码展示面板 │ │ └── codes/ # 算法代码展示 │ ├── composables/ # 组合式函数 │ ├── types/ # TypeScript 类型定义 │ ├── views/ # 页面视图 │ ├── router/ # 路由配置 │ ├── App.vue │ └── main.ts ├── public/ # 静态资源 ├── index.html ├── package.json ├── vite.config.ts └── tsconfig.json ``` ## 路由说明 | 路径 | 说明 | |------|------| | `/` | 首页 (算法列表) | | `/sort/:id` | 排序算法演示 | | `/search/:id` | 查找算法演示 | | `/string` | 字符串算法列表 | | `/string/:id` | 字符串算法演示 | | `/linkedList` | 链表算法列表 | | `/linkedList/:id` | 链表算法演示 | | `/tree` | 树算法列表 | | `/tree/:id` | 树算法演示 | | `/graph` | 图算法列表 | | `/graph/:id` | 图算法演示 | | `/dp` | 动态规划列表 | | `/dp/:id` | 动态规划演示 | | `/greedy` | 贪心算法列表 | | `/greedy/:id` | 贪心算法演示 | | `/backtracking` | 回溯算法列表 | | `/backtracking/:id` | 回溯算法演示 | | `/divide-conquer` | 分治算法列表 | | `/divide-conquer/:id` | 分治算法演示 | | `/math-bit` | 数学位运算列表 | | `/math-bit/:id` | 数学位运算演示 | | `/advanced` | 高级算法列表 | | `/advanced/:id` | 高级算法演示 | | `/massive-data` | 大数据处理列表 | | `/massive-data/:id` | 大数据处理演示 | ## 公共组件 ### AlgorithmDetailTemplate - 通用详情页模板 通用详情页模板组件，用于统一各算法详情页的布局和交互。 **Props**: | 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | `title` | `string` | 是 | 页面标题 | | `titleEn` | `string` | 否 | 英文标题 | | `description` | `string` | 否 | 描述文字 | | `icon` | `string` | 否 | 标题图标 | | `timeComplexity` | `string` | 否 | 时间复杂度 | | `spaceComplexity` | `string` | 否 | 空间复杂度 | | `stability` | `boolean` | 否 | 是否稳定排序 | | `algorithmPrinciple` | `string` | 否 | 算法原理描述 | | `isPlaying` | `boolean` | 是 | 是否正在播放 | | `isComplete` | `boolean` | 是 | 是否已完成 | | `currentStep` | `number` | 是 | 当前步骤 | | `totalSteps` | `number` | 是 | 总步骤数 | | `speed` | `number` | 是 | 播放速度 | | `currentDescription` | `string` | 否 | 当前步骤描述 | | `showBackButton` | `boolean` | 否 | 是否显示返回按钮 | | `inputType` | `'none' \| 'array' \| 'number' \| 'text'` | 否 | 输入区域类型 | **Events**: | 事件名 | 参数 | 说明 | |--------|------|------| | `start` | - | 开始播放 | | `pause` | - | 暂停播放 | | `resume` | - | 继续播放 | | `reset` | - | 重置 | | `stepForward` | - | 上一步 | | `stepBackward` | - | 下一步 | | `speedChange` | `(speed: number)` | 速度变化 | | `seek` | `(step: number)` | 跳转到指定步骤 | | `back` | - | 返回（需要 showBackButton） | **Slots**: | 插槽名 | 说明 | |--------|------| | `#input` | 自定义输入区域 | | `#visualization` | 自定义可视化区域 | | `#code` | 代码展示区域 | | `#result` | 结果展示区域 | ### ArrayElement - 数组元素组件 用于展示排序/查找算法中的单个数组元素。 **Props**: | 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | `value` | `number` | 是 | 元素值 | | `state` | `ElementState` | 否 | 元素状态 (`default` \| `comparing` \| `swapping` \| `sorted` \| `found`) | | `maxValue` | `number` | 否 | 最大值（用于计算柱状图高度） | ### CodePanel - 代码展示面板 用于展示算法实现的代码。 **Props**: | 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | `algorithmId` | `string` | 是 | 算法 ID | | `codes` | `CodeData[]` | 否 | 代码数据（可选，不传则根据 algorithmId 自动查找） | ### ControlPanel - 控制面板 通用的播放控制面板组件。 **Props**: | 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | `isPlaying` | `boolean` | 是 | 是否正在播放 | | `isComplete` | `boolean` | 是 | 是否已完成 | | `speed` | `number` | 是 | 当前速度 | | `arrayLength` | `number` | 否 | 数组长度 | | `currentStep` | `number` | 是 | 当前步骤 | | `totalSteps` | `number` | 是 | 总步骤数 | ## 交互功能 - 生成随机数组/树 - 开始/暂停/继续动画 - 重置到初始状态 - 调整动画速度 (1x - 10x) - 单步执行查看每一步 - 自定义输入数据 ## 技术栈 - Vue 3 (Composition API + `