72 lines
2.5 KiB
JavaScript
72 lines
2.5 KiB
JavaScript
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'
|
|
import OilPage from './macro/OilPage.jsx'
|
|
|
|
// 宏观: 顶栏 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'
|
|
if (pathname.startsWith('/macro/data')) return 'data'
|
|
// 父路由 /macro 或 / 走 Tab 列表第一个 (油价)
|
|
return 'oil'
|
|
}
|
|
|
|
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 === 'oil') return <OilPage />
|
|
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 和 /macro/data/:name 单独走 React Router 渲染, 不参与滑屏
|
|
if (location.pathname.match(/^\/macro\/(articles|data|strategy)\/[^/]+$/)) {
|
|
return (
|
|
<Routes>
|
|
<Route path="data/:name" element={<DataView />} />
|
|
<Route path="strategy/:name" element={<StrategyView />} />
|
|
<Route path="articles/:slug" element={<ArticleDetail />} />
|
|
</Routes>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<SwipeTabs tabs={tabs} active={active} onChange={onChange} />
|
|
</div>
|
|
)
|
|
}
|