fix: 增加页面切换动画

.env.local

@@ -1,13 +1,24 @@
+# 环境
 #baseurl
-NEXT_PUBLIC_BASE_URL=https://hk-api.tiktokjakjkl.icu
+# NEXT_PUBLIC_BASE_URL=http://192.168.0.71:8800
+NEXT_PUBLIC_BASE_URL=http://192.168.0.84:8800
+# NEXT_PUBLIC_BASE_URL=https://3rd-api.tiktokjakjkl.icu
 #share link
-NEXT_PUBLIC_SHARE_URL=https://hk-site.tiktokjakjkl.icu
+NEXT_PUBLIC_SHARE_URL=http://192.168.0.84:3000
+
 #firebase
-NEXT_PUBLIC_FIREBASE_APIKEY=AIzaSyCIE8xtySsYztsSgmQJx_aqPrrpHEuvgvw
-NEXT_PUBLIC_FIREBASE_AUTHDOMAIN=bcwin777-1bdda.firebaseapp.com
-NEXT_PUBLIC_FIREBASE_PROJECTID=bcwin777-1bdda
-NEXT_PUBLIC_FIREBASE_STORAGEBUCKET=bcwin777-1bdda.firebasestorage.app
-NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID=542456379513
-NEXT_PUBLIC_FIREBASE_APPID=1:542456379513:web:851a46fc639085170bfca8
-NEXT_PUBLIC_FIREBASE_MEASUREMENTID=G-GV6Y8DXHHD
-NEXT_PUBLIC_FIREBASE_KEYS=BOCfpA08vK6uxhMdRblnx9gPVBLx9WpTn9AutVNhHQQpVtXzDIKW0X6cmsNRaFDhyFDJfMqWjqC7mq6uDFIKU_M
+NEXT_PUBLIC_FIREBASE_APIKEY=AIzaSyDAWORGKhdyzb5KeqTi535VmD5gN2Cdle8
+NEXT_PUBLIC_FIREBASE_AUTHDOMAIN=bcwin-a99b1.firebaseapp.com
+
+
+
+
+NEXT_PUBLIC_FIREBASE_PROJECTID=bcwin-a99b1
+NEXT_PUBLIC_FIREBASE_STORAGEBUCKET=bcwin-a99b1.appspot.com
+NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID=1055413612814
+NEXT_PUBLIC_FIREBASE_APPID=1:1055413612814:web:7a563237de8e43849d275f
+
+
+
+NEXT_PUBLIC_FIREBASE_MEASUREMENTID=G-467M2BYJMS
+NEXT_PUBLIC_FIREBASE_KEYS=BAOsT7kii-ctLzGrgXe_wYhfuxlme1v4njnD0uPSKp3DpSnrUa2e709b9dRaeYVU7jF_qIx1y9tEv0CvilDCdnM

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

