65 lines
2.2 KiB
JavaScript
65 lines
2.2 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'
|
|
|
|
// 宏观: 顶栏 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 和 /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>
|
|
)
|
|
} |