用途:在开发多风格组件、变体 props 或进行样式切换时使用,基于 class-variance-authority(CVA)统一管理组件变体。
主要能力:覆盖三种样式——Glass(模糊+透明+光晕,适合高级、现代、主视觉场景)、Outline(仅边框无填充,适合次要操作)、Flat(纯色无特效,适合密集界面或降级方案)。示例涵盖 Card 与 Button 变体的 CVA 定义,并支持按变体分别处理深色模式。
工作流(强制):实施前用 TeamCreate 启动 3 个代理,分别调用 fuse-ai-pilot:explore-codebase 检查现有变体模式、fuse-ai-pilot:research-expert 查阅 cva/class-variance-authority 文档;完成后运行 fuse-ai-pilot:sniper 进行验证。
验证清单:定义全部三种变体(glass、outline、flat);使用 CVA 或类似变体系统;按变体处理深色模式;指定默认变体;为每个变体提供悬停状态。
最佳实践:应使用 CVA 实现类型安全变体、一致定义三种样式、按变体处理深色模式、添加悬停/聚焦状态;不应混用变体系统、遗漏默认变体、跳过深色模式或忽略悬停状态。
使用方式:在组件中以 cva 定义基础类与 variants,并通过 VariantProps 获取变体类型;深色模式可结合 Tailwind 的 dark: 前缀,如 className="bg-white/80 dark:bg-black/40 backdrop-blur-xl"。
限制:资料未提供安装命令、具体版本、收费方式或性能数据;需依托支持 CVA 与 Tailwind 的项目环境。