fix: 修改代理页面

next.config.mjs

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

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

@@ -1,8 +1,8 @@
 "use server";
-import { GroupType, PrizeTypes } from "@/api/home";
+import { GroupType } from "@/api/home";
 import { server } from "@/utils/server";
 import dynamic from "next/dynamic";
-import React from "react";
+import React, { Suspense } from "react";
 
 const HomeTabs = dynamic(() => import("./_home/HomeTabs"));
 
@@ -20,19 +20,11 @@ const getGames = React.cache(async () => {
         });
 });
 
-const getPrizeApi = () => {
-    return server.request<PrizeTypes[]>({
-        url: "/v1/api/front/games_notice_win",
-        method: "post",
-    });
-};
-
 export default async function Page(props: any) {
     const group = await getGames();
     return (
-        <HomeTabs
-            tabs={group}
-            // prize={result?.data || []}
-        />
+        <Suspense>
+            <HomeTabs tabs={group} />
+        </Suspense>
     );
 }

src/app/[locale]/(TabBar)/profile/component/ItemCom/index.tsx

@@ -64,7 +64,7 @@ const ItemCom: FC<ItemComProps> = ({ type = "login" }) => {
             desc: "",
             icon: "icon-huo",
             color: "#ff9b23",
-            url: "/affiliate/summary",
+            url: "/affiliate",
             content: null,
         },
         {

src/app/[locale]/(navbar)/download/layout.tsx

@@ -1,6 +1,6 @@
 import HeaderBack from "@/components/HeaderBack";
 import { getTranslations } from "next-intl/server";
-import { ReactNode } from "react";
+import { ReactNode, Suspense } from "react";
 export const generateMetadata = async () => {
     const t = await getTranslations("titles");
     return {
@@ -16,7 +16,9 @@ export default async function Layout({
 }) {
     return (
         <>
-            <HeaderBack showBack={true} />
+            <Suspense>
+                <HeaderBack showBack={true} />
+            </Suspense>
             <main className={"main-header bg-[#282828]"}>{children}</main>
         </>
     );

src/app/[locale]/(navbar)/download/page.tsx

@@ -66,7 +66,6 @@ function pow1024(num: number) {
 const Page = async () => {
     const { data } = await getAppInfoApi();
 
-    console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 66`, data);
     return (
         <div
             className={"h-[100%] p-[20px]"}
@@ -75,21 +74,14 @@ const Page = async () => {
                     "repeating-linear-gradient(-45deg, #2a2a2a, #2a2a2a .02rem, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) .08rem)",
             }}
         >
-            <Box action={4} actionData={'pwa_install'} none>
-                <img
-                    src="/download/pwa.jpg"
-                    alt=""
-                    className={"w-[100%]"}
-                />
+            <Box action={4} actionData={"pwa_install"} none>
+                <img src="/download/pwa.jpg" alt="" className={"w-[100%]"} />
             </Box>
-            <Link
-                href={"https://t.me/jogobcwinOfficialChanel"}
-                target={"_blank"}
-            >
+            <Link href={"https://t.me/jogobcwinOfficialChanel"} target={"_blank"}>
                 <img
                     src="/download/telegram.jpg"
                     alt=""
-                    className="w-[100%] mt-[0.1rem] mb-[0.1rem]"
+                    className="mb-[0.1rem] mt-[0.1rem] w-[100%]"
                 />
             </Link>
             <p className={"text-center"}>

src/app/[locale]/affiliate/component/TabsCom/index.tsx

@@ -1,9 +1,13 @@
 "use client";
-import { usePathname, useRouter } from "@/i18n/routing";
 import { Popup, Tabs } from "antd-mobile";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { FC, ReactNode, useState } from "react";
+import Faq from "../../faq";
+import Payments from "../../payments";
+import Referrals from "../../referrals";
+import Report from "../../report";
+import Summary from "../../summary";
 
 interface Props {}
 
@@ -369,34 +373,27 @@ export const CommissionModel: FC<{ visible: boolean; setVisible: (value: boolean
     );
 };
 const App: FC<Props> = (props) => {
-    const pathname = usePathname();
     const t = useTranslations("TabsCom");
-    const router = useRouter();
-
-    const activeTab = pathname.split("/").at(-1);
-
+    const [activeTab, setActiveTab] = useState("summary");
     const [visible, setVisible] = useState(false);
-
     const tabs = [
-        { id: 1, page: "summary", content: t("PAINEL"), x: 0.27 },
-        { id: 2, page: "referrals", content: t("REFERÊNCIAS"), x: 0.93 },
-        { id: 3, page: "report", content: t("RELATÓRIO"), x: 1.7 },
-        { id: 4, page: "payments", content: t("PAGAMENTOS"), x: 2.48 },
-        { id: 5, page: "faq", content: t("FAQ"), x: 3.06 },
-        { id: 6, page: "", content: "TUTORIAL", x: 3.06 },
+        { id: 1, page: "summary", content: t("PAINEL"), x: 0.27, children: <Summary /> },
+        { id: 2, page: "referrals", content: t("REFERÊNCIAS"), x: 0.93, children: <Referrals /> },
+        { id: 3, page: "report", content: t("RELATÓRIO"), x: 1.7, children: <Report /> },
+        { id: 4, page: "payments", content: t("PAGAMENTOS"), x: 2.48, children: <Payments /> },
+        { id: 5, page: "faq", content: t("FAQ"), x: 3.06, children: <Faq /> },
+        { id: 6, page: "", content: "TUTORIAL", x: 3.06, children: null },
     ] as const;
     const tabsChange = (page: string) => {
         if (page) {
-            router.replace(`/affiliate/${page}`);
+            setActiveTab(page);
         } else {
             setVisible(true);
         }
     };
 
     return (
-        <div
-            className={`layout-tabs relative flex h-[0.4rem] items-center justify-between text-[0.13rem]`}
-        >
+        <div className={`layout-tabs relative flex items-center justify-between text-[0.13rem]`}>
             <Tabs
                 onChange={tabsChange}
                 stretch={true}
@@ -409,11 +406,9 @@ const App: FC<Props> = (props) => {
             >
                 {tabs.map((tab) => {
                     return (
-                        <Tabs.Tab
-                            key={tab.page}
-                            title={tab.content}
-                            className={"text-[grey]"}
-                        ></Tabs.Tab>
+                        <Tabs.Tab key={tab.page} title={tab.content} className={"text-[grey]"}>
+                            {tab.children}
+                        </Tabs.Tab>
                     );
                 })}
             </Tabs>

src/app/[locale]/affiliate/layout.tsx

@@ -1,7 +1,6 @@
 import HeaderBack from "@/components/HeaderBack";
 import { getTranslations } from "next-intl/server";
 import { ReactNode, Suspense } from "react";
-import TabsCom from "./component/TabsCom";
 import "./style.scss";
 
 export const generateMetadata = async () => {
@@ -26,12 +25,7 @@ export default async function LocaleLayout({
                     title={`${t("Afiliado")} - ${t("title")}`}
                 ></HeaderBack>
             </Suspense>
-            <main className={"main-header bg-[#e8e8e8] px-[0.12rem]"}>
-                <Suspense>
-                    <TabsCom></TabsCom>
-                </Suspense>
-                {children}
-            </main>
+            <main className={"main-header bg-[#e8e8e8] px-[0.12rem]"}>{children}</main>
         </>
     );
 }

src/app/[locale]/affiliate/page.tsx

@@ -0,0 +1,14 @@
+import TabsCom from "@/app/[locale]/affiliate/component/TabsCom";
+import { Suspense } from "react";
+
+const Page = () => {
+    return (
+        <>
+            <Suspense>
+                <TabsCom></TabsCom>
+            </Suspense>
+        </>
+    );
+};
+
+export default Page;

src/app/[locale]/template.tsx

@@ -2,21 +2,50 @@
 
 import { usePathname } from "@/i18n/routing";
 import { AnimatePresence, motion } from "framer-motion";
-import { ReactNode } from "react";
+import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { ReactNode, useContext, useRef } from "react";
+// const Template = ({ children }: { children: ReactNode }) => {
+//     const key = usePathname();
+//     return (
+//         <AnimatePresence mode="popLayout">
+//             <motion.div
+//                 layout
+//                 key={key}
+//                 initial={{ opacity: 0 }}
+//                 animate={{ opacity: 1 }}
+//                 exit={{ opacity: 0 }}
+//                 transition={{
+//                     duration: 1,
+//                     ease: "easeOut",
+//                 }}
+//                 className={"h-[100%]"}
+//             >
+//                 {children}
+//             </motion.div>
+//         </AnimatePresence>
+//     );
+// };
+function FrozenRouter(props: { children: ReactNode }) {
+    const context = useContext(LayoutRouterContext ?? {});
+    const frozen = useRef(context).current;
+    return (
+        <LayoutRouterContext.Provider value={frozen}>{props.children}</LayoutRouterContext.Provider>
+    );
+}
+
 const Template = ({ children }: { children: ReactNode }) => {
     const key = usePathname();
     return (
-        <AnimatePresence mode="popLayout">
+        <AnimatePresence mode="wait">
             <motion.div
-                layout
                 key={key}
-                initial={{ x: 100, opacity: 0 }}
-                animate={{ x: 0, opacity: 1 }}
-                exit={{ x: 100, opacity: 0 }}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
                 transition={{
                     duration: 0.3,
-                    ease: [0, 0.71, 0.2, 1.01],
+                    ease: "easeInOut",
                 }}
+                layout="position"
                 className={"h-[100%]"}
             >
                 {children}
@@ -24,5 +53,4 @@ const Template = ({ children }: { children: ReactNode }) => {
         </AnimatePresence>
     );
 };
-
 export default Template;

src/components/Footer/index.tsx

@@ -37,7 +37,7 @@ const tabList = [
     {
         iconSpanName: "icon-afiliado",
         label: "affiliated",
-        path: "/affiliate/summary",
+        path: "/affiliate",
     },
     {
         iconSpanName: "icon-lihe",

src/hooks/useDesktop.tsx

@@ -12,8 +12,15 @@ const useDesktop = (source: "page" | "components") => {
 
     const downloadHandler = () => {
         sessionStorage.setItem("pwa_install", "cancel");
-        // @ts-ignore
-        prompt.current?.prompt();
+        if (prompt.current) {
+            // @ts-ignore
+            prompt.current?.prompt();
+        } else {
+            // Dialog.confirm({
+            //     title: "短信验证",
+            //     content: <div>123</div>,
+            // });
+        }
         // 不判断是否真的包含
         setHasDesktop(false);
     };
@@ -25,6 +32,7 @@ const useDesktop = (source: "page" | "components") => {
         }
         // 有pwa 则不会触发
         prompt.current = e;
+
         if (source === "page" && sessionStorage.getItem("pwa_install") === null) {
             setHasDesktop(true);
         }