123 lines (98 loc) · 2.99 KB

功能特性说明

🎯 核心功能

1. 算法可视化

✅ 实时展示滑动窗口算法的执行过程
✅ 清晰标记左右指针位置（L/R）
✅ 用不同颜色标识当前窗口和最小覆盖子串
- 黄色：当前窗口内的字符
- 绿色：找到的最小覆盖子串

2. 交互控制

✅ 播放控制
- 开始/暂停自动播放
- 单步前进
- 单步后退
- 重置到初始状态
✅ 速度控制
- 可调节播放速度（0.5x - 3.0x）
- 实时调整，立即生效

3. 输入定制

✅ 自定义源字符串 s
✅ 自定义目标字符串 t
✅ 应用按钮更新算法输入

4. 预设示例

✅ 力扣示例1：ADOBECODEBANC / ABC
✅ 力扣示例2：a / a
✅ 力扣示例3：a / aa
✅ 较长示例：ADOBECODEBANCABC / ABCC
✅ 复杂示例：AAAAABBBBBCCCCC / ABC

5. 实时状态展示

✅ 窗口状态：显示当前窗口中各字符的频次
✅ 步骤说明：详细解释每一步的操作
✅ 统计信息
- 当前窗口大小
- 当前最小覆盖子串长度
- 步骤进度

🎨 UI/UX 特性

设计风格

✅ 现代渐变背景（紫色主题）
✅ 毛玻璃效果（backdrop-filter）
✅ 圆角卡片设计
✅ 柔和阴影效果

动画效果

✅ 字符状态切换动画
✅ 按钮悬停效果
✅ 脉冲动画（找到最小覆盖子串时）
✅ 平滑过渡效果

响应式设计

✅ 支持桌面端
✅ 支持平板设备
✅ 支持移动端
✅ 自适应布局

🔧 技术实现

算法特点

✅ 滑动窗口算法完整实现
✅ O(m + n) 时间复杂度
✅ 步骤详细记录，支持回放
✅ 边界情况处理完善

代码质量

✅ React Hooks 最佳实践
✅ 组件化设计
✅ 清晰的代码注释
✅ 模块化的文件组织

📱 用户体验

易用性

✅ 直观的控制按钮
✅ 快捷键支持提示
✅ 即时反馈
✅ 清晰的视觉反馈

教育价值

✅ 算法步骤详细说明
✅ 可视化帮助理解
✅ 支持反复学习
✅ 多个示例覆盖不同情况

🚀 部署支持

开发环境

✅ Vite 快速开发服务器
✅ 热模块替换（HMR）
✅ 快速构建

生产部署

✅ GitHub Actions 自动部署
✅ GitHub Pages 托管
✅ 优化的构建输出
✅ 正确的路由配置

📊 浏览器兼容性

✅ Chrome (最新版本)
✅ Firefox (最新版本)
✅ Safari (最新版本)
✅ Edge (最新版本)

🎓 学习价值

这个可视化工具帮助学习：

滑动窗口算法的基本原理
哈希表在字符统计中的应用
双指针技巧的使用
算法优化思路（从暴力到优化）
时间复杂度分析

🔗 相关链接