更换 UI

src/components/BottomNav.jsx

@@ -1,26 +1,49 @@
-import { NavLink } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { TabBar } from 'antd-mobile'
+import TabIcon from './TabIcon.jsx'
 
+// 底部 Tab 配置: key 既是路由前缀, 又是 icon 名
+// 使用 antd-mobile TabBar: 自带 safe-area 处理, 仿原生 iOS/Android 风格
 const TABS = [
-  { to: '/',        label: '首页',  icon: '⌂' },
-  { to: '/macro',   label: '宏观',  icon: '◫' },
-  { to: '/monitor', label: '监控',  icon: '◉' },
-  { to: '/me',      label: '我',    icon: '☺' },
+  { key: '/',        name: 'home',    label: '首页' },
+  { key: '/macro',   name: 'macro',   label: '宏观' },
+  { key: '/monitor', name: 'monitor', label: '监控' },
+  { key: '/me',      name: 'me',      label: '我' },
 ]
 
+// 根据当前路径计算激活的 tab key (精确匹配 '/' , 其他前缀匹配)
+function activeKeyFromPath(pathname) {
+  for (const t of TABS) {
+    if (t.key === '/') {
+      if (pathname === '/') return t.key
+    } else if (pathname === t.key || pathname.startsWith(t.key + '/')) {
+      return t.key
+    }
+  }
+  return '/'
+}
+
+// 移动端底部 Tab 导航: antd-mobile TabBar, 内置安全区
+// 作用: 渲染底部 4 个 tab, 切换路由; 激活态根据当前 URL 计算
 export default function BottomNav() {
+  const { pathname } = useLocation()
+  const navigate = useNavigate()
+  const activeKey = activeKeyFromPath(pathname)
+
   return (
-    <nav className="bottom-nav" aria-label="主导航">
+    <TabBar
+      activeKey={activeKey}
+      safeArea
+      className="app-tabbar"
+      onChange={navigate}
+    >
       {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>
+        <TabBar.Item
+          key={t.key}
+          title={t.label}
+          icon={(active) => <TabIcon name={t.name} active={active} />}
+        />
       ))}
-    </nav>
+    </TabBar>
   )
-}
+}