feat: 侧边栏

src/api/home.ts

@@ -1,81 +1,131 @@
 import { server } from "@/utils/server";
 
-export interface EntityGameListRep {
+/**
+ * entity.HomeCategory
+ */
+export interface GroupType {
+    category: Category[];
     /**
-     * 游戏ICON
+     * 分类名字
      */
-    game_icon: string;
+    category_name: string;
     /**
-     * 游戏ID
+     * 隐藏模板中的厂商、类型两个标签。1：开启，2：关闭
      */
-    game_id: string;
+    hide_status: number;
     /**
-     * 游戏名称
+     * 正序排序
      */
-    game_name: string;
+    sort: number;
     /**
-     * 游戏名称中文
+     * 展示风格 展示风格,1:横排,2:竖排,3:竖排-分类左边-连续,4:竖排-分类左边-拆开
      */
-    game_name_cn: string;
+    style_type: number;
+}
+
+/**
+ * entity.Category
+ */
+export interface Category {
     /**
-     * 游戏类型
+     * 多语言名字
      */
-    game_type: string;
+    category_name: string;
     /**
-     * id
+     * 游戏列表
      */
-    id: number;
+    game_list: GameListRep[];
     /**
-     * 厂商名字 besoft 等等
+     * 前置图标 -就是名字前面的那个小标签
      */
-    provider: string;
+    icon: string;
     /**
-     * 时间
+     * 图标类型,1:游戏图标,2:厂商图标',
      */
-    release_date: string;
-}
-
-export interface GroupType {
+    icon_type: string;
     /**
-     * 多语言名字
+     * 跳转ID
      */
-    category_name?: string;
+    jump_id: number;
     /**
-     * 游戏列表
+     * 每页展示多少条
      */
-    game_list?: EntityGameListRep[];
+    line_config_amount: number;
     /**
-     * 分类图标
+     * 每页条数
      */
-    icon?: string;
+    line_num: number;
     /**
-     * 每页展示多少条
+     * 是否显示厂商名称 厂商模块,1:开启,2:关闭
      */
-    line_config_amount?: number;
+    show_factory_name: number;
     /**
-     * 每页条数
+     * 是否显示游戏类型 游戏类型,1:开启,2:关闭
      */
-    line_num?: number;
+    show_game_type: number;
     /**
-     * 特殊显示 特殊显示,1:开启,2:关闭
+     * 是否显示体育模块 体育模块,1:开启,2:关闭
      */
-    special_show?: string;
+    show_sport: number;
     /**
-     * 展示风格 展示风格,1:横排,2:竖排,3:竖排-分类左边-连续,4:竖排-分类左边-拆开
+     * 特殊显示 特殊显示,1:开启,2:关闭
      */
-    style_type?: number;
+    special_show: string;
     /**
      * 标签
      */
-    tag?: string;
+    tag: string;
     /**
      * 当前分类的数量
      */
-    to_tal?: number;
+    to_tal: number;
+    /**
+     * 类型 1:game 2:brand 3:title
+     */
+    type: number;
+}
+
+/**
+ * entity.GameListRep
+ */
+export interface GameListRep {
+    /**
+     * 游戏ICON
+     */
+    game_icon: string;
+    /**
+     * 游戏ID
+     */
+    game_id: string;
+    /**
+     * 游戏名称
+     */
+    game_name: string;
+    /**
+     * 游戏名称中文
+     */
+    game_name_cn: string;
+    /**
+     * 游戏类型
+     */
+    game_type: string;
+    /**
+     * id
+     */
+    id: number;
+    /**
+     * 厂商名字 besoft 等等
+     */
+    provider: string;
+    /**
+     * 时间
+     */
+    release_date: string;
 }
 
 export const getGamesApi = () => {
     return server.post<GroupType[]>({
         url: "/v1/api/front/game_list",
+        data: {},
     });
 };

src/app/[locale]/(extend)/gameList/[gameListFlag]/page.tsx

@@ -6,8 +6,17 @@ interface Props {}
 
 const GameListFlag: FC<PropsWithChildren<Props>> = (props) => {
     const params = useParams();
-    console.log(`🎯🎯🎯🎯🎯-> in page.tsx on 10`, params);
-    return <div>hello React</div>;
+    return (
+        <div
+            className={
+                "w-1/1 flex h-[200px] items-center justify-center border-1" +
+                " border-[#4d4d4d]" +
+                " text-[0.12rem] text-[#4d4d4d]"
+            }
+        >
+            under development...
+        </div>
+    );
 };
 
 export default GameListFlag;

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

@@ -19,6 +19,11 @@ const HomeActions: FC<PropsWithChildren<Props>> = (props) => {
         console.log(`🎯🎯🎯🎯🎯-> in HomeActions.tsx on 9`, url);
     };
 
+    const scrollToTop = () => {
+        const parentEle = document.querySelector("#maincontainer");
+        parentEle!.scrollTo({ top: 0, behavior: "smooth" });
+    };
+
     return (
         <div>
             {/*about*/}
@@ -100,7 +105,27 @@ const HomeActions: FC<PropsWithChildren<Props>> = (props) => {
                     </div>
                 </div>
             </div>
-            <div className={"pb-[0.5rem]"}>123</div>
+            {/*support*/}
+            <div className={"mt-[0.3rem] flex items-center justify-around pb-[0.5rem]"}>
+                <div
+                    className={
+                        "h-[0.45rem] w-[0.45rem] rounded bg-gradient-to-b from-[#ff9323]" +
+                        " flex items-center justify-center to-[#ff6a01]"
+                    }
+                >
+                    <span className={"iconfont icon-shoucang text-[0.15rem]"}></span>
+                </div>
+                <div
+                    className={
+                        "flex h-[0.46rem] w-[0.46rem] rounded-[0.02rem] bg-[#25272c]" +
+                        " flex-col items-center justify-center text-[0.12rem]"
+                    }
+                    onClick={scrollToTop}
+                >
+                    <span className={"iconfont icon-xiangshang text-[#ff6a01]"}></span>
+                    Top
+                </div>
+            </div>
         </div>
     );
 };

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

@@ -1,5 +1,5 @@
 "use client";
-import { EntityGameListRep, getGamesApi, GroupType } from "@/api/home";
+import { getGamesApi } from "@/api/home";
 import Box from "@/components/Box";
 import { SwiperGroup } from "@/components/Card";
 import { useRouter } from "@/i18n";
@@ -83,14 +83,15 @@ const Manufacturer = (props: { data: EntityGameListRep[] }) => {
 };
 
 const HomeSwiper: FC<PropsWithChildren<Props>> = (props) => {
-    const [groupGames, setGroupGames] = useState<GroupType[]>([]);
+    const [groupGames, setGroupGames] = useState<EntityHomeRep[]>([]);
     const router = useRouter();
     useEffect(() => {
         getGamesApi().then((res) => {
             setGroupGames(res.data);
         });
     }, []);
-    const todoHandler = (item: GroupType) => {
+    return null;
+    const todoHandler = (item: EntityCategory) => {
         router.push(`/gameList/${item.line_config_amount}`);
     };
 

src/app/[locale]/page.tsx

@@ -1,11 +1,11 @@
 import HomeActions from "@/app/[locale]/_home/HomeActions";
+import HomeGames from "@/app/[locale]/_home/HomeGames";
 import Box from "@/components/Box";
 import Layout from "@/components/Layout";
 import { LocalPropsWithChildren } from "@/types";
 import { useTranslations } from "next-intl";
 import { FC } from "react";
 import HomeCard from "./_home/HomeCard";
-import HomeGames from "./_home/HomeGames";
 import HomeSwiper from "./_home/HomeSwiper";
 
 // Information

src/components/Card/SwiperGroup.tsx

@@ -4,16 +4,16 @@ import { FC, PropsWithChildren, ReactNode, useRef } from "react";
 
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 
-import { EntityGameListRep, GroupType } from "@/api/home";
+import { Category, GameListRep } from "@/api/home";
 import { CardProps } from "@/components/Card/Card";
 import GroupCard, { GroupProps } from "@/components/Card/GroupCard";
 import clsx from "clsx";
 import styles from "./style.module.scss";
 
-type TodoHandler = (item: GroupType) => void;
+type TodoHandler = (item: Category) => void;
 
 interface SwiperGroupProps extends GroupProps, CardProps {
-    group: GroupType;
+    group: Category;
     page?: number;
     // style
     bg?: boolean;
@@ -26,7 +26,7 @@ interface SwiperGroupProps extends GroupProps, CardProps {
     offsetY?: number;
 
     // SwiperSlide
-    slideRender?: (data: EntityGameListRep[]) => ReactNode;
+    slideRender?: (data: GameListRep[]) => ReactNode;
 }
 
 const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {

src/components/Footer/index.tsx

@@ -1,7 +1,7 @@
 "use client";
-import { usePathname, useRouter} from "@/i18n";
-import { FC, PropsWithChildren, ReactNode, useEffect } from "react";
+import { usePathname, useRouter } from "@/i18n";
 import clsx from "clsx";
+import { FC, PropsWithChildren, ReactNode } from "react";
 import "./style.scss";
 
 /**
@@ -10,65 +10,70 @@ import "./style.scss";
  *
  */
 export interface FooterProps {
-    children?: () => ReactNode;
+    children?: ReactNode;
 }
 
-const Footer: FC<PropsWithChildren<FooterProps>> = () => {
+const Footer: FC<PropsWithChildren> = () => {
     const tabList = [
         {
-            iconSpanName: 'icon-home',
-            label: 'Início',
-            path: '/'
+            iconSpanName: "icon-home",
+            label: "Início",
+            path: "/",
         },
         {
-            iconSpanName: 'icon-qianbao1',
-            label: 'Depósito',
-            path: '/deposit'
+            iconSpanName: "icon-qianbao1",
+            label: "Depósito",
+            path: "/deposit",
         },
         {
-            iconSpanName: 'icon-afiliado',
-            label: 'Afiliado',
-            path: '/affiliate/summary'
+            iconSpanName: "icon-afiliado",
+            label: "Afiliado",
+            path: "/affiliate/summary",
         },
         {
-            iconSpanName: 'icon-tiyu',
-            label: 'Esportes',
-            path: '/'
+            iconSpanName: "icon-tiyu",
+            label: "Esportes",
+            path: "/",
         },
         {
-            iconSpanName: 'icon-yonghu',
-            label: 'Perfil',
-            path: '/profile'
+            iconSpanName: "icon-yonghu",
+            label: "Perfil",
+            path: "/profile",
         },
-    ]
+    ];
 
-    const pathname = usePathname()
+    const pathname = usePathname();
 
     const router = useRouter();
-    const goPage = (path = '/') => {
-        router.push(path)
-    }
+    const goPage = (path = "/") => {
+        router.push(path);
+    };
 
     return (
         <div className="footer-box">
             <ul>
-                {
-                    tabList.map((item, index) => {
-                        return (
-                            <li className={clsx(item.path == pathname && 'active')} onClick={() => goPage(item.path)} key={index}>
-                                <div className="icon-box">
-                                    {
-                                        index == 2 ? (
-                                            <><i className="icon-afiliado"></i><i className="icon-rs"></i></>
-                                        ) : <span className={clsx('iconfont',item.iconSpanName)}></span>
-                                    }
-                                    { index == 3 && <b className="icon-hot"></b> }
-                                </div>
-                                <label>{item.label}</label>
-                            </li>
-                        )
-                    })
-                }
+                {tabList.map((item, index) => {
+                    return (
+                        <li
+                            className={clsx(item.path == pathname && "active")}
+                            onClick={() => goPage(item.path)}
+                            key={index}
+                        >
+                            <div className="icon-box">
+                                {index == 2 ? (
+                                    <>
+                                        <i className="icon-afiliado"></i>
+                                        <i className="icon-rs"></i>
+                                    </>
+                                ) : (
+                                    <span className={clsx("iconfont", item.iconSpanName)}></span>
+                                )}
+                                {index == 3 && <b className="icon-hot"></b>}
+                            </div>
+                            <label>{item.label}</label>
+                        </li>
+                    );
+                })}
             </ul>
         </div>
     );

src/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import { Link } from "@/i18n";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import HeaderTitle from "./HerderTitle";
 import styles from "./style.module.scss";
 /**
@@ -35,7 +35,7 @@ const DefaultHeader: FC = () => {
     );
 };
 
-const Header: FC<PropsWithChildren<HeaderProps>> = (props) => {
+const Header: FC<HeaderProps> = (props) => {
     const { headerPlaceholder = true, headerRender } = props;
     const cs = clsx({
         [styles.placeholder]: headerPlaceholder,

src/components/Layout/index.tsx

@@ -1,16 +1,49 @@
+"use client";
 import Footer, { FooterProps } from "@/components/Footer";
 import Header, { HeaderProps } from "@/components/Header";
+import Sidebar from "@/components/Layout/Sidebar";
 import { FC, PropsWithChildren } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
 import styles from "./style.module.scss";
 type Props = FooterProps & HeaderProps;
 const Layout: FC<PropsWithChildren<Props>> = (props) => {
     const { children } = props;
+
+    const startHandler = () => {
+        console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 12`, "start");
+    };
+    const endHandler = () => {
+        console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 12`, "end");
+    };
     return (
-        <div className="relative h-[100vh]">
-            <Header {...props}></Header>
-            <main className={styles.main}>{children}</main>
-            <Footer {...props}></Footer>
-        </div>
+        <Swiper
+            initialSlide={1}
+            resistanceRatio={0}
+            slidesPerView={"auto"}
+            slideToClickedSlide
+            onSlideChangeTransitionStart={startHandler}
+            onSlideChangeTransitionEnd={endHandler}
+            // allowTouchMove={false}
+        >
+            <SwiperSlide
+                style={{ width: "70%" }}
+                className={"mx-w-[2.2222rem] " + " bg-[rgb(31,31,31)]"}
+            >
+                <section className="relative h-[100vh]">
+                    <Sidebar></Sidebar>
+                </section>
+            </SwiperSlide>
+
+            <SwiperSlide style={{ width: "100%" }}>
+                <div className="relative h-[100vh]">
+                    <Header {...props}></Header>
+                    <main className={styles.main} id="maincontainer">
+                        {children}
+                    </main>
+                    <Footer {...props}></Footer>
+                </div>
+            </SwiperSlide>
+        </Swiper>
     );
 };
 

src/styles/variables.scss

@@ -7,3 +7,8 @@ $primary-color: #ff6a01;
 
 $-header-height: 0.4rem;
 $-footer-height: 0.6rem;
+
+
+:export {
+  primaryColor: $-theme-color;
+}

src/utils/server/index.ts

@@ -1,8 +1,8 @@
 import Request from "./axios";
 const server = new Request({
     timeout: 10 * 1000,
-    baseURL: "http://127.0.0.1:4523/m1/4790544-4444647-default",
-    // baseURL: "http://192.168.0.66:6060",
+    // baseURL: "http://127.0.0.1:4523/m1/4790544-4444647-default",
+    baseURL: "http://192.168.0.66:6060",
     transform: {
         // instance  interceptor
         requestInterceptor: (config) => {

tailwind.config.ts

@@ -36,6 +36,9 @@ const config: Config = {
                     "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
             },
         },
+        colors: {
+            "primary-color": "#ff6a01",
+        },
     },
     plugins: [
         nextui({