OPC

components/AdminPostList.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { Post } from "@/types/post";
+
+type AdminPost = Post & { createdAtText?: string };
+
+export function AdminPostList({ initialPosts }: { initialPosts: AdminPost[] }) {
+  const [posts, setPosts] = useState<AdminPost[]>(initialPosts);
+
+  async function handleDelete(slug: string) {
+    if (!window.confirm("确定要删除这篇文章吗？此操作不可恢复。")) return;
+    const res = await fetch(`/api/posts/${slug}`, { method: "DELETE" });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      alert(data.error || "删除失败");
+      return;
+    }
+    setPosts((prev) => prev.filter((post) => post.slug !== slug));
+  }
+
+  if (posts.length === 0) {
+    return (
+      <div className="rounded-2xl bg-white/80 p-4 text-sm text-slate-500 shadow-sm ring-1 ring-slate-100">
+        暂无文章。
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3 rounded-2xl bg-white/80 p-4 shadow-sm ring-1 ring-slate-100">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">最近发布</h3>
+        <span className="text-xs text-slate-400">共 {posts.length} 条</span>
+      </div>
+      <div className="space-y-3">
+        {posts.map((post) => (
+          <div
+            key={post.slug}
+            className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-slate-100 bg-white/70 p-3"
+          >
+            <div>
+              <Link href={`/p/${post.slug}`} className="font-medium text-slate-900 hover:text-brand-600">
+                {post.title}
+              </Link>
+              <p className="text-xs text-slate-500">
+                {post.createdAtText ||
+                  new Date(post.createdAt).toLocaleString("zh-CN", {
+                    hour12: false,
+                    timeZone: "Asia/Shanghai"
+                  })}
+              </p>
+              {post.tags && post.tags.length > 0 ? (
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {post.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="rounded-full bg-slate-100 px-2 py-1 text-xs text-slate-600"
+                    >
+                      #{tag}
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+            <div className="flex items-center gap-2">
+              <Link
+                href={`/admin/edit/${post.slug}`}
+                className="rounded-full bg-brand-50 px-3 py-1 text-xs font-medium text-brand-700 ring-1 ring-brand-100 hover:bg-brand-100"
+              >
+                编辑
+              </Link>
+              <button
+                type="button"
+                onClick={() => handleDelete(post.slug)}
+                className="rounded-full bg-red-50 px-3 py-1 text-xs font-medium text-red-600 ring-1 ring-red-100 hover:bg-red-100"
+              >
+                删除
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/CreatePostForm.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { useRouter } from "next/navigation";
+import { normalizeImageUrl } from "@/lib/normalize";
+
+const defaultIntro = `## 新帖内容
+
+- 这里支持 **Markdown**
+- 图片请上传到 img.020417.xyz 后填入链接
+`;
+
+export function CreatePostForm() {
+  const [title, setTitle] = useState("");
+  const [cover, setCover] = useState("");
+  const [tags, setTags] = useState("");
+  const [markdown, setMarkdown] = useState(defaultIntro);
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const normalizedCover = normalizeImageUrl(cover);
+      const res = await fetch("/api/posts", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          title,
+          markdown,
+          cover: normalizedCover,
+          tags: Array.from(
+            new Set(
+              tags
+                .split(",")
+                .map((t) => t.trim())
+                .filter(Boolean)
+            )
+          )
+        })
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        alert(data.error ? JSON.stringify(data.error) : "发布失败");
+      } else {
+        const data = await res.json();
+        router.push(`/p/${data.slug}`);
+        router.refresh();
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 rounded-2xl bg-white/80 p-5 shadow-sm ring-1 ring-slate-100">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold">新建一条信息</h3>
+          <p className="text-sm text-slate-500">填写后提交，立刻出现在首页最上方。</p>
+        </div>
+        <button
+          type="submit"
+          disabled={loading}
+          className="rounded-full bg-brand-600 px-4 py-2 text-sm font-medium text-white shadow hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {loading ? "发布中…" : "发布"}
+        </button>
+      </div>
+
+      <label className="block space-y-1">
+        <span className="text-sm font-medium text-slate-700">标题</span>
+        <input
+          required
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+          placeholder="比如：周末聚会安排"
+        />
+      </label>
+
+      <label className="block space-y-1">
+        <span className="text-sm font-medium text-slate-700">封面图（可选）</span>
+        <input
+          value={cover}
+          onChange={(e) => setCover(e.target.value)}
+          className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+          placeholder="https://img.020417.xyz/xxxx.png"
+        />
+      </label>
+
+      <label className="block space-y-1">
+        <span className="text-sm font-medium text-slate-700">标签（用逗号分隔，可选）</span>
+        <input
+          value={tags}
+          onChange={(e) => setTags(e.target.value)}
+          className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+          placeholder="朋友, 聚会, 通知"
+        />
+      </label>
+
+      <label className="block space-y-1">
+        <span className="text-sm font-medium text-slate-700">正文（Markdown）</span>
+        <textarea
+          required
+          value={markdown}
+          onChange={(e) => setMarkdown(e.target.value)}
+          rows={12}
+          className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+        />
+      </label>
+    </form>
+  );
+}

components/EditPostForm.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { normalizeImageUrl } from "@/lib/normalize";
+import { Post } from "@/types/post";
+
+export function EditPostForm({ post }: { post: Post }) {
+  const router = useRouter();
+  const [title, setTitle] = useState(post.title);
+  const [cover, setCover] = useState(post.cover || "");
+  const [tags, setTags] = useState(post.tags ? post.tags.join(", ") : "");
+  const [markdown, setMarkdown] = useState(post.markdown);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSave(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const normalizedCover = normalizeImageUrl(cover);
+      const res = await fetch(`/api/posts/${post.slug}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          title,
+          markdown,
+          cover: normalizedCover || null,
+          tags: Array.from(
+            new Set(
+              tags
+                .split(",")
+                .map((t) => t.trim())
+                .filter(Boolean)
+            )
+          )
+        })
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        alert(data.error ? JSON.stringify(data.error) : "保存失败");
+        return;
+      }
+      router.push("/admin");
+      router.refresh();
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!window.confirm("确定要删除这篇文章吗？此操作不可恢复。")) return;
+    const res = await fetch(`/api/posts/${post.slug}`, { method: "DELETE" });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      alert(data.error || "删除失败");
+      return;
+    }
+    router.push("/admin");
+    router.refresh();
+  }
+
+  return (
+    <form onSubmit={handleSave} className="space-y-4 rounded-2xl bg-white/80 p-5 shadow-sm ring-1 ring-slate-100">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h3 className="text-lg font-semibold">编辑文章</h3>
+          <p className="text-sm text-slate-500">保存后会立即更新到前台。</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={handleDelete}
+            className="rounded-full bg-red-50 px-4 py-2 text-sm font-medium text-red-600 ring-1 ring-red-100 hover:bg-red-100"
+          >
+            删除
+          </button>
+          <button
+            type="submit"
+            disabled={loading}
+            className="rounded-full bg-brand-600 px-4 py-2 text-sm font-medium text-white shadow hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {loading ? "保存中…" : "保存"}
+          </button>
+        </div>
+      </div>
+
+      <label className="block space-y-1">
+        <span className="text-sm font-medium text-slate-700">标题</span>
+        <input
+          required
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+        />
+      </label>
+
+      <label className="block space-y-1">
+        <span className="text-sm font-medium text-slate-700">封面图（可选）</span>
+        <input
+          value={cover}
+          onChange={(e) => setCover(e.target.value)}
+          className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+          placeholder="https://img.020417.xyz/xxxx.png"
+        />
+      </label>
+
+      <label className="block space-y-1">
+        <span className="text-sm font-medium text-slate-700">标签（用逗号分隔，可选）</span>
+        <input
+          value={tags}
+          onChange={(e) => setTags(e.target.value)}
+          className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+          placeholder="朋友, 聚会, 通知"
+        />
+      </label>
+
+      <label className="block space-y-1">
+        <span className="text-sm font-medium text-slate-700">正文（Markdown）</span>
+        <textarea
+          required
+          value={markdown}
+          onChange={(e) => setMarkdown(e.target.value)}
+          rows={12}
+          className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm shadow-inner focus:border-brand-500 focus:outline-none"
+        />
+      </label>
+    </form>
+  );
+}

components/MarkdownViewer.tsx

@@ -0,0 +1,10 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export function MarkdownViewer({ markdown }: { markdown: string }) {
+  return (
+    <article className="prose prose-slate max-w-none prose-a:text-brand-600 prose-img:rounded-xl">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
+    </article>
+  );
+}

components/PostCard.tsx

@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { Post } from "@/types/post";
+import { normalizeImageUrl } from "@/lib/normalize";
+
+type Props = {
+  post: Post;
+};
+
+export function PostCard({ post }: Props) {
+  const coverUrl = normalizeImageUrl(post.cover);
+  return (
+    <article className="group rounded-2xl bg-white/80 p-4 shadow-sm ring-1 ring-slate-100 transition hover:-translate-y-1 hover:shadow-md">
+      <div className="flex items-start justify-between gap-3">
+        <div className="space-y-1">
+          <Link
+            href={`/p/${post.slug}`}
+            className="block text-lg font-semibold text-slate-900 transition group-hover:text-brand-600"
+          >
+            {post.title}
+          </Link>
+          <p className="text-sm text-slate-500">
+            {new Date(post.createdAt).toLocaleString("zh-CN", { hour12: false })}
+          </p>
+        </div>
+        {coverUrl ? (
+          <Link href={`/p/${post.slug}`} className="shrink-0">
+            <img
+              src={coverUrl}
+              alt={post.title}
+              className="h-16 w-24 rounded-xl object-cover ring-1 ring-slate-100"
+              loading="lazy"
+              referrerPolicy="no-referrer"
+            />
+          </Link>
+        ) : null}
+      </div>
+      {post.tags && post.tags.length > 0 ? (
+        <div className="mt-3 flex flex-wrap gap-2">
+          {post.tags.map((tag) => (
+            <Link
+              key={tag}
+              href={`/tags/${encodeURIComponent(tag)}`}
+              className="rounded-full bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600 transition hover:bg-brand-50 hover:text-brand-700"
+            >
+              #{tag}
+            </Link>
+          ))}
+        </div>
+      ) : null}
+    </article>
+  );
+}