78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
||
import { TabBar } from "antd-mobile";
|
||
import { PieOutline, UserOutline } from "antd-mobile-icons";
|
||
import { HomeOutlined, TeamOutlined } from "@ant-design/icons";
|
||
import { useLocation, useNavigate } from "react-router-dom";
|
||
|
||
const tabs = [
|
||
{
|
||
key: "home",
|
||
title: "首页",
|
||
icon: <HomeOutlined />,
|
||
path: "/",
|
||
},
|
||
{
|
||
key: "scene",
|
||
title: "场景获客",
|
||
icon: <TeamOutlined />,
|
||
path: "/scenarios",
|
||
},
|
||
{
|
||
key: "work",
|
||
title: "工作台",
|
||
icon: <PieOutline />,
|
||
path: "/workspace",
|
||
},
|
||
{
|
||
key: "mine",
|
||
title: "我的",
|
||
icon: <UserOutline />,
|
||
path: "/mine",
|
||
},
|
||
];
|
||
|
||
// 需要展示菜单的路由白名单（可根据实际业务调整）
|
||
const menuPaths = ["/", "/scenarios", "/workspace", "/mine"];
|
||
|
||
const MeauMobile: React.FC = () => {
|
||
const location = useLocation();
|
||
const navigate = useNavigate();
|
||
const [activeKey, setActiveKey] = useState("home");
|
||
|
||
// 根据当前路由自动设置 activeKey，支持嵌套路由
|
||
useEffect(() => {
|
||
const found = tabs.find((tab) =>
|
||
tab.path === "/"
|
||
? location.pathname === "/"
|
||
: location.pathname.startsWith(tab.path)
|
||
);
|
||
if (found) setActiveKey(found.key);
|
||
}, [location.pathname]);
|
||
|
||
// 判断当前路由是否需要展示菜单
|
||
const showMenu = menuPaths.some((path) =>
|
||
path === "/"
|
||
? location.pathname === "/"
|
||
: location.pathname.startsWith(path)
|
||
);
|
||
if (!showMenu) return null;
|
||
|
||
return (
|
||
<TabBar
|
||
style={{ background: "#fff" }}
|
||
activeKey={activeKey}
|
||
onChange={(key) => {
|
||
setActiveKey(key);
|
||
const tab = tabs.find((t) => t.key === key);
|
||
if (tab && tab.path) navigate(tab.path);
|
||
}}
|
||
>
|
||
{tabs.map((item) => (
|
||
<TabBar.Item key={item.key} icon={item.icon} title={item.title} />
|
||
))}
|
||
</TabBar>
|
||
);
|
||
};
|
||
|
||
export default MeauMobile;
|