fix: 移除next-ui 修改布局

.npmrc

@@ -1 +0,0 @@
-public-hoist-pattern[]=*@nextui-org/*

package.json

@@ -4,20 +4,15 @@
   "private": true,
   "scripts": {
     "dev": "cross-env NODE_ENV=development next dev",
-
     "dev:test": "cross-env NODE_ENV=test  next dev",
-    "build:test":"cross-env NODE_ENV=test  next build",
+    "build:test": "cross-env NODE_ENV=test  next build",
     "start:test": "cross-env NODE_ENV=test next start",
-
     "build": "cross-env NODE_ENV=production next build",
     "start": "cross-env NODE_ENV=production next start",
-
     "lint": "next lint",
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.4.2",
-    "@nextui-org/system": "^2.2.5",
     "ahooks": "^3.8.0",
     "antd-mobile": "^5.37.1",
     "axios": "^1.7.2",

src/app/[locale]/(TabBar)/(ordinary)/layout.tsx

@@ -1,4 +1,3 @@
-import Footer from "@/components/Footer";
 import HeaderBack from "@/components/HeaderBack";
 import { ReactNode } from "react";
 export default async function LocaleLayout({
@@ -12,7 +11,6 @@ export default async function LocaleLayout({
         <>
             <HeaderBack showBack={true} />
             <main className={"main-footer-header bg-[#1f1f1f]"}>{children}</main>
-            <Footer></Footer>
         </>
     );
 }

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

@@ -22,7 +22,7 @@ const HomeNoticeBar: FC<Props> = (props) => {
                 {notices.map((notice, index) => (
                     <Swiper.Item key={index}>
                         <Box none action={notice.action_type} actionData={notice.action_params}>
-                            <p dangerouslySetInnerHTML={{ __html: notice.content! }}></p>
+                            <div dangerouslySetInnerHTML={{ __html: notice.content! }}></div>
                         </Box>
                     </Swiper.Item>
                 ))}

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

@@ -104,6 +104,7 @@ interface Props {
     tabs: GroupType[];
 }
 const Tabs: FC<Props> = (props) => {
+    console.log(`🚀🚀🚀🚀🚀-> in HomeTabs.tsx on 107`);
     const { tabs } = props;
     const tabData = [...tabs, ...buttonGroup];
     const [active, setActive] = useState<number>(0);

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

@@ -1,13 +1,8 @@
 "use client";
 import Box from "@/components/Box";
-import Footer from "@/components/Footer";
 import Header from "@/components/Header";
-import Sidebar from "@/components/Layout/Sidebar";
-import styles from "@/components/Layout/style.module.scss";
-import { usePathname, useRouter } from "@/i18n";
-import { SpinLoading } from "antd-mobile";
+import { usePathname } from "@/i18n";
 import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from "react";
-import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 type Props = {
     swiperWidget: ReactNode;
     popupWidget: ReactNode;
@@ -27,37 +22,8 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
         prizeWidget,
         ...other
     } = props;
-    const swiperRef = useRef<SwiperClass>();
-    const isOpen = useRef<boolean>(false);
-    const homeContainerRef = useRef<HTMLDivElement>(null);
     const barRef = useRef<HTMLDivElement>(null);
 
-    const startHandler = () => {
-        homeContainerRef.current?.classList.add(styles.containerMask);
-        barRef.current?.classList.add(styles.cross);
-        isOpen.current = true;
-    };
-    const endHandler = () => {
-        homeContainerRef.current?.classList.remove(styles.containerMask);
-        barRef.current?.classList.remove(styles.cross);
-        isOpen.current = false;
-    };
-
-    const openSliderHandler = () => {
-        if (isOpen.current) {
-            swiperRef.current?.slideNext();
-        } else {
-            swiperRef.current?.slidePrev();
-        }
-    };
-
-    const router = useRouter();
-    const sidebarChange = (index: number) => {
-        if (index === 1) {
-            openSliderHandler();
-            router.push("/sports");
-        }
-    };
     // 获取分享id
     const pathname = usePathname();
     useEffect(() => {
@@ -67,71 +33,25 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
     }, []);
     return (
         <>
-            <Swiper
-                resistanceRatio={10}
-                initialSlide={2}
-                slidesPerView={"auto"}
-                onSlidePrevTransitionStart={startHandler}
-                onSlideNextTransitionEnd={endHandler}
-                slideToClickedSlide
-                onSwiper={(swiper) => {
-                    swiperRef.current = swiper;
-                }}
-                allowTouchMove={false}
-            >
-                <SwiperSlide>
-                    <section className="relative flex h-[100vh] items-center justify-center">
-                        <SpinLoading color="default" />
-                    </section>
-                </SwiperSlide>
-
-                <SwiperSlide style={{ width: "70%" }} className={"bg-[rgb(31,31,31)]"}>
-                    <section className="relative h-[100vh]">
-                        <Sidebar onChange={(index) => sidebarChange(index)}></Sidebar>
-                    </section>
-                </SwiperSlide>
-
-                <SwiperSlide style={{ width: "100%" }}>
-                    <section className="relative h-[100%]" ref={homeContainerRef}>
-                        <Header
-                            {...other}
-                            menuRender={() => (
-                                <div
-                                    className={`absolute left-[0.1rem] top-[0.03rem] z-40 text-[#fff]`}
-                                    ref={barRef}
-                                    onClick={openSliderHandler}
-                                >
-                                    <div className={styles.bar}></div>
-                                    <div
-                                        className={styles.bar}
-                                        style={{ width: "0.1389rem" }}
-                                    ></div>
-                                    <div className={styles.bar}></div>
-                                </div>
-                            )}
-                        ></Header>
-                        <main id="maincontainer" className={"main-footer-header"}>
-                            {/*弹窗*/}
-                            {popupWidget}
-                            <Box>
-                                {/* swiper */}
-                                {swiperWidget}
-                                {/* swiper下的活动 */}
-                                {cardWidget}
-                                {/* 跑马灯 */}
-                                {noticeWidget}
-                                {/* 搜索组件 */}
-                                {searchWidget}
-                                {/* 搜索下面的大奖展示 */}
-                                {prizeWidget}
-                            </Box>
-                            {/* tabs 和 游戏列表 */}
-                            {children}
-                        </main>
-                        <Footer></Footer>
-                    </section>
-                </SwiperSlide>
-            </Swiper>
+            <Header {...other}></Header>
+            <main id="maincontainer" className={"main-footer-header"}>
+                {/*弹窗*/}
+                {popupWidget}
+                <Box>
+                    {/* swiper */}
+                    {swiperWidget}
+                    {/* swiper下的活动 */}
+                    {cardWidget}
+                    {/* 跑马灯 */}
+                    {noticeWidget}
+                    {/* 搜索组件 */}
+                    {searchWidget}
+                    {/* 搜索下面的大奖展示 */}
+                    {prizeWidget}
+                </Box>
+                {/* tabs 和 游戏列表 */}
+                {children}
+            </main>
         </>
     );
 };

