From 6620be379b8d324856f573dbeb807d1929c411bd Mon Sep 17 00:00:00 2001
From: cc <thavenx@outlook.com>
Date: Sat, 27 Jun 2026 16:53:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(blog):=20PostArticle=20=E5=85=A8=E6=96=87?=
 =?UTF-8?q?=E9=98=85=E8=AF=BB=E9=A1=B5=EF=BC=88=E7=BC=96=E8=BE=91/?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=BA=8C=E6=AC=A1=E7=A1=AE=E8=AE=A4=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 Client/src/components/PostArticle.tsx | 123 ++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 Client/src/components/PostArticle.tsx

diff --git a/Client/src/components/PostArticle.tsx b/Client/src/components/PostArticle.tsx
new file mode 100644
index 0000000..3a9b7df
--- /dev/null
+++ b/Client/src/components/PostArticle.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react'
+import { deletePost, getPost, readingTime, type Post } from '../api/posts'
+import { Markdown } from './Markdown'
+
+interface PostArticleProps {
+  token: string
+  id: string
+  onBack: () => void
+  onEdit: (post: Post) => void
+  onDeleted: () => void
+}
+
+function formatDate(secs: number): string {
+  return new Date(secs * 1000).toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+export function PostArticle({ token, id, onBack, onEdit, onDeleted }: PostArticleProps) {
+  const [post, setPost] = useState<Post | null>(null)
+  const [status, setStatus] = useState<'loading' | 'ok' | 'notfound'>('loading')
+  const [confirmDel, setConfirmDel] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+
+  useEffect(() => {
+    let alive = true
+    setStatus('loading')
+    getPost(token, id)
+      .then((p) => {
+        if (alive) {
+          setPost(p)
+          setStatus('ok')
+        }
+      })
+      .catch(() => {
+        if (alive) setStatus('notfound')
+      })
+    return () => {
+      alive = false
+    }
+  }, [token, id])
+
+  const doDelete = async () => {
+    if (!post) return
+    setDeleting(true)
+    try {
+      await deletePost(token, post.id)
+      onDeleted()
+    } catch {
+      setDeleting(false)
+      setConfirmDel(false)
+    }
+  }
+
+  if (status === 'loading') {
+    return <section className="w-full px-6 py-14 text-sm text-muted">加载中…</section>
+  }
+
+  if (status === 'notfound' || !post) {
+    return (
+      <section className="w-full px-6 py-14">
+        <p className="text-sm text-muted">这篇文章不存在或已被删除。</p>
+        <button
+          onClick={onBack}
+          className="mt-4 rounded-full border border-line px-4 py-1.5 text-xs uppercase tracking-[0.16em] text-muted transition-colors hover:border-accent hover:text-accent"
+        >
+          ← 返回列表
+        </button>
+      </section>
+    )
+  }
+
+  return (
+    <article className="w-full px-6 py-14">
+      <div className="mb-8 flex items-center justify-between">
+        <button
+          onClick={onBack}
+          className="text-xs uppercase tracking-[0.16em] text-muted transition-colors hover:text-accent"
+        >
+          ← Back
+        </button>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => onEdit(post)}
+            className="text-xs uppercase tracking-[0.16em] text-muted transition-colors hover:text-accent"
+          >
+            编辑
+          </button>
+          {confirmDel ? (
+            <button
+              onClick={doDelete}
+              disabled={deleting}
+              className="text-xs uppercase tracking-[0.16em] text-[#ff8585] disabled:opacity-50"
+            >
+              {deleting ? '删除中…' : '确认删除'}
+            </button>
+          ) : (
+            <button
+              onClick={() => setConfirmDel(true)}
+              className="text-xs uppercase tracking-[0.16em] text-muted transition-colors hover:text-[#ff8585]"
+            >
+              删除
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="mb-2 font-mono text-xs uppercase tracking-wider text-accent/70">
+        {post.tag}
+      </div>
+      <h1 className="rainbow-clip font-display text-4xl font-medium text-text">{post.title}</h1>
+      <div className="mt-3 font-mono text-xs uppercase tracking-wider text-muted">
+        {formatDate(post.createdAt)} · {readingTime(post.body)} read
+      </div>
+
+      <div className="rainbow-gradient mt-6 mb-8 h-px w-full opacity-60" aria-hidden />
+
+      <Markdown>{post.body}</Markdown>
+    </article>
+  )
+}