fix: 修改布局之前

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

@@ -0,0 +1,139 @@
+"use client";
+import Box from "@/components/Box";
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import Sidebar from "@/components/Layout/Sidebar";
+import styles from "@/components/Layout/style.module.scss";
+import { usePathname, useRouter } from "@/i18n";
+import { SpinLoading } from "antd-mobile";
+import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from "react";
+import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
+type Props = {
+    swiperWidget: ReactNode;
+    popupWidget: ReactNode;
+    cardWidget: ReactNode;
+    noticeWidget: ReactNode;
+    searchWidget: ReactNode;
+    prizeWidget: ReactNode;
+};
+const Layout: FC<PropsWithChildren<Props>> = (props) => {
+    const {
+        children,
+        swiperWidget,
+        popupWidget,
+        cardWidget,
+        noticeWidget,
+        searchWidget,
+        prizeWidget,
+        ...other
+    } = props;
+    const swiperRef = useRef<SwiperClass>();
+    const isOpen = useRef<boolean>(false);
+    const homeContainerRef = useRef<HTMLDivElement>(null);
+    const barRef = useRef<HTMLDivElement>(null);
+
+    const startHandler = () => {
+        homeContainerRef.current?.classList.add(styles.containerMask);
+        barRef.current?.classList.add(styles.cross);
+        isOpen.current = true;
+    };
+    const endHandler = () => {
+        homeContainerRef.current?.classList.remove(styles.containerMask);
+        barRef.current?.classList.remove(styles.cross);
+        isOpen.current = false;
+    };
+
+    const openSliderHandler = () => {
+        if (isOpen.current) {
+            swiperRef.current?.slideNext();
+        } else {
+            swiperRef.current?.slidePrev();
+        }
+    };
+
+    const router = useRouter();
+    const sidebarChange = (index: number) => {
+        if (index === 1) {
+            openSliderHandler();
+            router.push("/sports");
+        }
+    };
+    // 获取分享id
+    const pathname = usePathname();
+    useEffect(() => {
+        const [, shareId] = pathname.split("/");
+        if (!shareId || shareId === "xxxxxx") return;
+        sessionStorage.setItem("shareId", shareId);
+    }, []);
+    return (
+        <>
+            <Swiper
+                resistanceRatio={10}
+                initialSlide={2}
+                slidesPerView={"auto"}
+                onSlidePrevTransitionStart={startHandler}
+                onSlideNextTransitionEnd={endHandler}
+                slideToClickedSlide
+                onSwiper={(swiper) => {
+                    swiperRef.current = swiper;
+                }}
+                allowTouchMove={false}
+            >
+                <SwiperSlide>
+                    <section className="relative flex h-[100vh] items-center justify-center">
+                        <SpinLoading color="default" />
+                    </section>
+                </SwiperSlide>
+
+                <SwiperSlide style={{ width: "70%" }} className={"bg-[rgb(31,31,31)]"}>
+                    <section className="relative h-[100vh]">
+                        <Sidebar onChange={(index) => sidebarChange(index)}></Sidebar>
+                    </section>
+                </SwiperSlide>
+
+                <SwiperSlide style={{ width: "100%" }}>
+                    <section className="relative h-[100%]" ref={homeContainerRef}>
+                        <Header
+                            {...other}
+                            menuRender={() => (
+                                <div
+                                    className={`absolute left-[0.1rem] top-[0.03rem] z-40 text-[#fff]`}
+                                    ref={barRef}
+                                    onClick={openSliderHandler}
+                                >
+                                    <div className={styles.bar}></div>
+                                    <div
+                                        className={styles.bar}
+                                        style={{ width: "0.1389rem" }}
+                                    ></div>
+                                    <div className={styles.bar}></div>
+                                </div>
+                            )}
+                        ></Header>
+                        <main id="maincontainer" className={"main-footer-header"}>
+                            {/*弹窗*/}
+                            {popupWidget}
+                            <Box>
+                                {/* swiper */}
+                                {swiperWidget}
+                                {/* swiper下的活动 */}
+                                {cardWidget}
+                                {/* 跑马灯 */}
+                                {noticeWidget}
+                                {/* 搜索组件 */}
+                                {searchWidget}
+                                {/* 搜索下面的大奖展示 */}
+                                {prizeWidget}
+                            </Box>
+                            {/* tabs 和 游戏列表 */}
+                            {children}
+                        </main>
+                        <Footer></Footer>
+                    </section>
+                </SwiperSlide>
+            </Swiper>
+        </>
+    );
+};
+
+export default Layout;

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

@@ -4,7 +4,7 @@ import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import Sidebar from "@/components/Layout/Sidebar";
 import styles from "@/components/Layout/style.module.scss";
-import { usePathname } from "@/i18n";
+import { usePathname, useRouter } from "@/i18n";
 import { SpinLoading } from "antd-mobile";
 import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from "react";
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
@@ -50,6 +50,14 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
             swiperRef.current?.slidePrev();
         }
     };
+
+    const router = useRouter();
+    const sidebarChange = (index: number) => {
+        if (index === 1) {
+            openSliderHandler();
+            router.push("/sports");
+        }
+    };
     // 获取分享id
     const pathname = usePathname();
     useEffect(() => {
@@ -69,10 +77,7 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
                 onSwiper={(swiper) => {
                     swiperRef.current = swiper;
                 }}
-                runCallbacksOnInit={false}
                 allowTouchMove={false}
-                observer={true}
-                observeParents={true}
             >
                 <SwiperSlide>
                     <section className="relative flex h-[100vh] items-center justify-center">
@@ -82,7 +87,7 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
 
                 <SwiperSlide style={{ width: "70%" }} className={"bg-[rgb(31,31,31)]"}>
                     <section className="relative h-[100vh]">
-                        <Sidebar></Sidebar>
+                        <Sidebar onChange={(index) => sidebarChange(index)}></Sidebar>
                     </section>
                 </SwiperSlide>