# 十大经典排序算法

**Repository Path**: candy_7/sort

## Basic Information

- **Project Name**: 十大经典排序算法
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-13
- **Last Updated**: 2026-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 十大经典排序算法

一个基于 **Vue 3 + TypeScript + Vite + Element Plus** 构建的排序算法教学项目，采用文档站点风格展示 **10 种经典排序算法**，并提供概念说明、复杂度对比、多语言代码示例，以及部分算法的动态可视化演示。

## 项目定位

本项目更偏向 **教学展示型前端应用**，适合用于：

- 数据结构与算法课程演示
- 排序算法自学与复习
- 前端可视化教学项目参考
- GitBook 风格知识型站点练习

## 核心特性

- 覆盖 10 种经典排序算法
- 首页集中展示复杂度、稳定性、分类与学习路径
- 每个算法页面独立讲解原理、流程、场景与代码实现
- 支持 **JavaScript / Java / Python / C++ / Go / PHP** 6 种语言切换查看
- 已实现 **冒泡 / 选择 / 插入 / 快速排序** 的动态可视化
- 使用 `Hash Router`，适合静态部署
- 具备上一页 / 下一页导航，阅读路径清晰

## 技术栈

- Vue 3
- TypeScript
- Vite 5
- Vue Router 4
- Element Plus
- Sass
- highlight.js

## 目录结构

```text
src/
├─ components/        # 通用组件：侧边栏、代码块、可视化、页脚导航等
├─ pages/             # 首页 + 10 个排序算法页面
├─ styles/            # 全局算法页样式
├─ App.vue            # 整体布局：顶部、侧边栏、内容区
└─ main.ts            # 应用入口与路由配置
```

## 支持的排序算法

| 路由 | 算法 | 类型 | 页面内容 |
| --- | --- | --- | --- |
| `/` | 首页 / README | 总览页 | 项目介绍、复杂度总表、分类说明 |
| `/bubble-sort` | 冒泡排序 | 比较排序 | 原理、流程、动画、基础版/优化版代码 |
| `/selection-sort` | 选择排序 | 比较排序 | 原理、流程、动画、代码实现 |
| `/insertion-sort` | 插入排序 | 比较排序 | 原理、流程、动画、代码实现 |
| `/shell-sort` | 希尔排序 | 比较排序 | 原理、特点、代码实现 |
| `/merge-sort` | 归并排序 | 比较排序 | 原理、复杂度、代码实现 |
| `/quick-sort` | 快速排序 | 比较排序 | 原理、流程、动画、优化版代码 |
| `/heap-sort` | 堆排序 | 比较排序 | 原理、特点、代码实现 |
| `/counting-sort` | 计数排序 | 非比较排序 | 原理、特点、代码实现 |
| `/bucket-sort` | 桶排序 | 非比较排序 | 原理、特点、代码实现 |
| `/radix-sort` | 基数排序 | 非比较排序 | 原理、特点、代码实现 |

## 本地运行

### 安装依赖

```bash
npm install
```

### 启动开发环境

```bash
npm run dev
```

默认访问地址通常为：`http://localhost:5173`

## 打包与预览

### 生产构建

```bash
npm run build
```

### 本地预览构建结果

```bash
npm run preview
```

> 已实际验证：当前项目可以成功执行 `npm run build`。

## 项目实现分析

### 1. 架构设计

项目采用非常清晰的 **文档站式结构**：

- `App.vue` 负责整体布局，不掺杂具体算法内容
- `main.ts` 集中管理路由，页面切换时自动更新标题
- `pages/` 按算法拆分，便于维护与扩展
- `components/` 抽离了导航、代码展示、页脚和动画逻辑

这种结构适合继续新增算法页面，也适合后续扩展为更完整的算法知识库。

### 2. 页面组织方式

项目首页并不是传统 landing page，而是承担了“README/总览页”的角色：

- 导航栏首页标题直接写为 `README`
- 首页集中汇总复杂度、稳定性、术语和学习路径
- 用户进入后可以快速选择任意算法继续阅读

这说明作者的目标不是单纯展示 UI，而是构建一个可阅读、可学习的知识型网站。

### 3. 组件复用思路

项目里最有价值的复用组件有：

- `SideNav.vue`：负责左侧目录导航
- `PageFooter.vue`：负责页面间顺序跳转
- `MultiCodeBlock.vue`：负责多语言代码切换与复制
- `SortVisualizer.vue`：负责部分算法的动态演示

其中 `MultiCodeBlock.vue` 的复用价值很高，几乎是所有算法页面的核心展示组件之一。

### 4. 交互体验特点

当前项目的交互重点不是复杂业务，而是“学习体验”：

- 侧边导航固定，便于快速切换章节
- 页面信息密度适中，阅读成本低
- 动画演示支持开始、暂停、重置、调速
- 代码支持高亮与复制，适合教学和练习

## 当前项目的优点

- 主题聚焦，目标明确
- 页面风格统一，适合连续阅读
- 算法知识与 UI 展示结合得比较自然
- 路由拆分清晰，便于后续新增页面
- 使用懒加载页面组件，基础性能意识较好
- `Hash` 路由对静态部署友好

## 当前可改进点

基于现有代码和构建结果，这个项目还有一些可以继续打磨的地方：

1. **可视化覆盖不完整**：目前动画仅支持 4 种算法，其他页面主要还是静态讲解。
2. **部分通用组件未充分使用**：如 `AlgorithmInfo.vue`、`CodeBlock.vue` 已存在，但页面中复用并不充分。
3. **打包体积偏大**：构建结果里主包较大，存在 chunk size 警告。
4. **样式注释写法不规范**：`App.vue` 的普通 `<style>` 中使用了 `//` 注释，构建时会给出 CSS warning。
5. **Sass 依赖有 legacy API 警告**：当前构建虽成功，但后续建议跟进依赖升级。
6. **移动端体验还可继续增强**：侧边栏在小屏下隐藏，但没有明显的菜单展开入口。
7. **仓库内容可进一步整理**：当前目录中包含 `dist`、`node_modules`，实际仓库通常不建议提交这些产物。

## 后续优化建议

如果你准备继续迭代这个项目，建议优先做下面几件事：

- 为剩余 6 种算法补齐可视化动画
- 抽象统一的“算法详情页模板组件”，减少页面重复代码
- 用 `manualChunks` 或按需引入优化打包体积
- 修正 CSS 注释与 Sass 警告
- 增加移动端菜单按钮和响应式导航体验
- 补充部署文档，例如 GitHub Pages / Vercel / Netlify
- 增加算法伪代码、流程图、习题与测试数据示例

## 开发说明

### 路由模式

项目使用：

```ts
createWebHashHistory()
```

这意味着它非常适合部署到静态托管平台，不需要服务端额外处理 history fallback。

### 路径别名

项目已配置：

```ts
@ -> src
```

因此页面和组件中大量使用 `@/components/...`、`@/pages/...` 的导入方式。

## 适合谁使用

- 正在学习排序算法的学生
- 需要做算法教学演示的老师
- 想练习 Vue 组件化与路由组织的前端开发者
- 想搭建知识型前端展示项目的开发者