Bayan Flow 0.2.0：完善基础（i18n、RTL、测试以及小的用户体验改进）

Source: Dev.to

快速回顾

Bayan Flow 是一个使用 React 19、Vite、Tailwind 和 Framer Motion 构建的交互式算法可视化工具。目标是让算法不仅仅是正确的，而是直观易懂的。

0.2.0 版的驱动因素

1. 可访问性 / 国际化 – 仅有英文对教育工具来说不够；新增了法语和阿拉伯语。
2. 打磨 / 用户体验 – 首页、引导、音效、全屏模式以及更细致的 UI 行为。
3. 可维护性 / 基础设施 – 测试、CI/CD 与依赖自动化，以保证未来功能的稳定性。

国际化与 RTL

• 使用 i18next 实现英文、法语和阿拉伯语。将字符串抽取到 JSON 中非常直接。
• 阿拉伯语带来了真正的挑战：布局方向。
• Tailwind 4 支持 RTL，但需要有意识的改动：
  • 将方向类（ml-4、pl-2）替换为逻辑类（ms-4、ps-2）。
  • 审计组件的动画方向（例如 slide‑in），在文本方向切换时进行反转。
  • 实现了基于浏览器语言的自动语言检测，并提供手动覆盖选项。

结果： 应用能够在 LTR 与 RTL 之间顺畅切换。正确时几乎不被察觉，错误时则非常显眼，因此现在处理可以避免未来的痛点。

音频反馈（可选）

使用 Tone.js 添加了可选择的音效提示：

• 排序比较时的哔声。
• 路径寻找探索时的网格音调。
• 路径完成时的短和弦。

所有声音均标记为“实验性”，可随时关闭。欢迎提供反馈。

UI 打磨与 UX 改进

• 首页，包含英雄区和功能区。
• 路线图预览 与基础引导文案。
• React Router 用于首页、可视化页面和路线图页面，使项目对首次访问者和教师更友好。
• 全屏模式，隐藏其他组件，专注于可视化。
• 自动隐藏图例面板，需要时出现，闲置时淡出。
• 修复了在不同屏幕比例（Windows 与非 Linux）下的控制面板布局。
• 小幅可访问性调整，以提升可发现性和清晰度。

基础设施与测试

• Vitest：31 个测试文件，覆盖 666 条测试（组件、hooks、工具函数）。
• CI/CD 大幅改进：Netlify 分支部署、PR 保护以及 Codecov 覆盖率统计。
• 配置 Renovate 自动化依赖更新。

覆盖率尚未达到 100 %，但已足以在不破坏核心流程的前提下自信地进行重构。

未来工作

基础已稳固，接下来的步骤包括：

• 添加更多排序和路径寻找算法。
• 改进复杂度分析。
• 集成并排展示的 Python 代码，让用户同时看到可视化和实现。

链接

• 应用：
• GitHub 仓库：
• Product Hunt：