feat: 修改

src/app/[locale]/(doings)/rank/detail/games.tsx

@@ -97,7 +97,7 @@ const Games = React.forwardRef<ModalProps, Props>(({ data }, ref) => {
                                         className={clsx(styles.providerItem, {
                                             [styles.active]: idx === actPro,
                                         })}
-                                        key={item.provider_icon}
+                                        key={`${item.provider_icon}_${item.provider}_${idx}`}
                                         onClick={() => {
                                             setSearchStr("");
                                             setActPro(idx);

src/app/[locale]/(doings)/rank/detail/history.tsx

@@ -3,6 +3,7 @@ import { getRankDetail, Rank, RankDetail, RankRequestParams, RankReward } from "
 import Empty from "@/components/Empty";
 import TipsModal from "@/components/TipsModal";
 import Vip from "@/components/Vip";
+import { InfiniteScroll } from "antd-mobile";
 import clsx from "clsx";
 import React from "react";
 import styles from "./page.module.scss";
@@ -14,13 +15,16 @@ export type ModalProps = {
 
 interface Props {
     areaId: number;
+    type: 0 | -1;
 }
 
-const History = React.forwardRef<ModalProps, Props>(({ areaId }, ref) => {
+const History = React.forwardRef<ModalProps, Props>(({ areaId, type }, ref) => {
     const [rankList, setRankList] = React.useState<Rank[]>([]);
+    const [noMore, setNoMore] = React.useState<boolean>(false);
     const [data, setData] = React.useState<RankDetail>({} as RankDetail);
+    const [visible, setVisible] = React.useState<boolean>(false);
     const pageInfo = React.useRef({
-        page: 1,
+        page: 0,
     });
 
     const getNumber = (num: number) => {
@@ -32,24 +36,37 @@ const History = React.forwardRef<ModalProps, Props>(({ areaId }, ref) => {
 
     React.useImperativeHandle(ref, () => {
         return {
-            onClose: () => tipModals.current?.onClose(),
-            onOpen: () => tipModals.current?.onOpen(),
+            // onClose: () => tipModals.current?.onClose(),
+            // onOpen: () => tipModals.current?.onOpen(),
+            onClose: () => setVisible(false),
+            onOpen: () => setVisible(true),
         };
     });
 
     React.useEffect(() => {
-        getData();
-    }, [areaId]);
+        pageInfo.current.page = 0;
+        setNoMore(false);
+        setRankList([]);
+        // getData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible]);
 
     const getData = async () => {
+        if (noMore) return;
         const params: RankRequestParams = {
             area_id: areaId,
-            type: -1,
+            type: type,
             page: pageInfo.current?.page || 1,
         };
         const res = await getRankDetail(params);
         if (res?.code === 200) {
-            setRankList(res?.data?.list || []);
+            if (res?.data?.list && res?.data?.list?.length < 10) {
+                setNoMore(true);
+            }
+            setData(res.data);
+            setRankList((value) => {
+                return [...(value || []), ...(res?.data?.list || [])];
+            });
         }
     };
 
@@ -60,6 +77,8 @@ const History = React.forwardRef<ModalProps, Props>(({ areaId }, ref) => {
             position="bottom"
             className={styles.tipModal}
             ref={tipModals}
+            visible={visible}
+            onChange={(visible) => setVisible(visible)}
             title={
                 <div className="p-[.1rem] text-left">
                     <span className="text-[#fff]">Conjunto de prémios:</span>
@@ -67,50 +86,61 @@ const History = React.forwardRef<ModalProps, Props>(({ areaId }, ref) => {
                 </div>
             }
         >
-            <div className="bg-[#1f2830] p-[.1rem]">
-                {!!data?.list?.length &&
-                    data.list.map((item) => {
-                        let curReward: RankReward = {} as RankReward;
-                        if (item?.reward?.length) {
-                            curReward = item?.reward[0];
-                        }
-                        return (
-                            <div className={clsx(styles.normalItem)} key={item.rank}>
-                                <div className="mr-[.1rem] w-[.5rem] text-center text-[.2rem] font-bold text-[#11de68]">
-                                    {getNumber(1)}
-                                </div>
-                                <div className={clsx(styles.normalHeader, "mr-[.2rem]")}>
-                                    <img
-                                        src="https://img1.baidu.com/it/u=1699323843,2372946297&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=983"
-                                        alt=""
-                                        className={styles.headerImage}
-                                    />
-                                    <Vip
-                                        style={{
-                                            position: "absolute",
-                                            bottom: "-0.1rem",
-                                        }}
-                                        level={item?.vipLevel}
-                                        vipIconClassName="relative z-[3]"
-                                        vipIconStyle={{ width: ".3rem" }}
-                                    ></Vip>
-                                </div>
-                                <div className="flex-1">
-                                    <div className="text-[.12rem]">{item?.nickName}</div>
-                                    <div className={styles.usedPoint}>{item?.score}</div>
-                                </div>
-                                <div className="flex flex-col items-end">
-                                    <div className={styles.moneyText}>
-                                        R${curReward?.amount || 0}
+            <div className="h-[60vh] overflow-auto bg-[#1f2830] p-[.1rem]">
+                {!!rankList?.length && (
+                    <>
+                        {rankList.map((item) => {
+                            let curReward: RankReward = {} as RankReward;
+                            if (item?.reward?.length) {
+                                curReward = item?.reward[0];
+                            }
+                            return (
+                                <div className={clsx(styles.normalItem)} key={item.rank}>
+                                    <div className="mr-[.1rem] w-[.5rem] text-center text-[.2rem] font-bold text-[#11de68]">
+                                        {getNumber(item.rank)}
                                     </div>
-                                    <div className={styles.percentBox}>
-                                        {curReward?.ratio || 0}%
+                                    <div className={clsx(styles.normalHeader, "mr-[.2rem]")}>
+                                        <img
+                                            src="https://img1.baidu.com/it/u=1699323843,2372946297&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=983"
+                                            alt=""
+                                            className={styles.headerImage}
+                                        />
+                                        <Vip
+                                            style={{
+                                                position: "absolute",
+                                                bottom: "-0.1rem",
+                                            }}
+                                            level={item?.vipLevel}
+                                            vipIconClassName="relative z-[3]"
+                                            vipIconStyle={{ width: ".3rem" }}
+                                        ></Vip>
+                                    </div>
+                                    <div className="flex-1">
+                                        <div className="text-[.12rem]">{item?.nickName}</div>
+                                        <div className={styles.usedPoint}>{item?.score}</div>
+                                    </div>
+                                    <div className="flex flex-col items-end">
+                                        <div className={styles.moneyText}>
+                                            R${curReward?.amount || 0}
+                                        </div>
+                                        <div className={styles.percentBox}>
+                                            {curReward?.ratio || 0}%
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        );
-                    })}
-                {!data?.list?.length && (
+                            );
+                        })}
+                    </>
+                )}
+                <InfiniteScroll
+                    loadMore={async () => {
+                        pageInfo.current.page++;
+                        await getData();
+                    }}
+                    hasMore={!noMore}
+                ></InfiniteScroll>
+
+                {!rankList.length && (
                     <div className="flex h-[100%] items-center justify-center">
                         <Empty></Empty>
                     </div>

src/app/[locale]/(doings)/rank/detail/middle.tsx

@@ -44,6 +44,15 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
                     targetId = item.id;
                 }
             }
+            const stickyBox: any = document.querySelector("#stickyBox");
+            if (stickyBox) {
+                const stickyRect = stickyBox.getBoundingClientRect();
+                if (stickyRect.top < 60) {
+                    stickyBox.style.background = "rgba(0,0,0,.7)";
+                } else {
+                    stickyBox.style.background = "rgba(255,255,255,0)";
+                }
+            }
         });
         if (actIdRef.current !== targetId) {
         }
@@ -96,7 +105,7 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
 
     return (
         <>
-            <div className={clsx(styles.gideBox, "py-[.1rem]")}>
+            <div className={clsx(styles.gideBox, "py-[.1rem]")} id="stickyBox">
                 {hrefCfg.map((item) => {
                     return (
                         <div

src/app/[locale]/(doings)/rank/detail/page.tsx

@@ -30,6 +30,7 @@ const Page = () => {
     const [loading, setLoading] = React.useState<boolean>(false);
     const [initLoading, setInitLoading] = React.useState<boolean>(false);
     const [noMore, setNoMore] = React.useState<boolean>(false);
+    const [modalType, setModalType] = React.useState<0 | -1>(0);
 
     const pageInfo = React.useRef({
         page: 1,
@@ -54,6 +55,7 @@ const Page = () => {
         setRankList([]);
         setData({} as any);
         getData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [areaId]);
 
     const getData = async () => {
@@ -111,10 +113,13 @@ const Page = () => {
     };
 
     return (
-        <div className="h-[100%] overflow-auto" id="outContainer">
+        <div className="relative h-[100%] overflow-auto" id="outContainer">
             <div
-                onClick={() => historyRef.current?.onOpen()}
-                className="fixed right-[0px] top-[350px] z-[5] rounded-[.08rem_0_0_.08rem] bg-[rgba(255,255,255,.2)] px-[.1rem] py-[.04rem]"
+                onClick={() => {
+                    setModalType(-1);
+                    historyRef.current?.onOpen();
+                }}
+                className="absolute right-[0px] top-[300px] z-[5] rounded-[.08rem_0_0_.08rem] bg-[rgba(255,255,255,.2)] px-[.1rem] py-[.04rem]"
             >
                 <i className="iconfont icon-tubiaozhizuomoban- mr-[.06rem]"></i>
                 <span>Histórico</span>
@@ -137,7 +142,10 @@ const Page = () => {
                                     styles.normalItem,
                                     "justify-center py-[.1rem!important]"
                                 )}
-                                onClick={loadMore}
+                                onClick={() => {
+                                    setModalType(0);
+                                    historyRef.current?.onOpen();
+                                }}
                             >
                                 Mesa cheia &gt;
                             </div>
@@ -217,7 +225,7 @@ const Page = () => {
                     cancelamento do prémio ou do lucro
                 </div>
             </div>
-            <History ref={historyRef} areaId={areaId}></History>
+            <History ref={historyRef} areaId={areaId} type={modalType}></History>
             <Games data={data} ref={gamesRef}></Games>
         </div>
     );

src/app/[locale]/layout.tsx

@@ -88,6 +88,7 @@ export default async function LocaleLayout({
         notFound();
     }
     const messages = await getMessages();
+
     return (
         <html lang={locale} suppressHydrationWarning>
             <body className={clsx("font-sans", fontSans.variable)}>
@@ -99,6 +100,19 @@ export default async function LocaleLayout({
                         </Suspense>
                     </Providers>
                 </NextIntlClientProvider>
+                <div
+                    id="globalMask"
+                    style={{
+                        position: "fixed",
+                        zIndex: 100,
+                        background: "rgba(0,0,0,.7)",
+                        display: "none",
+                        left: 0,
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                    }}
+                ></div>
             </body>
         </html>
     );

src/app/[locale]/providers.tsx

@@ -39,6 +39,7 @@ const initFirebase = () => {
     if (!window.Notification) {
         return;
     }
+
     //  是否开启通知
     // new Notification("这是标题", {
     //     body: "这是正文",

src/components/Box/index.tsx

@@ -45,7 +45,10 @@ const openWindow = (url: string) => {
     if (isHttpUrl(url)) {
         window.open(url);
     } else {
-        Toast.show("非法地址");
+        Toast.show({
+            icon: "fail",
+            content: "URL is not valid",
+        });
     }
 };
 

src/components/Card/Card.tsx

@@ -181,7 +181,7 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
                         className={"h-[100%] w-[100%]"}
                     />
                     {props.isShowOnline && item?.online_user && (
-                        <div className={styles.cardOnline}>{item?.online_user} On-Line</div>
+                        <div className={styles.cardOnline}>{item?.online_user}</div>
                     )}
                     {props.isShowFavorite && (
                         <div

src/components/Card/style.module.scss

@@ -22,7 +22,7 @@
     position: absolute;
     left: 0.1rem;
     bottom: 0.05rem;
-    font-size: 0.1rem;
+    font-size: 0.12rem;
     color: #fff;
     &::before {
         content: "";

src/components/TipsModal/index.tsx

@@ -1,7 +1,14 @@
 "use client";
 import { Mask } from "antd-mobile";
 import clsx from "clsx";
-import { forwardRef, PropsWithChildren, ReactNode, useImperativeHandle, useState } from "react";
+import {
+    forwardRef,
+    PropsWithChildren,
+    ReactNode,
+    useEffect,
+    useImperativeHandle,
+    useState,
+} from "react";
 
 type Props = {
     title?: string | ReactNode;
@@ -10,25 +17,45 @@ type Props = {
     className?: string; // 自定义样式类名，用于覆盖默认样式，如：bg-[#fff] text-[#000] 等
     visible?: boolean;
     position?: "center" | "bottom";
+    onChange?: (visible: boolean) => void;
 };
 export type ModalProps = {
     onClose: () => void;
     onOpen: () => void;
 };
 const TipsModal = forwardRef<ModalProps, PropsWithChildren<Props>>(function TipsModal(props, ref) {
-    const { children, title, onBeforeClose, className, position = "center" } = props;
+    const {
+        children,
+        title,
+        onBeforeClose,
+        className,
+        position = "center",
+        onChange,
+        visible,
+    } = props;
 
-    const [visible, setVisible] = useState(props.visible || false);
+    const [innerVisible, setInnerVisible] = useState<boolean>(visible || false);
     useImperativeHandle(ref, () => {
         return {
-            onClose: () => setVisible(false),
-            onOpen: () => setVisible(true),
+            onClose: () => setInnerVisible(false),
+            onOpen: () => setInnerVisible(true),
         };
     });
+
+    useEffect(() => {
+        if (typeof onChange === "function") {
+            onChange(innerVisible);
+        }
+    }, [innerVisible]);
+
+    useEffect(() => {
+        setInnerVisible(!!visible);
+    }, [visible]);
+
     return (
         <Mask
-            visible={visible}
-            onMaskClick={() => setVisible(false)}
+            visible={innerVisible}
+            onMaskClick={() => setInnerVisible(false)}
             getContainer={props?.getContainer}
         >
             <div
@@ -46,7 +73,7 @@ const TipsModal = forwardRef<ModalProps, PropsWithChildren<Props>>(function Tips
                             className="iconfont icon-guanbi closeIcon"
                             onClick={() => {
                                 onBeforeClose && onBeforeClose();
-                                setVisible(false);
+                                setInnerVisible(false);
                             }}
                         ></span>
                     </div>

src/i18n/routing.ts

@@ -5,7 +5,12 @@ export const locales = modulesFiles.keys().map((modulePath: string) => {
     return modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
 });
 // 路由
-export const { Link, redirect, usePathname, useRouter } = createNavigation({
+const {
+    Link,
+    redirect,
+    usePathname,
+    useRouter: useBaseRouter,
+} = createNavigation({
     locales,
 });
 
@@ -16,3 +21,18 @@ export const routing = defineRouting({
     defaultLocale: defaultLocale,
     localeCookie: { name: "language" },
 });
+
+const useRouter = () => {
+    const router = useBaseRouter();
+
+    const cfg: any = { ...router };
+    Object.keys(router).forEach((key: any) => {
+        cfg[key] = (...args: any) => {
+            // document.querySelector("#globalMask").style.display = "block";
+            (router as any)[key].apply(null, args);
+        };
+    });
+    return cfg;
+};
+
+export { Link, redirect, usePathname, useRouter };