336 lines
14 KiB
TypeScript
336 lines
14 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
||
import { bookData } from "@/lib/book-data"
|
||
import {
|
||
FileText,
|
||
BookOpen,
|
||
Settings2,
|
||
ChevronRight,
|
||
CheckCircle,
|
||
Edit3,
|
||
Save,
|
||
X,
|
||
RefreshCw,
|
||
Link2,
|
||
} from "lucide-react"
|
||
|
||
interface EditingSection {
|
||
id: string
|
||
title: string
|
||
price: number
|
||
content?: string
|
||
}
|
||
|
||
export default function ContentPage() {
|
||
const [expandedParts, setExpandedParts] = useState<string[]>(["part-1"])
|
||
const [editingSection, setEditingSection] = useState<EditingSection | null>(null)
|
||
const [isSyncing, setIsSyncing] = useState(false)
|
||
const [feishuDocUrl, setFeishuDocUrl] = useState("")
|
||
const [showFeishuModal, setShowFeishuModal] = useState(false)
|
||
|
||
const togglePart = (partId: string) => {
|
||
setExpandedParts((prev) => (prev.includes(partId) ? prev.filter((id) => id !== partId) : [...prev, partId]))
|
||
}
|
||
|
||
const totalSections = bookData.reduce(
|
||
(sum, part) => sum + part.chapters.reduce((cSum, ch) => cSum + ch.sections.length, 0),
|
||
0,
|
||
)
|
||
|
||
const handleEditSection = (section: { id: string; title: string; price: number }) => {
|
||
setEditingSection({
|
||
id: section.id,
|
||
title: section.title,
|
||
price: section.price,
|
||
content: "",
|
||
})
|
||
}
|
||
|
||
const handleSaveSection = () => {
|
||
if (editingSection) {
|
||
// 保存到本地存储或API
|
||
console.log("[v0] Saving section:", editingSection)
|
||
alert(`已保存章节: ${editingSection.title}`)
|
||
setEditingSection(null)
|
||
}
|
||
}
|
||
|
||
const handleSyncFeishu = async () => {
|
||
if (!feishuDocUrl) {
|
||
alert("请输入飞书文档链接")
|
||
return
|
||
}
|
||
setIsSyncing(true)
|
||
// 模拟同步过程
|
||
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||
setIsSyncing(false)
|
||
setShowFeishuModal(false)
|
||
alert("飞书文档同步成功！")
|
||
}
|
||
|
||
return (
|
||
<div className="p-8 max-w-6xl mx-auto">
|
||
<div className="flex justify-between items-center mb-8">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-white">内容管理</h2>
|
||
<p className="text-gray-400 mt-1">
|
||
共 {bookData.length} 篇 · {totalSections} 节内容
|
||
</p>
|
||
</div>
|
||
<Button onClick={() => setShowFeishuModal(true)} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
|
||
<FileText className="w-4 h-4 mr-2" />
|
||
同步飞书文档
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 飞书同步弹窗 */}
|
||
<Dialog open={showFeishuModal} onOpenChange={setShowFeishuModal}>
|
||
<DialogContent className="bg-[#0f2137] border-gray-700 text-white max-w-lg">
|
||
<DialogHeader>
|
||
<DialogTitle className="text-white flex items-center gap-2">
|
||
<Link2 className="w-5 h-5 text-[#38bdac]" />
|
||
同步飞书文档
|
||
</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<Label className="text-gray-300">飞书文档链接</Label>
|
||
<Input
|
||
className="bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
|
||
placeholder="https://xxx.feishu.cn/docx/..."
|
||
value={feishuDocUrl}
|
||
onChange={(e) => setFeishuDocUrl(e.target.value)}
|
||
/>
|
||
<p className="text-xs text-gray-500">请确保文档已开启公开访问权限</p>
|
||
</div>
|
||
<div className="bg-[#38bdac]/10 border border-[#38bdac]/30 rounded-lg p-3">
|
||
<p className="text-[#38bdac] text-sm">
|
||
同步说明：系统将自动解析飞书文档结构，按照标题层级导入为章节内容。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setShowFeishuModal(false)}
|
||
className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
onClick={handleSyncFeishu}
|
||
disabled={isSyncing}
|
||
className="bg-[#38bdac] hover:bg-[#2da396] text-white"
|
||
>
|
||
{isSyncing ? (
|
||
<>
|
||
<RefreshCw className="w-4 h-4 mr-2 animate-spin" />
|
||
同步中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<RefreshCw className="w-4 h-4 mr-2" />
|
||
开始同步
|
||
</>
|
||
)}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 章节编辑弹窗 */}
|
||
<Dialog open={!!editingSection} onOpenChange={() => setEditingSection(null)}>
|
||
<DialogContent className="bg-[#0f2137] border-gray-700 text-white max-w-2xl max-h-[80vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle className="text-white flex items-center gap-2">
|
||
<Edit3 className="w-5 h-5 text-[#38bdac]" />
|
||
编辑章节
|
||
</DialogTitle>
|
||
</DialogHeader>
|
||
{editingSection && (
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<Label className="text-gray-300">章节标题</Label>
|
||
<Input
|
||
className="bg-[#0a1628] border-gray-700 text-white"
|
||
value={editingSection.title}
|
||
onChange={(e) => setEditingSection({ ...editingSection, title: e.target.value })}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label className="text-gray-300">价格 (元)</Label>
|
||
<Input
|
||
type="number"
|
||
className="bg-[#0a1628] border-gray-700 text-white w-32"
|
||
value={editingSection.price}
|
||
onChange={(e) => setEditingSection({ ...editingSection, price: Number(e.target.value) })}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label className="text-gray-300">内容预览</Label>
|
||
<Textarea
|
||
className="bg-[#0a1628] border-gray-700 text-white min-h-[200px] placeholder:text-gray-500"
|
||
placeholder="此处显示章节内容，支持Markdown格式..."
|
||
value={editingSection.content}
|
||
onChange={(e) => setEditingSection({ ...editingSection, content: e.target.value })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<DialogFooter>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setEditingSection(null)}
|
||
className="border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
|
||
>
|
||
<X className="w-4 h-4 mr-2" />
|
||
取消
|
||
</Button>
|
||
<Button onClick={handleSaveSection} className="bg-[#38bdac] hover:bg-[#2da396] text-white">
|
||
<Save className="w-4 h-4 mr-2" />
|
||
保存修改
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
<Tabs defaultValue="chapters" className="space-y-6">
|
||
<TabsList className="bg-[#0f2137] border border-gray-700/50 p-1">
|
||
<TabsTrigger
|
||
value="chapters"
|
||
className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] text-gray-400"
|
||
>
|
||
<BookOpen className="w-4 h-4 mr-2" />
|
||
章节管理
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="hooks"
|
||
className="data-[state=active]:bg-[#38bdac]/20 data-[state=active]:text-[#38bdac] text-gray-400"
|
||
>
|
||
<Settings2 className="w-4 h-4 mr-2" />
|
||
钩子配置
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="chapters" className="space-y-4">
|
||
{bookData.map((part, partIndex) => (
|
||
<Card key={part.id} className="bg-[#0f2137] border-gray-700/50 shadow-xl overflow-hidden">
|
||
<CardHeader
|
||
className="cursor-pointer hover:bg-[#162840] transition-colors"
|
||
onClick={() => togglePart(part.id)}
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-[#38bdac] font-mono text-sm">0{partIndex + 1}</span>
|
||
<CardTitle className="text-white">{part.title}</CardTitle>
|
||
<Badge variant="outline" className="text-gray-400 border-gray-600">
|
||
{part.chapters.reduce((sum, ch) => sum + ch.sections.length, 0)} 节
|
||
</Badge>
|
||
</div>
|
||
<ChevronRight
|
||
className={`w-5 h-5 text-gray-400 transition-transform ${
|
||
expandedParts.includes(part.id) ? "rotate-90" : ""
|
||
}`}
|
||
/>
|
||
</div>
|
||
</CardHeader>
|
||
|
||
{expandedParts.includes(part.id) && (
|
||
<CardContent className="pt-0 pb-4">
|
||
<div className="space-y-3 pl-8 border-l-2 border-gray-700">
|
||
{part.chapters.map((chapter) => (
|
||
<div key={chapter.id} className="space-y-2">
|
||
<h4 className="font-medium text-gray-300">{chapter.title}</h4>
|
||
<div className="space-y-1">
|
||
{chapter.sections.map((section) => (
|
||
<div
|
||
key={section.id}
|
||
className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-[#162840] text-sm group transition-colors"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<CheckCircle className="w-4 h-4 text-[#38bdac]" />
|
||
<span className="text-gray-400">{section.title}</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-[#38bdac] font-medium">
|
||
{section.price === 0 ? "免费" : `¥${section.price}`}
|
||
</span>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleEditSection(section)}
|
||
className="text-gray-500 hover:text-[#38bdac] hover:bg-[#38bdac]/10 opacity-0 group-hover:opacity-100 transition-opacity"
|
||
>
|
||
<Edit3 className="w-4 h-4 mr-1" />
|
||
编辑
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
)}
|
||
</Card>
|
||
))}
|
||
</TabsContent>
|
||
|
||
<TabsContent value="hooks" className="space-y-4">
|
||
<Card className="bg-[#0f2137] border-gray-700/50 shadow-xl">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">引流钩子配置</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid w-full max-w-sm items-center gap-1.5">
|
||
<Label htmlFor="hook-chapter" className="text-gray-300">
|
||
触发章节
|
||
</Label>
|
||
<Select defaultValue="3">
|
||
<SelectTrigger id="hook-chapter" className="bg-[#0a1628] border-gray-700 text-white">
|
||
<SelectValue placeholder="选择章节" />
|
||
</SelectTrigger>
|
||
<SelectContent className="bg-[#0f2137] border-gray-700">
|
||
<SelectItem value="1" className="text-white hover:bg-[#38bdac]/20 focus:bg-[#38bdac]/20">
|
||
第一章
|
||
</SelectItem>
|
||
<SelectItem value="2" className="text-white hover:bg-[#38bdac]/20 focus:bg-[#38bdac]/20">
|
||
第二章
|
||
</SelectItem>
|
||
<SelectItem value="3" className="text-white hover:bg-[#38bdac]/20 focus:bg-[#38bdac]/20">
|
||
第三章 (默认)
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="grid w-full gap-1.5">
|
||
<Label htmlFor="message" className="text-gray-300">
|
||
引流文案
|
||
</Label>
|
||
<Textarea
|
||
placeholder="输入引导用户加群的文案..."
|
||
id="message"
|
||
className="bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
|
||
defaultValue="阅读更多精彩内容，请加入Soul创业实验派对群..."
|
||
/>
|
||
</div>
|
||
<Button className="bg-[#38bdac] hover:bg-[#2da396] text-white">保存配置</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
)
|
||
}
|