feat: 添加tabber

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { NavBar, SafeArea } from "antd-mobile";
+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;
@@ -20,30 +21,42 @@ const MainLayout: React.FC<MainLayoutProps> = ({
 }) => {
   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: "个人中心",
 
-  // const tabs = [
-  //   {
-  //     key: "/",
-  //     title: "宠物翻译",
-  //     icon: <CattleZodiac />,
-  //   },
-  //   {
-  //     key: "/set",
-  //     title: "待办",
-  //     icon: <User />,
-  //   },
-  //   {
-  //     key: "/message",
-  //     title: "消息",
-  //     icon: <User />,
-  //   },
-  //   {
-  //     key: "/me",
-  //     title: "我的",
+    //   icon: <User />,
+    // },
+  ];
 
-  //     icon: <User size="24" />,
-  //   },
-  // ];
+  const setRouteActive = (value: string) => {
+    console.log(value);
+
+    setPathname(value);
+    navigate(value);
+  };
 
   const goBack = () => {
     // 打印路由栈
@@ -68,15 +81,11 @@ const MainLayout: React.FC<MainLayoutProps> = ({
       <div className="layout-content">{children}</div>
 
       <div className="footer layout-tab">
-        {/* <TabBar
-          activeKey={pathname}
-          onChange={(value) => setRouteActive(value)}
-          safeArea={true}
-        >
+        <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)} safeArea={true}>
           {tabs.map((item) => (
             <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
           ))}
-        </TabBar> */}
+        </TabBar>
       </div>
     </div>
   );