前端组件规范

组件来源

来源	安装方式
AI Elements	pnpm dlx ai-elements add <component> -c desktop
shadcn/ui	pnpm dlx shadcn@latest add <component> -c desktop

使用规则

1. 已被 AI Elements 引用的 shadcn/ui 组件

AI Elements 依赖的 shadcn/ui 组件（Button、Collapsible、Tooltip 等）可能经过定制，与官方版本存在差异。

使用前确认：

• 对比 src/components/ui/<component>.tsx 与官方实现
• 检查 props、变体、样式是否一致
• 参考 AI Elements 组件中的使用方式

2. 新安装 shadcn/ui 组件

项目已配置 Radix 依赖，新安装的官方组件可能需要调整：

• 检查 asChild 实现方式
• 检查Radix依赖的引用方式

3. 更新 AI Elements 组件

更新 AI Elements 组件后，需确认：

• 依赖的 shadcn/ui 组件是否需要同步更新
• 类型定义是否兼容
• 现有代码是否需要适配

差异检查清单

□ props 接口是否一致
□ size/variant 变体是否完整
□ asChild 行为是否正确
□ 事件处理是否兼容
□ 样式变量是否可用