fix: update Footer

src/app/[locale]/page.tsx

@@ -20,10 +20,7 @@ const getGames = async (): Promise<GroupType[]> => {
 };
 export default async function Page() {
     const group: GroupType[] = await getGames();
-
-    // const data = await fetch("http://localhost:3000/server");
-    // console.log(`🎯🎯🎯🎯🎯-> in page.tsx on 24`, data);
-
+    console.count("pages - render");
     return (
         <Layout>
             <>

src/app/globals.css

@@ -22,7 +22,7 @@
   --bg-color:#000000;
 }
 
-* { 
+* {
   box-sizing: border-box;
 }
 

src/components/Footer/index.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { usePathname, useRouter } from "@/i18n";
-import clsx from "clsx";
-import { FC, PropsWithChildren, ReactNode, useEffect, useState } from "react";
-import "./style.scss";
 import { useGlobalStore } from "@/stores";
 import { SafeArea } from "antd-mobile";
+import clsx from "clsx";
+import { FC, ReactNode, useEffect, useState } from "react";
+import "./style.scss";
 
 /**
  * @description 底部Tab组件
@@ -15,52 +15,51 @@ export interface FooterProps {
     children?: ReactNode;
 }
 
-const Footer: FC<PropsWithChildren> = () => {
+const tabList = [
+    {
+        iconSpanName: "icon-home",
+        label: "Início",
+        path: "/",
+    },
+    {
+        iconSpanName: "icon-qianbao1",
+        label: "Depósito",
+        path: "/deposit",
+    },
+    {
+        iconSpanName: "icon-afiliado",
+        label: "Afiliado",
+        path: "/affiliate/summary",
+    },
+    {
+        iconSpanName: "icon-tiyu",
+        label: "Esportes",
+        path: "/sports",
+    },
+    {
+        iconSpanName: "icon-yonghu",
+        label: "Perfil",
+        path: "/profile",
+    },
+];
+const Footer: FC = () => {
     const { token } = useGlobalStore();
 
-    const tabList = [
-        {
-            iconSpanName: "icon-home",
-            label: "Início",
-            path: "/",
-        },
-        {
-            iconSpanName: "icon-qianbao1",
-            label: "Depósito",
-            path: "/deposit",
-        },
-        {
-            iconSpanName: "icon-afiliado",
-            label: "Afiliado",
-            path: "/affiliate/summary",
-        },
-        {
-            iconSpanName: "icon-tiyu",
-            label: "Esportes",
-            path: "/sports",
-        },
-        {
-            iconSpanName: "icon-yonghu",
-            label: "Perfil",
-            path: "/profile",
-        },
-    ];
-
     const pathname = usePathname();
-    const [tabActiveName, setTabActiveName] = useState('/')
+    const [tabActiveName, setTabActiveName] = useState("/");
 
     useEffect(() => {
-        setTabActiveName(pathname)
-    }, [pathname])
+        setTabActiveName(pathname);
+    }, [pathname]);
 
     const router = useRouter();
-    
+
     const goPage = (path = "/") => {
-        if(!token && (path == '/deposit' || path == "/profile")) {
-            router.push(`/login?redirect=${path}`)
-            return
+        if (!token && (path == "/deposit" || path == "/profile")) {
+            router.push(`/login?redirect=${path}`);
+            return;
         }
-        setTabActiveName(path)
+        setTabActiveName(path);
         router.push(path);
     };
 
@@ -90,7 +89,7 @@ const Footer: FC<PropsWithChildren> = () => {
                     );
                 })}
             </ul>
-            <SafeArea position='bottom' />
+            <SafeArea position="bottom" />
         </div>
     );
 };

src/components/Header/index.tsx

@@ -4,7 +4,7 @@ import { useGlobalStore } from "@/stores";
 import { useRequest } from "ahooks";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
-import { FC, ReactNode, useRef, useState } from "react";
+import { FC, memo, ReactNode, useState } from "react";
 import HeaderTitle from "./HerderTitle";
 import styles from "./style.module.scss";
 /**
@@ -24,7 +24,6 @@ const DefaultHeader: FC<HeaderProps> = (props) => {
     const t = useTranslations("Header");
     const { token, userInfo } = useGlobalStore();
     const [money, setMoney] = useState(0);
-    const timer = useRef<NodeJS.Timeout | null>(null);
 
     const getUserMoneyHandler = () => {
         if (token) {
@@ -36,6 +35,7 @@ const DefaultHeader: FC<HeaderProps> = (props) => {
         pollingInterval: 3000,
         pollingWhenHidden: true,
         pollingErrorRetryCount: 3,
+        staleTime: 5000,
         refreshDeps: [token],
         onError: (error) => {},
         onSuccess: (res) => {
@@ -90,4 +90,4 @@ const Header: FC<HeaderProps> = (props) => {
         </div>
     );
 };
-export default Header;
+export default memo(Header);

src/components/Layout/index.tsx

@@ -1,13 +1,13 @@
 "use client";
 import Footer, { FooterProps } from "@/components/Footer";
 import Header, { HeaderProps } from "@/components/Header";
-import Sidebar from "@/components/Layout/Sidebar";
 import { FC, PropsWithChildren, useEffect, useRef, useState } from "react";
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 import styles from "./style.module.scss";
 type Props = FooterProps & HeaderProps;
 const Layout: FC<PropsWithChildren<Props>> = (props) => {
-    const { children } = props;
+    console.count("layout render");
+    const { children, ...other } = props;
 
     const swiperRef = useRef<SwiperClass>();
     const isOpen = useRef<boolean>(false);
@@ -52,14 +52,17 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
             }}
             allowTouchMove={false}
         >
-            <SwiperSlide
-                style={{ width: `${!mounted ? "0" : "70%"}`, overflow: "hidden" }}
-                className={"mx-w-[2.2222rem] bg-[rgb(31,31,31)]"}
-            >
-                <section className="relative h-[100vh]">
-                    <Sidebar></Sidebar>
-                </section>
-            </SwiperSlide>
+            {/*<SwiperSlide*/}
+            {/*    style={{*/}
+            {/*        width: `${!mounted ? "0" : "70%"}`,*/}
+            {/*        overflow: "hidden",*/}
+            {/*    }}*/}
+            {/*    className={"mx-w-[2.2222rem] bg-[rgb(31,31,31)]"}*/}
+            {/*>*/}
+            {/*    <section className="relative h-[100vh]">*/}
+            {/*        <Sidebar></Sidebar>*/}
+            {/*    </section>*/}
+            {/*</SwiperSlide>*/}
 
             <SwiperSlide style={{ width: "100%" }}>
                 <div className="relative h-[100vh]" ref={homeContainerRef}>
@@ -72,11 +75,11 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
                         <div className={styles.bar} style={{ width: "0.1389rem" }}></div>
                         <div className={styles.bar}></div>
                     </div>
-                    <Header {...props}></Header>
+                    <Header {...other}></Header>
                     <main className={styles.main} id="maincontainer">
                         {children}
                     </main>
-                    <Footer {...props}></Footer>
+                    <Footer></Footer>
                 </div>
             </SwiperSlide>
         </Swiper>