用途:为应用添加版本徽章组件,触发元素显示“v1.43.0 | 004ddd9”(版本号加 7 位短提交哈希),提示框展示完整构建信息(版本、提交、时间戳、分支)与最近变更日志条目。构建期处理,无运行时开销。
主要能力:自动检测技术栈,包括 Next.js、Nuxt、SvelteKit、Vite+React/Vue、Create React App、纯 React;样式支持 Tailwind CSS、CSS Modules、styled-components、Emotion、纯 CSS;UI 库支持 shadcn/ui、Radix UI、Headless UI 或无。生成构建期脚本 scripts/parse-changelog.mjs 解析 CHANGELOG.md,提取最近 2 个版本,按 feat、fix、perf、breaking 分类,每版本最多 3 个特性、2 个其他变更,输出 JSON 供环境变量使用。配置构建管线注入构建信息环境变量(如 NEXT_PUBLIC_BUILD_INFO、VITE_BUILD_INFO)。组件具备键盘可访问性:可聚焦按钮触发、aria-label、焦点环,悬停与聚焦均可触发提示框,无构建信息时隐藏。
使用方式:命令 /components:version-badge,参数 --check-only 仅分析不修改,--location <header|footer|custom> 指定位置(默认 header)。示例:/components:version-badge --check-only;/components:version-badge --location footer。
适用场景:需要在页头、页脚、设置页或关于弹窗中展示版本与构建信息的 Web 应用。
限制:无 package.json 会警告并要求指定框架;未知框架需用户选择通用实现;无 CHANGELOG.md 时仅显示构建信息;已存在组件会先询问再覆盖或合并。具体收费、价格、平台与效果资料暂未提供。