feat: 本次提交更新内容如下
场景获客列表搞定
This commit is contained in:
笔记本里的永平
244
Cunkebao/app/content/new/steps/preview-confirm.tsx
Normal file
244
Cunkebao/app/content/new/steps/preview-confirm.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user