84 lines
1.8 KiB
TypeScript
84 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { NavBar, SafeArea, TabBar, Toast } from "antd-mobile";
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
import { User, CattleZodiac } from "@icon-park/react";
|
|
import "./index.less";
|
|
|
|
interface MainLayoutProps {
|
|
children: React.ReactNode;
|
|
isShowNavBar?: boolean;
|
|
title?: string;
|
|
onLink?: () => void;
|
|
}
|
|
|
|
const MainLayout: React.FC<MainLayoutProps> = ({
|
|
isShowNavBar,
|
|
children,
|
|
onLink,
|
|
title,
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const { pathname } = location;
|
|
const [activeKey, setActiveKey] = React.useState(pathname);
|
|
|
|
const setRouteActive = (value: string) => {
|
|
if (value !== "/") {
|
|
Toast.show("待开发");
|
|
}
|
|
};
|
|
|
|
const tabs = [
|
|
{
|
|
key: "/",
|
|
title: "宠物翻译",
|
|
icon: <CattleZodiac />,
|
|
},
|
|
{
|
|
key: "/set",
|
|
title: "待办",
|
|
icon: <User />,
|
|
},
|
|
{
|
|
key: "/message",
|
|
title: "消息",
|
|
icon: <User />,
|
|
},
|
|
{
|
|
key: "/me",
|
|
title: "我的",
|
|
|
|
icon: <User size="24" />,
|
|
},
|
|
];
|
|
|
|
const goBack = () => {
|
|
if (onLink) {
|
|
onLink?.();
|
|
} else {
|
|
navigate(-1);
|
|
}
|
|
};
|
|
return (
|
|
<div className="main-layout">
|
|
<SafeArea position="top" />
|
|
{isShowNavBar ? <NavBar onBack={goBack}>{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;
|