108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
import { useState } from 'react'
|
||
import { createPost, updatePost, type Post, type PostError } from '../api/posts'
|
||
import { Markdown } from './Markdown'
|
||
|
||
interface PostEditorProps {
|
||
token: string
|
||
post?: Post
|
||
onSaved: () => void
|
||
onCancel: () => void
|
||
}
|
||
|
||
const ERROR_TEXT: Record<PostError, string> = {
|
||
full: '文章数已达上限（200 篇）',
|
||
'too-large': '正文太长了（上限 64KB）',
|
||
'bad-input': '标题不能为空，标签也别太长',
|
||
failed: '保存失败，稍后再试',
|
||
}
|
||
|
||
export function PostEditor({ token, post, onSaved, onCancel }: PostEditorProps) {
|
||
const [title, setTitle] = useState(post?.title ?? '')
|
||
const [tag, setTag] = useState(post?.tag ?? '')
|
||
const [body, setBody] = useState(post?.body ?? '')
|
||
const [preview, setPreview] = useState(false)
|
||
const [saving, setSaving] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
|
||
const save = async () => {
|
||
setSaving(true)
|
||
setError(null)
|
||
try {
|
||
const input = { title, tag, body }
|
||
if (post) await updatePost(token, post.id, input)
|
||
else await createPost(token, input)
|
||
onSaved()
|
||
} catch (e) {
|
||
const reason = (e as Error).message as PostError
|
||
setError(ERROR_TEXT[reason] ?? ERROR_TEXT.failed)
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<section className="w-full px-6 py-14">
|
||
<div className="mb-8 flex items-center justify-between">
|
||
<h2 className="text-xs font-medium uppercase tracking-[0.3em] text-muted">
|
||
{post ? 'Edit post' : 'New post'}
|
||
</h2>
|
||
<button
|
||
onClick={() => setPreview((p) => !p)}
|
||
className="rounded-full border border-line px-4 py-1.5 text-xs font-medium uppercase tracking-[0.16em] text-muted transition-colors hover:border-accent hover:text-accent"
|
||
>
|
||
{preview ? 'Write' : 'Preview'}
|
||
</button>
|
||
</div>
|
||
|
||
{preview ? (
|
||
<article>
|
||
<h1 className="mb-6 font-display text-3xl font-medium text-text">
|
||
{title || '（无标题）'}
|
||
</h1>
|
||
<Markdown>{body || '_正文为空_'}</Markdown>
|
||
</article>
|
||
) : (
|
||
<div className="flex flex-col gap-4">
|
||
<input
|
||
value={title}
|
||
onChange={(e) => setTitle(e.target.value)}
|
||
placeholder="标题"
|
||
className="w-full rounded-lg border border-line bg-surface px-4 py-3 font-display text-2xl text-text outline-none focus:border-accent"
|
||
/>
|
||
<input
|
||
value={tag}
|
||
onChange={(e) => setTag(e.target.value)}
|
||
placeholder="标签（如 Rust、随笔）"
|
||
className="w-full rounded-lg border border-line bg-surface px-4 py-2 text-sm text-text outline-none focus:border-accent"
|
||
/>
|
||
<textarea
|
||
value={body}
|
||
onChange={(e) => setBody(e.target.value)}
|
||
placeholder="正文，支持 Markdown…"
|
||
rows={16}
|
||
className="w-full resize-y rounded-lg border border-line bg-surface px-4 py-3 font-mono text-sm leading-relaxed text-text outline-none focus:border-accent"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{error && <p className="mt-4 text-sm text-[#ff8585]">{error}</p>}
|
||
|
||
<div className="mt-8 flex items-center gap-3">
|
||
<button
|
||
onClick={save}
|
||
disabled={saving}
|
||
className="rounded-full bg-accent px-6 py-2 text-sm font-medium text-bg transition-opacity hover:opacity-90 disabled:opacity-50"
|
||
>
|
||
{saving ? '保存中…' : '保存'}
|
||
</button>
|
||
<button
|
||
onClick={onCancel}
|
||
disabled={saving}
|
||
className="rounded-full border border-line px-6 py-2 text-sm font-medium text-muted transition-colors hover:border-accent hover:text-accent disabled:opacity-50"
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|