修改架构，移动端优先。

save

src/pages/macro/ArticleDetail.jsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import { useParams, useNavigate, Link } from 'react-router-dom'
+import { api } from '../../api/client.js'
+
+// 文章详情: /macro/articles/:slug
+export default function ArticleDetail() {
+  const { slug } = useParams()
+  const navigate = useNavigate()
+  const [article, setArticle] = useState(null)
+  const [err, setErr] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    api('/articles/' + encodeURIComponent(slug))
+      .then((data) => { if (!cancelled) setArticle(data.article) })
+      .catch((e) => !cancelled && setErr(e.message))
+      .finally(() => !cancelled && setLoading(false))
+    return () => { cancelled = true }
+  }, [slug])
+
+  if (loading) return <div className="loading">加载中...</div>
+  if (err) return <div className="error-banner">{err}</div>
+  if (!article) return <div className="empty">文章不存在</div>
+
+  return (
+    <div className="article-detail">
+      <div className="article-back" onClick={() => navigate(-1)} role="button">‹ 返回</div>
+      <h1>{article.title}</h1>
+      <div className="meta">{article.date}</div>
+      <div className="article-content" dangerouslySetInnerHTML={{ __html: article.contentHtml }} />
+    </div>
+  )
+}