更换 UI

src/pages/macro/ArticleDetail.jsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react'
-import { useParams, useNavigate, Link } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom'
+import { NavBar } from 'antd-mobile'
 import { api } from '../../api/client.js'
 
 // 文章详情: /macro/articles/:slug
+// 使用 antd-mobile NavBar 提供原生风格的返回按钮
 export default function ArticleDetail() {
   const { slug } = useParams()
   const navigate = useNavigate()
@@ -20,16 +22,19 @@ export default function ArticleDetail() {
     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 className="article-page">
+      <NavBar onBack={() => navigate(-1)}>文章详情</NavBar>
+      {loading && <div className="loading">加载中...</div>}
+      {err && <div className="error-banner">{err}</div>}
+      {!loading && !err && !article && <div className="empty">文章不存在</div>}
+      {!loading && !err && article && (
+        <div className="article-detail">
+          <h1>{article.title}</h1>
+          <div className="meta">{article.date}</div>
+          <div className="article-content" dangerouslySetInnerHTML={{ __html: article.contentHtml }} />
+        </div>
+      )}
     </div>
   )
-}
+}