245 lines
8.8 KiB
TypeScript
245 lines
8.8 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { FileText, ImageIcon, Video, LinkIcon, FileAudio, Tag, Clock, Check, X } from "lucide-react"
|
||
import Image from "next/image"
|
||
import type { ContentLibraryFormData } from "../page"
|
||
|
||
interface PreviewAndConfirmProps {
|
||
formData: ContentLibraryFormData
|
||
onSubmit: () => void
|
||
onPrevious: () => void
|
||
}
|
||
|
||
export function PreviewAndConfirm({ formData, onSubmit, onPrevious }: PreviewAndConfirmProps) {
|
||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||
|
||
const getContentTypeIcon = (type: string) => {
|
||
switch (type) {
|
||
case "text":
|
||
return <FileText className="h-4 w-4" />
|
||
case "image":
|
||
return <ImageIcon className="h-4 w-4" />
|
||
case "video":
|
||
return <Video className="h-4 w-4" />
|
||
case "link":
|
||
return <LinkIcon className="h-4 w-4" />
|
||
case "audio":
|
||
return <FileAudio className="h-4 w-4" />
|
||
default:
|
||
return null
|
||
}
|
||
}
|
||
|
||
const getContentTypeName = (type: string) => {
|
||
switch (type) {
|
||
case "text":
|
||
return "文本"
|
||
case "image":
|
||
return "图片"
|
||
case "video":
|
||
return "视频"
|
||
case "link":
|
||
return "链接"
|
||
case "audio":
|
||
return "音频"
|
||
default:
|
||
return type
|
||
}
|
||
}
|
||
|
||
const getLibraryTypeName = (type: string) => {
|
||
switch (type) {
|
||
case "friends":
|
||
return "微信好友"
|
||
case "groups":
|
||
return "微信群"
|
||
case "moments":
|
||
return "朋友圈"
|
||
case "mixed":
|
||
return "混合来源"
|
||
default:
|
||
return type
|
||
}
|
||
}
|
||
|
||
const getSyncIntervalText = (hours: number) => {
|
||
if (hours === 1) return "每1小时"
|
||
if (hours === 6) return "每6小时"
|
||
if (hours === 12) return "每12小时"
|
||
if (hours === 24) return "每天"
|
||
if (hours === 168) return "每周"
|
||
return `每${hours}小时`
|
||
}
|
||
|
||
const handleSubmit = async () => {
|
||
setIsSubmitting(true)
|
||
try {
|
||
await onSubmit()
|
||
} finally {
|
||
setIsSubmitting(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<Card>
|
||
<CardContent className="pt-6">
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h2 className="text-lg font-medium">预览确认</h2>
|
||
<p className="text-sm text-gray-500 mt-1">请确认内容库的设置信息，确认无误后点击"创建内容库"</p>
|
||
</div>
|
||
|
||
<Tabs defaultValue="basic">
|
||
<TabsList className="grid w-full grid-cols-4">
|
||
<TabsTrigger value="basic">基础信息</TabsTrigger>
|
||
<TabsTrigger value="sources">来源信息</TabsTrigger>
|
||
<TabsTrigger value="content">内容设置</TabsTrigger>
|
||
<TabsTrigger value="tags">标签信息</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="basic" className="p-4 border rounded-md mt-4 space-y-4">
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-500">内容库名称</h3>
|
||
<p className="mt-1">{formData.name}</p>
|
||
</div>
|
||
|
||
{formData.description && (
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-500">内容库描述</h3>
|
||
<p className="mt-1">{formData.description}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-500">内容库类型</h3>
|
||
<p className="mt-1">{getLibraryTypeName(formData.type)}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-500">启用状态</h3>
|
||
<div className="flex items-center mt-1">
|
||
{formData.enabled ? (
|
||
<>
|
||
<Check className="h-4 w-4 text-green-500 mr-1" />
|
||
<span>已启用</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<X className="h-4 w-4 text-red-500 mr-1" />
|
||
<span>已禁用</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="sources" className="p-4 border rounded-md mt-4 space-y-4">
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-500">已选择的来源</h3>
|
||
<div className="mt-2 space-y-2">
|
||
{formData.sources.length > 0 ? (
|
||
formData.sources.map((source) => (
|
||
<div key={source.id} className="flex items-center space-x-2 p-2 border rounded-md">
|
||
<div className="relative w-8 h-8 rounded-full overflow-hidden">
|
||
<Image
|
||
src={source.avatar || "/placeholder.svg"}
|
||
alt={source.name}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-medium">{source.name}</p>
|
||
<p className="text-xs text-gray-500">
|
||
{source.type === "friend" ? "微信好友" : source.type === "group" ? "微信群" : "公众号"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<p className="text-sm text-gray-500">未选择任何来源</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-500">来源总数</h3>
|
||
<p className="mt-1">{formData.sources.length} 个来源</p>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="content" className="p-4 border rounded-md mt-4 space-y-4">
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-500">内容类型</h3>
|
||
<div className="flex flex-wrap gap-2 mt-2">
|
||
{formData.contentTypes.map((type) => (
|
||
<Badge key={type} variant="outline" className="flex items-center gap-1">
|
||
{getContentTypeIcon(type)}
|
||
{getContentTypeName(type)}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-500">同步设置</h3>
|
||
<div className="flex items-center mt-1">
|
||
{formData.autoSync ? (
|
||
<>
|
||
<Check className="h-4 w-4 text-green-500 mr-1" />
|
||
<span>自动同步</span>
|
||
<Badge variant="outline" className="ml-2 flex items-center gap-1">
|
||
<Clock className="h-3 w-3" />
|
||
{getSyncIntervalText(formData.syncInterval)}
|
||
</Badge>
|
||
</>
|
||
) : (
|
||
<>
|
||
<X className="h-4 w-4 text-red-500 mr-1" />
|
||
<span>手动同步</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="tags" className="p-4 border rounded-md mt-4 space-y-4">
|
||
<div>
|
||
<h3 className="text-sm font-medium text-gray-500">标签</h3>
|
||
{formData.tags.length > 0 ? (
|
||
<div className="flex flex-wrap gap-2 mt-2">
|
||
{formData.tags.map((tag) => (
|
||
<Badge key={tag} variant="secondary" className="flex items-center gap-1">
|
||
<Tag className="h-3 w-3" />
|
||
{tag}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="text-sm text-gray-500 mt-1">未添加任何标签</p>
|
||
)}
|
||
</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="flex justify-between">
|
||
<Button variant="outline" onClick={onPrevious}>
|
||
上一步
|
||
</Button>
|
||
<Button onClick={handleSubmit} disabled={isSubmitting}>
|
||
{isSubmitting ? "创建中..." : "创建内容库"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|