更换 UI

src/pages/macro/ArticlesView.jsx

@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
+import { List } from 'antd-mobile'
 import { api } from '../../api/client.js'
 
 // 经济文章: 列表, 点进 /macro/articles/:slug
+// 使用 antd-mobile List 仿原生设置/通讯录样式
 export default function ArticlesView() {
   const [articles, setArticles] = useState([])
   const [err, setErr] = useState('')
   const [loading, setLoading] = useState(true)
+  const navigate = useNavigate()
 
   useEffect(() => {
     let cancelled = false
@@ -25,15 +28,23 @@ export default function ArticlesView() {
   return (
     <div>
       <div className="page-title">经济文章</div>
-      <div className="list">
+      <List className="articles-list" mode="card">
         {articles.map((a) => (
-          <Link key={a.id} to={`/macro/articles/${encodeURIComponent(a.slug)}`} className="list-item">
-            <div className="list-item-title">{a.title}</div>
-            <div className="list-item-meta">{a.date}</div>
-            <div className="list-item-excerpt">{a.excerpt}</div>
-          </Link>
+          <List.Item
+            key={a.id}
+            title={a.title}
+            description={
+              <>
+                <div className="list-item-meta">{a.date}</div>
+                <div className="list-item-excerpt">{a.excerpt}</div>
+              </>
+            }
+            arrowIcon
+            clickable
+            onClick={() => navigate('/macro/articles/' + encodeURIComponent(a.slug))}
+          />
         ))}
-      </div>
+      </List>
     </div>
   )
-}
+}