107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Card } from "../ui/card"
|
|
import { Button } from "../ui/button"
|
|
import { Input } from "../ui/input"
|
|
import { ChevronLeft, Search, Plus } from "lucide-react"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table"
|
|
|
|
interface ContentLibrary {
|
|
id: string
|
|
name: string
|
|
type: string
|
|
count: number
|
|
}
|
|
|
|
const mockLibraries: ContentLibrary[] = [
|
|
{
|
|
id: "1",
|
|
name: "卡若朋友圈",
|
|
type: "朋友圈",
|
|
count: 307,
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "业务推广内容",
|
|
type: "朋友圈",
|
|
count: 156,
|
|
},
|
|
]
|
|
|
|
export function ContentSelector({ onPrev, onFinish }) {
|
|
const [selectedLibraries, setSelectedLibraries] = useState<string[]>([])
|
|
|
|
return (
|
|
<Card className="p-6 max-w-4xl mx-auto">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-semibold">选择内容库</h2>
|
|
<Button>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
新建内容库
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4 mb-6">
|
|
<div className="flex-1">
|
|
<Input placeholder="搜索内容库" className="w-full" prefix={<Search className="w-4 h-4 text-gray-400" />} />
|
|
</div>
|
|
</div>
|
|
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-12">选择</TableHead>
|
|
<TableHead>内容库名称</TableHead>
|
|
<TableHead>类型</TableHead>
|
|
<TableHead>内容数量</TableHead>
|
|
<TableHead>操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{mockLibraries.map((library) => (
|
|
<TableRow key={library.id}>
|
|
<TableCell>
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedLibraries.includes(library.id)}
|
|
onChange={(e) => {
|
|
if (e.target.checked) {
|
|
setSelectedLibraries([...selectedLibraries, library.id])
|
|
} else {
|
|
setSelectedLibraries(selectedLibraries.filter((id) => id !== library.id))
|
|
}
|
|
}}
|
|
/>
|
|
</TableCell>
|
|
<TableCell>{library.name}</TableCell>
|
|
<TableCell>{library.type}</TableCell>
|
|
<TableCell>{library.count}</TableCell>
|
|
<TableCell>
|
|
<Button variant="ghost" size="sm">
|
|
预览内容
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
<div className="flex justify-between mt-8">
|
|
<Button variant="outline" onClick={onPrev}>
|
|
<ChevronLeft className="w-4 h-4 mr-2" />
|
|
上一步
|
|
</Button>
|
|
<Button
|
|
onClick={onFinish}
|
|
disabled={selectedLibraries.length === 0}
|
|
className="bg-green-500 hover:bg-green-600"
|
|
>
|
|
完成设置
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|