136 lines
4.8 KiB
TypeScript
136 lines
4.8 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 { Checkbox } from "@/components/ui/checkbox"
|
||
import { FileDown, Loader2 } from "lucide-react"
|
||
|
||
interface ExportCardsDialogProps {
|
||
foodId: string
|
||
}
|
||
|
||
export function ExportCardsDialog({ foodId }: ExportCardsDialogProps) {
|
||
const [open, setOpen] = useState(false)
|
||
const [format, setFormat] = useState("csv")
|
||
const [range, setRange] = useState("all")
|
||
const [includeHeaders, setIncludeHeaders] = useState(true)
|
||
const [includeMetadata, setIncludeMetadata] = useState(true)
|
||
const [isExporting, setIsExporting] = useState(false)
|
||
|
||
const handleExport = async () => {
|
||
setIsExporting(true)
|
||
// 模拟导出操作
|
||
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||
setIsExporting(false)
|
||
setOpen(false)
|
||
}
|
||
|
||
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">{foodId}</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 className="space-y-2">
|
||
<Label htmlFor="range">导出范围</Label>
|
||
<Select value={range} onValueChange={setRange}>
|
||
<SelectTrigger id="range">
|
||
<SelectValue placeholder="选择范围" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">所有卡牌</SelectItem>
|
||
<SelectItem value="unused">未激活卡牌</SelectItem>
|
||
<SelectItem value="used">已激活卡牌</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-3 pt-2">
|
||
<div className="flex items-center space-x-2">
|
||
<Checkbox
|
||
id="includeHeaders"
|
||
checked={includeHeaders}
|
||
onCheckedChange={(checked) => setIncludeHeaders(!!checked)}
|
||
/>
|
||
<Label htmlFor="includeHeaders" className="text-sm font-normal cursor-pointer">
|
||
包含表头
|
||
</Label>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2">
|
||
<Checkbox
|
||
id="includeMetadata"
|
||
checked={includeMetadata}
|
||
onCheckedChange={(checked) => setIncludeMetadata(!!checked)}
|
||
/>
|
||
<Label htmlFor="includeMetadata" className="text-sm font-normal cursor-pointer">
|
||
包含元数据（创建时间、批次信息等）
|
||
</Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setOpen(false)} disabled={isExporting}>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
|
||
onClick={handleExport}
|
||
disabled={isExporting}
|
||
>
|
||
{isExporting ? (
|
||
<>
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
导出中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<FileDown className="mr-2 h-4 w-4" />
|
||
导出
|
||
</>
|
||
)}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|