|
@@ -4,7 +4,8 @@ import { useSystemStore } from "@/stores/useSystemStore";
|
|
|
import { ConfigProvider, Mask } from "antd-mobile";
|
|
|
import ptBR from "antd-mobile/es/locales/pt-BR";
|
|
|
import { ThemeProviderProps } from "next-themes/dist/types";
|
|
|
-import { ReactNode, useEffect, useMemo, useState } from "react";
|
|
|
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
|
|
|
+import { Swiper } from "swiper/react";
|
|
|
|
|
|
import { server } from "@/utils/client";
|
|
|
import { useDebounceEffect, useRequest } from "ahooks";
|
|
@@ -19,6 +20,7 @@ import { Local } from "@/utils/storage";
|
|
|
import { motion } from "framer-motion";
|
|
|
|
|
|
import Image from "next/image";
|
|
|
+import { SwiperClass, SwiperSlide } from "swiper/react";
|
|
|
import styles from "./style.module.scss";
|
|
|
|
|
|
export interface ProvidersProps {
|
|
@@ -341,9 +343,9 @@ export default function SidebarLayout({ children, themeProps }: ProvidersProps)
|
|
|
<Sidebar />
|
|
|
</motion.div>
|
|
|
|
|
|
- {/* Main Content */}
|
|
|
+ {/* Main Content transform: translate(0, 0);*/}
|
|
|
<motion.div
|
|
|
- className="relative z-10 h-[100%]"
|
|
|
+ className="relative z-10 h-[100%] translate-x-0 translate-y-0 transform"
|
|
|
animate={{ x: isCollapse ? "70%" : "0%" }}
|
|
|
transition={{ type: "tween", duration: 0.3 }}
|
|
|
>
|
|
@@ -364,6 +366,78 @@ export default function SidebarLayout({ children, themeProps }: ProvidersProps)
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
+const Layout = ({ children, themeProps }: ProvidersProps) => {
|
|
|
+ const pathname = usePathname();
|
|
|
+ const key = usePathname();
|
|
|
+
|
|
|
+ const { isCollapse, setCollapse } = useSystemStore((state) => ({
|
|
|
+ isCollapse: state.isCollapse,
|
|
|
+ setCollapse: state.setCollapse,
|
|
|
+ }));
|
|
|
+
|
|
|
+ const swiperRef = useRef<SwiperClass>();
|
|
|
+ const homeContainerRef = useRef<HTMLDivElement>(null);
|
|
|
+
|
|
|
+ const startHandler = () => {
|
|
|
+ homeContainerRef.current?.classList.add("containerMask");
|
|
|
+ setCollapse(true);
|
|
|
+ };
|
|
|
+ const endHandler = () => {
|
|
|
+ homeContainerRef.current?.classList.remove("containerMask");
|
|
|
+ setCollapse(false);
|
|
|
+ };
|
|
|
+
|
|
|
+ const isShowBg = useMemo(() => {
|
|
|
+ const local = pathname.split("/")[1];
|
|
|
+
|
|
|
+ if (`/${local}` === pathname) return true;
|
|
|
+ return [`/${local}/freeGames`, "/br/replayGames", "/br/promo", "/br/gameList"].includes(
|
|
|
+ pathname
|
|
|
+ );
|
|
|
+ }, [pathname]);
|
|
|
+ return (
|
|
|
+ <div id="app" className="bg-black">
|
|
|
+ <Swiper
|
|
|
+ resistanceRatio={10}
|
|
|
+ initialSlide={2}
|
|
|
+ slidesPerView={"auto"}
|
|
|
+ style={{ width: "100%", height: "100%" }}
|
|
|
+ onSlidePrevTransitionStart={startHandler}
|
|
|
+ onSlideNextTransitionEnd={endHandler}
|
|
|
+ slideToClickedSlide
|
|
|
+ onSwiper={(swiper) => {
|
|
|
+ swiperRef.current = swiper;
|
|
|
+ }}
|
|
|
+ allowTouchMove={false}
|
|
|
+ >
|
|
|
+ <SwiperSlide style={{ width: "100%", height: "100%" }}>
|
|
|
+ <section className="relative flex h-[100%] items-center justify-center">
|
|
|
+ {/*<Loading />*/}
|
|
|
+ </section>
|
|
|
+ </SwiperSlide>
|
|
|
+
|
|
|
+ <SwiperSlide style={{ width: "70%", height: "100%" }} className={""}>
|
|
|
+ <section className="relative h-[100%]">
|
|
|
+ <Sidebar></Sidebar>
|
|
|
+ </section>
|
|
|
+ </SwiperSlide>
|
|
|
+
|
|
|
+ <SwiperSlide style={{ width: "100%", height: "100%" }}>
|
|
|
+ {/*停服通知*/}
|
|
|
+ <StopServiceClient />
|
|
|
+ {/*充值成功通知*/}
|
|
|
+ <GlobalNotify />
|
|
|
+ <section
|
|
|
+ className={clsx(isShowBg && styles.homePage, "relative h-[100%]")}
|
|
|
+ ref={homeContainerRef}
|
|
|
+ >
|
|
|
+ {children}
|
|
|
+ </section>
|
|
|
+ </SwiperSlide>
|
|
|
+ </Swiper>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
export const Providers = ({ children, themeProps }: ProvidersProps) => {
|
|
|
const setupConfig = useSystemStore((state) => state.setupConfig);
|