src/app/[locale]/(TabBar)/layout.tsx

@@ -0,0 +1,24 @@
+"use client";
+import Footer from "@/components/Footer";
+import { usePathname } from "@/i18n";
+import { FC, PropsWithChildren, useEffect } from "react";
+type Props = {};
+const Layout: FC<PropsWithChildren<Props>> = (props) => {
+    const { children } = props;
+
+    // 获取分享id
+    const pathname = usePathname();
+    useEffect(() => {
+        const [, shareId] = pathname.split("/");
+        if (!shareId || shareId === "xxxxxx") return;
+        sessionStorage.setItem("shareId", shareId);
+    }, []);
+    return (
+        <>
+            <main className={"main-footer"}>{children}</main>
+            <Footer></Footer>
+        </>
+    );
+};
+
+export default Layout;

src/app/[locale]/(TabBar)/sports/layout.tsx

@@ -0,0 +1,15 @@
+import Header from "@/components/Header";
+import { FC, PropsWithChildren } from "react";
+type Props = {};
+const Layout: FC<PropsWithChildren<Props>> = (props) => {
+    const { children } = props;
+
+    return (
+        <>
+            <Header visibleLanguage={false} />
+            <main className={"main-footer-header"}>{children}</main>
+        </>
+    );
+};
+
+export default Layout;

src/app/[locale]/layout.tsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { Viewport } from "next";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
@@ -6,6 +5,7 @@ import { Inter as FontSans } from "next/font/google";
 import { ReactNode } from "react";
 import "../globals.scss";
 
+import clsx from "clsx";
 import { Providers } from "./providers";
 
 // 加载字体
