组件概览VideoFly 组件库总览概述 VideoFly 包含丰富的 UI 组件集，基于以下技术构建： shadcn/ui - 基于 Radix UI 的可复用组件 Magic UI - 高级动画组件 Animate UI - 动画效果组件 Framer Motion - React 动画库 所有组件都支持深色模式和完整的 TypeScript 类型。 组件分类 视频生成器AI 视频生成的核心输入组件UI 组件基础 UI 组件，如按钮、卡片、对话框 导入组件 VideoFly 是单体应用，组件直接从项目路径导入： // UI 组件 import { Button, Card, Input } from '@/components/ui'; // 视频生成器 import { VideoGeneratorInput } from '@/components/video-generator'; // 积分组件 import { CreditBalance, CreditHistory } from '@/components/credits'; 主题支持 组件开箱即支持浅色和深色主题，由 next-themes 包控制。 import { ThemeProvider } from 'next-themes'; <ThemeProvider attribute="class" defaultTheme="system" enableSystem> <App /> </ThemeProvider> 组件目录结构 src/components/ ├── animate-ui/ # Animate UI 组件 ├── billing/ # 账单组件 ├── blog/ # 博客组件 ├── content/ # 内容组件 ├── creation/ # 创作相关组件 ├── credits/ # 积分组件 ├── k8s/ # K8s 集群组件 ├── landing/ # 落地页组件 ├── layout/ # 布局组件 ├── magicui/ # Magic UI 组件 ├── price/ # 价格组件 ├── tool/ # 工具组件 ├── ui/ # shadcn/ui 基础组件 ├── user/ # 用户组件 └── video-generator/ # 视频生成器组件 自定义样式 组件可以使用 Tailwind CSS 类进行自定义： <Button className="bg-blue-500 hover:bg-blue-600"> 自定义按钮 </Button> <Card className="border-blue-500 shadow-lg"> 自定义卡片 </Card> 下一节 视频生成器了解视频生成器组件UI 组件探索基础 UI 组件Previous模块概览Next组件概览