288 lines
10 KiB
TypeScript
288 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Search, Plus, Trash2 } from "lucide-react"
|
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
|
|
export interface ContentTarget {
|
|
id: string
|
|
avatar: string
|
|
name?: string
|
|
}
|
|
|
|
export interface ContentLibrary {
|
|
id: string
|
|
name: string
|
|
type?: string
|
|
count?: number
|
|
targets?: ContentTarget[]
|
|
}
|
|
|
|
export interface ContentSelectorProps {
|
|
/** 已选择的内容库 */
|
|
selectedLibraries: ContentLibrary[]
|
|
/** 内容库变更回调 */
|
|
onLibrariesChange: (libraries: ContentLibrary[]) => void
|
|
/** 上一步回调 */
|
|
onPrevious?: () => void
|
|
/** 下一步回调 */
|
|
onNext?: () => void
|
|
/** 保存回调 */
|
|
onSave?: () => void
|
|
/** 取消回调 */
|
|
onCancel?: () => void
|
|
/** 自定义内容库列表，不传则使用模拟数据 */
|
|
contentLibraries?: ContentLibrary[]
|
|
/** 自定义类名 */
|
|
className?: string
|
|
/** 是否使用卡片包装 */
|
|
withCard?: boolean
|
|
}
|
|
|
|
/**
|
|
* 统一的内容选择器组件
|
|
*/
|
|
export function ContentSelector({
|
|
selectedLibraries = [],
|
|
onLibrariesChange,
|
|
onPrevious,
|
|
onNext,
|
|
onSave,
|
|
onCancel,
|
|
contentLibraries: propContentLibraries,
|
|
className,
|
|
withCard = true,
|
|
}: ContentSelectorProps) {
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
|
|
// 模拟内容库数据
|
|
const defaultContentLibraries: ContentLibrary[] = [
|
|
{
|
|
id: "1",
|
|
name: "卡若朋友圈",
|
|
type: "朋友圈",
|
|
count: 307,
|
|
targets: [{ id: "t1", avatar: "/placeholder.svg?height=40&width=40&query=avatar1" }],
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "业务推广内容",
|
|
type: "朋友圈",
|
|
count: 156,
|
|
targets: [
|
|
{ id: "t2", avatar: "/placeholder.svg?height=40&width=40&query=avatar2" },
|
|
{ id: "t3", avatar: "/placeholder.svg?height=40&width=40&query=avatar3" },
|
|
],
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "产品介绍",
|
|
type: "群发",
|
|
count: 42,
|
|
targets: [
|
|
{ id: "t4", avatar: "/placeholder.svg?height=40&width=40&query=avatar4" },
|
|
{ id: "t5", avatar: "/placeholder.svg?height=40&width=40&query=avatar5" },
|
|
],
|
|
},
|
|
]
|
|
|
|
const contentLibraries = propContentLibraries || defaultContentLibraries
|
|
|
|
const handleAddLibrary = (library: ContentLibrary) => {
|
|
if (!selectedLibraries.some((l) => l.id === library.id)) {
|
|
onLibrariesChange([...selectedLibraries, library])
|
|
}
|
|
setIsDialogOpen(false)
|
|
}
|
|
|
|
const handleRemoveLibrary = (libraryId: string) => {
|
|
onLibrariesChange(selectedLibraries.filter((library) => library.id !== libraryId))
|
|
}
|
|
|
|
const filteredLibraries = contentLibraries.filter((library) =>
|
|
library.name.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
)
|
|
|
|
const ContentSelectorContent = () => (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<span className="text-red-500 mr-1">*</span>
|
|
<span className="font-medium">选择内容库:</span>
|
|
</div>
|
|
<Button variant="default" size="sm" onClick={() => setIsDialogOpen(true)} className="flex items-center">
|
|
<Plus className="h-4 w-4 mr-1" />
|
|
选择内容库
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
{selectedLibraries.length > 0 ? (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-16">序号</TableHead>
|
|
<TableHead>内容库名称</TableHead>
|
|
{contentLibraries[0]?.type && <TableHead>类型</TableHead>}
|
|
{contentLibraries[0]?.count && <TableHead>内容数量</TableHead>}
|
|
<TableHead>采集对象</TableHead>
|
|
<TableHead className="w-20">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{selectedLibraries.map((library, index) => (
|
|
<TableRow key={library.id}>
|
|
<TableCell>{index + 1}</TableCell>
|
|
<TableCell>{library.name}</TableCell>
|
|
{contentLibraries[0]?.type && <TableCell>{library.type}</TableCell>}
|
|
{contentLibraries[0]?.count && <TableCell>{library.count}</TableCell>}
|
|
<TableCell>
|
|
<div className="flex -space-x-2 flex-wrap">
|
|
{library.targets?.map((target) => (
|
|
<div key={target.id} className="w-10 h-10 rounded-md overflow-hidden border-2 border-white">
|
|
<img
|
|
src={target.avatar || "/placeholder.svg"}
|
|
alt={target.name || "Target"}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleRemoveLibrary(library.id)}
|
|
className="text-red-500 hover:text-red-700 hover:bg-red-50"
|
|
>
|
|
<Trash2 className="h-5 w-5" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
) : (
|
|
<div className="border rounded-md p-8 text-center text-gray-500">请点击"选择内容库"按钮添加内容库</div>
|
|
)}
|
|
</div>
|
|
|
|
{(onPrevious || onNext || onSave || onCancel) && (
|
|
<div className="flex space-x-2 justify-end mt-4">
|
|
{onPrevious && (
|
|
<Button type="button" variant="outline" onClick={onPrevious}>
|
|
上一步
|
|
</Button>
|
|
)}
|
|
{onNext && (
|
|
<Button type="button" onClick={onNext} disabled={selectedLibraries.length === 0}>
|
|
下一步
|
|
</Button>
|
|
)}
|
|
{onSave && (
|
|
<Button type="button" variant="outline" onClick={onSave}>
|
|
保存
|
|
</Button>
|
|
)}
|
|
{onCancel && (
|
|
<Button type="button" variant="outline" onClick={onCancel}>
|
|
取消
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<>
|
|
{withCard ? (
|
|
<Card className={className}>
|
|
<CardContent className="p-4 sm:p-6">
|
|
<ContentSelectorContent />
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className={className}>
|
|
<ContentSelectorContent />
|
|
</div>
|
|
)}
|
|
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
|
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>选择内容库</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
|
|
<Input
|
|
placeholder="搜索内容库名称"
|
|
className="pl-8"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<ScrollArea className="h-[400px]">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-16">序号</TableHead>
|
|
<TableHead>内容库名称</TableHead>
|
|
{contentLibraries[0]?.type && <TableHead>类型</TableHead>}
|
|
{contentLibraries[0]?.count && <TableHead>内容数量</TableHead>}
|
|
<TableHead>采集对象</TableHead>
|
|
<TableHead className="w-20">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredLibraries.map((library, index) => (
|
|
<TableRow key={library.id}>
|
|
<TableCell>{index + 1}</TableCell>
|
|
<TableCell>{library.name}</TableCell>
|
|
{contentLibraries[0]?.type && <TableCell>{library.type}</TableCell>}
|
|
{contentLibraries[0]?.count && <TableCell>{library.count}</TableCell>}
|
|
<TableCell>
|
|
<div className="flex -space-x-2 flex-wrap">
|
|
{library.targets?.map((target) => (
|
|
<div key={target.id} className="w-10 h-10 rounded-md overflow-hidden border-2 border-white">
|
|
<img
|
|
src={target.avatar || "/placeholder.svg"}
|
|
alt={target.name || "Target"}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleAddLibrary(library)}
|
|
disabled={selectedLibraries.some((l) => l.id === library.id)}
|
|
className="whitespace-nowrap"
|
|
>
|
|
{selectedLibraries.some((l) => l.id === library.id) ? "已选择" : "选择"}
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</ScrollArea>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|