油价集成

src/pages/MacroPage.jsx

@@ -5,23 +5,29 @@ import DataView from './macro/DataView.jsx'
 import StrategyView from './macro/StrategyView.jsx'
 import ArticlesView from './macro/ArticlesView.jsx'
 import ArticleDetail from './macro/ArticleDetail.jsx'
+import OilPage from './macro/OilPage.jsx'
 
-// 宏观: 顶栏 3 tab (经济文章 / 经济数据 / 策略研究), 默认 经济数据
-// /macro         → 重定向到 /macro/data
-// /macro/data    → 经济数据 (默认)
-// /macro/strategy→ 策略研究
-// /macro/articles→ 经济文章
+// 宏观: 顶栏 4 tab (油价 / 经济数据 / 策略研究 / 经济文章), 默认 油价
+// /macro           → 显示 oil tab (本组件 activeFromPath 决定)
+// /macro/oil       → 油价 (新增)
+// /macro/data      → 经济数据
+// /macro/strategy  → 策略研究
+// /macro/articles  → 经济文章
 // /macro/articles/:slug → 文章详情
 const TABS = [
+  { key: 'oil',      label: '油价',     path: '/macro/oil' },
   { 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/oil')) return 'oil'
   if (pathname.startsWith('/macro/articles')) return 'articles'
   if (pathname.startsWith('/macro/strategy')) return 'strategy'
-  return 'data'
+  if (pathname.startsWith('/macro/data')) return 'data'
+  // 父路由 /macro 或 / 走 Tab 列表第一个 (油价)
+  return 'oil'
 }
 
 export default function MacroPage() {
@@ -33,6 +39,7 @@ export default function MacroPage() {
     key: t.key,
     label: t.label,
     render: () => {
+      if (t.key === 'oil') return <OilPage />
       if (t.key === 'data') return <DataView />
       if (t.key === 'strategy') return <StrategyView />
       if (t.key === 'articles') return <ArticlesView />
@@ -46,7 +53,6 @@ export default function MacroPage() {
   }
 
   // 详情页 /macro/articles/:slug 和 /macro/data/:name 单独走 React Router 渲染, 不参与滑屏
-  // 这样浏览器/手机物理返回键也能正常回到列表
   if (location.pathname.match(/^\/macro\/(articles|data|strategy)\/[^/]+$/)) {
     return (
       <Routes>
@@ -62,4 +68,4 @@ export default function MacroPage() {
       <SwipeTabs tabs={tabs} active={active} onChange={onChange} />
     </div>
   )
-}
+}