114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Search, CheckCircle2, Circle } from "lucide-react"
|
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
|
|
interface ContentLibrarySelectionDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
selectedLibraries: string[]
|
|
onSelect: (libraries: string[]) => void
|
|
}
|
|
|
|
export function ContentLibrarySelectionDialog({
|
|
open,
|
|
onOpenChange,
|
|
selectedLibraries,
|
|
onSelect,
|
|
}: ContentLibrarySelectionDialogProps) {
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
const [libraries] = useState([
|
|
{ id: "1", name: "卡若朋友圈", count: 58 },
|
|
{ id: "2", name: "暗黑4代练", count: 422 },
|
|
{ id: "3", name: "家装设计", count: 107 },
|
|
{ id: "4", name: "美食分享", count: 321 },
|
|
{ id: "5", name: "旅游攻略", count: 89 },
|
|
])
|
|
|
|
const [tempSelectedLibraries, setTempSelectedLibraries] = useState<string[]>(selectedLibraries)
|
|
|
|
const toggleLibrary = (libraryId: string) => {
|
|
setTempSelectedLibraries((prev) =>
|
|
prev.includes(libraryId) ? prev.filter((id) => id !== libraryId) : [...prev, libraryId]
|
|
)
|
|
}
|
|
|
|
const handleConfirm = () => {
|
|
onSelect(tempSelectedLibraries)
|
|
onOpenChange(false)
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
setTempSelectedLibraries(selectedLibraries)
|
|
onOpenChange(false)
|
|
}
|
|
|
|
const filteredLibraries = libraries.filter((library) =>
|
|
library.name.toLowerCase().includes(searchQuery.toLowerCase())
|
|
)
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-md p-0 overflow-hidden">
|
|
<DialogHeader className="px-4 py-3 border-b">
|
|
<DialogTitle>选择内容库</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="p-4">
|
|
<div className="relative mb-4">
|
|
<Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
|
|
<Input
|
|
placeholder="搜索内容库"
|
|
className="pl-10"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<ScrollArea className="h-[300px] pr-4">
|
|
<div className="space-y-2">
|
|
{filteredLibraries.map((library) => (
|
|
<div
|
|
key={library.id}
|
|
className="flex items-center justify-between p-3 rounded-lg border hover:bg-gray-50 cursor-pointer"
|
|
onClick={() => toggleLibrary(library.id)}
|
|
>
|
|
<div>
|
|
<h3 className="font-medium">{library.name}</h3>
|
|
<p className="text-sm text-gray-500">{library.count}条内容</p>
|
|
</div>
|
|
{tempSelectedLibraries.includes(library.id) ? (
|
|
<CheckCircle2 className="h-6 w-6 text-blue-500" />
|
|
) : (
|
|
<Circle className="h-6 w-6 text-gray-300" />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
|
|
<div className="flex border-t p-4">
|
|
<Button
|
|
variant="outline"
|
|
className="flex-1 mr-2"
|
|
onClick={handleCancel}
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
className="flex-1"
|
|
onClick={handleConfirm}
|
|
disabled={tempSelectedLibraries.length === 0}
|
|
>
|
|
确定 ({tempSelectedLibraries.length})
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|