154 lines
4.1 KiB
TypeScript
154 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { ChevronLeft } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { StepIndicator } from "@/app/components/ui-templates/step-indicator"
|
|
import { BasicSettings } from "./steps/basic-settings"
|
|
import { SourceSelection } from "./steps/source-selection"
|
|
import { ContentSettings } from "./steps/content-settings"
|
|
import { TagSettings } from "./steps/tag-settings"
|
|
import { PreviewAndConfirm } from "./steps/preview-confirm"
|
|
import { toast } from "@/components/ui/use-toast"
|
|
|
|
// 内容库表单数据类型
|
|
export interface ContentLibraryFormData {
|
|
name: string
|
|
description: string
|
|
type: "friends" | "groups" | "moments" | "mixed"
|
|
sources: {
|
|
id: string
|
|
name: string
|
|
type: string
|
|
avatar?: string
|
|
}[]
|
|
contentTypes: string[]
|
|
autoSync: boolean
|
|
syncInterval: number
|
|
tags: string[]
|
|
enabled: boolean
|
|
}
|
|
|
|
export default function NewContentLibraryPage() {
|
|
const router = useRouter()
|
|
const [currentStep, setCurrentStep] = useState(1)
|
|
const [formData, setFormData] = useState<ContentLibraryFormData>({
|
|
name: "",
|
|
description: "",
|
|
type: "friends",
|
|
sources: [],
|
|
contentTypes: ["text", "image"],
|
|
autoSync: true,
|
|
syncInterval: 24,
|
|
tags: [],
|
|
enabled: true,
|
|
})
|
|
|
|
const steps = [
|
|
{ number: 1, title: "基础设置" },
|
|
{ number: 2, title: "来源选择" },
|
|
{ number: 3, title: "内容设置" },
|
|
{ number: 4, title: "标签设置" },
|
|
{ number: 5, title: "预览确认" },
|
|
]
|
|
|
|
const updateFormData = (field: string, value: any) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[field]: value,
|
|
}))
|
|
}
|
|
|
|
const handleNext = () => {
|
|
if (currentStep < steps.length) {
|
|
setCurrentStep(currentStep + 1)
|
|
window.scrollTo(0, 0)
|
|
}
|
|
}
|
|
|
|
const handlePrevious = () => {
|
|
if (currentStep > 1) {
|
|
setCurrentStep(currentStep - 1)
|
|
window.scrollTo(0, 0)
|
|
} else {
|
|
router.back()
|
|
}
|
|
}
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
// 模拟API调用
|
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
|
|
|
toast({
|
|
title: "创建成功",
|
|
description: "内容库已成功创建",
|
|
})
|
|
|
|
router.push("/content")
|
|
} catch (error) {
|
|
console.error("创建内容库失败:", error)
|
|
toast({
|
|
title: "创建失败",
|
|
description: "创建内容库时发生错误，请重试",
|
|
variant: "destructive",
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 bg-gray-50 min-h-screen">
|
|
<header className="sticky top-0 z-10 bg-white border-b">
|
|
<div className="flex items-center p-4">
|
|
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
|
<ChevronLeft className="h-5 w-5" />
|
|
</Button>
|
|
<h1 className="text-lg font-medium ml-3">新建内容库</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="p-4 md:p-6 max-w-4xl mx-auto">
|
|
<StepIndicator currentStep={currentStep} steps={steps} />
|
|
|
|
<div className="mt-6">
|
|
{currentStep === 1 && (
|
|
<BasicSettings formData={formData} updateFormData={updateFormData} onNext={handleNext} />
|
|
)}
|
|
|
|
{currentStep === 2 && (
|
|
<SourceSelection
|
|
formData={formData}
|
|
updateFormData={updateFormData}
|
|
onNext={handleNext}
|
|
onPrevious={handlePrevious}
|
|
/>
|
|
)}
|
|
|
|
{currentStep === 3 && (
|
|
<ContentSettings
|
|
formData={formData}
|
|
updateFormData={updateFormData}
|
|
onNext={handleNext}
|
|
onPrevious={handlePrevious}
|
|
/>
|
|
)}
|
|
|
|
{currentStep === 4 && (
|
|
<TagSettings
|
|
formData={formData}
|
|
updateFormData={updateFormData}
|
|
onNext={handleNext}
|
|
onPrevious={handlePrevious}
|
|
/>
|
|
)}
|
|
|
|
{currentStep === 5 && (
|
|
<PreviewAndConfirm formData={formData} onSubmit={handleSubmit} onPrevious={handlePrevious} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|