80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Label } from "@/components/ui/label"
|
|
import { FileDown } from "lucide-react"
|
|
|
|
interface ExportCardsDialogProps {
|
|
songId: string
|
|
}
|
|
|
|
export function ExportCardsDialog({ songId }: ExportCardsDialogProps) {
|
|
const [open, setOpen] = useState(false)
|
|
const [format, setFormat] = useState("csv")
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline" className="border-purple-200 hover:bg-purple-50 hover:text-purple-700">
|
|
<FileDown className="mr-2 h-4 w-4" />
|
|
导出卡牌ID
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
|
导出卡牌ID
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
选择导出格式并下载歌曲 <span className="font-medium">{songId}</span> 的所有卡牌ID。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="format">导出格式</Label>
|
|
<Select value={format} onValueChange={setFormat}>
|
|
<SelectTrigger id="format">
|
|
<SelectValue placeholder="选择格式" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="csv">CSV文件</SelectItem>
|
|
<SelectItem value="excel">Excel文件</SelectItem>
|
|
<SelectItem value="pdf">PDF文件</SelectItem>
|
|
<SelectItem value="json">JSON文件</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setOpen(false)}>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
|
|
onClick={() => {
|
|
// 模拟导出操作
|
|
setTimeout(() => {
|
|
setOpen(false)
|
|
}, 1000)
|
|
}}
|
|
>
|
|
<FileDown className="mr-2 h-4 w-4" />
|
|
导出
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|