修改架构，移动端优先。

save

src/pages/MacroPage.jsx

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { useNavigate, useLocation, Routes, Route, Navigate } from 'react-router-dom'
+import SwipeTabs from '../components/SwipeTabs.jsx'
+import DataView from './macro/DataView.jsx'
+import StrategyView from './macro/StrategyView.jsx'
+import ArticlesView from './macro/ArticlesView.jsx'
+import ArticleDetail from './macro/ArticleDetail.jsx'
+
+// 宏观: 顶栏 3 tab (经济文章 / 经济数据 / 策略研究), 默认 经济数据
+// /macro         → 重定向到 /macro/data
+// /macro/data    → 经济数据 (默认)
+// /macro/strategy→ 策略研究
+// /macro/articles→ 经济文章
+// /macro/articles/:slug → 文章详情
+const TABS = [
+  { key: 'data',     label: '经济数据', path: '/macro/data' },
+  { key: 'strategy', label: '策略研究', path: '/macro/strategy' },
+  { key: 'articles', label: '经济文章', path: '/macro/articles' },
+]
+
+function activeFromPath(pathname) {
+  if (pathname.startsWith('/macro/articles')) return 'articles'
+  if (pathname.startsWith('/macro/strategy')) return 'strategy'
+  return 'data'
+}
+
+export default function MacroPage() {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const active = activeFromPath(location.pathname)
+
+  const tabs = TABS.map((t) => ({
+    key: t.key,
+    label: t.label,
+    render: () => {
+      if (t.key === 'data') return <DataView />
+      if (t.key === 'strategy') return <StrategyView />
+      if (t.key === 'articles') return <ArticlesView />
+      return null
+    },
+  }))
+
+  function onChange(key) {
+    const next = TABS.find((t) => t.key === key)
+    if (next) navigate(next.path)
+  }
+
+  // 详情页 /macro/articles/:slug 单独走 React Router 渲染, 不参与滑屏
+  if (location.pathname.match(/^\/macro\/articles\/[^/]+$/)) {
+    return (
+      <Routes>
+        <Route path="articles/:slug" element={<ArticleDetail />} />
+      </Routes>
+    )
+  }
+
+  return (
+    <div>
+      <SwipeTabs tabs={tabs} active={active} onChange={onChange} />
+    </div>
+  )
+}