VibeHub 上线以后,我继续补充术语,也调整了几个实际浏览时会遇到的问题。这轮更新主要处理三件事:让列表和详情之间的切换更连贯,让词汇库覆盖产品与测试场景,再把单纯查看术语延伸到练习和投稿。

列表和详情之间的切换

网站里详情页和列表页之间原本就有一镜到底的动画效果,但浏览器返回按钮和页面内部返回的表现不一致。这一次我把两条返回路径对齐了,无论使用哪种方式,都会得到相同的返回效果。

术语列表页

同一条浏览路径在手机上需要另一种操作方式。现在点击术语卡片进入详情以后,可以左右滑动切换词汇,不用每看完一个词就返回列表重新选择。

移动端下的术语详情页

分类增加以后重新整理入口

顶部栏需要容纳新增功能,原本平铺显示的分类也随之调整。现在这些入口折叠到「术语」菜单里,点击以后再查看完整分类。

折叠后的分类菜单和产品分类页面

这次同时扩充了产品分类,加入用户故事、用户用例和用户旅程等条目。之前这个分类只有 PRD、MVP 等几个词,已经不足以覆盖需求整理过程。

产品分类里的 PRD、MVP 等条目

技术栈分类里新增了测试模块,这是收到用户反馈以后补上的,包含单元测试、集成测试、端到端测试和冒烟测试等词。

技术栈分类下的测试模块

拿冒烟测试举例。我刚开始写代码时不知道它是什么意思,只是听别人提起。使用 Agent 编程时,也可能看到它说自己完成了冒烟测试。VibeHub 里的解释是:用最少的关键判断,检查系统是不是基本可用。比如把项目运行起来,进入一个页面检查,页面能够正常打开就算通过。

冒烟测试的术语详情页

像这样的名词现在都可以直接在 VibeHub 里查看,测试模块里还有回归测试、测试覆盖率、不稳定测试这些条目。

回归测试、测试覆盖率等测试条目

从查看术语进入练习

只查看解释很难判断自己是否真的理解,所以网站顶部新增了练习模块。我把一些常见术语放进具体情境里做成选择题。比如修改昵称后页面没有变化,Network 显示这个请求返回 400,题目会继续询问下一步最应该检查什么。

练习模块里的选择题

答对以后,页面会展示对应术语的完整解释。题目把名词放回可能遇到的开发情境,练习结果也能帮助我们确认自己是否理解了它。

答对后展示对应的术语详情

词汇库继续扩充时,也需要一个收集遗漏的入口。页面底部新增了术语投稿,点击后会打开飞书表单。如果发现缺少某个词,或者对网站有其他建议,可以在那里提交,我每天都会查看。

页脚的术语投稿入口

这轮更新没有改变 VibeHub 的目标,仍然是帮助我们准确理解和表达 Vibe Coding 里的术语。页面切换、分类菜单和移动端手势让查询过程更顺畅,练习和投稿则让词汇库可以继续补充和校正。