435 lines
18 KiB
TypeScript
435 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { useQuery, useMutation, gql } from '@apollo/client'
|
|
import { EnhancedSimpleEditor } from '@/components/tiptap-templates/simple/enhanced-simple-editor'
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { IconLoader, IconDeviceFloppy, IconEye, IconArrowLeft } from "@tabler/icons-react"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { toast } from "sonner"
|
|
|
|
const GET_BLOG = gql`
|
|
query GetBlog($id: UUID!) {
|
|
blog(id: $id) {
|
|
id
|
|
title
|
|
slug
|
|
excerpt
|
|
content
|
|
categoryId
|
|
status
|
|
featuredImage
|
|
metaTitle
|
|
metaDescription
|
|
publishedAt
|
|
viewCount
|
|
isFeatured
|
|
isActive
|
|
createdAt
|
|
updatedAt
|
|
}
|
|
}
|
|
`
|
|
|
|
const CREATE_BLOG = gql`
|
|
mutation CreateBlog($input: CreateBlogInput!) {
|
|
createBlog(input: $input) {
|
|
id
|
|
title
|
|
slug
|
|
status
|
|
}
|
|
}
|
|
`
|
|
|
|
const UPDATE_BLOG = gql`
|
|
mutation UpdateBlog($id: UUID!, $input: UpdateBlogInput!) {
|
|
updateBlog(id: $id, input: $input) {
|
|
id
|
|
title
|
|
slug
|
|
status
|
|
updatedAt
|
|
}
|
|
}
|
|
`
|
|
|
|
interface BlogData {
|
|
title: string
|
|
slug: string
|
|
excerpt: string
|
|
content: any
|
|
categoryId?: string
|
|
status: 'draft' | 'published' | 'archived'
|
|
featuredImage?: string
|
|
metaTitle?: string
|
|
metaDescription?: string
|
|
isFeatured: boolean
|
|
isActive: boolean
|
|
}
|
|
|
|
export default function EditorComponent() {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const blogId = searchParams.get('id')
|
|
const isEditing = Boolean(blogId)
|
|
|
|
const [blogData, setBlogData] = React.useState<BlogData>({
|
|
title: '',
|
|
slug: '',
|
|
excerpt: '',
|
|
content: null,
|
|
status: 'draft',
|
|
isFeatured: false,
|
|
isActive: true
|
|
})
|
|
|
|
const [isLoading, setIsLoading] = React.useState(false)
|
|
|
|
const { data: blogQuery, loading: blogLoading } = useQuery(GET_BLOG, {
|
|
variables: { id: blogId },
|
|
skip: !isEditing,
|
|
onCompleted: (data) => {
|
|
if (data?.blog) {
|
|
setBlogData({
|
|
title: data.blog.title || '',
|
|
slug: data.blog.slug || '',
|
|
excerpt: data.blog.excerpt || '',
|
|
content: data.blog.content,
|
|
categoryId: data.blog.categoryId,
|
|
status: data.blog.status || 'draft',
|
|
featuredImage: data.blog.featuredImage,
|
|
metaTitle: data.blog.metaTitle || '',
|
|
metaDescription: data.blog.metaDescription || '',
|
|
isFeatured: data.blog.isFeatured || false,
|
|
isActive: data.blog.isActive ?? true
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
const [createBlog] = useMutation(CREATE_BLOG)
|
|
const [updateBlog] = useMutation(UPDATE_BLOG)
|
|
|
|
const generateSlug = React.useCallback((title: string) => {
|
|
return title
|
|
.toLowerCase()
|
|
.replace(/[^\w\s-]/g, '')
|
|
.replace(/\s+/g, '-')
|
|
.replace(/-+/g, '-')
|
|
.trim()
|
|
}, [])
|
|
|
|
React.useEffect(() => {
|
|
if (blogData.title && !isEditing) {
|
|
const slug = generateSlug(blogData.title)
|
|
setBlogData(prev => ({ ...prev, slug }))
|
|
}
|
|
}, [blogData.title, generateSlug, isEditing])
|
|
|
|
const handleSave = async (publishStatus?: 'draft' | 'published') => {
|
|
if (!blogData.title || !blogData.slug || !blogData.content) {
|
|
toast.error('请填写标题、链接和内容')
|
|
return
|
|
}
|
|
|
|
setIsLoading(true)
|
|
|
|
try {
|
|
const input = {
|
|
title: blogData.title,
|
|
slug: blogData.slug,
|
|
excerpt: blogData.excerpt || undefined,
|
|
content: blogData.content,
|
|
categoryId: blogData.categoryId || undefined,
|
|
status: publishStatus || blogData.status,
|
|
featuredImage: blogData.featuredImage || undefined,
|
|
metaTitle: blogData.metaTitle || undefined,
|
|
metaDescription: blogData.metaDescription || undefined,
|
|
isFeatured: blogData.isFeatured,
|
|
isActive: blogData.isActive
|
|
}
|
|
|
|
if (isEditing) {
|
|
await updateBlog({
|
|
variables: {
|
|
id: blogId,
|
|
input
|
|
}
|
|
})
|
|
toast.success('博客已更新')
|
|
} else {
|
|
const result = await createBlog({
|
|
variables: { input }
|
|
})
|
|
toast.success('博客已创建')
|
|
const newBlogId = result.data?.createBlog?.id
|
|
if (newBlogId) {
|
|
router.push(`/admin/editor?id=${newBlogId}`)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
toast.error(isEditing ? '更新失败' : '创建失败')
|
|
console.error('Save error:', error)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleContentChange = (content: any) => {
|
|
setBlogData(prev => ({ ...prev, content }))
|
|
}
|
|
|
|
if (blogLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full">
|
|
<IconLoader className="h-8 w-8 animate-spin" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full">
|
|
{/* Main Editor Area */}
|
|
<div className="flex-1 flex flex-col">
|
|
{/* Header Toolbar */}
|
|
<div className="border-b sticky top-0 z-10">
|
|
<div className="flex h-14 items-center justify-between px-6">
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => router.push('/admin/blogs')}
|
|
>
|
|
<IconArrowLeft className="h-4 w-4 mr-2" />
|
|
返回
|
|
</Button>
|
|
|
|
<Badge variant={blogData.status === 'published' ? 'default' : 'secondary'}>
|
|
{blogData.status === 'draft' ? '草稿' :
|
|
blogData.status === 'published' ? '已发布' : '已归档'}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleSave('draft')}
|
|
disabled={isLoading}
|
|
>
|
|
<IconDeviceFloppy className="h-4 w-4 mr-2" />
|
|
保存草稿
|
|
</Button>
|
|
|
|
<Button
|
|
size="sm"
|
|
onClick={() => handleSave('published')}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? (
|
|
<IconLoader className="h-4 w-4 mr-2 animate-spin" />
|
|
) : (
|
|
<IconEye className="h-4 w-4 mr-2" />
|
|
)}
|
|
{blogData.status === 'published' ? '更新' : '发布'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Editor Content */}
|
|
<div className="flex-1 overflow-auto">
|
|
<div className="max-w-4xl mx-auto px-6 py-8">
|
|
{/* Title Input - WordPress Style */}
|
|
<div className="mb-6">
|
|
<input
|
|
type="text"
|
|
value={blogData.title}
|
|
onChange={(e) => setBlogData(prev => ({ ...prev, title: e.target.value }))}
|
|
placeholder="在此处输入标题"
|
|
className="w-full text-4xl font-bold border-none outline-none placeholder:text-gray-400 bg-transparent resize-none"
|
|
style={{ lineHeight: '1.2' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Slug Display (read-only for now) */}
|
|
{blogData.slug && (
|
|
<div className="mb-6 text-sm text-gray-500">
|
|
永久链接: <span className="text-blue-600">/blog/{blogData.slug}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Editor */}
|
|
<div className="min-h-[600px]">
|
|
<EnhancedSimpleEditor
|
|
content={blogData.content}
|
|
onChange={handleContentChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="w-80 border-l overflow-auto">
|
|
<div className="p-6 space-y-6">
|
|
{/* Publish Section */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">发布</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="status" className="text-xs font-medium text-gray-600">状态</Label>
|
|
<Select
|
|
value={blogData.status}
|
|
onValueChange={(value: 'draft' | 'published' | 'archived') =>
|
|
setBlogData(prev => ({ ...prev, status: value }))
|
|
}
|
|
>
|
|
<SelectTrigger className="mt-1">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="draft">草稿</SelectItem>
|
|
<SelectItem value="published">已发布</SelectItem>
|
|
<SelectItem value="archived">已归档</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="isFeatured"
|
|
checked={blogData.isFeatured}
|
|
onCheckedChange={(checked) =>
|
|
setBlogData(prev => ({ ...prev, isFeatured: !!checked }))
|
|
}
|
|
/>
|
|
<Label htmlFor="isFeatured" className="text-sm">推荐文章</Label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="isActive"
|
|
checked={blogData.isActive}
|
|
onCheckedChange={(checked) =>
|
|
setBlogData(prev => ({ ...prev, isActive: !!checked }))
|
|
}
|
|
/>
|
|
<Label htmlFor="isActive" className="text-sm">启用文章</Label>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Featured Image */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">特色图片</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{blogData.featuredImage ? (
|
|
<div className="relative">
|
|
<img
|
|
src={blogData.featuredImage}
|
|
alt="特色图片"
|
|
className="w-full h-32 object-cover rounded-md"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setBlogData(prev => ({ ...prev, featuredImage: '' }))}
|
|
className="mt-2 w-full"
|
|
>
|
|
移除图片
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="border-2 border-dashed border-gray-300 rounded-md p-6 text-center">
|
|
<p className="text-sm text-gray-500 mb-3">添加特色图片</p>
|
|
<Input
|
|
placeholder="图片URL"
|
|
value={blogData.featuredImage || ''}
|
|
onChange={(e) => setBlogData(prev => ({ ...prev, featuredImage: e.target.value }))}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Excerpt */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">摘要</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Textarea
|
|
value={blogData.excerpt}
|
|
onChange={(e) => setBlogData(prev => ({ ...prev, excerpt: e.target.value }))}
|
|
placeholder="输入摘要..."
|
|
rows={4}
|
|
className="resize-none"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-2">摘要是对文章内容的简短总结</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* SEO Settings */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">SEO 设置</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="metaTitle" className="text-xs font-medium text-gray-600">Meta 标题</Label>
|
|
<Input
|
|
id="metaTitle"
|
|
value={blogData.metaTitle || ''}
|
|
onChange={(e) => setBlogData(prev => ({ ...prev, metaTitle: e.target.value }))}
|
|
placeholder="SEO 标题"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="metaDescription" className="text-xs font-medium text-gray-600">Meta 描述</Label>
|
|
<Textarea
|
|
id="metaDescription"
|
|
value={blogData.metaDescription || ''}
|
|
onChange={(e) => setBlogData(prev => ({ ...prev, metaDescription: e.target.value }))}
|
|
placeholder="SEO 描述"
|
|
rows={3}
|
|
className="mt-1 resize-none"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="slug" className="text-xs font-medium text-gray-600">URL 别名</Label>
|
|
<Input
|
|
id="slug"
|
|
value={blogData.slug}
|
|
onChange={(e) => setBlogData(prev => ({ ...prev, slug: e.target.value }))}
|
|
placeholder="url-slug"
|
|
className="mt-1"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">URL 的最后部分</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |