用途:在项目中处理 UI 组件时使用,基于 shadcn/ui 组件、Tailwind CSS 样式、响应式设计和组件组合,创建新界面或调整现有界面。
主要能力:从 @/components/ui/ 引用 shadcn/ui 组件;用 Tailwind CSS 编写样式;采用移动优先的响应式布局;维护无障碍性(WCAG 2.1 AA),包括语义化 HTML、必要的 ARIA 标签、键盘导航、色彩对比度与屏幕阅读器支持;遵循设计系统的颜色与间距。
关键文件:src/components/ui/ 存放 shadcn/ui 组件;tailwind.config.ts 为 Tailwind 配置;src/styles/ 为全局样式;src/components/ 为自定义组件。
常见用法:从 @/components/ui/button、@/components/ui/card、@/components/ui/input 导入组件并按需组合(如把 Input 与 Button 放入 Card 中)。响应式使用 flex flex-col、md:flex-row、gap-4、p-4、md:p-6 等类,标题用 text-2xl、md:text-3xl、lg:text-4xl。按钮按语义选择样式,如主操作用背景色类、次要操作用 variant="outline"、破坏性操作用 variant="destructive"。租户颜色可通过 CSS 变量实现,例如在 style 中设置 --tenant-primary。
设计系统:主色为 Blaze Orange(#ea5a17),另有 Secondary Fun Green 与 Accent Bright Sun;使用 Tailwind 调色板。间距使用 Tailwind 刻度(4、8、12、16、24、32 等),移动端较小、桌面端较大。字体:移动端默认 text-base(16px),桌面端默认 text-lg(18px),标题用 text-2xl、text-3xl、text-4xl。
限制:资料未提供安装命令、收费价格、具体版本要求或与其他工具的集成方式;实际组件路径、颜色变量名和设计令牌以项目中的具体配置为准。