fix: 增加页面切换动画

next.config.mjs

@@ -4,7 +4,7 @@ const withNextIntl = createNextIntlPlugin();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: "standalone",
+    // output: "standalone",
     reactStrictMode: false,
     env: {
         BUILD_ENV: process.env.BUILD_ENV,

src/app/[locale]/(TabBar)/[[...share]]/@swiperWidget/page.tsx

@@ -1,7 +1,8 @@
 import { BannerRep } from "@/api/home";
 import { server } from "@/utils/server";
+import React from "react";
 import HomeSwiper from "../_home/HomeSwiper";
-const getBanners = async () => {
+const getBanners = React.cache(async () => {
     return server
         .request<BannerRep[]>({
             url: "/v1/api/front/banner_list",
@@ -13,7 +14,7 @@ const getBanners = async () => {
             if (res.code === 200) return res.data;
             return [];
         });
-};
+});
 const Page = async () => {
     const banners = await getBanners();
 

src/app/[locale]/(TabBar)/[[...share]]/_home/HomeSwiper.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { FC } from "react";
+import { FC, memo } from "react";
 
 import { BannerRep } from "@/api/home";
 import Box from "@/components/Box";
@@ -36,6 +36,7 @@ const HomeSwiper: FC<Props> = (props) => {
                             <Image
                                 width={"100%"}
                                 height={"1.86rem"}
+                                lazy
                                 // className="rounded-[0.1rem] border-[0.01rem] border-[#47aaae]"9
                                 src={banner.content}
                                 // style={{ height: "1.86rem", width: "100%" }}
@@ -49,4 +50,4 @@ const HomeSwiper: FC<Props> = (props) => {
     );
 };
 
-export default HomeSwiper;
+export default memo(HomeSwiper);

src/app/[locale]/(TabBar)/[[...share]]/page.tsx

@@ -2,12 +2,12 @@
 import { GroupType, PrizeTypes } from "@/api/home";
 import { server } from "@/utils/server";
 import dynamic from "next/dynamic";
-import { sleep } from "@/utils/methods";
+import React from "react";
 
 const HomeTabs = dynamic(() => import("./_home/HomeTabs"));
 
 const TIME = 30;
-const getGames = async () => {
+const getGames = React.cache(async () => {
     return server
         .request<GroupType[]>({
             url: "/v1/api/front/game_list",
@@ -18,7 +18,7 @@ const getGames = async () => {
             if (res.code === 200) return res.data;
             return [];
         });
-};
+});
 
 const getPrizeApi = () => {
     return server.request<PrizeTypes[]>({
@@ -29,6 +29,7 @@ const getPrizeApi = () => {
 
 export default async function Page(props: any) {
     const group = await getGames();
+
     // const result = await getPrizeApi();
     return (
         <HomeTabs

src/app/[locale]/(TabBar)/template.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { usePathname } from "@/i18n/routing";
+import { AnimatePresence, motion } from "framer-motion";
+import { ReactNode, useEffect } from "react";
+const routerStack = new Map();
+const Template = ({ children }: { children: ReactNode }) => {
+    const key = usePathname();
+
+    useEffect(() => {
+        if (routerStack.has(key)) {
+            routerStack.delete(key);
+        } else {
+            routerStack.set(key, key);
+        }
+    }, [key]);
+
+    return (
+        <AnimatePresence mode="popLayout">
+            <motion.div
+                layout
+                key={key}
+                initial={{ x: routerStack.has(key) ? 750 : -750, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                exit={{ x: routerStack.has(key) ? -750 : 750, opacity: 0 }}
+                transition={{ duration: 0.3 }}
+                className={"h-[100%]"}
+            >
+                {children}
+            </motion.div>
+        </AnimatePresence>
+    );
+};
+
+export default Template;

src/app/[locale]/providers.tsx

@@ -18,7 +18,7 @@ import Script from "next/script";
 
 import { setupFontSize } from "@/utils";
 import { Local } from "@/utils/storage";
-import { AnimatePresence, motion } from "framer-motion";
+import { motion } from "framer-motion";
 
 import Image from "next/image";
 import styles from "./style.module.scss";
@@ -297,19 +297,7 @@ const Layout = ({ children, themeProps }: ProvidersProps) => {
                         className={clsx(isShowBg && styles.homePage, "relative h-[100%]")}
                         ref={homeContainerRef}
                     >
-                        <AnimatePresence mode="popLayout">
-                            <motion.div
-                                layout
-                                key={key}
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                                exit={{ opacity: 0 }}
-                                transition={{ type: "linear", duration: 0.5 }}
-                                className={"h-[100%]"}
-                            >
-                                {children}
-                            </motion.div>
-                        </AnimatePresence>
+                        {children}
                     </section>
                 </SwiperSlide>
             </Swiper>

src/components/Card/Card.tsx

@@ -6,12 +6,11 @@ import useGame from "@/hooks/useGame";
 import { useRouter } from "@/i18n/routing";
 import { useWalletStore } from "@/stores/useWalletStore";
 import { getToken } from "@/utils/Cookies";
-import { Button, Popup, Toast } from "antd-mobile";
+import { Button, Image, Popup, Toast } from "antd-mobile";
 import { useTranslations } from "next-intl";
 import { FC, PropsWithChildren, ReactNode, useEffect, useRef, useState } from "react";
 import TipsModal, { ModalProps } from "../TipsModal";
 import styles from "./style.module.scss";
-import { Image } from 'antd-mobile'
 export interface CardProps {
     item?: GameListRep;
     render?: (value: GameListRep) => ReactNode;
@@ -136,12 +135,12 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
                 render(item!)
             ) : (
                 <div className={styles.cardWrap} onClick={() => handler(item!)}>
-                  <Image
+                    <Image
                         lazy={true}
                         src={item?.game_icon}
                         alt={item?.game_name_cn}
-                        width={'100%'}
-                        height={'1.54rem'}
+                        width={"100%"}
+                        height={"1.54rem"}
                         className={"h-[100%] w-[100%]"}
                     />
                 </div>
@@ -168,11 +167,10 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
                 <Box className={"w-1/1 flex w-[4.02rem] flex-1"}>
                     <div className={styles.cardWrap} style={{ width: "1.1rem" }}>
                         <Image
-                            lazy={true}
-                            loading={'lazy'}
                             src={item?.game_icon}
                             alt={item?.game_name + "-" + item?.category_name}
                             className={"h-[100%] w-[100%]"}
+                            height={"1.54rem"}
                         />
                     </div>
                     <div className={styles.cardWrapGmeInfo}>

src/components/ModalPopup/WheelModal/index.tsx

@@ -516,10 +516,10 @@ const WheelModal = forwardRef<WheelModalProps, { onDestory?: Function }>(
 
                 <Mask visible={visible} destroyOnClose={true} getContainer={null} opacity="thick">
                     <div
-                        className={"absolute right-[0.2083rem] top-[18%] z-50"}
+                        className={"absolute right-[0.2083rem] top-[12%] z-50"}
                         onClick={customClose}
                     >
-                        <span className={"iconfont icon-guanbi"}></span>
+                        <span className={"iconfont icon-guanbi font-bold"}></span>
                     </div>
                     <div className={"absolute top-[5%] w-[100%]"}>
                         <WheelClient isRotate={true} onRotateEnd={onRotateEnd} />