@@ -6,6 +6,7 @@ const getBanners = async () => {
         .request<BannerRep[]>({
             url: "/v1/api/front/banner_list",
             method: "POST",
+            next: { revalidate: 30 },
             body: JSON.stringify({}),
         })
         .then((res) => {
@@ -16,6 +17,7 @@ const getBanners = async () => {
 const Page = async () => {
     const banners = await getBanners();
 
+    console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 19 组件加载中。。。。`);
     if (!banners.length) return null;
 
     return <HomeSwiper banners={banners}></HomeSwiper>;

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

@@ -3,17 +3,24 @@ import { FC } from "react";
 
 import { BannerRep } from "@/api/home";
 import Box from "@/components/Box";
+import { Image } from "antd-mobile";
 import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Image } from "antd-mobile";
 interface Props {
     banners: BannerRep[];
 }
+
 const HomeSwiper: FC<Props> = (props) => {
     const { banners = [] } = props;
 
+    console.log(`🚀🚀🚀🚀🚀-> in HomeSwiper.tsx on 17`);
     return (
-        <div style={{ height: "1.86rem" }} className={"home-banner rounded-[0.1rem] border-[0.01rem] border-[#47aaae] overflow-hidden"}>
+        <div
+            style={{ height: "1.86rem" }}
+            className={
+                "home-banner overflow-hidden rounded-[0.1rem] border-[0.01rem] border-[#47aaae]"
+            }
+        >
             <Swiper
                 autoplay={{ delay: 2500 }}
                 pagination={{ clickable: true }}
@@ -27,9 +34,8 @@ const HomeSwiper: FC<Props> = (props) => {
                     <SwiperSlide key={index}>
                         <Box none action={banner.action_type} actionData={banner.action_params}>
                             <Image
-                              lazy={true}
-                              width={"100%"}
-                              height={ "1.86rem"}
+                                width={"100%"}
+                                height={"1.86rem"}
                                 // className="rounded-[0.1rem] border-[0.01rem] border-[#47aaae]"9
                                 src={banner.content}
                                 // style={{ height: "1.86rem", width: "100%" }}

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

@@ -51,6 +51,7 @@ const Placeholder = () => {
     return <div className={"flex justify-center"}>{/*<Loading/>*/}</div>;
 };
 const Layout: FC<PropsWithChildren<Props>> = async (props) => {
+    console.log(`🚀🚀🚀🚀🚀-> in layout.tsx on 54 布局组件加载。。。`);
     const {
         children,
         swiperWidget,

src/app/[locale]/loading.tsx

@@ -1,13 +0,0 @@
-import Loading from "@/components/Loading";
-import { FC } from "react";
-interface Props {}
-
-const LoadingPage: FC<Props> = (props) => {
-    return (
-        <div className={"flex h-[100dvh] items-center justify-center"}>
-            <Loading />
-        </div>
-    );
-};
-
-export default LoadingPage;

src/app/[locale]/providers.tsx

@@ -18,11 +18,10 @@ import Script from "next/script";
 
 import { setupFontSize } from "@/utils";
 import { Local } from "@/utils/storage";
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 
 import Image from "next/image";
 import styles from "./style.module.scss";
-import PageTransitionEffect from "@/components/PageTransitionEffect";
 
 export interface ProvidersProps {
     children: ReactNode;
@@ -195,7 +194,7 @@ const GlobalNotify = () => {
                             alt={""}
                             width={750}
                             className={
-                                "animate-slow-bounce absolute -top-[0.5rem] left-0 h-[3.2rem]"
+                                "absolute -top-[0.5rem] left-0 h-[3.2rem] animate-slow-bounce"
                             }
                             height={512}
                         />
@@ -235,6 +234,7 @@ const GlobalNotify = () => {
 
 const Layout = ({ children, themeProps }: ProvidersProps) => {
     const pathname = usePathname();
+    const key = usePathname();
 
     const { isCollapse, setCollapse } = useSystemStore((state) => ({
         isCollapse: state.isCollapse,
@@ -297,7 +297,19 @@ const Layout = ({ children, themeProps }: ProvidersProps) => {
                         className={clsx(isShowBg && styles.homePage, "relative h-[100%]")}
                         ref={homeContainerRef}
                     >
-                        {children}
+                        <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>
                     </section>
                 </SwiperSlide>
             </Swiper>

src/components/Header/HeaderRight.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { Link } from "@/i18n/routing";
 import { useWalletStore } from "@/stores/useWalletStore";
 import { getToken } from "@/utils/Cookies";
@@ -15,21 +16,25 @@ const HeaderRight = () => {
             <div className={styles.right}>
                 {token ? (
                     <>
-                        <Link href={"/profile"}  >
-                            <div className={"flex items-center text-[0.12rem]"}>
-                                <i className={"iconfont icon-yonghu mr-[0.03rem]"}></i>
-                                <span>{score}</span>
-                            </div>
+                        <Link
+                            href={"/profile"}
+                            className={"flex items-center text-[0.12rem]"}
+                            prefetch
+                        >
+                            <i className={"iconfont icon-yonghu mr-[0.03rem]"}></i>
+                            <span>{score}</span>
                         </Link>
 
-                        <Link href={"/deposit"}   className={styles.rightActive}>
+                        <Link href={"/deposit"} prefetch className={styles.rightActive}>
                             {t("deposit")}
                         </Link>
                     </>
                 ) : (
                     <>
-                        <Link href={"/login?redirect=/"} prefetch  className={styles.leftActive}>{t("login")}</Link>
-                        <Link href={"/register?redirect=/"} prefetch  className={styles.rightActive}>
+                        <Link href={"/login?redirect=/"} prefetch className={styles.leftActive}>
+                            {t("login")}
+                        </Link>
+                        <Link href={"/register?redirect=/"} prefetch className={styles.rightActive}>
                             {t("register")}
                         </Link>
                     </>

src/components/Header/index.tsx

@@ -1,13 +1,16 @@
 "use client";
-import HeaderRight from "@/components/Header/HeaderRight";
 import { useSystemStore } from "@/stores/useSystemStore";
 import { FC, memo, ReactNode } from "react";
 import { useSwiper } from "swiper/react";
 import HeaderTitle from "./HerderTitle";
 import styles from "./style.module.scss";
+// import HeaderRight from "@/components/Header/HeaderRight";
+import dynamic from "next/dynamic";
+
+const HeaderRight = dynamic(() => import("@/components/Header/HeaderRight"));
 /**
  * @description HeaderProps
- * @param {boolean} headerPlaceholder 是否展示展位元素
+ * @param {boolean} headerPlaceholder 是否展示展位元素00
  * @param {() => ReactNode} headerRender 自定义渲染
  */
 export interface HeaderProps {
@@ -33,7 +36,7 @@ const Header: FC<HeaderProps> = (props) => {
         <header className={styles.headerWrap}>
             <div className={styles.headerMain}>
                 <div className={styles.headerLeft} onClick={menuHandler}>
-                    <i className="iconfont icon-caidan1 text-[#87ccd9] text-8"></i>
+                    <i className="iconfont icon-caidan1 text-8 text-[#87ccd9]"></i>
                     {/* <div>
                         <div className={styles.bar}></div>
                         <div className={styles.bar} style={{ width: "0.1389rem" }}></div>

src/components/PageTransitionEffect/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { AnimatePresence, motion } from "framer-motion";
+import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { usePathname } from "next/navigation";
 import { ReactNode, useContext, useRef } from "react";
-import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
 
 // FrozenRouter 组件，保持页面切换过程中上下文的持久化
 function FrozenRouter(props: { children: ReactNode }) {
@@ -26,9 +26,9 @@ const PageTransitionEffect = ({ children }: { children: ReactNode }) => {
                 animate={{ opacity: 1, x: 0 }}
                 exit={{ opacity: 0, x: 0 }}
                 transition={{ type: "linear", duration: 0.5 }}
-                className={'h-[100%]'}
+                className={"h-[100%]"}
             >
-                <FrozenRouter>{children}</FrozenRouter>
+                {children}
             </motion.div>
         </AnimatePresence>
     );