@@ -44,13 +44,9 @@ export default async function LocaleLayout({
     return (
         <html lang={locale} suppressHydrationWarning>
             <body className={clsx("font-sans", fontSans.variable)}>
-                <div id="app" className="bg-black">
-                    <Providers themeProps={{ attribute: "class" }}>
-                        <NextIntlClientProvider messages={messages}>
-                            {children}
-                        </NextIntlClientProvider>
-                    </Providers>
-                </div>
+                <NextIntlClientProvider messages={messages}>
+                    <Providers themeProps={{ attribute: "class" }}>{children}</Providers>
+                </NextIntlClientProvider>
             </body>
         </html>
     );

src/app/[locale]/loading.tsx

@@ -1,14 +1,14 @@
 "use client";
-import { SpinLoading } from "antd-mobile";
+import Loading from "@/components/Loading";
 import { FC } from "react";
 interface Props {}
 
-const Loading: FC<Props> = (props) => {
+const LoadingPage: FC<Props> = (props) => {
     return (
         <div className={"flex h-[100dvh] items-center justify-center"}>
-            <SpinLoading color="default" />
+            <Loading />
         </div>
     );
 };
 
-export default Loading;
+export default LoadingPage;

src/app/[locale]/providers.tsx

@@ -1,18 +1,42 @@
 "use client";
-import { useRouter } from "@/i18n";
+import Sidebar from "@/components/Layout/Sidebar";
+import Loading from "@/components/Loading";
+import { useSystemStore } from "@/stores/useSystemStore";
 import { setHtmlFontSize } from "@/utils";
-import { NextUIProvider } from "@nextui-org/system";
 import { ConfigProvider } from "antd-mobile";
 import enUS from "antd-mobile/es/locales/en-US";
 import { ThemeProviderProps } from "next-themes/dist/types";
-import { ReactNode, useLayoutEffect } from "react";
+import { ReactNode, useLayoutEffect, useRef } from "react";
+import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 export interface ProvidersProps {
     children: ReactNode;
     themeProps?: Omit<ThemeProviderProps, "children">;
 }
-
 export const Providers = ({ children, themeProps }: ProvidersProps) => {
-    const router = useRouter();
+    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 openSliderHandler = () => {
+        if (isCollapse) {
+            swiperRef.current?.slideNext();
+        } else {
+            swiperRef.current?.slidePrev();
+        }
+    };
+
     useLayoutEffect(() => {
         // 调用响应式方法
         setHtmlFontSize();
@@ -20,7 +44,38 @@ export const Providers = ({ children, themeProps }: ProvidersProps) => {
 
     return (
         <ConfigProvider locale={enUS}>
-            <NextUIProvider navigate={router.push}>{children}</NextUIProvider>
+            <div id="app" className="bg-black">
+                <Swiper
+                    resistanceRatio={10}
+                    initialSlide={2}
+                    slidesPerView={"auto"}
+                    onSlidePrevTransitionStart={startHandler}
+                    onSlideNextTransitionEnd={endHandler}
+                    slideToClickedSlide
+                    onSwiper={(swiper) => {
+                        swiperRef.current = swiper;
+                    }}
+                    allowTouchMove={false}
+                >
+                    <SwiperSlide>
+                        <section className="relative flex h-[100vh] items-center justify-center">
+                            <Loading />
+                        </section>
+                    </SwiperSlide>
+
+                    <SwiperSlide style={{ width: "70%" }} className={"bg-[rgb(31,31,31)]"}>
+                        <section className="relative h-[100vh]">
+                            <Sidebar></Sidebar>
+                        </section>
+                    </SwiperSlide>
+
+                    <SwiperSlide style={{ width: "100%" }}>
+                        <section className="relative h-[100%]" ref={homeContainerRef}>
+                            {children}
+                        </section>
+                    </SwiperSlide>
+                </Swiper>
+            </div>
         </ConfigProvider>
     );
 };

src/app/globals.scss

@@ -1,8 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import "@/styles/iconfont/iconfont.css";
-@import "@/styles/iconfontPro/iconfont.css";
+@import "../styles/iconfont/iconfont.css";
+@import "../styles/iconfontPro/iconfont.css";
 
 /* swiper */
 @import "swiper/css";
@@ -120,6 +120,23 @@ input {
     padding: 0 0.0764rem;
   }
 }
+
+.containerMask{
+  &::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 11;
+    background: rgba(0,0,0,0.5);
+  }
+}
+
+
+
+
 @media (min-width: 320px){html{font-size: 84.2667px;} }
 @media (min-width: 360px){html{font-size: 96px;} }
 @media (min-width: 375px){html{font-size: 100px;} }

src/components/Header/HerderTitle.tsx

@@ -8,7 +8,9 @@ import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
 import { FC, PropsWithChildren, useState } from "react";
 import styles from "./style.module.scss";
-interface Props {}
+interface Props {
+    visibleLanguage: boolean;
+}
 
 const languages = [
     {
@@ -32,6 +34,7 @@ const languages = [
 ];
 
 const HeaderTitle: FC<PropsWithChildren<Props>> = (props) => {
+    const { visibleLanguage } = props;
     const t = useTranslations("Header");
     const router = useRouter();
     const local = useLocale();
@@ -55,11 +58,15 @@ const HeaderTitle: FC<PropsWithChildren<Props>> = (props) => {
         <>
             <span className={styles.headerTitle}>
                 {/*<img src="/logo.png" alt="logo" className={"w-[0.6944rem]"}></img>*/}
+
                 <div className={"font-bold text-[#ff6a01]"}>XQEsoft</div>
-                <div className={styles.selectCountry} onClick={handler}>
-                    <Image src={target.icon} alt={target.value} width={30} height={20} />
-                    <i className={styles.menuDown}></i>
-                </div>
+
+                {visibleLanguage ? (
+                    <div className={styles.selectCountry} onClick={handler}>
+                        <Image src={target.icon} alt={target.value} width={30} height={20} />
+                        <i className={styles.menuDown}></i>
+                    </div>
+                ) : null}
             </span>
 
             <CenterPopup

src/components/Header/index.tsx

@@ -1,7 +1,9 @@
 "use client";
 import HeaderRight from "@/components/Header/HeaderRight";
+import { useSystemStore } from "@/stores/useSystemStore";
 import clsx from "clsx";
 import { FC, memo, ReactNode } from "react";
+import { useSwiper } from "swiper/react";
 import HeaderTitle from "./HerderTitle";
 import styles from "./style.module.scss";
 /**
@@ -10,36 +12,37 @@ import styles from "./style.module.scss";
  * @param {() => ReactNode} headerRender 自定义渲染
  */
 export interface HeaderProps {
-    headerPlaceholder?: boolean;
-    headerRender?: () => ReactNode;
-    menuHandler?: () => void;
-    menuRender?: () => ReactNode;
+    // headerRender?: () => ReactNode;
+    // menuHandler?: () => void;
+    // menuRender?: () => ReactNode;
+    visibleLanguage?: boolean;
 }
-
-const cs = clsx(["iconfont icon-gengduo", styles.menu]);
-
-const DefaultHeader: FC<HeaderProps> = (props) => {
-    const { menuHandler, menuRender } = props;
-    return (
-        <div className={styles.headerMain}>
-            <div className={styles.headerLeft} onClick={menuHandler}>
-                {(menuRender && menuRender()) ?? <div className={cs}></div>}
-            </div>
-            <HeaderTitle />
-            <HeaderRight />
-        </div>
-    );
-};
-
 const Header: FC<HeaderProps> = (props) => {
-    const { headerPlaceholder = true, headerRender, ...other } = props;
-    const cs = clsx({
-        [styles.placeholder]: headerPlaceholder,
-    });
+    const { visibleLanguage = true } = props;
+    // 展开按钮
+    const isCollapse = useSystemStore((state) => state.isCollapse);
+    const swiper = useSwiper();
+    const menuHandler = () => {
+        if (isCollapse) {
+            swiper.slideNext();
+        } else {
+            swiper.slidePrev();
+        }
+    };
+    const clx = clsx(isCollapse ? styles.cross : "");
     return (
-        <header className={cs}>
-            <div className={styles.headerWrap}>
-                {headerRender ? headerRender() : <DefaultHeader {...other} />}
+        <header className={styles.headerWrap}>
+            <div className={styles.headerMain}>
+                <div className={styles.headerLeft} onClick={menuHandler}>
+                    <div className={clx}>
+                        <div className={styles.bar}></div>
+                        <div className={styles.bar} style={{ width: "0.1389rem" }}></div>
+                        <div className={styles.bar}></div>
+                    </div>
+                </div>
+
+                <HeaderTitle visibleLanguage={visibleLanguage} />
+                <HeaderRight />
             </div>
         </header>
     );

src/components/Header/style.module.scss

@@ -1,8 +1,3 @@
-
-.placeholder {
-  height: $-header-height;
-}
-
 .headerWrap{
     height: $-header-height;
     //position: fixed;
@@ -17,13 +12,15 @@
     padding: 3px 0;
     box-sizing: border-box;
     display: flex;
+    align-items: center;
     .headerLeft{
       position: absolute;
       display: block;
       line-height: 21px;
       color: #ccc;
-      top: .13rem;
-      left: .1rem;
+      top: .15rem;
+      left: .12rem;
+      z-index: 100;
       .menu{
         font-size: .16rem;
         color: #606060;
@@ -104,3 +101,26 @@
     }
   }
 }
+
+.bar {
+  position: relative;
+  display: block;
+  width: 0.2083rem;
+  height: 3px;
+  margin-bottom: 5px ;
+  background-color: #606060;
+  border-radius: 10px;
+  transition: 0.3s;
+}
+
+.cross .bar:nth-of-type(1) {
+  transform: translateY(7px) rotate(-45deg);
+}
+
+.cross .bar:nth-of-type(2) {
+  opacity: 0;
+}
+
+.cross .bar:nth-of-type(3) {
+  transform: translateY(-9px) rotate(45deg);
+}

src/components/Layout/Sidebar.tsx

@@ -1,10 +1,11 @@
 import Box from "@/components/Box";
+import { useRouter } from "@/i18n";
+import { useSystemStore } from "@/stores/useSystemStore";
 import { Input } from "antd-mobile";
 import { useTranslations } from "next-intl";
 import { FC, PropsWithChildren, useRef } from "react";
-interface Props {
-    onChange: (index: number) => void;
-}
+import { useSwiper } from "swiper/react";
+interface Props {}
 
 const cardData = [
     { url: "", icon: "https://9f.com/images/homePage/card/c-cashwheel.png", desc: "" },
@@ -18,15 +19,26 @@ const tabs = [
 ];
 const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
     const t = useTranslations("Sidebar");
+
+    const setCollapse = useSystemStore((state) => state.setCollapse);
+    const swiper = useSwiper();
+    const router = useRouter();
     const tab = useRef<HTMLDivElement>(null);
     const bgRef = useRef<HTMLDivElement>(null);
-    const { onChange } = props;
     const tabHandler = (index: number) => {
         bgRef.current?.setAttribute(
             "style",
             `transform: translateX(${tab.current?.clientWidth! * index}px)`
         );
-        onChange(index);
+        if (index === 1) {
+            router.push("/sports");
+        } else {
+            router.push("/");
+        }
+        // 关闭侧边栏按钮
+        setCollapse(false);
+        // 关闭swiper
+        swiper.slideNext();
         return index;
     };
     return (

src/components/Layout/style.module.scss

@@ -5,41 +5,4 @@
   //overflow-y: scroll;
 }
 
-.containerMask{
-  &::before{
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 3;
-    background: rgba(0,0,0,0.5);
 
-
-  }
-}
-
-
-.bar {
-  position: relative;
-  display: block;
-  width: 0.2083rem;
-  height: 3px;
-  margin-bottom: 5px ;
-  background-color: #606060;
-  border-radius: 10px;
-  transition: 0.3s;
-}
-
-.cross .bar:nth-of-type(1) {
-  transform: translateY(7px) rotate(-45deg);
-}
-
-.cross .bar:nth-of-type(2) {
-  opacity: 0;
-}
-
-.cross .bar:nth-of-type(3) {
-  transform: translateY(-9px) rotate(45deg);
-}

src/components/Loading/index.tsx

@@ -0,0 +1,4 @@
+const Loading = () => {
+    return <div>loading...</div>;
+};
+export default Loading;

src/stores/useSystemStore.ts

@@ -0,0 +1,22 @@
+import { create } from "zustand";
+
+interface State {
+    isCollapse: boolean;
+}
+
+interface Action {
+    setCollapse: (value: boolean) => void;
+}
+
+const initialState: State = {
+    isCollapse: false,
+};
+
+export const useSystemStore = create<State & Action>()((set, get) => {
+    return {
+        ...initialState,
+        setCollapse: (value) => set((state) => ({ ...state, isCollapse: value })),
+
+        reset: () => set(initialState),
+    };
+});

tailwind.config.ts

@@ -1,4 +1,3 @@
-import { nextui } from "@nextui-org/react";
 import type { Config } from "tailwindcss";
 
 const MAX_WIDTH = 1440;
@@ -17,7 +16,6 @@ const config: Config = {
         "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
         "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
         "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-        "./node_modules/@nextui-org/theme/dist/**/*.{" + "js,ts,jsx,tsx}",
     ],
     theme: {
         space: size,
@@ -41,35 +39,6 @@ const config: Config = {
             "linear-color": "linear-gradient(180deg, #ffaa30, #ffe6be)",
         },
     },
-    plugins: [
-        nextui({
-            layout: {
-                fontSize: {
-                    tiny: "10px", // text-tiny
-                    small: "12px", // text-small
-                    medium: "14px", // text-medium
-                    large: "16px", // text-large
-                },
-                lineHeight: {
-                    tiny: "14px", // text-tiny
-                    small: "24px", // text-small
-                    medium: "22px", // text-medium
-                    large: "20px",
-                },
-            },
-            themes: {
-                dark: {
-                    colors: {
-                        primary: "#ff6a01",
-                    },
-                },
-                light: {
-                    colors: {
-                        primary: "#ff6a01",
-                    },
-                },
-            },
-        }),
-    ],
+    plugins: [],
 };
 export default config;