95 lines
2.1 KiB
TypeScript
95 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import { NavBar, SafeArea, TabBar } from "antd-mobile";
|
|
import { useNavigate } from "react-router-dom";
|
|
import "./index.less";
|
|
import { Translate, Electrocardiogram, GithubOne, Blossom, User } from "@icon-park/react";
|
|
|
|
interface MainLayoutProps {
|
|
children: React.ReactNode;
|
|
isShowNavBar?: boolean;
|
|
title?: string;
|
|
navBarRight?: React.ReactNode;
|
|
onLink?: () => void;
|
|
}
|
|
|
|
const MainLayout: React.FC<MainLayoutProps> = ({
|
|
isShowNavBar,
|
|
children,
|
|
onLink,
|
|
title,
|
|
navBarRight,
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
// const location = useLocation();
|
|
const [pathname, setPathname] = React.useState(location.pathname);
|
|
const tabs = [
|
|
{
|
|
key: "/translate",
|
|
title: "宠物翻译",
|
|
icon: <Translate />,
|
|
},
|
|
{
|
|
key: "/translate/archives",
|
|
title: "情绪监控",
|
|
icon: <Electrocardiogram />,
|
|
},
|
|
{
|
|
key: "/translate/mood",
|
|
title: "我的宠物",
|
|
icon: <GithubOne />,
|
|
},
|
|
// {
|
|
// key: "/translate/mood",
|
|
// title: "宠物服务",
|
|
// icon: <Blossom />,
|
|
// },
|
|
// {
|
|
// key: "/translate/mood",
|
|
// title: "个人中心",
|
|
|
|
// icon: <User />,
|
|
// },
|
|
];
|
|
|
|
const setRouteActive = (value: string) => {
|
|
console.log(value);
|
|
|
|
setPathname(value);
|
|
navigate(value);
|
|
};
|
|
|
|
const goBack = () => {
|
|
// 打印路由栈
|
|
|
|
// debugger;
|
|
if (onLink) {
|
|
onLink?.();
|
|
} else {
|
|
navigate(-1);
|
|
}
|
|
};
|
|
return (
|
|
<div className="main-layout">
|
|
<SafeArea position="top" />
|
|
{isShowNavBar ? (
|
|
<NavBar onBack={goBack} right={navBarRight}>
|
|
{title}
|
|
</NavBar>
|
|
) : (
|
|
""
|
|
)}
|
|
<div className="layout-content">{children}</div>
|
|
|
|
<div className="footer layout-tab">
|
|
<TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)} safeArea={true}>
|
|
{tabs.map((item) => (
|
|
<TabBar.Item key={item.key} icon={item.icon} title={item.title} />
|
|
))}
|
|
</TabBar>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MainLayout;
|