feat: init

projects/translate-h5/src/layout/main/mainLayout.tsx

@@ -0,0 +1,83 @@
+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;