51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
import React from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { FolderOpen, Music, Zap, Sparkles, Database, LucideIcon } from 'lucide-react'
|
|
|
|
interface QuickAction {
|
|
icon: LucideIcon
|
|
label: string
|
|
description: string
|
|
path: string
|
|
}
|
|
|
|
const QuickActions: React.FC = () => {
|
|
const quickActions: QuickAction[] = [
|
|
{ icon: Sparkles, label: 'AI 视频生成', description: '使用 AI 将图片转换为动态视频', path: '/ai-video' },
|
|
{ icon: Music, label: '音频处理', description: '处理音频文件，添加效果', path: '/audio' },
|
|
{ icon: Zap, label: 'AI 自动剪辑', description: '使用 AI 自动生成视频剪辑', path: '/editor' },
|
|
{ icon: FolderOpen, label: '导入媒体', description: '导入视频、音频和图片文件', path: '/media' },
|
|
{ icon: Database, label: 'KV 存储测试', description: '测试 Cloudflare KV 键值存储功能', path: '/kv-test' },
|
|
]
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-secondary-900 mb-6">快速操作</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{quickActions.map((action, index) => {
|
|
const IconComponent = action.icon
|
|
return (
|
|
<Link
|
|
key={index}
|
|
to={action.path}
|
|
className="card p-6 hover:shadow-md transition-shadow group"
|
|
>
|
|
<div className="flex items-start space-x-4">
|
|
<div className="p-3 bg-primary-100 rounded-lg group-hover:bg-primary-200 transition-colors">
|
|
<IconComponent className="text-primary-600" size={24} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-medium text-secondary-900 mb-1">{action.label}</h3>
|
|
<p className="text-sm text-secondary-600">{action.description}</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default QuickActions
|