修改架构，移动端优先。

save

src/components/BottomNav.jsx

@@ -0,0 +1,26 @@
+import { NavLink } from 'react-router-dom'
+
+const TABS = [
+  { to: '/',        label: '首页',  icon: '⌂' },
+  { to: '/macro',   label: '宏观',  icon: '◫' },
+  { to: '/monitor', label: '监控',  icon: '◉' },
+  { to: '/me',      label: '我',    icon: '☺' },
+]
+
+export default function BottomNav() {
+  return (
+    <nav className="bottom-nav" aria-label="主导航">
+      {TABS.map((t) => (
+        <NavLink
+          key={t.to}
+          to={t.to}
+          end={t.to === '/'}
+          className={({ isActive }) => 'bottom-nav-item' + (isActive ? ' active' : '')}
+        >
+          <span className="icon" aria-hidden="true">{t.icon}</span>
+          <span>{t.label}</span>
+        </NavLink>
+      ))}
+    </nav>
+  )
+}