修改架构，移动端优先。

save

src/pages/macro/ArticlesView.jsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { api } from '../../api/client.js'
+
+// 经济文章: 列表, 点进 /macro/articles/:slug
+export default function ArticlesView() {
+  const [articles, setArticles] = useState([])
+  const [err, setErr] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    api('/articles')
+      .then((data) => { if (!cancelled) setArticles(data.articles || []) })
+      .catch((e) => !cancelled && setErr(e.message))
+      .finally(() => !cancelled && setLoading(false))
+    return () => { cancelled = true }
+  }, [])
+
+  if (loading) return <div className="loading">加载中...</div>
+  if (err) return <div className="error-banner">{err}</div>
+  if (!articles.length) return <div className="empty">暂无文章</div>
+
+  return (
+    <div>
+      <div className="page-title">经济文章</div>
+      <div className="list">
+        {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>
+        ))}
+      </div>
+    </div>
+  )
+}