feat: 修改dockerfile以及新功能

Dockerfile

@@ -3,7 +3,10 @@ FROM node:20-alpine AS base
 FROM base AS deps
 WORKDIR /app
 COPY package.json ./
-RUN npm cache clean --force && npm install pnpm -g && pnpm i
+RUN npm config set registry http://registry.npmmirror.com && \
+    npm cache clean --force &&  \
+    npm install pnpm -g && \
+    pnpm i
 
 FROM base AS builder
 ARG BUILD_ARGS=""

messages/br.json

@@ -129,6 +129,8 @@
     "deposits": "Depósitos",
     "saques": "Saques",
     "bonus":  "Bônus",
+    "free": "Free",
+    "replay": "Replay",
     "expTips": "{exp} Apostas to "
   },
   "DepositPage": {

messages/en.json

@@ -107,7 +107,6 @@
     "Sacar": "Sacar",
     "Conta": "Conta",
     "Saldo": "Saldo",
-    "Bônus": "Bônus",
     "Sair": "Sair",
     "Deseja": "Deseja sair?",
     "Cancelar": "Cancelar",
@@ -130,6 +129,8 @@
     "deposits": "Depósitos",
     "saques": "Saques",
     "bonus":  "Bônus",
+    "free": "Free",
+    "replay": "Replay",
     "expTips": "{exp} Bet to "
   },
   "DepositPage": {

messages/zh.json

@@ -129,6 +129,8 @@
     "deposits": "存款",
     "saques": "提款",
     "bonus": "奖金",
+    "free": "免费",
+    "replay": "重玩",
     "expTips": "{exp} 升级至 "
   },
   "DepositPage": {

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

@@ -26,14 +26,9 @@ type Props = {
     userMoney: Wallet;
     userVip: UserVipInfo;
 };
-export const ProfileHeader = (props: Props) => {
-    const { userInfo, userMoney, userVip } = props;
+const VipCard = (props: { userVip: UserVipInfo }) => {
+    const { userVip } = props;
     const t = useTranslations("ProfilePage");
-
-    const [visible, setVisible] = useState(false);
-    const callbackFun = () => {
-        setVisible(!visible);
-    };
     // Vip 图标
     const vipIconElement = vipImages.map((item, index) => {
         if (item.leve === userVip.vip_level) {
@@ -47,6 +42,128 @@ export const ProfileHeader = (props: Props) => {
             );
         }
     });
+    return (
+        <div className={"vip-card"}>
+            <div className={"vip-card__icon"}>{vipIconElement}</div>
+            <div className={"vip-card-process"}>
+                {/*<div className={"process-top"}>{userVip.vip_exp}xp</div>*/}
+                <div>
+                    <ProgressBar
+                        percent={percentage(userVip.vip_exp, userVip.vip_score_exp)}
+                        style={{
+                            "--fill-color": "#fb8b05",
+                            "--track-width": "0.0694rem",
+                        }}
+                    />
+                </div>
+                <div className={"process-bottom"}>
+                    <span>VIP{userVip.vip_level}</span>
+                    <span className={"process-bottom-desc"}>
+                        {t("expTips", {
+                            exp: userVip.vip_score_exp - userVip.vip_exp,
+                        })}
+                    </span>
+                    <span>
+                        VIP
+                        {userVip.vip_next_level}
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const WalletCard = (props: { userMoney: Wallet }) => {
+    const { userMoney } = props;
+    const t = useTranslations("ProfilePage");
+    const [visible, setVisible] = useState(false);
+
+    const callbackFun = () => {
+        setVisible(!visible);
+    };
+
+    const walletHandler = (key: string) => {
+        console.log(`🚀🚀🚀🚀🚀-> in ProfileHeader.tsx on 86`, key);
+    };
+    return (
+        <>
+            <MaskCom visible={visible} callbackFun={callbackFun} />
+            <div className="coin">
+                <span className="coin_left__icon iconfont icon-icon-wallet"></span>
+                <div className={"coin_right_wallet"}>
+                    <div className={"wallet_left_border"}>
+                        <span>{t("Saldo")}</span>
+                        <div className="num">
+                            <span className="uppercase">brl </span>
+                            <span>{userMoney.Score || 0.0}</span>
+                        </div>
+                    </div>
+                    <div className={"wallet_right_content"}>
+                        <div className={"wallet_header"}>
+                            {t("bonus")}
+                            <Image
+                                className="wallet_header__icon"
+                                src="/img/a.png"
+                                alt="question"
+                                onClick={() => setVisible(true)}
+                                width={15}
+                                height={15}
+                            />
+                        </div>
+                        <div className="num">
+                            <span className="uppercase">brl </span>
+                            <span>{userMoney.point || 0.0}</span>
+                        </div>
+                    </div>
+                    <div className={"wallet_left_border"} onClick={() => walletHandler("free")}>
+                        <div className={"wallet_header"}>
+                            {t("free")}
+                            <Image
+                                className="wallet_header__icon"
+                                src="/img/a.png"
+                                alt="question"
+                                width={15}
+                                height={15}
+                                onClick={(event) => {
+                                    event.stopPropagation();
+                                    setVisible(true);
+                                }}
+                            />
+                        </div>
+                        <div className="num">
+                            <span className="uppercase">brl </span>
+                            <span>{userMoney.point || 0.0}</span>
+                        </div>
+                    </div>
+                    <div className={"wallet_right_content"} onClick={() => walletHandler("replay")}>
+                        <div className={"wallet_header"}>
+                            {t("replay")}
+                            <Image
+                                className="wallet_header__icon"
+                                src="/img/a.png"
+                                alt="question"
+                                onClick={(event) => {
+                                    event.stopPropagation();
+                                    setVisible(true);
+                                }}
+                                width={15}
+                                height={15}
+                            />
+                        </div>
+                        <div className="num">
+                            <span className="uppercase">brl </span>
+                            <span>{userMoney.point || 0.0}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+export const ProfileHeader = (props: Props) => {
+    const { userInfo, userMoney, userVip } = props;
+    const t = useTranslations("ProfilePage");
+
     return (
         <>
             <div className={"userContent"}>
@@ -65,65 +182,9 @@ export const ProfileHeader = (props: Props) => {
                     ></Link>
                 </div>
                 {/*vipcard*/}
-                <div className={"vip-card"}>
-                    <div className={"vip-card__icon"}>{vipIconElement}</div>
-                    <div className={"vip-card-process"}>
-                        {/*<div className={"process-top"}>{userVip.vip_exp}xp</div>*/}
-                        <div>
-                            <ProgressBar
-                                percent={percentage(userVip.vip_exp, userVip.vip_score_exp)}
-                                style={{
-                                    "--fill-color": "#fb8b05",
-                                    "--track-width": "0.0694rem",
-                                }}
-                            />
-                        </div>
-                        <div className={"process-bottom"}>
-                            <span>VIP{userVip.vip_level}</span>
-                            <span className={"process-bottom-desc"}>
-                                {t("expTips", {
-                                    exp: userVip.vip_score_exp - userVip.vip_exp,
-                                })}
-                            </span>
-                            <span>
-                                VIP
-                                {userVip.vip_next_level}
-                            </span>
-                        </div>
-                    </div>
-                </div>
+                <VipCard userVip={userVip} />
 
-                <div className="coin">
-                    <div>
-                        <span className="iconfont icon-icon-wallet"></span>
-                        <div>
-                            <span>{t("Saldo")}</span>
-                            <div className="num">
-                                <span className="uppercase">brl </span>
-                                <span>{userMoney.Score || 0.0}</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div>
-                        <span className="iconfont icon-gift2"></span>
-                        <div>
-                            <span onClick={() => setVisible(true)}>
-                                {t("Bônus")}{" "}
-                                <Image
-                                    className="a"
-                                    src="/img/a.png"
-                                    alt="question"
-                                    width={50}
-                                    height={50}
-                                />
-                            </span>
-                            <div className="num">
-                                <span className="uppercase">brl </span>
-                                <span>{userMoney.point || 0.0}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                <WalletCard userMoney={userMoney} />
             </div>
 
             <div className="link">
@@ -134,8 +195,6 @@ export const ProfileHeader = (props: Props) => {
                     {t("Sacar")}
                 </Link>
             </div>
-
-            <MaskCom visible={visible} callbackFun={callbackFun} />
         </>
     );
 };

src/app/[locale]/(TabBar)/(ordinary)/profile/page.scss

@@ -1,11 +1,11 @@
 .profile-box {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    padding-bottom: .4rem;
-    background-color: #1f1f1f;
-    display: flex;
-    flex-direction: column;
+    //width: 100%;
+    //height: 100%;
+    //overflow-y: auto;
+    //padding-bottom: .4rem;
+    //background-color: #1f1f1f;
+    //display: flex;
+    //flex-direction: column;
 
     .userContent {
       background: -webkit-gradient(linear, left top, left bottom, from(#ffaa30), to(#ffe6be));
@@ -147,64 +147,91 @@
 
     .coin {
       display: flex;
-      justify-content: space-between;
-      padding: .07rem 0 .3rem;
+      //justify-content: space-between;
+      padding-bottom: 0.3rem;
       margin: 0 .18rem;
-
-      & > div {
-        display: flex;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        width: 50%;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-
-        &:first-child {
-          border-right: .01rem dotted #d9a801;
+      &_left__icon {
+        margin: 0 .08rem;
+        font-size: .18rem;
+        color: #000;
+      }
+      .coin_right_wallet{
+        display: grid;
+        flex: 1;
+        font-size: .12rem;
+        color: #333;
+        grid-template-columns: 1fr 1fr;
+        gap: 0 0.1042rem;
+        & :nth-child(3),
+        & :nth-child(4){
+          padding-top: 0.05rem;
         }
+        .wallet_header{
+          display: flex;
+          align-items: center;
 
-        .iconfont {
-          margin: 0 .08rem;
-          font-size: .18rem;
-          color: #000;
-
-          &.icon-gift2 {
-            width: .32rem;
+          &__icon{
+              width: 0.14rem;
+              height: 0.14rem;
+              margin-left: .03rem;
           }
         }
-
-        & > div {
-          flex: 1;
+        .num {
+          width: 100%;
+          height: auto;
           display: flex;
-          flex-direction: column;
-        }
-
-        div {
           span {
-            font-size: .12rem;
-            color: #333;
-            display: flex;
-            align-items: center;
-
-            .a {
-              width: .14rem;
-              margin-left: .03rem;
-            }
-          }
-          .num {
-            width: 100%;
-            height: auto;
-            display: flex;
-            span {
-              font-size: .14rem;
-              &:first-child {
-                margin-right: .04rem;
-              }
+            font-size: .14rem;
+            &:first-child {
+              margin-right: .04rem;
             }
           }
         }
+
+        .wallet_left_border{
+          border-right:  .01rem dotted #d9a801;
+        }
+        .wallet_right_content{
+          margin-left: .3rem;
+        }
       }
+
+      //& > div {
+      //  display: flex;
+      //  -webkit-box-align: center;
+      //  -ms-flex-align: center;
+      //  align-items: center;
+      //  width: 50%;
+      //  -webkit-box-sizing: border-box;
+      //  box-sizing: border-box;
+      //
+      //  &:first-child {
+      //    border-right: .01rem dotted #d9a801;
+      //  }
+      //
+
+      //
+      //  & > div {
+      //    flex: 1;
+      //    display: flex;
+      //    flex-direction: column;
+      //  }
+      //
+      //  div {
+      //    span {
+      //      font-size: .12rem;
+      //      color: #333;
+      //      display: flex;
+      //      align-items: center;
+      //
+      //      .a {
+      //        width: .14rem;
+      //        margin-left: .03rem;
+      //      }
+      //    }
+
+      //  }
+      //}
     }
     .link {
       width: 100%;

src/app/[locale]/(TabBar)/(entire)/layout.tsx → src/app/[locale]/(navbar)/wallet/layout.tsx

@@ -1,4 +1,4 @@
-import Footer from "@/components/Footer";
+import HeaderBack from "@/components/HeaderBack";
 import { getTranslations } from "next-intl/server";
 import { ReactNode } from "react";
 
@@ -12,8 +12,8 @@ export default async function Layout({
     const t = await getTranslations("ProfilePage");
     return (
         <>
-            <main className={"main-footer bg-[#282828]"}>{children}</main>
-            <Footer />
+            <HeaderBack showBack={true} title={t("free")} />
+            <main className={"main-header bg-[#282828]"}>{children}</main>
         </>
     );
 }

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

@@ -0,0 +1,5 @@
+const Page = () => {
+    return <div>page</div>;
+};
+
+export default Page;