108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, use } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { ArrowLeft, Eye } from "lucide-react";
|
|
import PostEditor from "@/components/PostEditor";
|
|
import type { Post } from "@/lib/posts";
|
|
|
|
export default function EditPostPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ slug: string }>;
|
|
}) {
|
|
const router = useRouter();
|
|
const { slug } = use(params);
|
|
const [post, setPost] = useState<Post | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
try {
|
|
const res = await fetch(`/api/posts/${slug}`);
|
|
if (!res.ok) throw new Error("文章未找到");
|
|
setPost(await res.json());
|
|
} catch (err: unknown) {
|
|
setError(err instanceof Error ? err.message : "加载失败");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
load();
|
|
}, [slug]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="px-4 py-6 md:px-8 md:py-8">
|
|
<div className="flex items-center gap-3 mb-8">
|
|
<button type="button" onClick={() => router.back()} className="p-1 -ml-1 rounded hover:bg-surface text-muted hover:text-text transition-colors" title="返回">
|
|
<ArrowLeft size={16} />
|
|
</button>
|
|
<h2 className="text-lg font-bold text-text">编辑文章</h2>
|
|
</div>
|
|
<div className="text-center py-20 text-muted text-sm">加载中...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !post) {
|
|
return (
|
|
<div className="px-4 py-6 md:px-8 md:py-8">
|
|
<div className="flex items-center gap-3 mb-8">
|
|
<button type="button" onClick={() => router.back()} className="p-1 -ml-1 rounded hover:bg-surface text-muted hover:text-text transition-colors" title="返回">
|
|
<ArrowLeft size={16} />
|
|
</button>
|
|
<h2 className="text-lg font-bold text-text">编辑文章</h2>
|
|
</div>
|
|
<div className="text-center py-20 text-danger text-sm">{error || "文章未找到"}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 py-6 md:px-8 md:py-8">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<div className="flex items-center gap-3">
|
|
<button type="button" onClick={() => router.back()} className="p-1 -ml-1 rounded hover:bg-surface text-muted hover:text-text transition-colors" title="返回">
|
|
<ArrowLeft size={16} />
|
|
</button>
|
|
<h2 className="text-lg font-bold text-text">编辑文章</h2>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={async (e) => {
|
|
const btn = e.currentTarget;
|
|
const orig = btn.innerHTML;
|
|
btn.disabled = true;
|
|
btn.textContent = "⏳ 启动中...";
|
|
try {
|
|
const res = await fetch("/api/hugo");
|
|
const data = await res.json();
|
|
if (data.running) {
|
|
window.open(`${location.protocol}//${location.hostname}:1313/${post.frontMatter.slug}.html`, "_blank");
|
|
} else {
|
|
alert("Hugo 预览启动失败");
|
|
}
|
|
} catch {
|
|
alert("Hugo 预览启动失败");
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.innerHTML = orig;
|
|
}
|
|
}}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md border border-line text-muted hover:text-accent hover:border-accent/30 transition-colors disabled:opacity-50"
|
|
title="预览"
|
|
>
|
|
<Eye size={13} /> 预览
|
|
</button>
|
|
</div>
|
|
<p className="text-[13px] text-muted mb-8">{post.frontMatter.title}</p>
|
|
<PostEditor
|
|
initialData={{ frontMatter: post.frontMatter, content: post.content, dirPath: post.dirPath }}
|
|
isEditing
|
|
/>
|
|
</div>
|
|
);
|
|
}
|