feat: 修改数据为服务端请求

.env.development

@@ -1,2 +1,2 @@
-#NEXT_PUBLIC_BASE_URL=http://192.168.0.66:8800
-NEXT_PUBLIC_BASE_URL=http://206.168.191.125:8800
+NEXT_PUBLIC_BASE_URL=http://192.168.0.66:8800
+#NEXT_PUBLIC_BASE_URL=http://206.168.191.125:8800

src/app/[locale]/_home/HomeSwiper.tsx

@@ -1,7 +1,6 @@
 "use client";
-import { FC, PropsWithChildren, useEffect } from "react";
+import { FC, PropsWithChildren } from "react";
 
-import { getBannerApi } from "@/api/home";
 import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 interface Props {}
@@ -16,11 +15,6 @@ const urls = [
     "https://images.hibigwin.com/9f/202406/veFfaahiTGAyDpy.jpg",
 ];
 const HomeSwiper: FC<PropsWithChildren<Props>> = (props) => {
-    useEffect(() => {
-        getBannerApi({}).then((res) => {
-            console.log(res);
-        });
-    }, []);
     return (
         <div style={{ height: "1.86rem" }}>
             <Swiper

src/app/[locale]/page.tsx

@@ -1,19 +1,32 @@
 "use server";
+import { GroupType } from "@/api/home";
 import HomeActions from "@/app/[locale]/_home/HomeActions";
-import HomeGames from "@/app/[locale]/_home/HomeGames";
+import HomeTabs from "@/app/[locale]/_home/HomeTabs";
 import Box from "@/components/Box";
 import Layout from "@/components/Layout";
 import HomeCard from "./_home/HomeCard";
+import HomeGames from "./_home/HomeGames";
 import HomeSearch from "./_home/HomeSearch";
 import HomeSwiper from "./_home/HomeSwiper";
 
-async function App() {
-    // const t = useTranslations("global");
-    // const data = await fetch("http://206.168.191.125:8800/v1/api/front/game_list");
-    // console.log(`🎯🎯🎯🎯🎯-> in page.tsx on 13`, data);
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+const getGames = async (): Promise<GroupType[]> => {
+    const data = await fetch(`${BASE_URL}/v1/api/front/game_list`, {
+        method: "POST",
+        body: JSON.stringify({}),
+    }).then((res) => res.json());
+    return data.data;
+};
+export default async function Page() {
+    const group: GroupType[] = await getGames();
+
+    // const data = await fetch("http://localhost:3000/server");
+    // console.log(`🎯🎯🎯🎯🎯-> in page.tsx on 24`, data);
+
     return (
         <Layout>
-            <div>
+            <>
                 <Box>
                     <HomeSwiper></HomeSwiper>
                     <HomeCard></HomeCard>
@@ -21,14 +34,17 @@ async function App() {
                 <Box className={"pb-[0.0394rem]"}>
                     <HomeSearch />
                 </Box>
+                <Box className={"pt-0"}>
+                    <HomeTabs />
+                </Box>
                 {/*todo HomeTabs*/}
-                <HomeGames />
+                {group.map((item) => {
+                    return <HomeGames groupGames={item.category} key={item.category_name} />;
+                })}
                 <Box>
                     <HomeActions />
                 </Box>
-            </div>
+            </>
         </Layout>
     );
 }
-
-export default App;

src/components/Card/Card.tsx

@@ -6,7 +6,7 @@ import { brandList } from "@/utils/constant";
 import { Button, Modal, ModalBody, ModalContent, useDisclosure } from "@nextui-org/react";
 import { Toast } from "antd-mobile";
 import { useTranslations } from "next-intl";
-import { FC, PropsWithChildren, ReactNode, useRef } from "react";
+import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from "react";
 import styles from "./style.module.scss";
 export interface CardProps {
     item?: GameListRep;
@@ -15,7 +15,8 @@ export interface CardProps {
 const Card: FC<PropsWithChildren<CardProps>> = (props) => {
     const { render, item } = props;
     const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
-    const app: HTMLElement = document.querySelector("#app")!;
+    const appRef = useRef<Element>();
+
     const t = useTranslations("Game");
     const urlRef = useRef<string>("");
     const brandRef = useRef<string>("");
@@ -23,6 +24,9 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
     const state = useGlobalStore();
     const router = useRouter();
     const { token } = state;
+    useEffect(() => {
+        appRef.current = document.querySelector("#app")!;
+    }, []);
     const handler = (game: GameListRep) => {
         onOpen();
         brandRef.current = brandList.find((item) => item.gid === game.game_id)?.brand ?? "";
@@ -58,7 +62,7 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
             )}
             <Modal
                 isOpen={isOpen}
-                portalContainer={app}
+                portalContainer={appRef.current}
                 placement={"bottom"}
                 onOpenChange={onOpenChange}
                 classNames={{

src/utils/client/index.ts

@@ -0,0 +1,17 @@
+// class Server {
+//     private static instance: Server;
+//     private static BASE_URL: string;
+//     constructor() {
+//         this.BASE_URL = process.env.BASE_URL as string;
+//     }
+//
+//     request<T>(options?: Request): Promise<T> {
+//         return new Promise((resolve, reject) => {
+//             fetch(``);
+//         });
+//     }
+// }
+//
+// const instance = new Server();
+//
+// console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 19`, instance);

src/utils/server/index.ts

@@ -1,4 +1,3 @@
-"use client";
 import Request from "./axios";
 
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;